Minor style improvements to design management

- align buttons in widget/design header
- simplify DOM by removing unnecessary nesting of DOM elements
- use data-testid where possible

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

@@ -73,21 +73,19 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-align-items-center gl-h-full">
+  <div>
     <gl-modal
       :modal-id="modalId"
       :title="$options.modal.title"
       :action-primary="$options.modal.actionPrimary"
       :action-cancel="$options.modal.actionCancel"
-      @ok="$emit('deleteSelectedDesigns')"
+      @ok="$emit('delete-selected-designs')"
     >
-      <p>
-        {{
-          s__(
-            'DesignManagement|Archived designs will still be available in previous versions of the design collection.',
-          )
-        }}
-      </p>
+      {{
+        s__(
+          'DesignManagement|Archived designs will still be available in previous versions of the design collection.',
+        )
+      }}
     </gl-modal>
     <gl-button
       v-gl-modal-directive="modalId"

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

@@ -55,6 +55,7 @@ export default {
       iid,
     }"
     :update="updateStoreAfterDelete"
+    :tag="null"
     v-on="$listeners"
   >
     <slot v-bind="{ mutate, loading, error }"></slot>

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

@@ -130,7 +130,7 @@ export default {
       button-icon="archive"
       button-category="secondary"
       :title="s__('DesignManagement|Archive design')"
-      @deleteSelectedDesigns="$emit('delete')"
+      @delete-selected-designs="$emit('delete')"
     />
   </header>
 </template>

app/assets/javascripts/design_management/components/upload/button.vue

@@ -50,7 +50,7 @@ export default {
       type="file"
       name="design_file"
       :accept="$options.VALID_DESIGN_FILE_MIMETYPE.mimetype"
-      class="hide"
+      class="gl-display-none"
       multiple
       @change="onFileUploadChange"
     />

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

@@ -365,7 +365,8 @@ export default {
             v-if="isLatestVersion"
             variant="link"
             size="small"
-            class="gl-mr-4 js-select-all"
+            class="gl-mr-3"
+            data-testid="select-all-designs-button"
             @click="toggleDesignsSelection"
             >{{ selectAllButtonText }}
           </gl-button>
@@ -385,7 +386,7 @@ export default {
               data-qa-selector="archive_button"
               :loading="loading"
               :has-selected-designs="hasSelectedDesigns"
-              @deleteSelectedDesigns="mutate()"
+              @delete-selected-designs="mutate()"
             >
               {{ s__('DesignManagement|Archive selected') }}
             </delete-button>

changelogs/unreleased/design-management-minor-fixe.yml

+---
+title: Fix button alignment in design management header
+merge_request: 48003
+author:
+type: fixed

spec/frontend/design_management/components/delete_button_spec.js

@@ -36,7 +36,7 @@ describe('Batch delete button component', () => {
     expect(findButton().attributes('disabled')).toBeTruthy();
   });
 
-  it('emits `deleteSelectedDesigns` event on modal ok click', () => {
+  it('emits `delete-selected-designs` event on modal ok click', () => {
     createComponent();
     findButton().vm.$emit('click');
     return wrapper.vm
@@ -46,7 +46,7 @@ describe('Batch delete button component', () => {
         return wrapper.vm.$nextTick();
       })
       .then(() => {
-        expect(wrapper.emitted().deleteSelectedDesigns).toBeTruthy();
+        expect(wrapper.emitted('delete-selected-designs')).toBeTruthy();
       });
   });
 

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

@@ -106,11 +106,11 @@ describe('Design management toolbar component', () => {
     });
   });
 
-  it('emits `delete` event on deleteButton `deleteSelectedDesigns` event', () => {
+  it('emits `delete` event on deleteButton `delete-selected-designs` event', () => {
     createComponent();
 
     return wrapper.vm.$nextTick().then(() => {
-      wrapper.find(DeleteButton).vm.$emit('deleteSelectedDesigns');
+      wrapper.find(DeleteButton).vm.$emit('delete-selected-designs');
       expect(wrapper.emitted().delete).toBeTruthy();
     });
   });

spec/frontend/design_management/components/upload/__snapshots__/button_spec.js.snap

@@ -19,7 +19,7 @@ exports[`Design management upload button component renders inverted upload desig
    
   <input
     accept="image/*"
-    class="hide"
+    class="gl-display-none"
     multiple="multiple"
     name="design_file"
     type="file"
@@ -44,7 +44,7 @@ exports[`Design management upload button component renders upload design button
    
   <input
     accept="image/*"
-    class="hide"
+    class="gl-display-none"
     multiple="multiple"
     name="design_file"
     type="file"

spec/frontend/design_management/pages/index_spec.js

@@ -97,7 +97,7 @@ describe('Design management index page', () => {
   let moveDesignHandler;
 
   const findDesignCheckboxes = () => wrapper.findAll('.design-checkbox');
-  const findSelectAllButton = () => wrapper.find('.js-select-all');
+  const findSelectAllButton = () => wrapper.find('[data-testid="select-all-designs-button"');
   const findToolbar = () => wrapper.find('.qa-selector-toolbar');
   const findDesignCollectionIsCopying = () =>
     wrapper.find('[data-testid="design-collection-is-copying"');
@@ -542,7 +542,9 @@ describe('Design management index page', () => {
       await nextTick();
       expect(findDeleteButton().exists()).toBe(true);
       expect(findSelectAllButton().text()).toBe('Deselect all');
-      findDeleteButton().vm.$emit('deleteSelectedDesigns');
+
+      findDeleteButton().vm.$emit('delete-selected-designs');
+
       const [{ variables }] = mutate.mock.calls[0];
       expect(variables.filenames).toStrictEqual([mockDesigns[0].filename, mockDesigns[1].filename]);
     });