diff options
Diffstat (limited to 'app/assets/javascripts/design_management/pages/index.vue')
-rw-r--r-- | app/assets/javascripts/design_management/pages/index.vue | 33 |
1 files changed, 31 insertions, 2 deletions
diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue index 6c4c8c75054..fb6a91abcdc 100644 --- a/app/assets/javascripts/design_management/pages/index.vue +++ b/app/assets/javascripts/design_management/pages/index.vue @@ -71,11 +71,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 +112,9 @@ export default { isDesignListEmpty() { return !this.isSaving && !this.hasDesigns; }, + isDesignCollectionCopying() { + return this.designCollection && this.designCollection.copyState === 'IN_PROGRESS'; + }, designDropzoneWrapperClass() { return this.isDesignListEmpty ? 'col-12' @@ -277,6 +283,7 @@ export default { return variables; }, reorderDesigns({ moved: { newIndex, element } }) { + this.isReorderingInProgress = true; this.$apollo .mutate({ mutation: moveDesignMutation, @@ -287,6 +294,9 @@ export default { }) .catch(() => { createFlash(MOVE_DESIGN_ERROR); + }) + .finally(() => { + this.isReorderingInProgress = false; }); }, onDesignMove(designs) { @@ -339,6 +349,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()" @@ -355,10 +366,25 @@ export default { <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 border-bottom-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 +416,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 +427,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> |