Add operational vulnerability empty state

ee/app/assets/javascripts/security_dashboard/components/shared/empty_states/operational_report_not_configured.vue

+<script>
+import { GlEmptyState } from '@gitlab/ui';
+import { s__, __ } from '~/locale';
+
+export default {
+  components: {
+    GlEmptyState,
+  },
+  inject: [
+    'dashboardType',
+    'operationalConfigurationPath',
+    'operationalEmptyStateSvgPath',
+    'operationalHelpPath',
+  ],
+  i18n: {
+    title: s__('SecurityReports|Monitor vulnerabilities across clusters'),
+    description: {
+      project: s__(
+        'SecurityReports|Manage and track vulnerabilities identified in your Kubernetes clusters. Vulnerabilities appear here after you create a scan execution policy in this project.',
+      ),
+      group: s__(
+        'SecurityReports|Manage and track vulnerabilities identified in your Kubernetes clusters. Vulnerabilities appear here after you create a scan execution policy in any project in this group.',
+      ),
+      instance: s__(
+        'SecurityReports|Manage and track vulnerabilities identified in your Kubernetes clusters. Vulnerabilities appear here after you create a scan execution policy in any project in this instance.',
+      ),
+    },
+    primaryButtonText: s__('SecurityReports|Create policy'),
+    secondaryButtonText: __('Learn more'),
+  },
+  computed: {
+    description() {
+      return this.$options.i18n.description[this.dashboardType];
+    },
+    primaryButtonText() {
+      return this.dashboardType === 'project' ? this.$options.i18n.primaryButtonText : '';
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-empty-state
+    :title="$options.i18n.title"
+    :svg-path="operationalEmptyStateSvgPath"
+    :description="description"
+    :primary-button-text="primaryButtonText"
+    :primary-button-link="operationalConfigurationPath"
+    :secondary-button-text="$options.i18n.secondaryButtonText"
+    :secondary-button-link="operationalHelpPath"
+  />
+</template>

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report.vue

@@ -16,6 +16,7 @@ import CsvExportButton from './csv_export_button.vue';
 import DashboardNotConfiguredGroup from './empty_states/group_dashboard_not_configured.vue';
 import DashboardNotConfiguredInstance from './empty_states/instance_dashboard_not_configured.vue';
 import DashboardNotConfiguredProject from './empty_states/reports_not_configured.vue';
+import OperationalReportNotConfigured from './empty_states/operational_report_not_configured.vue';
 import Filters from './filters/filters_layout.vue';
 import ProjectPipelineStatus from './project_pipeline_status.vue';
 import SurveyRequestBanner from './survey_request_banner.vue';
@@ -36,6 +37,7 @@ export default {
     DashboardNotConfiguredGroup,
     DashboardNotConfiguredInstance,
     DashboardNotConfiguredProject,
+    OperationalReportNotConfigured,
     PortalTarget,
     ProjectPipelineStatus,
     GlLink,
@@ -174,6 +176,10 @@ export default {
         <instance-vulnerabilities v-else-if="isInstance" :filters="filters" />
         <project-vulnerabilities v-else-if="isProject" :filters="filters" />
         <pipeline-findings v-else-if="isPipeline" :filters="filters" />
+
+        <template #operational-empty-state>
+          <operational-report-not-configured />
+        </template>
       </vulnerability-report-layout>
     </template>
   </div>

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report_layout.vue

@@ -74,7 +74,7 @@ export default {
         :title="$options.i18n.operationalTab"
         :query-param-value="$options.operationalTabParameter"
       >
-        <div></div>
+        <slot name="operational-empty-state"></slot>
       </gl-tab>
     </gl-tabs>
 

ee/app/assets/javascripts/security_dashboard/vulnerability_report_init.js

@@ -34,6 +34,9 @@ export default (el, dashboardType) => {
     pipelineSecurityBuildsFailedCount,
     pipelineSecurityBuildsFailedPath,
     hasJiraVulnerabilitiesIntegrationEnabled,
+    operationalConfigurationPath,
+    operationalEmptyStateSvgPath,
+    operationalHelpPath,
     securityConfigurationPath,
     surveyRequestSvgPath,
     canAdminVulnerability,
@@ -63,6 +66,9 @@ export default (el, dashboardType) => {
     notEnabledScannersHelpPath,
     noPipelineRunScannersHelpPath,
     instanceDashboardSettingsPath,
+    operationalConfigurationPath,
+    operationalEmptyStateSvgPath,
+    operationalHelpPath,
     securityDashboardHelpPath,
     securityConfigurationPath,
     surveyRequestSvgPath,

ee/app/helpers/ee/projects_helper.rb

@@ -172,6 +172,9 @@ module EE
           has_vulnerabilities: 'false',
           has_jira_vulnerabilities_integration_enabled: project.configured_to_create_issues_from_vulnerabilities?.to_s,
           empty_state_svg_path: image_path('illustrations/security-dashboard_empty.svg'),
+          operational_configuration_path: new_project_security_policy_path(@project),
+          operational_empty_state_svg_path: image_path('illustrations/security-dashboard_empty.svg'),
+          operational_help_path: help_page_path('user/application_security/policies/index'),
           survey_request_svg_path: image_path('illustrations/security-dashboard_empty.svg'),
           security_dashboard_help_path: help_page_path('user/application_security/security_dashboard/index'),
           no_vulnerabilities_svg_path: image_path('illustrations/issues.svg'),
@@ -191,6 +194,9 @@ module EE
           dashboard_documentation: help_page_path('user/application_security/security_dashboard/index'),
           not_enabled_scanners_help_path: help_page_path('user/application_security/index', anchor: 'quick-start'),
           no_pipeline_run_scanners_help_path: new_project_pipeline_path(project),
+          operational_configuration_path: new_project_security_policy_path(@project),
+          operational_empty_state_svg_path: image_path('illustrations/security-dashboard_empty.svg'),
+          operational_help_path: help_page_path('user/application_security/policies/index'),
           security_dashboard_help_path: help_page_path('user/application_security/security_dashboard/index'),
           auto_fix_documentation: help_page_path('user/application_security/index', anchor: 'auto-fix-merge-requests'),
           auto_fix_mrs_path: project_merge_requests_path(@project, label_name: 'GitLab-auto-fix'),

ee/app/helpers/groups/security_features_helper.rb

@@ -22,6 +22,8 @@ module Groups::SecurityFeaturesHelper
       group_full_path: group.full_path,
       no_vulnerabilities_svg_path: image_path('illustrations/issues.svg'),
       empty_state_svg_path: image_path('illustrations/security-dashboard-empty-state.svg'),
+      operational_empty_state_svg_path: image_path('illustrations/security-dashboard_empty.svg'),
+      operational_help_path: help_page_path('user/application_security/policies/index'),
       survey_request_svg_path: image_path('illustrations/security-dashboard_empty.svg'),
       dashboard_documentation: help_page_path('user/application_security/security_dashboard/index'),
       vulnerabilities_export_endpoint: expose_path(api_v4_security_groups_vulnerability_exports_path(id: group.id)),

ee/app/helpers/security_helper.rb

@@ -8,6 +8,8 @@ module SecurityHelper
       empty_dashboard_state_svg_path: image_path('illustrations/security-dashboard-empty-state.svg'),
       empty_state_svg_path: image_path('illustrations/operations-dashboard_empty.svg'),
       survey_request_svg_path: image_path('illustrations/security-dashboard_empty.svg'),
+      operational_empty_state_svg_path: image_path('illustrations/security-dashboard_empty.svg'),
+      operational_help_path: help_page_path('user/application_security/policies/index'),
       project_add_endpoint: security_projects_path,
       project_list_endpoint: security_projects_path,
       instance_dashboard_settings_path: settings_security_dashboard_path,

ee/spec/frontend/security_dashboard/components/shared/empty_states/__snapshots__/operational_report_not_configured_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`reports not configured empty state matches the snapshot for groups 1`] = `
+<gl-empty-state-stub
+  description="Manage and track vulnerabilities identified in your Kubernetes clusters. Vulnerabilities appear here after you create a scan execution policy in any project in this group."
+  primarybuttonlink="/operational-configuration"
+  primarybuttontext=""
+  secondarybuttonlink="/operational-help"
+  secondarybuttontext="Learn more"
+  svgpath="/operational-placeholder.svg"
+  title="Monitor vulnerabilities across clusters"
+/>
+`;
+
+exports[`reports not configured empty state matches the snapshot for instances 1`] = `
+<gl-empty-state-stub
+  description="Manage and track vulnerabilities identified in your Kubernetes clusters. Vulnerabilities appear here after you create a scan execution policy in any project in this instance."
+  primarybuttonlink="/operational-configuration"
+  primarybuttontext=""
+  secondarybuttonlink="/operational-help"
+  secondarybuttontext="Learn more"
+  svgpath="/operational-placeholder.svg"
+  title="Monitor vulnerabilities across clusters"
+/>
+`;
+
+exports[`reports not configured empty state matches the snapshot for projects 1`] = `
+<gl-empty-state-stub
+  description="Manage and track vulnerabilities identified in your Kubernetes clusters. Vulnerabilities appear here after you create a scan execution policy in this project."
+  primarybuttonlink="/operational-configuration"
+  primarybuttontext="Create policy"
+  secondarybuttonlink="/operational-help"
+  secondarybuttontext="Learn more"
+  svgpath="/operational-placeholder.svg"
+  title="Monitor vulnerabilities across clusters"
+/>
+`;

ee/spec/frontend/security_dashboard/components/shared/empty_states/operational_report_not_configured_spec.js

+import { shallowMount } from '@vue/test-utils';
+import OperationalReportNotConfigured from 'ee/security_dashboard/components/shared/empty_states/operational_report_not_configured.vue';
+
+describe('reports not configured empty state', () => {
+  let wrapper;
+  const operationalConfigurationPath = '/operational-configuration';
+  const operationalEmptyStateSvgPath = '/operational-placeholder.svg';
+  const operationalHelpPath = '/operational-help';
+
+  const createComponent = (dashboardType = 'project') => {
+    wrapper = shallowMount(OperationalReportNotConfigured, {
+      provide: {
+        dashboardType,
+        operationalConfigurationPath,
+        operationalEmptyStateSvgPath,
+        operationalHelpPath,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('matches the snapshot for projects', () => {
+    createComponent();
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('matches the snapshot for groups', () => {
+    createComponent('group');
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('matches the snapshot for instances', () => {
+    createComponent('instance');
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

ee/spec/helpers/groups/security_features_helper_spec.rb

@@ -72,6 +72,8 @@ RSpec.describe Groups::SecurityFeaturesHelper do
         group_full_path: group.full_path,
         no_vulnerabilities_svg_path: helper.image_path('illustrations/issues.svg'),
         empty_state_svg_path: helper.image_path('illustrations/security-dashboard-empty-state.svg'),
+        operational_empty_state_svg_path: helper.image_path('illustrations/security-dashboard_empty.svg'),
+        operational_help_path: help_page_path('user/application_security/policies/index'),
         survey_request_svg_path: helper.image_path('illustrations/security-dashboard_empty.svg'),
         dashboard_documentation: help_page_path('user/application_security/security_dashboard/index'),
         false_positive_doc_url: help_page_path('user/application_security/vulnerabilities/index'),

ee/spec/helpers/projects_helper_spec.rb

@@ -167,6 +167,9 @@ RSpec.describe ProjectsHelper do
           has_vulnerabilities: 'false',
           has_jira_vulnerabilities_integration_enabled: 'true',
           empty_state_svg_path: start_with('/assets/illustrations/security-dashboard_empty'),
+          operational_configuration_path: new_project_security_policy_path(project),
+          operational_empty_state_svg_path: kind_of(String),
+          operational_help_path: kind_of(String),
           survey_request_svg_path: start_with('/assets/illustrations/security-dashboard_empty'),
           security_dashboard_help_path: '/help/user/application_security/security_dashboard/index',
           project_full_path: project.full_path,
@@ -188,6 +191,9 @@ RSpec.describe ProjectsHelper do
           vulnerabilities_export_endpoint: "/api/v4/security/projects/#{project.id}/vulnerability_exports",
           no_vulnerabilities_svg_path: start_with('/assets/illustrations/issues-'),
           empty_state_svg_path: start_with('/assets/illustrations/security-dashboard-empty-state'),
+          operational_configuration_path: new_project_security_policy_path(project),
+          operational_empty_state_svg_path: kind_of(String),
+          operational_help_path: kind_of(String),
           survey_request_svg_path: start_with('/assets/illustrations/security-dashboard_empty'),
           dashboard_documentation: '/help/user/application_security/security_dashboard/index',
           false_positive_doc_url: help_page_path('user/application_security/vulnerabilities/index'),

ee/spec/helpers/security_helper_spec.rb

@@ -15,6 +15,8 @@ RSpec.describe SecurityHelper do
         no_vulnerabilities_svg_path: image_path('illustrations/issues.svg'),
         empty_dashboard_state_svg_path: image_path('illustrations/security-dashboard-empty-state.svg'),
         empty_state_svg_path: image_path('illustrations/operations-dashboard_empty.svg'),
+        operational_empty_state_svg_path: image_path('illustrations/security-dashboard_empty.svg'),
+        operational_help_path: help_page_path('user/application_security/policies/index'),
         survey_request_svg_path: image_path('illustrations/security-dashboard_empty.svg'),
         project_add_endpoint: security_projects_path,
         project_list_endpoint: security_projects_path,

locale/gitlab.pot

@@ -30434,6 +30434,9 @@ msgstr ""
 msgid "SecurityReports|Create issue"
 msgstr ""
 
+msgid "SecurityReports|Create policy"
+msgstr ""
+
 msgid "SecurityReports|Development vulnerabilities"
 msgstr ""
 
@@ -30491,6 +30494,15 @@ msgstr ""
 msgid "SecurityReports|Manage and track vulnerabilities identified in projects within your group. Vulnerabilities in projects are shown here when security testing is configured."
 msgstr ""
 
+msgid "SecurityReports|Manage and track vulnerabilities identified in your Kubernetes clusters. Vulnerabilities appear here after you create a scan execution policy in any project in this group."
+msgstr ""
+
+msgid "SecurityReports|Manage and track vulnerabilities identified in your Kubernetes clusters. Vulnerabilities appear here after you create a scan execution policy in any project in this instance."
+msgstr ""
+
+msgid "SecurityReports|Manage and track vulnerabilities identified in your Kubernetes clusters. Vulnerabilities appear here after you create a scan execution policy in this project."
+msgstr ""
+
 msgid "SecurityReports|Manage and track vulnerabilities identified in your project. Vulnerabilities are shown here when security testing is configured."
 msgstr ""
 
@@ -30500,6 +30512,9 @@ msgstr ""
 msgid "SecurityReports|Maximum selected projects limit reached"
 msgstr ""
 
+msgid "SecurityReports|Monitor vulnerabilities across clusters"
+msgstr ""
+
 msgid "SecurityReports|Monitor vulnerabilities in all of your projects"
 msgstr ""