Update policy list root file to be malleable

- update security_policies_list.js to be used
  for more than just project-level policies
- create group-level policy list page
- update tests

ee/app/assets/javascripts/pages/groups/security/policies/index/index.js

+import initSecurityPoliciesList from 'ee/threat_monitoring/security_policies_list';
+import { NAMESPACE_TYPES } from 'ee/threat_monitoring/constants';
+
+initSecurityPoliciesList(
+  document.getElementById('js-group-security-policies-list'),
+  NAMESPACE_TYPES.GROUP,
+);

ee/app/assets/javascripts/pages/projects/security/policies/index/index.js

 import initSecurityPoliciesList from 'ee/threat_monitoring/security_policies_list';
+import { NAMESPACE_TYPES } from 'ee/threat_monitoring/constants';
 
-initSecurityPoliciesList();
+initSecurityPoliciesList(
+  document.getElementById('js-security-policies-list'),
+  NAMESPACE_TYPES.PROJECT,
+);

ee/app/assets/javascripts/threat_monitoring/components/policies/policies_list.vue

@@ -9,14 +9,15 @@ import {
   GlTooltipDirective,
 } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
-import { PREDEFINED_NETWORK_POLICIES } from 'ee/threat_monitoring/constants';
+import { NAMESPACE_TYPES, PREDEFINED_NETWORK_POLICIES } from 'ee/threat_monitoring/constants';
 import createFlash from '~/flash';
 import { getTimeago } from '~/lib/utils/datetime_utility';
 import { setUrlFragment, mergeUrlParams } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import networkPoliciesQuery from '../../graphql/queries/network_policies.query.graphql';
-import scanExecutionPoliciesQuery from '../../graphql/queries/scan_execution_policies.query.graphql';
+import projectScanExecutionPoliciesQuery from '../../graphql/queries/project_scan_execution_policies.query.graphql';
+import groupScanExecutionPoliciesQuery from '../../graphql/queries/group_scan_execution_policies.query.graphql';
 import scanResultPoliciesQuery from '../../graphql/queries/scan_result_policies.query.graphql';
 import { getPolicyType } from '../../utils';
 import { POLICY_TYPE_COMPONENT_OPTIONS, POLICY_TYPE_OPTIONS } from '../constants';
