Merge branch 'gvso/gitlab-220964-rename-design-delete-button' into 'master'

Re-name "Delete" button to "Archive" on Design Tab

See merge request gitlab-org/gitlab!38446

app/assets/javascripts/design_management/components/delete_button.vue

 <script>
 import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
 
 export default {
   name: 'DeleteButton',
@@ -28,6 +28,16 @@ export default {
       required: false,
       default: 'info',
     },
+    buttonCategory: {
+      type: String,
+      required: false,
+      default: 'primary',
+    },
+    buttonIcon: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     buttonSize: {
       type: String,
       required: false,
@@ -38,6 +48,11 @@ export default {
       required: false,
       default: true,
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -45,13 +60,13 @@ export default {
     };
   },
   modal: {
-    title: s__('DesignManagement|Delete designs confirmation'),
+    title: s__('DesignManagement|Are you sure you want to archive the selected designs?'),
     actionPrimary: {
-      text: s__('Delete'),
-      attributes: { variant: 'danger' },
+      text: s__('DesignManagement|Archive designs'),
+      attributes: { variant: 'warning' },
     },
     actionCancel: {
-      text: s__('Cancel'),
+      text: __('Cancel'),
     },
   },
 };
@@ -66,14 +81,23 @@ export default {
       :action-cancel="$options.modal.actionCancel"
       @ok="$emit('deleteSelectedDesigns')"
     >
-      <p>{{ s__('DesignManagement|Are you sure you want to delete the selected designs?') }}</p>
+      <p>
+        {{
+          s__(
+            'DesignManagement|Archived designs will still be available in previous versions of the design collection.',
+          )
+        }}
+      </p>
     </gl-modal>
     <gl-button
       v-gl-modal-directive="modalId"
       :variant="buttonVariant"
+      :category="buttonCategory"
       :size="buttonSize"
       :class="buttonClass"
       :disabled="isDeleting || !hasSelectedDesigns"
+      :loading="loading"
+      :icon="buttonIcon"
     >
       <slot></slot>
     </gl-button>

app/assets/javascripts/design_management/components/list/item.vue

@@ -74,7 +74,7 @@ export default {
         deletion: {
           name: 'file-deletion-solid',
           classes: 'text-danger-500',
-          tooltip: __('Deleted in this version'),
+          tooltip: __('Archived in this version'),
         },
       };
 

app/assets/javascripts/design_management/components/toolbar/index.vue

 <script>
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlButton, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import Pagination from './pagination.vue';
 import DeleteButton from '../delete_button.vue';
@@ -10,10 +9,10 @@ import { DESIGNS_ROUTE_NAME } from '../../router/constants';
 
 export default {
   components: {
-    Icon,
+    GlIcon,
     Pagination,
     DeleteButton,
-    GlDeprecatedButton,
+    GlButton,
   },
   mixins: [timeagoMixin],
   props: {
@@ -92,33 +91,39 @@ export default {
 </script>
 
 <template>
-  <header class="d-flex p-2 bg-white align-items-center js-design-header">
-    <router-link
-      :to="{
-        name: $options.DESIGNS_ROUTE_NAME,
-        query: $route.query,
-      }"
-      :aria-label="s__('DesignManagement|Go back to designs')"
-      data-testid="close-design"
-      class="mr-3 text-plain d-flex justify-content-center align-items-center"
-    >
-      <icon :size="18" name="close" />
-    </router-link>
-    <div class="overflow-hidden d-flex align-items-center">
-      <h2 class="m-0 str-truncated-100 gl-font-base">{{ filename }}</h2>
-      <small v-if="updatedAt" class="text-secondary">{{ updatedText }}</small>
+  <header
+    class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-bg-white gl-py-4 gl-pl-4 js-design-header"
+  >
+    <div class="gl-display-flex gl-align-items-center">
+      <router-link
+        :to="{
+          name: $options.DESIGNS_ROUTE_NAME,
+          query: $route.query,
+        }"
+        :aria-label="s__('DesignManagement|Go back to designs')"
+        data-testid="close-design"
+        class="gl-mr-5 gl-display-flex gl-align-items-center gl-justify-content-center text-plain"
+      >
+        <gl-icon name="close" />
+      </router-link>
+      <div class="overflow-hidden d-flex align-items-center">
+        <h2 class="m-0 str-truncated-100 gl-font-base">{{ filename }}</h2>
+        <small v-if="updatedAt" class="text-secondary">{{ updatedText }}</small>
+      </div>
+    </div>
+
+    <div class="gl-display-flex gl-align-items-center">
+      <pagination :id="id" class="gl-mr-3 gl-flex-shrink-0" />
+      <gl-button :href="image" icon="download" />
+      <delete-button
+        v-if="isLatestVersion && canDeleteDesign"
+        class="gl-ml-3"
+        :is-deleting="isDeleting"
+        button-variant="warning"
+        button-icon="archive"
+        button-category="secondary"
+        @deleteSelectedDesigns="$emit('delete')"
+      />
     </div>
-    <pagination :id="id" class="ml-auto flex-shrink-0" />
-    <gl-deprecated-button :href="image" class="mr-2">
-      <icon :size="18" name="download" />
-    </gl-deprecated-button>
-    <delete-button
-      v-if="isLatestVersion && canDeleteDesign"
-      :is-deleting="isDeleting"
-      button-variant="danger"
-      @deleteSelectedDesigns="$emit('delete')"
-    >
-      <icon :size="18" name="remove" />
-    </delete-button>
   </header>
 </template>

app/assets/javascripts/design_management/components/toolbar/pagination.vue

@@ -65,7 +65,7 @@ export default {
 <template>
   <div v-if="designsCount" class="d-flex align-items-center">
     {{ paginationText }}
-    <div class="btn-group ml-3 mr-3">
+    <div class="btn-group gl-ml-3">
       <pagination-button
         :design="previousDesign"
         :title="s__('DesignManagement|Go to previous design')"

app/assets/javascripts/design_management/pages/index.vue

@@ -327,7 +327,7 @@ export default {
             v-if="isLatestVersion"
             variant="link"
             size="small"
-            class="gl-mr-2 js-select-all"
+            class="gl-mr-3 js-select-all"
             @click="toggleDesignsSelection"
             >{{ selectAllButtonText }}
           </gl-button>
@@ -340,14 +340,15 @@ export default {
             <delete-button
               v-if="isLatestVersion"
               :is-deleting="loading"
-              button-variant="danger"
-              button-class="gl-mr-4"
+              button-variant="warning"
+              button-category="secondary"
+              button-class="gl-mr-3"
               button-size="small"
+              :loading="loading"
               :has-selected-designs="hasSelectedDesigns"
               @deleteSelectedDesigns="mutate()"
             >
-              {{ s__('DesignManagement|Delete selected') }}
-              <gl-loading-icon v-if="loading" inline class="ml-1" />
+              {{ s__('DesignManagement|Archive selected') }}
             </delete-button>
           </design-destroyer>
           <upload-button v-if="canCreateDesign" :is-saving="isSaving" @upload="onUploadDesign" />

app/assets/javascripts/design_management/utils/error_messages.js

@@ -73,7 +73,7 @@ const someDesignsSkippedMessage = skippedFiles => {
 
 export const designDeletionError = ({ singular = true } = {}) => {
   const design = singular ? __('a design') : __('designs');
-  return sprintf(s__('Could not delete %{design}. Please try again.'), {
+  return sprintf(s__('Could not archive %{design}. Please try again.'), {
     design,
   });
 };

changelogs/unreleased/220964-rename-design-delete-button.yml

+---
+title: "Re-name \"Delete\" button to \"Archive\" in Design Management"
+merge_request: 38446
+author: Getulio Valentin Sánchez @gvso
+type: changed

locale/gitlab.pot

@@ -3139,6 +3139,9 @@ msgstr ""
 msgid "Archived"
 msgstr ""
 
+msgid "Archived in this version"
+msgstr ""
+
 msgid "Archived project! Repository and other project resources are read only"
 msgstr ""
 
@@ -6901,6 +6904,9 @@ msgstr ""
 msgid "Could not add admins as members"
 msgstr ""
 
+msgid "Could not archive %{design}. Please try again."
+msgstr ""
+
 msgid "Could not authorize chat nickname. Try again!"
 msgstr ""
 
@@ -8322,6 +8328,18 @@ msgstr ""
 msgid "DesignManagement|Adding a design with the same filename replaces the file in a new version."
 msgstr ""
 
+msgid "DesignManagement|Archive designs"
+msgstr ""
+
+msgid "DesignManagement|Archive selected"
+msgstr ""
+
+msgid "DesignManagement|Archived designs will still be available in previous versions of the design collection."
+msgstr ""
+
+msgid "DesignManagement|Are you sure you want to archive the selected designs?"
+msgstr ""
+
 msgid "DesignManagement|Are you sure you want to cancel changes to this comment?"
 msgstr ""
 

spec/frontend/design_management/components/toolbar/__snapshots__/index_spec.js.snap

@@ -2,62 +2,64 @@
 
 exports[`Design management toolbar component renders design and updated data 1`] = `
 <header
-  class="d-flex p-2 bg-white align-items-center js-design-header"
+  class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-bg-white gl-py-4 gl-pl-4 js-design-header"
 >
-  <a
-    aria-label="Go back to designs"
-    class="mr-3 text-plain d-flex justify-content-center align-items-center"
-    data-testid="close-design"
-  >
-    <icon-stub
-      name="close"
-      size="18"
-    />
-  </a>
-   
   <div
-    class="overflow-hidden d-flex align-items-center"
+    class="gl-display-flex gl-align-items-center"
   >
-    <h2
-      class="m-0 str-truncated-100 gl-font-base"
+    <a
+      aria-label="Go back to designs"
+      class="gl-mr-5 gl-display-flex gl-align-items-center gl-justify-content-center text-plain"
+      data-testid="close-design"
     >
-      test.jpg
-    </h2>
+      <gl-icon-stub
+        name="close"
+        size="16"
+      />
+    </a>
      
-    <small
-      class="text-secondary"
+    <div
+      class="overflow-hidden d-flex align-items-center"
     >
-      Updated 1 hour ago by Test Name
-    </small>
+      <h2
+        class="m-0 str-truncated-100 gl-font-base"
+      >
+        test.jpg
+      </h2>
+       
+      <small
+        class="text-secondary"
+      >
+        Updated 1 hour ago by Test Name
+      </small>
+    </div>
   </div>
    
-  <pagination-stub
-    class="ml-auto flex-shrink-0"
-    id="1"
-  />
-   
-  <gl-deprecated-button-stub
-    class="mr-2"
-    href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d"
-    size="md"
-    variant="secondary"
+  <div
+    class="gl-display-flex gl-align-items-center"
   >
-    <icon-stub
-      name="download"
-      size="18"
+    <pagination-stub
+      class="gl-mr-3 gl-flex-shrink-0"
+      id="1"
     />
-  </gl-deprecated-button-stub>
-   
-  <delete-button-stub
-    buttonclass=""
-    buttonsize="medium"
-    buttonvariant="danger"
-    hasselecteddesigns="true"
-  >
-    <icon-stub
-      name="remove"
-      size="18"
+     
+    <gl-button-stub
+      category="tertiary"
+      href="/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d"
+      icon="download"
+      size="medium"
+      variant="default"
     />
-  </delete-button-stub>
+     
+    <delete-button-stub
+      buttoncategory="secondary"
+      buttonclass=""
+      buttonicon="archive"
+      buttonsize="medium"
+      buttonvariant="warning"
+      class="gl-ml-3"
+      hasselecteddesigns="true"
+    />
+  </div>
 </header>
 `;

spec/frontend/design_management/components/toolbar/__snapshots__/pagination_spec.js.snap

@@ -10,7 +10,7 @@ exports[`Design management pagination component renders pagination buttons 1`] =
   0 of 2
   
   <div
-    class="btn-group ml-3 mr-3"
+    class="btn-group gl-ml-3"
   >
     <pagination-button-stub
       class="js-previous-design"

spec/frontend/design_management/components/toolbar/index_spec.js

@@ -3,7 +3,7 @@ import VueRouter from 'vue-router';
 import Toolbar from '~/design_management/components/toolbar/index.vue';
 import DeleteButton from '~/design_management/components/delete_button.vue';
 import { DESIGNS_ROUTE_NAME } from '~/design_management/router/constants';
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 
 const localVue = createLocalVue();
 localVue.use(VueRouter);
@@ -116,7 +116,7 @@ describe('Design management toolbar component', () => {
   });
 
   it('renders download button with correct link', () => {
-    expect(wrapper.find(GlDeprecatedButton).attributes('href')).toBe(
+    expect(wrapper.find(GlButton).attributes('href')).toBe(
       '/-/designs/306/7f747adcd4693afadbe968d7ba7d983349b9012d',
     );
   });

spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap

@@ -111,7 +111,7 @@ exports[`Design management index page designs renders designs list and header wi
       >
         <gl-button-stub
           category="tertiary"
-          class="gl-mr-2 js-select-all"
+          class="gl-mr-3 js-select-all"
           icon=""
           size="small"
           variant="link"
@@ -122,14 +122,14 @@ exports[`Design management index page designs renders designs list and header wi
          
         <div>
           <delete-button-stub
-            buttonclass="gl-mr-4"
+            buttoncategory="secondary"
+            buttonclass="gl-mr-3"
             buttonsize="small"
-            buttonvariant="danger"
+            buttonvariant="warning"
           >
             
-            Delete selected
-            
-            <!---->
+            Archive selected
+          
           </delete-button-stub>
         </div>
          

spec/frontend/design_management/utils/error_messages_spec.js

@@ -10,8 +10,8 @@ const mockFilenames = n =>
 
 describe('Error message', () => {
   describe('designDeletionError', () => {
-    const singularMsg = 'Could not delete a design. Please try again.';
-    const pluralMsg = 'Could not delete designs. Please try again.';
+    const singularMsg = 'Could not archive a design. Please try again.';
+    const pluralMsg = 'Could not archive designs. Please try again.';
 
     describe('when [singular=true]', () => {
       it.each([[undefined], [true]])('uses singular grammar', singularOption => {