Copy the project manager to the settings page

- Enable link on the left nav bar
- Write tests

ee/app/assets/javascripts/pages/security/dashboard/settings/index.js

-import initSecurityDashboardSettings from 'ee/security_dashboard/instance_dashboard_settings_init';
+import initInstanceSecurityDashboardSettings from 'ee/security_dashboard/instance_dashboard_settings_init';
 
 document.addEventListener('DOMContentLoaded', () => {
-  initSecurityDashboardSettings(document.getElementById('js-security'));
+  initInstanceSecurityDashboardSettings(document.getElementById('js-security'));
 });

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

+<script>
+import { GlAlert } from '@gitlab/ui';
+import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
+import projectsQuery from 'ee/security_dashboard/graphql/get_instance_security_dashboard_projects.query.graphql';
+import ProjectManager from './first_class_project_manager/project_manager.vue';
+
+export default {
+  components: {
+    ProjectManager,
+    SecurityDashboardLayout,
+    GlAlert,
+  },
+  apollo: {
+    projects: {
+      query: projectsQuery,
+      update(data) {
+        return data.instanceSecurityDashboard.projects.nodes;
+      },
+      error() {
+        this.hasError = true;
+      },
+    },
+  },
+  data() {
+    return {
+      projects: [],
+      hasError: false,
+    };
+  },
+};
+</script>
+
+<template>
+  <security-dashboard-layout>
+    <gl-alert v-if="hasError" variant="danger">
+      {{ __('Something went wrong, unable to get projects') }}
+    </gl-alert>
+    <div v-else class="gl-display-flex gl-justify-content-center">
+      <project-manager :projects="projects" />
+    </div>
+  </security-dashboard-layout>
+</template>

ee/app/assets/javascripts/security_dashboard/components/first_class_project_manager/project_manager.vue

@@ -21,7 +21,8 @@ export default {
   props: {
     isManipulatingProjects: {
       type: Boolean,
-      required: true,
+      required: false,
+      default: false,
     },
     projects: {
       type: Array,

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

 import Vue from 'vue';
-import UnavailableState from './components/unavailable_state.vue';
+import apolloProvider from './graphql/provider';
+import InstanceSecurityDashboardSettings from './components/first_class_instance_security_dashboard_settings.vue';
 
 export default el => {
+  if (!el) {
+    return null;
+  }
+
   return new Vue({
     el,
+    apolloProvider,
     render(createElement) {
-      return createElement(UnavailableState, {
-        props: {
-          link: el.dataset.dashboardDocumentation,
-          svgPath: el.dataset.emptyStateSvgPath,
-        },
-      });
+      return createElement(InstanceSecurityDashboardSettings);
     },
   });
 };

ee/app/views/layouts/nav/sidebar/_security.html.haml

@@ -13,15 +13,11 @@
               = sprite_icon('dashboard')
             %span.nav-item-name
               = _('Security Dashboard')
-        -# This part will be enabled in a follow up MR. The follow up MR will be submitted
-        -# right after this MR is merged. The reason to split the MR into two pieces is
-        -# to reduce the size of the MR and speed up the review process.
-        -#
-        -# = nav_link(path: %w[dashboard#settings]) do
-        -#   = link_to security_settings_dashboard_path, class: 'shortcuts-project rspec-project-link' do
-        -#     .nav-icon-container
-        -#       = sprite_icon('settings')
-        -#     %span.nav-item-name
-        -#       = _('Settings')
+        = nav_link(path: %w[dashboard#settings]) do
+          = link_to security_settings_dashboard_path, class: 'shortcuts-project rspec-project-link' do
+            .nav-icon-container
+              = sprite_icon('settings')
+            %span.nav-item-name
+              = _('Settings')
 
     = render 'shared/sidebar_toggle_button'

ee/app/views/security/dashboard/settings.html.haml

 - page_title _('Security Dashboard - Settings')
 - @hide_breadcrumbs = true
 
-#js-security{ data: instance_security_dashboard_data }
+#js-security

ee/changelogs/unreleased/230413-move-settings-page-fe.yml

+---
+title: Create a standalone settings page for the instance security dashboard
+merge_request: 38965
+author:
+type: changed

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

+import { shallowMount } from '@vue/test-utils';
+import { GlAlert } from '@gitlab/ui';
+import FirstClassInstanceDashboardSettings from 'ee/security_dashboard/components/first_class_instance_security_dashboard_settings.vue';
+import ProjectManager from 'ee/security_dashboard/components/first_class_project_manager/project_manager.vue';
+
+describe('First Class Instance Dashboard Component', () => {
+  let wrapper;
+
+  const defaultMocks = ({ loading = false } = {}) => ({
+    $apollo: { queries: { projects: { loading } } },
+  });
+
+  const findProjectManager = () => wrapper.find(ProjectManager);
+  const findAlert = () => wrapper.find(GlAlert);
+
+  const createWrapper = ({ mocks = defaultMocks(), data = {} }) => {
+    return shallowMount(FirstClassInstanceDashboardSettings, {
+      mocks,
+      data() {
+        return data;
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when there is no error', () => {
+    beforeEach(() => {
+      wrapper = createWrapper({});
+    });
+
+    it('displays the project manager', () => {
+      expect(findProjectManager().exists()).toBe(true);
+    });
+
+    it('does not render the alert component', () => {
+      expect(findAlert().exists()).toBe(false);
+    });
+  });
+
+  describe('when there is a loading error', () => {
+    beforeEach(() => {
+      wrapper = createWrapper({ data: { hasError: true } });
+    });
+
+    it('does not display the project manager', () => {
+      expect(findProjectManager().exists()).toBe(false);
+    });
+
+    it('renders the alert component', () => {
+      expect(findAlert().text()).toBe('Something went wrong, unable to get projects');
+    });
+  });
+});