Add latest changes from gitlab-org/gitlab@15-5-stable-eev15.5.0-rc42

6 files changed, 53 insertions, 50 deletions

diff --git a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
index 124780df8a5..a4430b15752 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlButton, GlLink, GlTooltipDirective } from '@gitlab/ui';
 import { ApolloMutation } from 'vue-apollo';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { s__ } from '~/locale';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
 import { updateGlobalTodoCount } from '~/vue_shared/components/sidebar/todo_toggle/utils';
@@ -155,7 +155,7 @@ export default {
   methods: {
     onDone({ data: { createNote } }) {
       if (hasErrors(createNote)) {
-        createFlash({ message: ADD_DISCUSSION_COMMENT_ERROR });
+        createAlert({ message: ADD_DISCUSSION_COMMENT_ERROR });
       }
       this.discussionComment = '';
       this.hideForm();
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
index 4faeba3983b..5a6b220e532 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlModal } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import $ from 'jquery';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
@@ -7,13 +7,23 @@ import Autosave from '~/autosave';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import { getIdFromGraphQLId, isGid } from '~/graphql_shared/utils';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 
 export default {
   name: 'DesignReplyForm',
+  i18n: {
+    primaryBtn: s__('DesignManagement|Discard changes'),
+    cancelBtnCreate: s__('DesignManagement|Continue creating'),
+    cancelBtnUpdate: s__('DesignManagement|Continue editing'),
+    cancelCreate: s__('DesignManagement|Are you sure you want to cancel creating this comment?'),
+    cancelUpdate: s__('DesignManagement|Are you sure you want to cancel editing this comment?'),
+    newCommentButton: s__('DesignManagement|Comment'),
+    updateCommentButton: s__('DesignManagement|Save comment'),
+  },
+  markdownDocsPath: helpPagePath('user/markdown'),
   components: {
     MarkdownField,
     GlButton,
-    GlModal,
   },
   props: {
     markdownPreviewPath: {
@@ -54,29 +64,10 @@ export default {
     hasValue() {
       return this.value.trim().length > 0;
     },
-    modalSettings() {
-      if (this.isNewComment) {
-        return {
-          title: s__('DesignManagement|Cancel comment confirmation'),
-          okTitle: s__('DesignManagement|Discard comment'),
-          cancelTitle: s__('DesignManagement|Keep comment'),
-          content: s__('DesignManagement|Are you sure you want to cancel creating this comment?'),
-        };
-      }
-      return {
-        title: s__('DesignManagement|Cancel comment update confirmation'),
-        okTitle: s__('DesignManagement|Cancel changes'),
-        cancelTitle: s__('DesignManagement|Keep changes'),
-        content: s__('DesignManagement|Are you sure you want to cancel changes to this comment?'),
-      };
-    },
     buttonText() {
       return this.isNewComment
-        ? s__('DesignManagement|Comment')
-        : s__('DesignManagement|Save comment');
-    },
-    markdownDocsPath() {
-      return helpPagePath('user/markdown');
+        ? this.$options.i18n.newCommentButton
+        : this.$options.i18n.updateCommentButton;
     },
     shortDiscussionId() {
       return isGid(this.discussionId) ? getIdFromGraphQLId(this.discussionId) : this.discussionId;
@@ -94,12 +85,30 @@ export default {
     },
     cancelComment() {
       if (this.hasValue && this.formText !== this.value) {
-        this.$refs.cancelCommentModal.show();
+        this.confirmCancelCommentModal();
       } else {
         this.$emit('cancel-form');
       }
     },
-    confirmCancelCommentModal() {
+    async confirmCancelCommentModal() {
+      const msg = this.isNewComment
+        ? this.$options.i18n.cancelCreate
+        : this.$options.i18n.cancelUpdate;
+
+      const cancelBtn = this.isNewComment
+        ? this.$options.i18n.cancelBtnCreate
+        : this.$options.i18n.cancelBtnUpdate;
+
+      const confirmed = await confirmAction(msg, {
+        primaryBtnText: this.$options.i18n.primaryBtn,
+        cancelBtnText: cancelBtn,
+        primaryBtnVariant: 'danger',
+      });
+
+      if (!confirmed) {
+        return;
+      }
+
       this.$emit('cancel-form');
       this.autosaveDiscussion.reset();
     },
@@ -126,7 +135,7 @@ export default {
       :markdown-preview-path="markdownPreviewPath"
       :enable-autocomplete="true"
       :textarea-value="value"
-      :markdown-docs-path="markdownDocsPath"
+      :markdown-docs-path="$options.markdownDocsPath"
       class="bordered-box"
     >
       <template #textarea>
@@ -171,15 +180,5 @@ export default {
         >{{ __('Cancel') }}</gl-button
       >
     </div>
-    <gl-modal
-      ref="cancelCommentModal"
-      ok-variant="danger"
-      :title="modalSettings.title"
-      :ok-title="modalSettings.okTitle"
-      :cancel-title="modalSettings.cancelTitle"
-      modal-id="cancel-comment-modal"
-      @ok="confirmCancelCommentModal"
-      >{{ modalSettings.content }}
-    </gl-modal>
   </form>
 </template>
diff --git a/app/assets/javascripts/design_management/mixins/all_designs.js b/app/assets/javascripts/design_management/mixins/all_designs.js
index e92f8006a0d..b783ec43cd1 100644
--- a/app/assets/javascripts/design_management/mixins/all_designs.js
+++ b/app/assets/javascripts/design_management/mixins/all_designs.js
@@ -1,6 +1,6 @@
 import { propertyOf } from 'lodash';
 import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql';
-import createFlash, { FLASH_TYPES } from '~/flash';
+import { createAlert, VARIANT_WARNING } from '~/flash';
 import { s__ } from '~/locale';
 import { DESIGNS_ROUTE_NAME } from '../router/constants';
 import allVersionsMixin from './all_versions';
@@ -36,7 +36,7 @@ export default {
       },
       result() {
         if (this.$route.query.version && !this.hasValidVersion) {
-          createFlash({
+          createAlert({
             message: s__(
               'DesignManagement|Requested design version does not exist. Showing latest version instead',
             ),
@@ -44,11 +44,11 @@ export default {
           this.$router.replace({ name: DESIGNS_ROUTE_NAME, query: { version: undefined } });
         }
         if (this.designCollection.copyState === 'ERROR') {
-          createFlash({
+          createAlert({
             message: s__(
               'DesignManagement|There was an error moving your designs. Please upload your designs below.',
             ),
-            type: FLASH_TYPES.WARNING,
+            variant: VARIANT_WARNING,
           });
         }
       },
diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue
index 228ad637b9e..d4c177e2e5f 100644
--- a/app/assets/javascripts/design_management/pages/design/index.vue
+++ b/app/assets/javascripts/design_management/pages/design/index.vue
@@ -4,7 +4,7 @@ import { isNull } from 'lodash';
 import Mousetrap from 'mousetrap';
 import { ApolloMutation } from 'vue-apollo';
 import { keysFor, ISSUE_CLOSE_DESIGN } from '~/behaviors/shortcuts/keybindings';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { fetchPolicies } from '~/lib/graphql';
 import { updateGlobalTodoCount } from '~/vue_shared/components/sidebar/todo_toggle/utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -250,7 +250,7 @@ export default {
     onQueryError(message) {
       // because we redirect user to /designs (the issue page),
       // we want to create these flashes on the issue page
-      createFlash({ message });
+      createAlert({ message });
       this.$router.push({ name: this.$options.DESIGNS_ROUTE_NAME });
     },
     onError(message, e) {
diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue
index 07f7a19f7d4..fba73cd4bec 100644
--- a/app/assets/javascripts/design_management/pages/index.vue
+++ b/app/assets/javascripts/design_management/pages/index.vue
@@ -133,9 +133,13 @@ export default {
       return this.designCollection && this.designCollection.copyState === 'IN_PROGRESS';
     },
     designDropzoneWrapperClass() {
-      return this.isDesignListEmpty
-        ? 'col-12'
-        : 'gl-flex-direction-column col-md-6 col-lg-3 gl-mt-5';
+      if (!this.isDesignListEmpty) {
+        return 'gl-flex-direction-column col-md-6 col-lg-3 gl-mt-5';
+      }
+      if (this.showToolbar) {
+        return 'col-12 gl-mt-5';
+      }
+      return 'col-12';
     },
   },
   mounted() {
diff --git a/app/assets/javascripts/design_management/utils/cache_update.js b/app/assets/javascripts/design_management/utils/cache_update.js
index c8f445bfb88..cfec5828c85 100644
--- a/app/assets/javascripts/design_management/utils/cache_update.js
+++ b/app/assets/javascripts/design_management/utils/cache_update.js
@@ -2,7 +2,7 @@
 
 import produce from 'immer';
 import { differenceBy } from 'lodash';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { extractCurrentDiscussion, extractDesign, extractDesigns } from './design_management_utils';
 import {
   ADD_IMAGE_DIFF_NOTE_ERROR,
@@ -234,7 +234,7 @@ export const deletePendingTodoFromStore = (store, todoMarkDone, query, queryVari
 };
 
 const onError = (data, message) => {
-  createFlash({ message });
+  createAlert({ message });
   throw new Error(data.errors);
 };
 
@@ -283,7 +283,7 @@ export const updateStoreAfterUploadDesign = (store, data, query) => {
 
 export const updateDesignsOnStoreAfterReorder = (store, data, query) => {
   if (hasErrors(data)) {
-    createFlash({ message: data.errors[0] });
+    createAlert({ message: data.errors[0] });
   } else {
     moveDesignInStore(store, data, query);
   }