Merge branch...

Merge branch 'issue-223169-extract-instance-level-empty-state-to-a-separate-component' into 'master'

Issue 223169 extract instance level empty state to a separate component

See merge request gitlab-org/gitlab!35174

ee/app/assets/javascripts/security_dashboard/components/empty_states/dashboard_not_configured.vue

+<script>
+import { GlButton, GlEmptyState, GlLink } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlEmptyState,
+    GlButton,
+    GlLink,
+  },
+  props: {
+    svgPath: {
+      type: String,
+      required: true,
+    },
+    dashboardDocumentation: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    handleAddProjectsClick() {
+      this.$emit('handleAddProjectsClick');
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-empty-state
+    :title="s__('SecurityReports|Add a project to your dashboard')"
+    :svg-path="svgPath"
+  >
+    <template #description>
+      {{
+        s__(
+          'SecurityReports|The security dashboard displays the latest security findings for projects you wish to monitor. Select "Edit dashboard" to add and remove projects.',
+        )
+      }}
+      <gl-link :href="dashboardDocumentation">{{
+        s__('SecurityReports|More information')
+      }}</gl-link>
+    </template>
+    <template #actions>
+      <gl-button variant="success" @click="handleAddProjectsClick">
+        {{ s__('SecurityReports|Add projects') }}
+      </gl-button>
+    </template>
+  </gl-empty-state>
+</template>

ee/app/assets/javascripts/security_dashboard/components/first_class_instance_security_dashboard.vue

 <script>
-import { GlLoadingIcon, GlButton, GlEmptyState, GlLink } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { __, s__ } from '~/locale';
 import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
@@ -11,6 +11,7 @@ import projectsQuery from 'ee/security_dashboard/graphql/get_instance_security_d
 import ProjectManager from './first_class_project_manager/project_manager.vue';
 import CsvExportButton from './csv_export_button.vue';
 import vulnerabilityHistoryQuery from '../graphql/instance_vulnerability_history.graphql';
+import DashboardNotConfigured from './empty_states/dashboard_not_configured.vue';
 
 export default {
   components: {
@@ -21,10 +22,9 @@ export default {
     VulnerabilitySeverity,
     VulnerabilityChart,
     Filters,
-    GlEmptyState,
     GlLoadingIcon,
     GlButton,
-    GlLink,
+    DashboardNotConfigured,
   },
   props: {
     dashboardDocumentation: {
@@ -128,27 +128,12 @@ export default {
       :empty-state-svg-path="emptyStateSvgPath"
       :filters="filters"
     />
-    <gl-empty-state
+    <dashboard-not-configured
       v-else-if="shouldShowEmptyState"
-      :title="s__('SecurityReports|Add a project to your dashboard')"
       :svg-path="emptyStateSvgPath"
-    >
-      <template #description>
-        {{
-          s__(
-            'SecurityReports|The security dashboard displays the latest security findings for projects you wish to monitor. Select "Edit dashboard" to add and remove projects.',
-          )
-        }}
-        <gl-link :href="dashboardDocumentation">{{
-          s__('SecurityReports|More information')
-        }}</gl-link>
-      </template>
-      <template #actions>
-        <gl-button variant="success" @click="toggleProjectSelector">
-          {{ s__('SecurityReports|Add projects') }}
-        </gl-button>
-      </template>
-    </gl-empty-state>
+      :dashboard-documentation="dashboardDocumentation"
+      @handleAddProjectsClick="toggleProjectSelector"
+    />
     <div v-else class="d-flex justify-content-center">
       <project-manager
         v-if="showProjectSelector"

ee/spec/frontend/security_dashboard/components/empty_states/dashboard_not_configured_spec.js

+import { mount } from '@vue/test-utils';
+import { GlEmptyState, GlButton, GlLink } from '@gitlab/ui';
+import DashboardNotConfigured from 'ee/security_dashboard/components/empty_states/dashboard_not_configured.vue';
+
+describe('first class instance security dashboard empty state', () => {
+  let wrapper;
+  const dashboardDocumentation = '/path/to/dashboard/documentation';
+  const svgPath = '/placeholder.svg';
+
+  const createWrapper = () =>
+    mount(DashboardNotConfigured, {
+      propsData: { svgPath, dashboardDocumentation },
+    });
+  const findGlEmptyState = () => wrapper.find(GlEmptyState);
+  const findButton = () => wrapper.find(GlButton);
+  const findLink = () => wrapper.find(GlLink);
+
+  beforeEach(() => {
+    wrapper = createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render correctly', () => {
+    expect(wrapper.props()).toEqual({
+      svgPath,
+      dashboardDocumentation,
+    });
+  });
+
+  it('contains a GlEmptyState', () => {
+    expect(findGlEmptyState().exists()).toBe(true);
+    expect(findGlEmptyState().props()).toMatchObject({ svgPath });
+  });
+
+  it('contains a GlLink with href attribute equal to dashboardDocumentation', () => {
+    expect(findLink().attributes('href')).toBe(dashboardDocumentation);
+  });
+
+  it('contains a GlButton', () => {
+    expect(findButton().exists()).toBe(true);
+  });
+
+  it('emits `handleAddProjectsClick` on button click', async () => {
+    const eventName = 'handleAddProjectsClick';
+
+    findButton().trigger('click');
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted()).toHaveProperty(eventName);
+  });
+});

ee/spec/frontend/security_dashboard/components/first_class_instance_security_dashboard_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlEmptyState, GlButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
 import FirstClassInstanceDashboard from 'ee/security_dashboard/components/first_class_instance_security_dashboard.vue';
 import FirstClassInstanceVulnerabilities from 'ee/security_dashboard/components/first_class_instance_security_dashboard_vulnerabilities.vue';
@@ -8,6 +8,7 @@ import VulnerabilityChart from 'ee/security_dashboard/components/first_class_vul
 import CsvExportButton from 'ee/security_dashboard/components/csv_export_button.vue';
 import Filters from 'ee/security_dashboard/components/first_class_vulnerability_filters.vue';
 import ProjectManager from 'ee/security_dashboard/components/first_class_project_manager/project_manager.vue';
+import DashboardNotConfigured from 'ee/security_dashboard/components/empty_states/dashboard_not_configured.vue';
 
 describe('First Class Instance Dashboard Component', () => {
   let wrapper;
@@ -24,7 +25,7 @@ describe('First Class Instance Dashboard Component', () => {
   const findVulnerabilityChart = () => wrapper.find(VulnerabilityChart);
   const findCsvExportButton = () => wrapper.find(CsvExportButton);
   const findProjectManager = () => wrapper.find(ProjectManager);
-  const findEmptyState = () => wrapper.find(GlEmptyState);
+  const findEmptyState = () => wrapper.find(DashboardNotConfigured);
   const findFilters = () => wrapper.find(Filters);
 
   const createWrapper = ({ data = {}, stubs }) => {
@@ -102,7 +103,7 @@ describe('First Class Instance Dashboard Component', () => {
         data: {
           isManipulatingProjects: false,
           stubs: {
-            GlEmptyState,
+            DashboardNotConfigured,
             GlButton,
           },
         },
@@ -110,7 +111,10 @@ describe('First Class Instance Dashboard Component', () => {
     });
 
     it('renders the empty state', () => {
-      expect(findEmptyState().props('title')).toBe('Add a project to your dashboard');
+      expect(findEmptyState().props()).toEqual({
+        svgPath: emptyStateSvgPath,
+        dashboardDocumentation,
+      });
     });
 
     it('does not render the vulnerability list', () => {