Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

10 files changed, 56 insertions, 23 deletions

diff --git a/app/assets/javascripts/design_management/components/delete_button.vue b/app/assets/javascripts/design_management/components/delete_button.vue
index fbcce22ec1e..ae2ce7c3e5e 100644
--- a/app/assets/javascripts/design_management/components/delete_button.vue
+++ b/app/assets/javascripts/design_management/components/delete_button.vue
@@ -63,7 +63,7 @@ export default {
     title: s__('DesignManagement|Are you sure you want to archive the selected designs?'),
     actionPrimary: {
       text: s__('DesignManagement|Archive designs'),
-      attributes: { variant: 'warning', 'data-qa-selector': 'confirm_archiving_button' },
+      attributes: { variant: 'confirm', 'data-qa-selector': 'confirm_archiving_button' },
     },
     actionCancel: {
       text: __('Cancel'),
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_note.vue b/app/assets/javascripts/design_management/components/design_notes/design_note.vue
index 2b867217327..833d7081a2c 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_note.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_note.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlTooltipDirective, GlIcon, GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
 import { ApolloMutation } from 'vue-apollo';
+import { __ } from '~/locale';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
@@ -10,6 +11,9 @@ import { findNoteId, extractDesignNoteId } from '../../utils/design_management_u
 import DesignReplyForm from './design_reply_form.vue';
 
 export default {
+  i18n: {
+    editCommentLabel: __('Edit comment'),
+  },
   components: {
     UserAvatarLink,
     TimelineEntryItem,
@@ -113,7 +117,8 @@ export default {
           v-if="isEditButtonVisible"
           v-gl-tooltip
           type="button"
-          :title="__('Edit comment')"
+          :title="$options.i18n.editCommentLabel"
+          :aria-label="$options.i18n.editCommentLabel"
           class="note-action-button js-note-edit btn btn-transparent qa-note-edit-button"
           @click="isEditing = true"
         >
diff --git a/app/assets/javascripts/design_management/components/design_scaler.vue b/app/assets/javascripts/design_management/components/design_scaler.vue
index 85c6bd4d79e..c9273f97bed 100644
--- a/app/assets/javascripts/design_management/components/design_scaler.vue
+++ b/app/assets/javascripts/design_management/components/design_scaler.vue
@@ -51,8 +51,18 @@ export default {
 
 <template>
   <gl-button-group class="gl-z-index-1">
-    <gl-button icon="dash" :disabled="disableDecrease" @click="decrementScale" />
-    <gl-button icon="redo" :disabled="disableReset" @click="resetScale" />
-    <gl-button icon="plus" :disabled="disableIncrease" @click="incrementScale" />
+    <gl-button
+      icon="dash"
+      :disabled="disableDecrease"
+      :aria-label="__('Decrease')"
+      @click="decrementScale"
+    />
+    <gl-button icon="redo" :disabled="disableReset" :aria-label="__('Reset')" @click="resetScale" />
+    <gl-button
+      icon="plus"
+      :disabled="disableIncrease"
+      :aria-label="__('Increase')"
+      @click="incrementScale"
+    />
   </gl-button-group>
 </template>
diff --git a/app/assets/javascripts/design_management/components/list/item.vue b/app/assets/javascripts/design_management/components/list/item.vue
index 2169c9111d2..b6163491abc 100644
--- a/app/assets/javascripts/design_management/components/list/item.vue
+++ b/app/assets/javascripts/design_management/components/list/item.vue
@@ -137,8 +137,7 @@ export default {
         <span :title="icon.tooltip" :aria-label="icon.tooltip">
           <gl-icon
             :name="icon.name"
-            :size="18"
-            use-deprecated-sizes
+            :size="16"
             :class="icon.classes"
             data-qa-selector="design_status_icon"
             :data-qa-status="icon.name"
diff --git a/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue b/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue
index 6091a3183ac..3ebcde817f9 100644
--- a/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue
+++ b/app/assets/javascripts/design_management/components/toolbar/design_navigation.vue
@@ -2,11 +2,20 @@
 /* global Mousetrap */
 import 'mousetrap';
 import { GlButton, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
+import {
+  keysFor,
+  ISSUE_PREVIOUS_DESIGN,
+  ISSUE_NEXT_DESIGN,
+} from '~/behaviors/shortcuts/keybindings';
 import { s__, sprintf } from '~/locale';
 import allDesignsMixin from '../../mixins/all_designs';
 import { DESIGN_ROUTE_NAME } from '../../router/constants';
 
 export default {
+  i18n: {
+    nextButton: s__('DesignManagement|Go to next design'),
+    previousButton: s__('DesignManagement|Go to previous design'),
+  },
   components: {
     GlButton,
     GlButtonGroup,
@@ -46,11 +55,14 @@ export default {
     },
   },
   mounted() {
-    Mousetrap.bind('left', () => this.navigateToDesign(this.previousDesign));
-    Mousetrap.bind('right', () => this.navigateToDesign(this.nextDesign));
+    Mousetrap.bind(keysFor(ISSUE_PREVIOUS_DESIGN), () =>
+      this.navigateToDesign(this.previousDesign),
+    );
+    Mousetrap.bind(keysFor(ISSUE_NEXT_DESIGN), () => this.navigateToDesign(this.nextDesign));
   },
   beforeDestroy() {
-    Mousetrap.unbind(['left', 'right'], this.navigateToDesign);
+    Mousetrap.unbind(keysFor(ISSUE_PREVIOUS_DESIGN));
+    Mousetrap.unbind(keysFor(ISSUE_NEXT_DESIGN));
   },
   methods: {
     navigateToDesign(design) {
@@ -73,7 +85,8 @@ export default {
       <gl-button
         v-gl-tooltip.bottom
         :disabled="!previousDesign"
-        :title="s__('DesignManagement|Go to previous design')"
+        :title="$options.i18n.previousButton"
+        :aria-label="$options.i18n.previousButton"
         icon="angle-left"
         class="js-previous-design"
         @click="navigateToDesign(previousDesign)"
@@ -81,7 +94,8 @@ export default {
       <gl-button
         v-gl-tooltip.bottom
         :disabled="!nextDesign"
-        :title="s__('DesignManagement|Go to next design')"
+        :title="$options.i18n.nextButton"
+        :aria-label="$options.i18n.nextButton"
         icon="angle-right"
         class="js-next-design"
         @click="navigateToDesign(nextDesign)"
diff --git a/app/assets/javascripts/design_management/components/toolbar/index.vue b/app/assets/javascripts/design_management/components/toolbar/index.vue
index 8abf1529f3c..b84fe45b77e 100644
--- a/app/assets/javascripts/design_management/components/toolbar/index.vue
+++ b/app/assets/javascripts/design_management/components/toolbar/index.vue
@@ -1,13 +1,16 @@
 <script>
 import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
-import { __, sprintf } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { DESIGNS_ROUTE_NAME } from '../../router/constants';
 import DeleteButton from '../delete_button.vue';
 import DesignNavigation from './design_navigation.vue';
 
 export default {
+  i18n: {
+    downloadButtonLabel: s__('DesignManagement|Download design'),
+  },
   components: {
     GlButton,
     GlIcon,
@@ -119,7 +122,8 @@ export default {
       v-gl-tooltip.bottom
       :href="image"
       icon="download"
-      :title="s__('DesignManagement|Download design')"
+      :title="$options.i18n.downloadButtonLabel"
+      :aria-label="$options.i18n.downloadButtonLabel"
     />
     <delete-button
       v-if="isLatestVersion && canDeleteDesign"
diff --git a/app/assets/javascripts/design_management/components/upload/button.vue b/app/assets/javascripts/design_management/components/upload/button.vue
index 394ccb3c483..98b7ab5c094 100644
--- a/app/assets/javascripts/design_management/components/upload/button.vue
+++ b/app/assets/javascripts/design_management/components/upload/button.vue
@@ -38,7 +38,8 @@ export default {
       "
       :disabled="isSaving"
       :loading="isSaving"
-      variant="default"
+      category="secondary"
+      variant="confirm"
       size="small"
       @click="openFileUpload"
     >
diff --git a/app/assets/javascripts/design_management/index.js b/app/assets/javascripts/design_management/index.js
index f0930ade1b5..aa9f377ef16 100644
--- a/app/assets/javascripts/design_management/index.js
+++ b/app/assets/javascripts/design_management/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import App from './components/app.vue';
 import apolloProvider from './graphql';
+import activeDiscussionQuery from './graphql/queries/active_discussion.query.graphql';
 import createRouter from './router';
 
 export default () => {
@@ -8,7 +9,8 @@ export default () => {
   const { issueIid, projectPath, issuePath } = el.dataset;
   const router = createRouter(issuePath);
 
-  apolloProvider.clients.defaultClient.cache.writeData({
+  apolloProvider.clients.defaultClient.cache.writeQuery({
+    query: activeDiscussionQuery,
     data: {
       activeDiscussion: {
         __typename: 'ActiveDiscussion',
diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue
index 8a11c25a795..ad78433c7ce 100644
--- a/app/assets/javascripts/design_management/pages/design/index.vue
+++ b/app/assets/javascripts/design_management/pages/design/index.vue
@@ -2,6 +2,7 @@
 import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
 import Mousetrap from 'mousetrap';
 import { ApolloMutation } from 'vue-apollo';
+import { keysFor, ISSUE_CLOSE_DESIGN } from '~/behaviors/shortcuts/keybindings';
 import createFlash from '~/flash';
 import { fetchPolicies } from '~/lib/graphql';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -171,7 +172,7 @@ export default {
     },
   },
   mounted() {
-    Mousetrap.bind('esc', this.closeDesign);
+    Mousetrap.bind(keysFor(ISSUE_CLOSE_DESIGN), this.closeDesign);
     this.trackPageViewEvent();
 
     // Set active discussion immediately.
@@ -180,7 +181,7 @@ export default {
     this.updateActiveDiscussionFromUrl();
   },
   beforeDestroy() {
-    Mousetrap.unbind('esc', this.closeDesign);
+    Mousetrap.unbind(keysFor(ISSUE_CLOSE_DESIGN));
   },
   methods: {
     addImageDiffNoteToStore(store, { data: { createImageDiffNote } }) {
diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue
index 99ac38fc554..04d80dc0069 100644
--- a/app/assets/javascripts/design_management/pages/index.vue
+++ b/app/assets/javascripts/design_management/pages/index.vue
@@ -379,8 +379,7 @@ export default {
             <delete-button
               v-if="isLatestVersion"
               :is-deleting="loading"
-              button-variant="warning"
-              button-category="secondary"
+              button-variant="default"
               button-class="gl-mr-3"
               button-size="small"
               data-qa-selector="archive_button"
@@ -485,9 +484,7 @@ export default {
               <template #upload-text="{ openFileUpload }">
                 <gl-sprintf :message="$options.i18n.dropzoneDescriptionText">
                   <template #link="{ content }">
-                    <gl-link @click.stop="openFileUpload">
-                      {{ content }}
-                    </gl-link>
+                    <gl-link @click.stop="openFileUpload">{{ content }}</gl-link>
                   </template>
                 </gl-sprintf>
               </template>