diff options
Diffstat (limited to 'app/assets/javascripts/design_management/pages/index.vue')
-rw-r--r-- | app/assets/javascripts/design_management/pages/index.vue | 53 |
1 files changed, 48 insertions, 5 deletions
diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue index 6c4c8c75054..6e71dca41e9 100644 --- a/app/assets/javascripts/design_management/pages/index.vue +++ b/app/assets/javascripts/design_management/pages/index.vue @@ -3,6 +3,7 @@ import { GlLoadingIcon, GlButton, GlAlert } from '@gitlab/ui'; import VueDraggable from 'vuedraggable'; import { deprecatedCreateFlash as createFlash } from '~/flash'; import { s__, sprintf } from '~/locale'; +import { getFilename } from '~/lib/utils/file_upload'; import UploadButton from '../components/upload/button.vue'; import DeleteButton from '../components/delete_button.vue'; import Design from '../components/list/item.vue'; @@ -31,7 +32,7 @@ import { isValidDesignFile, moveDesignOptimisticResponse, } from '../utils/design_management_utils'; -import { getFilename } from '~/lib/utils/file_upload'; +import { trackDesignCreate, trackDesignUpdate } from '../utils/tracking'; import { DESIGNS_ROUTE_NAME } from '../router/constants'; const MAXIMUM_FILE_UPLOAD_LIMIT = 10; @@ -71,11 +72,14 @@ export default { selectedDesigns: [], isDraggingDesign: false, reorderedDesigns: null, + isReorderingInProgress: false, }; }, computed: { isLoading() { - return this.$apollo.queries.designs.loading || this.$apollo.queries.permissions.loading; + return ( + this.$apollo.queries.designCollection.loading || this.$apollo.queries.permissions.loading + ); }, isSaving() { return this.filesToBeSaved.length > 0; @@ -109,6 +113,9 @@ export default { isDesignListEmpty() { return !this.isSaving && !this.hasDesigns; }, + isDesignCollectionCopying() { + return this.designCollection && this.designCollection.copyState === 'IN_PROGRESS'; + }, designDropzoneWrapperClass() { return this.isDesignListEmpty ? 'col-12' @@ -180,6 +187,7 @@ export default { updateStoreAfterUploadDesign(store, designManagementUpload, this.projectQueryBody); }, onUploadDesignDone(res) { + // display any warnings, if necessary const skippedFiles = res?.data?.designManagementUpload?.skippedDesigns || []; const skippedWarningMessage = designUploadSkippedWarning(this.filesToBeSaved, skippedFiles); if (skippedWarningMessage) { @@ -190,7 +198,19 @@ export default { if (!this.isLatestVersion) { this.$router.push({ name: DESIGNS_ROUTE_NAME }); } + + // reset state this.resetFilesToBeSaved(); + this.trackUploadDesign(res); + }, + trackUploadDesign(res) { + (res?.data?.designManagementUpload?.designs || []).forEach(design => { + if (design.event === 'CREATION') { + trackDesignCreate(); + } else if (design.event === 'MODIFICATION') { + trackDesignUpdate(); + } + }); }, onUploadDesignError() { this.resetFilesToBeSaved(); @@ -277,6 +297,7 @@ export default { return variables; }, reorderDesigns({ moved: { newIndex, element } }) { + this.isReorderingInProgress = true; this.$apollo .mutate({ mutation: moveDesignMutation, @@ -287,6 +308,9 @@ export default { }) .catch(() => { createFlash(MOVE_DESIGN_ERROR); + }) + .finally(() => { + this.isReorderingInProgress = false; }); }, onDesignMove(designs) { @@ -311,7 +335,7 @@ export default { @mouseenter="toggleOnPasteListener" @mouseleave="toggleOffPasteListener" > - <header v-if="showToolbar" class="row-content-block border-top-0 p-2 d-flex"> + <header v-if="showToolbar" class="row-content-block gl-border-t-0 gl-p-3 gl-display-flex"> <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full"> <div> <span class="gl-font-weight-bold gl-mr-3">{{ s__('DesignManagement|Designs') }}</span> @@ -339,6 +363,7 @@ export default { button-category="secondary" button-class="gl-mr-3" button-size="small" + data-qa-selector="archive_button" :loading="loading" :has-selected-designs="hasSelectedDesigns" @deleteSelectedDesigns="mutate()" @@ -350,15 +375,30 @@ export default { </div> </div> </header> - <div class="mt-4"> + <div class="gl-mt-6"> <gl-loading-icon v-if="isLoading" size="md" /> <gl-alert v-else-if="error" variant="danger" :dismissible="false"> {{ __('An error occurred while loading designs. Please try again.') }} </gl-alert> + <header + v-else-if="isDesignCollectionCopying" + class="card" + data-testid="design-collection-is-copying" + > + <div class="card-header design-card-header gl-border-b-0"> + <div class="card-title gl-display-flex gl-align-items-center gl-my-0 gl-h-7"> + {{ + s__( + 'DesignManagement|Your designs are being copied and are on their way… Please refresh to update.', + ) + }} + </div> + </div> + </header> <vue-draggable v-else :value="designs" - :disabled="!isLatestVersion" + :disabled="!isLatestVersion || isReorderingInProgress" v-bind="$options.dragOptions" tag="ol" draggable=".js-design-tile" @@ -390,6 +430,8 @@ export default { :checked="isDesignSelected(design.filename)" type="checkbox" class="design-checkbox" + data-qa-selector="design_checkbox" + :data-qa-design="design.filename" @change="changeSelectedDesigns(design.filename)" /> </li> @@ -399,6 +441,7 @@ export default { :is-dragging-design="isDraggingDesign" :class="{ 'design-list-item design-list-item-new': !isDesignListEmpty }" :has-designs="hasDesigns" + data-qa-selector="design_dropzone_content" @change="onUploadDesign" /> </li> |