Add latest changes from gitlab-org/gitlab@15-2-stable-eev15.2.0-rc42

4 files changed, 65 insertions, 76 deletions

diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue
index 8a6dd17a25b..24cc93f5eaf 100644
--- a/app/assets/javascripts/design_management/components/design_sidebar.vue
+++ b/app/assets/javascripts/design_management/components/design_sidebar.vue
@@ -1,6 +1,6 @@
 <script>
-import { GlCollapse, GlButton, GlPopover, GlSkeletonLoader } from '@gitlab/ui';
-import { getCookie, setCookie, parseBoolean, isLoggedIn } from '~/lib/utils/common_utils';
+import { GlAccordion, GlAccordionItem, GlSkeletonLoader } from '@gitlab/ui';
+import { isLoggedIn } from '~/lib/utils/common_utils';
 
 import { s__ } from '~/locale';
 import Participants from '~/sidebar/components/participants/participants.vue';
@@ -17,9 +17,8 @@ export default {
     DesignDiscussion,
     DesignNoteSignedOut,
     Participants,
-    GlCollapse,
-    GlButton,
-    GlPopover,
+    GlAccordion,
+    GlAccordionItem,
     GlSkeletonLoader,
     DesignTodoButton,
   },
@@ -58,7 +57,7 @@ export default {
   },
   data() {
     return {
-      isResolvedCommentsPopoverHidden: parseBoolean(getCookie(this.$options.cookieKey)),
+      isResolvedDiscussionsExpanded: this.resolvedDiscussionsExpanded,
       discussionWithOpenForm: '',
       isLoggedIn: isLoggedIn(),
     };
@@ -79,18 +78,22 @@ export default {
     resolvedDiscussions() {
       return this.discussions.filter((discussion) => discussion.resolved);
     },
+    hasResolvedDiscussions() {
+      return this.resolvedDiscussions.length > 0;
+    },
+    resolvedDiscussionsTitle() {
+      return `${this.$options.i18n.resolveCommentsToggleText} (${this.resolvedDiscussions.length})`;
+    },
     unresolvedDiscussions() {
       return this.discussions.filter((discussion) => !discussion.resolved);
     },
-    resolvedCommentsToggleIcon() {
-      return this.resolvedDiscussionsExpanded ? 'chevron-down' : 'chevron-right';
-    },
   },
   watch: {
-    isResolvedCommentsPopoverHidden(newVal) {
-      if (!newVal) {
-        this.$refs.resolvedComments.scrollIntoView();
-      }
+    resolvedDiscussionsExpanded(resolvedDiscussionsExpanded) {
+      this.isResolvedDiscussionsExpanded = resolvedDiscussionsExpanded;
+    },
+    isResolvedDiscussionsExpanded() {
+      this.$emit('toggleResolvedComments');
     },
   },
   mounted() {
@@ -100,8 +103,6 @@ export default {
   },
   methods: {
     handleSidebarClick() {
-      this.isResolvedCommentsPopoverHidden = true;
-      setCookie(this.$options.cookieKey, 'true', { expires: 365 * 10 });
       this.updateActiveDiscussion();
     },
     updateActiveDiscussion(id) {
@@ -121,8 +122,9 @@ export default {
       this.discussionWithOpenForm = id;
     },
   },
-  resolveCommentsToggleText: s__('DesignManagement|Resolved Comments'),
-  cookieKey: 'hide_design_resolved_comments_popover',
+  i18n: {
+    resolveCommentsToggleText: s__('DesignManagement|Resolved Comments'),
+  },
 };
 </script>
 
@@ -181,40 +183,12 @@ export default {
         @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)"
         @open-form="updateDiscussionWithOpenForm"
       />
-      <template v-if="resolvedDiscussions.length > 0">
-        <gl-button
-          id="resolved-comments"
-          ref="resolvedComments"
-          data-testid="resolved-comments"
-          :icon="resolvedCommentsToggleIcon"
-          variant="link"
-          class="link-inherit-color gl-text-body gl-text-decoration-none gl-font-weight-bold gl-mb-4"
-          @click="$emit('toggleResolvedComments')"
-          >{{ $options.resolveCommentsToggleText }} ({{ resolvedDiscussions.length }})
-        </gl-button>
-        <gl-popover
-          v-if="!isResolvedCommentsPopoverHidden"
-          :show="!isResolvedCommentsPopoverHidden"
-          target="resolved-comments"
-          container="popovercontainer"
-          placement="top"
-          :title="s__('DesignManagement|Resolved Comments')"
+      <gl-accordion v-if="hasResolvedDiscussions" :header-level="3" class="gl-mb-5">
+        <gl-accordion-item
+          v-model="isResolvedDiscussionsExpanded"
+          :title="resolvedDiscussionsTitle"
+          header-class="gl-mb-5!"
         >
-          <p>
-            {{
-              s__(
-                'DesignManagement|Comments you resolve can be viewed and unresolved by going to the "Resolved Comments" section below',
-              )
-            }}
-          </p>
-          <a
-            href="https://docs.gitlab.com/ee/user/project/issues/design_management.html#resolve-design-threads"
-            rel="noopener noreferrer"
-            target="_blank"
-            >{{ s__('DesignManagement|Learn more about resolving comments') }}</a
-          >
-        </gl-popover>
-        <gl-collapse :visible="resolvedDiscussionsExpanded" class="gl-mt-3">
           <design-discussion
             v-for="discussion in resolvedDiscussions"
             :key="discussion.id"
@@ -232,8 +206,8 @@ export default {
             @open-form="updateDiscussionWithOpenForm"
             @click.native.stop="updateActiveDiscussion(discussion.notes[0].id)"
           />
-        </gl-collapse>
-      </template>
+        </gl-accordion-item>
+      </gl-accordion>
       <slot name="reply-form"></slot>
     </template>
   </div>
diff --git a/app/assets/javascripts/design_management/constants.js b/app/assets/javascripts/design_management/constants.js
index 92928ca429f..afe621ac3c5 100644
--- a/app/assets/javascripts/design_management/constants.js
+++ b/app/assets/javascripts/design_management/constants.js
@@ -12,3 +12,5 @@ export const ACTIVE_DISCUSSION_SOURCE_TYPES = {
 };
 
 export const DESIGN_DETAIL_LAYOUT_CLASSLIST = ['design-detail-layout', 'overflow-hidden', 'm-0'];
+
+export const MAXIMUM_FILE_UPLOAD_LIMIT = 10;
diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue
index f81d4f6662f..51983b19677 100644
--- a/app/assets/javascripts/design_management/pages/index.vue
+++ b/app/assets/javascripts/design_management/pages/index.vue
@@ -4,16 +4,15 @@ import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import VueDraggable from 'vuedraggable';
 import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
 import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql';
-import createFlash, { FLASH_TYPES } from '~/flash';
 import { getFilename, validateImageName } from '~/lib/utils/file_upload';
-import { __, s__, sprintf } from '~/locale';
+import { __, s__ } from '~/locale';
 import DesignDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
 import DeleteButton from '../components/delete_button.vue';
 import DesignDestroyer from '../components/design_destroyer.vue';
 import Design from '../components/list/item.vue';
 import UploadButton from '../components/upload/button.vue';
 import DesignVersionDropdown from '../components/upload/design_version_dropdown.vue';
-import { VALID_DESIGN_FILE_MIMETYPE } from '../constants';
+import { MAXIMUM_FILE_UPLOAD_LIMIT, VALID_DESIGN_FILE_MIMETYPE } from '../constants';
 import moveDesignMutation from '../graphql/mutations/move_design.mutation.graphql';
 import uploadDesignMutation from '../graphql/mutations/upload_design.mutation.graphql';
 import allDesignsMixin from '../mixins/all_designs';
@@ -35,11 +34,10 @@ import {
   UPLOAD_DESIGN_INVALID_FILETYPE_ERROR,
   designUploadSkippedWarning,
   designDeletionError,
+  MAXIMUM_FILE_UPLOAD_LIMIT_REACHED,
 } from '../utils/error_messages';
 import { trackDesignCreate, trackDesignUpdate } from '../utils/tracking';
 
-const MAXIMUM_FILE_UPLOAD_LIMIT = 10;
-
 export default {
   components: {
     GlLoadingIcon,
@@ -87,6 +85,7 @@ export default {
       isDraggingDesign: false,
       reorderedDesigns: null,
       isReorderingInProgress: false,
+      uploadError: null,
     };
   },
   computed: {
@@ -159,16 +158,7 @@ export default {
       if (!this.canCreateDesign) return false;
 
       if (files.length > MAXIMUM_FILE_UPLOAD_LIMIT) {
-        createFlash({
-          message: sprintf(
-            s__(
-              'DesignManagement|The maximum number of designs allowed to be uploaded is %{upload_limit}. Please try again.',
-            ),
-            {
-              upload_limit: MAXIMUM_FILE_UPLOAD_LIMIT,
-            },
-          ),
-        });
+        this.uploadError = MAXIMUM_FILE_UPLOAD_LIMIT_REACHED;
 
         return false;
       }
@@ -206,7 +196,7 @@ export default {
       const skippedFiles = res?.data?.designManagementUpload?.skippedDesigns || [];
       const skippedWarningMessage = designUploadSkippedWarning(this.filesToBeSaved, skippedFiles);
       if (skippedWarningMessage) {
-        createFlash({ message: skippedWarningMessage, types: FLASH_TYPES.WARNING });
+        this.uploadError = skippedWarningMessage;
       }
 
       // if this upload resulted in a new version being created, redirect user to the latest version
@@ -229,7 +219,7 @@ export default {
     },
     onUploadDesignError() {
       this.resetFilesToBeSaved();
-      createFlash({ message: UPLOAD_DESIGN_ERROR });
+      this.uploadError = UPLOAD_DESIGN_ERROR;
     },
     changeSelectedDesigns(filename) {
       if (this.isDesignSelected(filename)) {
@@ -260,21 +250,21 @@ export default {
     },
     onDesignDeleteError() {
       const errorMessage = designDeletionError(this.selectedDesigns.length);
-      createFlash({ message: errorMessage });
+      this.uploadError = errorMessage;
     },
     onDesignDropzoneError() {
-      createFlash({ message: UPLOAD_DESIGN_INVALID_FILETYPE_ERROR });
+      this.uploadError = UPLOAD_DESIGN_INVALID_FILETYPE_ERROR;
     },
     onExistingDesignDropzoneChange(files, existingDesignFilename) {
       const filesArr = Array.from(files);
 
       if (filesArr.length > 1) {
-        createFlash({ message: EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE });
+        this.uploadError = EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE;
         return;
       }
 
       if (!filesArr.some(({ name }) => existingDesignFilename === name)) {
-        createFlash({ message: EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE });
+        this.uploadError = EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE;
         return;
       }
 
@@ -329,7 +319,7 @@ export default {
           optimisticResponse: moveDesignOptimisticResponse(this.reorderedDesigns),
         })
         .catch(() => {
-          createFlash({ message: MOVE_DESIGN_ERROR });
+          this.uploadError = MOVE_DESIGN_ERROR;
         })
         .finally(() => {
           this.isReorderingInProgress = false;
@@ -338,6 +328,9 @@ export default {
     onDesignMove(designs) {
       this.reorderedDesigns = designs;
     },
+    unsetUpdateError() {
+      this.uploadError = null;
+    },
   },
   dragOptions: {
     animation: 200,
@@ -356,6 +349,15 @@ export default {
     @mouseenter="toggleOnPasteListener"
     @mouseleave="toggleOffPasteListener"
   >
+    <gl-alert
+      v-if="uploadError"
+      variant="danger"
+      class="gl-mb-3"
+      data-testid="design-update-alert"
+      @dismiss="unsetUpdateError"
+    >
+      {{ uploadError }}
+    </gl-alert>
     <header
       v-if="showToolbar"
       class="gl-display-flex gl-my-0 gl-text-gray-900"
@@ -371,6 +373,7 @@ export default {
         <div
           v-show="hasDesigns"
           class="qa-selector-toolbar gl-display-flex gl-align-items-center gl-my-2"
+          data-testid="design-selector-toolbar"
         >
           <gl-button
             v-if="isLatestVersion"
diff --git a/app/assets/javascripts/design_management/utils/error_messages.js b/app/assets/javascripts/design_management/utils/error_messages.js
index 981b50329b2..42f752efc9e 100644
--- a/app/assets/javascripts/design_management/utils/error_messages.js
+++ b/app/assets/javascripts/design_management/utils/error_messages.js
@@ -1,4 +1,5 @@
 import { __, s__, n__, sprintf } from '~/locale';
+import { MAXIMUM_FILE_UPLOAD_LIMIT } from '../constants';
 
 export const ADD_DISCUSSION_COMMENT_ERROR = s__(
   'DesignManagement|Could not add a new comment. Please try again.',
@@ -27,11 +28,11 @@ export const DESIGN_NOT_FOUND_ERROR = __('Could not find design.');
 export const DESIGN_VERSION_NOT_EXIST_ERROR = __('Requested design version does not exist.');
 
 export const EXISTING_DESIGN_DROP_MANY_FILES_MESSAGE = __(
-  'You can only upload one design when dropping onto an existing design.',
+  'Your update failed. You can only upload one design when dropping onto an existing design.',
 );
 
 export const EXISTING_DESIGN_DROP_INVALID_FILENAME_MESSAGE = __(
-  'You must upload a file with the same file name when dropping onto an existing design.',
+  'Your update failed. You must upload a file with the same file name when dropping onto an existing design.',
 );
 
 export const MOVE_DESIGN_ERROR = __(
@@ -122,3 +123,12 @@ export const designUploadSkippedWarning = (uploadedDesigns, skippedFiles) => {
 
   return someDesignsSkippedMessage(skippedFiles);
 };
+
+export const MAXIMUM_FILE_UPLOAD_LIMIT_REACHED = sprintf(
+  s__(
+    'DesignManagement|The maximum number of designs allowed to be uploaded is %{upload_limit}. Please try again.',
+  ),
+  {
+    upload_limit: MAXIMUM_FILE_UPLOAD_LIMIT,
+  },
+);