Merge branch '198626-environments-dashboard-empty-state' into 'master'

Updates the environments dashboard empty state

See merge request gitlab-org/gitlab!32656

ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue

@@ -2,12 +2,13 @@
 import { isEmpty } from 'lodash';
 import { mapState, mapActions } from 'vuex';
 import {
+  GlButton,
+  GlDashboardSkeleton,
+  GlEmptyState,
+  GlLink,
   GlModal,
   GlModalDirective,
-  GlDeprecatedButton,
-  GlDashboardSkeleton,
   GlSprintf,
-  GlLink,
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import ProjectSelector from '~/vue_shared/components/project_selector/project_selector.vue';
@@ -31,14 +32,15 @@ export default {
   viewDocumentationButton: s__('View documentation'),
 
   components: {
-    GlModal,
+    Environment,
+    GlButton,
     GlDashboardSkeleton,
-    GlDeprecatedButton,
-    GlSprintf,
+    GlEmptyState,
     GlLink,
-    ProjectSelector,
-    Environment,
+    GlModal,
+    GlSprintf,
     ProjectHeader,
+    ProjectSelector,
   },
   directives: {
     'gl-modal': GlModalDirective,
@@ -153,12 +155,9 @@ export default {
       <h1 class="js-dashboard-title page-title text-nowrap flex-fill">
         {{ $options.dashboardHeader }}
       </h1>
-      <gl-deprecated-button
-        v-gl-modal="$options.modalId"
-        class="js-add-projects-button btn btn-success"
-      >
+      <gl-button v-gl-modal="$options.modalId" class="js-add-projects-button" variant="success">
         {{ $options.addProjectsButton }}
-      </gl-deprecated-button>
+      </gl-button>
     </div>
     <p class="mt-2 mb-4 js-page-limits-message">
       <gl-sprintf
@@ -189,28 +188,27 @@ export default {
           </div>
         </div>
       </div>
-      <div v-else-if="!isLoadingProjects" class="row prepend-top-20 text-center">
-        <div class="col-12 d-flex justify-content-center svg-content">
-          <img :src="emptyDashboardSvgPath" class="js-empty-state-svg col-12 prepend-top-20" />
-        </div>
-        <h4 class="js-title col-12 prepend-top-20">
-          {{ $options.emptyDashboardHeader }}
-        </h4>
-        <div class="col-12 d-flex justify-content-center">
-          <span class="js-sub-title mw-460 text-tertiary text-left">
-            {{ $options.emptyDashboardDocs }}
-          </span>
-        </div>
-        <div class="col-12">
-          <a
-            :href="emptyDashboardHelpPath"
-            class="js-documentation-link btn btn-primary prepend-top-default append-bottom-default"
-          >
-            {{ $options.viewDocumentationButton }}
-          </a>
-        </div>
-      </div>
-      <gl-dashboard-skeleton v-else />
+
+      <gl-dashboard-skeleton v-else-if="isLoadingProjects" />
+
+      <gl-empty-state
+        v-else
+        :title="$options.emptyDashboardHeader"
+        :svg-path="emptyDashboardSvgPath"
+      >
+        <template #description>
+          {{ $options.emptyDashboardDocs }}
+          <gl-link :href="emptyDashboardHelpPath" class="js-documentation-link">{{
+            $options.viewDocumentationButton
+          }}</gl-link
+          >.
+        </template>
+        <template #actions>
+          <gl-button v-gl-modal="$options.modalId" variant="success" class="js-add-projects-button">
+            {{ s__('ModalButton|Add projects') }}
+          </gl-button>
+        </template>
+      </gl-empty-state>
     </div>
   </div>
 </template>

ee/spec/frontend/environments_dashboard/components/__snapshots__/dashboard_spec.js.snap

@@ -32,17 +32,19 @@ exports[`dashboard should match the snapshot 1`] = `
     
     </h1>
      
-    <gl-deprecated-button-stub
-      class="js-add-projects-button btn btn-success"
+    <gl-button-stub
+      category="tertiary"
+      class="js-add-projects-button"
+      icon=""
       role="button"
-      size="md"
+      size="medium"
       tabindex="0"
-      variant="secondary"
+      variant="success"
     >
       
       Add projects
     
-    </gl-deprecated-button-stub>
+    </gl-button-stub>
   </div>
    
   <p
@@ -63,51 +65,10 @@ exports[`dashboard should match the snapshot 1`] = `
   <div
     class="prepend-top-default"
   >
-    <div
-      class="row prepend-top-20 text-center"
-    >
-      <div
-        class="col-12 d-flex justify-content-center svg-content"
-      >
-        <img
-          class="js-empty-state-svg col-12 prepend-top-20"
-          src="/assets/illustrations/operations-dashboard_empty.svg"
-        />
-      </div>
-       
-      <h4
-        class="js-title col-12 prepend-top-20"
-      >
-        
-        Add a project to the dashboard
-      
-      </h4>
-       
-      <div
-        class="col-12 d-flex justify-content-center"
-      >
-        <span
-          class="js-sub-title mw-460 text-tertiary text-left"
-        >
-          
-          The environments dashboard provides a summary of each project's environments' status, including pipeline and alert statuses.
-        
-        </span>
-      </div>
-       
-      <div
-        class="col-12"
-      >
-        <a
-          class="js-documentation-link btn btn-primary prepend-top-default append-bottom-default"
-          href="/help/user/operations_dashboard/index.html"
-        >
-          
-          View documentation
-        
-        </a>
-      </div>
-    </div>
+    <gl-empty-state-stub
+      svgpath="/assets/illustrations/operations-dashboard_empty.svg"
+      title="Add a project to the dashboard"
+    />
   </div>
 </div>
 `;

ee/spec/frontend/environments_dashboard/components/dashboard_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlDeprecatedButton, GlModal, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlButton, GlEmptyState, GlModal, GlSprintf, GlLink } from '@gitlab/ui';
 import createStore from 'ee/vue_shared/dashboards/store/index';
 import state from 'ee/vue_shared/dashboards/store/state';
 import component from 'ee/environments_dashboard/components/dashboard/dashboard.vue';
@@ -63,6 +63,10 @@ describe('dashboard', () => {
     expect(wrapper.find('.js-dashboard-title').text()).toBe('Environments Dashboard');
   });
 
+  it('should render the empty state component', () => {
+    expect(wrapper.find(GlEmptyState).exists()).toBe(true);
+  });
+
   describe('page limits information message', () => {
     let message;
 
@@ -89,7 +93,7 @@ describe('dashboard', () => {
     let button;
 
     beforeEach(() => {
-      button = wrapper.find(GlDeprecatedButton);
+      button = wrapper.find(GlButton);
     });
 
     it('is labelled correctly', () => {
@@ -132,7 +136,7 @@ describe('dashboard', () => {
 
     describe('project selector modal', () => {
       beforeEach(() => {
-        wrapper.find(GlDeprecatedButton).trigger('click');
+        wrapper.find(GlButton).trigger('click');
         return wrapper.vm.$nextTick();
       });
 

locale/gitlab.pot

@@ -14179,6 +14179,9 @@ msgstr ""
 msgid "MissingSSHKeyWarningLink|You won't be able to pull or push project code via SSH until you add an SSH key to your profile"
 msgstr ""
 
+msgid "ModalButton|Add projects"
+msgstr ""
+
 msgid "Modal|Cancel"
 msgstr ""