Replace v-show on Designs toolbar with d-none class

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

@@ -195,7 +195,7 @@ export default {
     <header v-if="showToolbar" class="row-content-block border-top-0 p-2 d-flex">
       <div class="d-flex justify-content-between align-items-center w-100">
         <design-version-dropdown />
-        <div v-show="hasDesigns" class="d-flex qa-selector-toolbar">
+        <div :class="['qa-selector-toolbar', { 'd-flex': hasDesigns, 'd-none': !hasDesigns }]">
           <gl-button
             v-if="isLatestVersion"
             variant="link"
@@ -204,7 +204,7 @@ export default {
             >{{ selectAllButtonText }}</gl-button
           >
           <design-destroyer
-            v-slot="{ mutate, loading, error }"
+            v-slot="{ mutate, loading }"
             :filenames="selectedDesigns"
             :project-path="projectPath"
             :iid="issueIid"

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

@@ -69,7 +69,7 @@ exports[`Design management index page designs renders designs list and header wi
       <design-version-dropdown-stub />
        
       <div
-        class="d-flex qa-selector-toolbar"
+        class="qa-selector-toolbar d-flex"
       >
         <gl-button-stub
           class="mr-2 js-select-all"

ee/spec/frontend/design_management/pages/index_spec.js

@@ -303,7 +303,7 @@ describe('Design management index page', () => {
     });
   });
 
-  describe('on latest version', () => {
+  describe('on latest version when has designs', () => {
     beforeEach(() => {
       createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
     });
@@ -312,13 +312,10 @@ describe('Design management index page', () => {
       expect(findDesignCheckboxes().length).toBe(mockDesigns.length);
     });
 
-    it('renders Delete selected button', () => {
-      expect(findDeleteButton().exists()).toBe(true);
-    });
-
-    it('renders a button with Select all text', () => {
-      expect(findSelectAllButton().exists()).toBe(true);
-      expect(findSelectAllButton().text()).toBe('Select all');
+    it('renders toolbar buttons', () => {
+      expect(findToolbar().exists()).toBe(true);
+      expect(findToolbar().classes()).toContain('d-flex');
+      expect(findToolbar().classes()).not.toContain('d-none');
     });
 
     it('adds two designs to selected designs when their checkboxes are checked', () => {
@@ -375,6 +372,11 @@ describe('Design management index page', () => {
     });
   });
 
+  it('on latest version when has no designs does not render toolbar buttons', () => {
+    createComponent({ designs: [], allVersions: [mockVersion] });
+    expect(findToolbar().exists()).toBe(false);
+  });
+
   describe('on non-latest version', () => {
     beforeEach(() => {
       createComponent({ designs: mockDesigns, allVersions: [mockVersion] });