Update new "Duplicate dashboard" button in action menu

Update the new button in the action menu to allow any of of the box
dashboard to be duplicated.

app/assets/javascripts/monitoring/components/dashboard_header.vue

@@ -129,8 +129,8 @@ export default {
       'operationsSettingsPath',
     ]),
     ...mapGetters('monitoringDashboard', ['selectedDashboard', 'filteredEnvironments']),
-    isSystemDashboard() {
-      return this.selectedDashboard?.system_dashboard;
+    isOutOfTheBoxDashboard() {
+      return this.selectedDashboard?.out_of_the_box_dashboard;
     },
     shouldShowEnvironmentsDropdownNoMatchedMsg() {
       return !this.environmentsLoading && this.filteredEnvironments.length === 0;
@@ -417,7 +417,7 @@ export default {
             :project-path="projectPath"
           />
 
-          <template v-if="isSystemDashboard">
+          <template v-if="isOutOfTheBoxDashboard">
             <gl-new-dropdown-divider />
             <gl-new-dropdown-item
               ref="duplicateDashboardItem"

app/assets/javascripts/monitoring/components/dashboards_dropdown.vue

@@ -44,8 +44,8 @@ export default {
   computed: {
     ...mapState('monitoringDashboard', ['allDashboards']),
     ...mapGetters('monitoringDashboard', ['selectedDashboard']),
-    isSystemDashboard() {
-      return this.selectedDashboard?.system_dashboard;
+    isOutOfTheBoxDashboard() {
+      return this.selectedDashboard?.out_of_the_box_dashboard;
     },
     selectedDashboardText() {
       return this.selectedDashboard?.display_name;
@@ -139,7 +139,7 @@ export default {
            This Duplicate Dashboard item will be removed from the dashboards dropdown 
            in https://gitlab.com/gitlab-org/gitlab/-/issues/223223
       -->
-      <template v-if="isSystemDashboard">
+      <template v-if="isOutOfTheBoxDashboard">
         <gl-dropdown-divider />
 
         <gl-dropdown-item v-gl-modal="modalId" data-testid="duplicateDashboardItem">

changelogs/unreleased/astoicescu-allowOotbDashboardsToBeCloned.yml

+---
+title: Allow self monitoring dashboard to be duplicated
+merge_request: 36433
+author:
+type: fixed

spec/frontend/monitoring/components/dashboard_header_spec.js

@@ -4,7 +4,11 @@ import DashboardHeader from '~/monitoring/components/dashboard_header.vue';
 import DuplicateDashboardModal from '~/monitoring/components/duplicate_dashboard_modal.vue';
 import CreateDashboardModal from '~/monitoring/components/create_dashboard_modal.vue';
 import { setupAllDashboards } from '../store_utils';
-import { dashboardGitResponse, dashboardHeaderProps } from '../mock_data';
+import {
+  dashboardGitResponse,
+  selfMonitoringDashboardGitResponse,
+  dashboardHeaderProps,
+} from '../mock_data';
 import { redirectTo, mergeUrlParams } from '~/lib/utils/url_utility';
 
 jest.mock('~/lib/utils/url_utility', () => ({
@@ -95,28 +99,47 @@ describe('Dashboard header', () => {
       });
     });
 
-    describe('when the selected dashboard is the system dashboard', () => {
-      it('contains a "Create New" menu item and a "Duplicate Dashboard" menu item', () => {
-        store.state.monitoringDashboard.projectPath = 'https://path/to/project';
-        setupAllDashboards(store);
-
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findCreateDashboardMenuItem().exists()).toBe(true);
-          expect(findCreateDashboardDuplicateItem().exists()).toBe(true);
+    const duplicableCases = [
+      null, // When no path is specified, it uses the default dashboard path.
+      dashboardGitResponse[0].path,
+      dashboardGitResponse[2].path,
+      selfMonitoringDashboardGitResponse[0].path,
+    ];
+
+    describe.each(duplicableCases)(
+      'when the selected dashboard can be duplicated',
+      dashboardPath => {
+        it('contains a "Create New" menu item and a "Duplicate Dashboard" menu item', () => {
+          store.state.monitoringDashboard.projectPath = 'https://path/to/project';
+          setupAllDashboards(store, dashboardPath);
+
+          return wrapper.vm.$nextTick().then(() => {
+            expect(findCreateDashboardMenuItem().exists()).toBe(true);
+            expect(findCreateDashboardDuplicateItem().exists()).toBe(true);
+          });
         });
-      });
-    });
-
-    describe('when the selected dashboard is not the system dashboard', () => {
-      it('contains a "Create New" menu item and no "Duplicate Dashboard" menu item', () => {
-        store.state.monitoringDashboard.projectPath = 'https://path/to/project';
-
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findCreateDashboardMenuItem().exists()).toBe(true);
-          expect(findCreateDashboardDuplicateItem().exists()).toBe(false);
+      },
+    );
+
+    const nonDuplicableCases = [
+      dashboardGitResponse[1].path,
+      selfMonitoringDashboardGitResponse[1].path,
+    ];
+
+    describe.each(nonDuplicableCases)(
+      'when the selected dashboard cannot be duplicated',
+      dashboardPath => {
+        it('contains a "Create New" menu item and no "Duplicate Dashboard" menu item', () => {
+          store.state.monitoringDashboard.projectPath = 'https://path/to/project';
+          setupAllDashboards(store, dashboardPath);
+
+          return wrapper.vm.$nextTick().then(() => {
+            expect(findCreateDashboardMenuItem().exists()).toBe(true);
+            expect(findCreateDashboardDuplicateItem().exists()).toBe(false);
+          });
         });
-      });
-    });
+      },
+    );
   });
 
   describe('actions menu modals', () => {

spec/frontend/monitoring/components/dashboards_dropdown_spec.js

@@ -3,7 +3,7 @@ import { GlDropdownItem, GlIcon } from '@gitlab/ui';
 
 import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
 
-import { dashboardGitResponse } from '../mock_data';
+import { dashboardGitResponse, selfMonitoringDashboardGitResponse } from '../mock_data';
 
 const defaultBranch = 'master';
 const modalId = 'duplicateDashboardModalId';
@@ -150,12 +150,18 @@ describe('DashboardsDropdown', () => {
     });
   });
 
-  describe('when the selected dashboard can be duplicated', () => {
+  const duplicableCases = [
+    dashboardGitResponse[0],
+    dashboardGitResponse[2],
+    selfMonitoringDashboardGitResponse[0],
+  ];
+
+  describe.each(duplicableCases)('when the selected dashboard can be duplicated', dashboard => {
     let duplicateDashboardAction;
     let modalDirective;
 
     beforeEach(() => {
-      [mockSelectedDashboard] = dashboardGitResponse;
+      mockSelectedDashboard = dashboard;
       modalDirective = jest.fn();
       duplicateDashboardAction = jest.fn().mockResolvedValue();
 
@@ -205,20 +211,25 @@ describe('DashboardsDropdown', () => {
     });
   });
 
-  describe('when the selected dashboard can not be duplicated', () => {
-    beforeEach(() => {
-      [, mockSelectedDashboard] = dashboardGitResponse;
+  const nonDuplicableCases = [dashboardGitResponse[1], selfMonitoringDashboardGitResponse[1]];
 
-      wrapper = createComponent();
-    });
+  describe.each(nonDuplicableCases)(
+    'when the selected dashboard can not be duplicated',
+    dashboard => {
+      beforeEach(() => {
+        mockSelectedDashboard = dashboard;
 
-    it('displays a dropdown list item for each dashboard, but no list item for "duplicate dashboard"', () => {
-      const item = wrapper.findAll('[data-testid="duplicateDashboardItem"]');
+        wrapper = createComponent();
+      });
 
-      expect(findItems()).toHaveLength(dashboardGitResponse.length);
-      expect(item.length).toBe(0);
-    });
-  });
+      it('displays a dropdown list item for each dashboard, but no list item for "duplicate dashboard"', () => {
+        const item = wrapper.findAll('[data-testid="duplicateDashboardItem"]');
+
+        expect(findItems()).toHaveLength(dashboardGitResponse.length);
+        expect(item.length).toBe(0);
+      });
+    },
+  );
 
   describe('when a dashboard gets selected by the user', () => {
     beforeEach(() => {

spec/frontend/monitoring/mock_data.js

@@ -12,6 +12,7 @@ const customDashboardsData = new Array(30).fill(null).map((_, idx) => ({
   display_name: `Custom Dashboard ${idx}`,
   can_edit: true,
   system_dashboard: false,
+  out_of_the_box_dashboard: false,
   project_blob_path: `${mockProjectDir}/blob/master/dashboards/.gitlab/dashboards/dashboard_${idx}.yml`,
   path: `.gitlab/dashboards/dashboard_${idx}.yml`,
   starred: false,
@@ -302,6 +303,7 @@ export const dashboardGitResponse = [
     display_name: 'Default',
     can_edit: false,
     system_dashboard: true,
+    out_of_the_box_dashboard: true,
     project_blob_path: null,
     path: 'config/prometheus/common_metrics.yml',
     starred: false,
@@ -312,6 +314,44 @@ export const dashboardGitResponse = [
     display_name: 'dashboard.yml',
     can_edit: true,
     system_dashboard: false,
+    out_of_the_box_dashboard: false,
+    project_blob_path: `${mockProjectDir}/-/blob/master/.gitlab/dashboards/dashboard.yml`,
+    path: '.gitlab/dashboards/dashboard.yml',
+    starred: true,
+    user_starred_path: `${mockProjectDir}/metrics_user_starred_dashboards?dashboard_path=.gitlab/dashboards/dashboard.yml`,
+  },
+  {
+    default: false,
+    display_name: 'Pod Health',
+    can_edit: false,
+    system_dashboard: false,
+    out_of_the_box_dashboard: true,
+    project_blob_path: null,
+    path: 'config/prometheus/pod_metrics.yml',
+    starred: false,
+    user_starred_path: `${mockProjectDir}/metrics_user_starred_dashboards?dashboard_path=config/prometheus/pod_metrics.yml`,
+  },
+  ...customDashboardsData,
+];
+
+export const selfMonitoringDashboardGitResponse = [
+  {
+    default: true,
+    display_name: 'Default',
+    can_edit: false,
+    system_dashboard: false,
+    out_of_the_box_dashboard: true,
+    project_blob_path: null,
+    path: 'config/prometheus/self_monitoring_default.yml',
+    starred: false,
+    user_starred_path: `${mockProjectDir}/metrics_user_starred_dashboards?dashboard_path=config/prometheus/self_monitoring_default.yml`,
+  },
+  {
+    default: false,
+    display_name: 'dashboard.yml',
+    can_edit: true,
+    system_dashboard: false,
+    out_of_the_box_dashboard: false,
     project_blob_path: `${mockProjectDir}/-/blob/master/.gitlab/dashboards/dashboard.yml`,
     path: '.gitlab/dashboards/dashboard.yml',
     starred: true,