@@ -60,7 +61,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   mixins: [glFeatureFlagMixin()],
-  inject: ['documentationPath', 'projectPath', 'newPolicyPath'],
+  inject: ['documentationPath', 'groupPath', 'projectPath', 'namespaceType', 'newPolicyPath'],
   props: {
     shouldUpdatePolicyList: {
       type: Boolean,
@@ -88,14 +89,25 @@ export default {
       },
       error: createPolicyFetchError,
       skip() {
-        return !this.hasEnvironment || !this.shouldShowNetworkPolicies;
+        return (
+          !this.hasEnvironment ||
+          !this.shouldShowNetworkPolicies ||
+          this.namespaceType !== NAMESPACE_TYPES.PROJECT
+        );
       },
     },
     scanExecutionPolicies: {
-      query: scanExecutionPoliciesQuery,
+      query() {
+        switch (this.namespaceType) {
+          case NAMESPACE_TYPES.GROUP:
+            return groupScanExecutionPoliciesQuery;
+          default:
+            return projectScanExecutionPoliciesQuery;
+        }
+      },
       variables() {
         return {
-          fullPath: this.projectPath,
+          fullPath: this.projectPath || this.groupPath,
         };
       },
       update(data) {
@@ -114,6 +126,9 @@ export default {
         return data?.project?.scanResultPolicies?.nodes ?? [];
       },
       error: createPolicyFetchError,
+      skip() {
+        return this.namespaceType !== NAMESPACE_TYPES.PROJECT;
+      },
     },
   },
   data() {

ee/app/assets/javascripts/threat_monitoring/constants.js

@@ -45,3 +45,8 @@ spec:
 export const ALL_ENVIRONMENT_NAME = s__('ThreatMonitoring|All Environments');
 
 export const PAGE_SIZE = 20;
+
+export const NAMESPACE_TYPES = {
+  PROJECT: 'project',
+  GROUP: 'group',
+};

ee/app/assets/javascripts/threat_monitoring/graphql/queries/group_scan_execution_policies.query.graphql

+query groupScanExecutionPolicies($fullPath: ID!) {
+  group(fullPath: $fullPath) @client {
+    id
+    scanExecutionPolicies {
+      nodes {
+        name
+        yaml
+        enabled
+        updatedAt
+      }
+    }
+  }
+}

ee/app/assets/javascripts/threat_monitoring/graphql/queries/scan_execution_policies.query.graphql → ee/app/assets/javascripts/threat_monitoring/graphql/queries/project_scan_execution_policies.query.graphql

-query scanExecutionPolicies($fullPath: ID!) {
+query projectScanExecutionPolicies($fullPath: ID!) {
   project(fullPath: $fullPath) {
     id
     scanExecutionPolicies {

ee/app/assets/javascripts/threat_monitoring/security_policies_list.js

@@ -12,8 +12,7 @@ const apolloProvider = new VueApollo({
   defaultClient: createDefaultClient(),
 });
 
-export default () => {
-  const el = document.querySelector('#js-security-policies-list');
+export default (el, namespaceType) => {
   const {
     assignedPolicyProject,
     disableSecurityPolicyProject,
@@ -22,6 +21,7 @@ export default () => {
     emptyFilterSvgPath,
     emptyListSvgPath,
     documentationPath,
+    groupPath,
     newPolicyPath,
     projectPath,
   } = el.dataset;
@@ -52,6 +52,8 @@ export default () => {
       projectPath,
       emptyFilterSvgPath,
       emptyListSvgPath,
+      groupPath,
+      namespaceType,
     },
     render(createElement) {
       return createElement(SecurityPoliciesApp);

ee/app/views/groups/security/policies/index.html.haml

 - breadcrumb_title _("Policies")
+- disable_security_policy_project = !can_update_security_orchestration_policy_project?(group)
 - @content_wrapper_class = 'js-security-policies-container-wrapper'
 
 #js-group-security-policies-list{ data: { group_path: group.full_path,
+  assigned_policy_project: assigned_policy_project(group).to_json,
+  disable_security_policy_project: disable_security_policy_project.to_s,
+  new_policy_path: new_group_security_policy_path(group),
+  empty_filter_svg_path: image_path('illustrations/issues.svg'),
+  empty_list_svg_path: image_path('illustrations/security-dashboard_empty.svg'),
   documentation_path: help_page_path('user/application_security/policies/index.md') } }

ee/spec/frontend/threat_monitoring/components/policies/policies_list_spec.js

@@ -5,9 +5,9 @@ import VueApollo from 'vue-apollo';
 import { POLICY_TYPE_OPTIONS } from 'ee/threat_monitoring/components/constants';
 import PoliciesList from 'ee/threat_monitoring/components/policies/policies_list.vue';
 import PolicyDrawer from 'ee/threat_monitoring/components/policy_drawer/policy_drawer.vue';
-import { PREDEFINED_NETWORK_POLICIES } from 'ee/threat_monitoring/constants';
+import { NAMESPACE_TYPES, PREDEFINED_NETWORK_POLICIES } from 'ee/threat_monitoring/constants';
 import networkPoliciesQuery from 'ee/threat_monitoring/graphql/queries/network_policies.query.graphql';
-import scanExecutionPoliciesQuery from 'ee/threat_monitoring/graphql/queries/scan_execution_policies.query.graphql';
+import projectScanExecutionPoliciesQuery from 'ee/threat_monitoring/graphql/queries/project_scan_execution_policies.query.graphql';
 import scanResultPoliciesQuery from 'ee/threat_monitoring/graphql/queries/scan_result_policies.query.graphql';
 import createStore from 'ee/threat_monitoring/store';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -16,7 +16,7 @@ import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_help
 import waitForPromises from 'helpers/wait_for_promises';
 import {
   networkPolicies,
-  scanExecutionPolicies,
+  projectScanExecutionPolicies,
   scanResultPolicies,
 } from '../../mocks/mock_apollo';
 import {
@@ -27,7 +27,8 @@ import {
 
 Vue.use(VueApollo);
 
-const fullPath = 'project/path';
+const projectFullPath = 'project/path';
+const groupFullPath = 'group/path';
 const environments = [
   {
     id: 2,
@@ -39,11 +40,13 @@ const environments = [
   },
 ];
 const networkPoliciesSpy = networkPolicies(mockNetworkPoliciesResponse);
-const scanExecutionPoliciesSpy = scanExecutionPolicies(mockScanExecutionPoliciesResponse);
+const projectScanExecutionPoliciesSpy = projectScanExecutionPolicies(
+  mockScanExecutionPoliciesResponse,
+);
 const scanResultPoliciesSpy = scanResultPolicies(mockScanResultPoliciesResponse);
 const defaultRequestHandlers = {
   networkPolicies: networkPoliciesSpy,
-  scanExecutionPolicies: scanExecutionPoliciesSpy,
+  projectScanExecutionPolicies: projectScanExecutionPoliciesSpy,
   scanResultPolicies: scanResultPoliciesSpy,
 };
 const pendingHandler = jest.fn(() => new Promise(() => {}));
@@ -86,13 +89,15 @@ describe('PoliciesList component', () => {
           store,
           provide: {
             documentationPath: 'path/to/docs',
+            namespaceType: NAMESPACE_TYPES.PROJECT,
             newPolicyPath: 'path/to/policy',
-            projectPath: fullPath,
+            groupPath: undefined,
+            projectPath: projectFullPath,
             glFeatures: { scanResultPolicy: true },
           },
           apolloProvider: createMockApollo([
             [networkPoliciesQuery, requestHandlers.networkPolicies],
-            [scanExecutionPoliciesQuery, requestHandlers.scanExecutionPolicies],
+            [projectScanExecutionPoliciesQuery, requestHandlers.projectScanExecutionPolicies],
             [scanResultPoliciesQuery, requestHandlers.scanResultPolicies],
           ]),
           stubs: {
@@ -149,10 +154,13 @@ describe('PoliciesList component', () => {
     it('fetches policies', () => {
       expect(requestHandlers.networkPolicies).toHaveBeenCalledWith({
         environmentId: environments[0].global_id,
-        fullPath,
+        fullPath: projectFullPath,
+      });
+      expect(requestHandlers.projectScanExecutionPolicies).toHaveBeenCalledWith({
+        fullPath: projectFullPath,
       });
-      expect(requestHandlers.scanExecutionPolicies).toHaveBeenCalledWith({
-        fullPath,
+      expect(requestHandlers.scanResultPolicies).toHaveBeenCalledWith({
+        fullPath: projectFullPath,
       });
     });
 
@@ -234,12 +242,12 @@ describe('PoliciesList component', () => {
     });
 
     it('does emit `update-policy-list` and refetch scan execution policies on `shouldUpdatePolicyList` change to `false`', async () => {
-      expect(scanExecutionPoliciesSpy).toHaveBeenCalledTimes(1);
+      expect(projectScanExecutionPoliciesSpy).toHaveBeenCalledTimes(1);
       expect(wrapper.emitted('update-policy-list')).toBeUndefined();
       wrapper.setProps({ shouldUpdatePolicyList: true });
       await nextTick();
       expect(wrapper.emitted('update-policy-list')).toStrictEqual([[false]]);
-      expect(scanExecutionPoliciesSpy).toHaveBeenCalledTimes(2);
+      expect(projectScanExecutionPoliciesSpy).toHaveBeenCalledTimes(2);
     });
 
     it('does not emit `update-policy-list` or refetch scan execution policies on `shouldUpdatePolicyList` change to `false`', async () => {
@@ -248,7 +256,26 @@ describe('PoliciesList component', () => {
       wrapper.setProps({ shouldUpdatePolicyList: false });
       await nextTick();
       expect(wrapper.emitted('update-policy-list')).toStrictEqual([[false]]);
-      expect(scanExecutionPoliciesSpy).toHaveBeenCalledTimes(2);
+      expect(projectScanExecutionPoliciesSpy).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('group-level policies', () => {
+    beforeEach(async () => {
+      mountShallowWrapper({
+        provide: {
+          groupPath: groupFullPath,
+          projectPath: undefined,
+          namespaceType: NAMESPACE_TYPES.GROUP,
+        },
+      });
+      await waitForPromises();
+    });
+
+    it('fetches policies', () => {
+      expect(requestHandlers.networkPolicies).not.toHaveBeenCalled();
+      expect(requestHandlers.projectScanExecutionPolicies).not.toHaveBeenCalled();
+      expect(requestHandlers.scanResultPolicies).not.toHaveBeenCalled();
     });
   });
 

ee/spec/frontend/threat_monitoring/mocks/mock_apollo.js

@@ -46,7 +46,7 @@ export const networkPolicies = (nodes) =>
     },
   });
 
-export const scanExecutionPolicies = (nodes) =>
+export const projectScanExecutionPolicies = (nodes) =>
   jest.fn().mockResolvedValue({
     data: {
       project: {