Remove actions buttons if theres no designs

Add changelog
Put v-if before class, lint error
Prettify

changelogs/unreleased/remove-action-buttons-if-no-designs.yml

+---
+title: Remove action buttons from designs tab if there are no designs
+merge_request: 21186
+author:
+type: fixed

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

@@ -212,7 +212,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 class="d-flex">
+        <div v-if="hasDesigns" class="d-flex qa-selector-toolbar">
           <gl-button
             v-if="isLatestVersion"
             variant="link"

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
       <designversiondropdown-stub />
        
       <div
-        class="d-flex"
+        class="d-flex qa-selector-toolbar"
       >
         <glbutton-stub
           class="mr-2 js-select-all"
@@ -158,17 +158,20 @@ exports[`Design management index page designs renders designs list and header wi
 </div>
 `;
 
-exports[`Design management index page designs renders empty text 1`] = `
+exports[`Design management index page designs renders error 1`] = `
 <div>
   <!---->
    
   <div
     class="mt-4"
   >
-    <glemptystate-stub
-      description="Upload and view the latest designs for this issue. Consistent and easy to find, so everyone is up to date."
-      title="The one place for your designs"
-    />
+    <div
+      class="alert alert-danger"
+    >
+      
+      An error occurred while loading designs. Please try again.
+    
+    </div>
   </div>
    
   <routerview-stub
@@ -177,20 +180,18 @@ exports[`Design management index page designs renders empty text 1`] = `
 </div>
 `;
 
-exports[`Design management index page designs renders error 1`] = `
+exports[`Design management index page designs renders loading icon 1`] = `
 <div>
   <!---->
    
   <div
     class="mt-4"
   >
-    <div
-      class="alert alert-danger"
-    >
-      
-      An error occurred while loading designs. Please try again.
-    
-    </div>
+    <glloadingicon-stub
+      color="orange"
+      label="Loading"
+      size="md"
+    />
   </div>
    
   <routerview-stub
@@ -199,17 +200,16 @@ exports[`Design management index page designs renders error 1`] = `
 </div>
 `;
 
-exports[`Design management index page designs renders loading icon 1`] = `
+exports[`Design management index page when has no designs renders empty text 1`] = `
 <div>
   <!---->
    
   <div
     class="mt-4"
   >
-    <glloadingicon-stub
-      color="orange"
-      label="Loading"
-      size="md"
+    <glemptystate-stub
+      description="Upload and view the latest designs for this issue. Consistent and easy to find, so everyone is up to date."
+      title="The one place for your designs"
     />
   </div>
    

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

@@ -56,6 +56,7 @@ describe('Design management index page', () => {
   const findDesignCheckboxes = () => wrapper.findAll('.design-checkbox');
   const findSelectAllButton = () => wrapper.find('.js-select-all');
   const findDeleteButton = () => wrapper.find('deletebutton-stub');
+  const findToolbar = () => wrapper.find('.qa-selector-toolbar');
 
   function createComponent({
     loading = false,
@@ -115,10 +116,12 @@ describe('Design management index page', () => {
       });
     });
 
-    it('renders empty text', () => {
-      createComponent();
+    it('renders a toolbar with buttons when there are designs', () => {
+      createComponent({ designs: mockDesigns, allVersions: [mockVersion] });
 
-      expect(wrapper.element).toMatchSnapshot();
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findToolbar().exists()).toBe(true);
+      });
     });
 
     it('renders designs list and header with upload button', () => {
@@ -138,6 +141,20 @@ describe('Design management index page', () => {
     });
   });
 
+  describe('when has no designs', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders empty text', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('does not render a toolbar with buttons', () => {
+      expect(findToolbar().exists()).toBe(false);
+    });
+  });
+
   describe('onUploadDesign', () => {
     it('calls apollo mutate', () => {
       createComponent();