Merge branch '354140-non-owner-security-project-button' into 'master'

Add "view policy project" button for non-owners

See merge request gitlab-org/gitlab!82341

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

 <script>
-import { GlAlert, GlSprintf, GlButton } from '@gitlab/ui';
+import { GlAlert, GlButton, GlIcon, GlSprintf } from '@gitlab/ui';
+import { joinPaths } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import { NEW_POLICY_BUTTON_TEXT } from '../constants';
 import ScanNewPolicyModal from './scan_new_policy_modal.vue';
 
 export default {
   components: {
-    GlSprintf,
-    GlButton,
     GlAlert,
+    GlButton,
+    GlIcon,
+    GlSprintf,
     ScanNewPolicyModal,
   },
   inject: [
@@ -24,6 +26,7 @@ export default {
     ),
     newPolicyButtonText: NEW_POLICY_BUTTON_TEXT,
     editPolicyProjectButtonText: s__('SecurityOrchestration|Edit policy project'),
+    viewPolicyProjectButtonText: s__('SecurityOrchestration|View policy project'),
   },
   data() {
     return {
@@ -38,6 +41,9 @@ export default {
     hasAssignedPolicyProject() {
       return Boolean(this.assignedPolicyProject?.id);
     },
+    securityPolicyProjectPath() {
+      return joinPaths('/', this.assignedPolicyProject?.full_path);
+    },
   },
   methods: {
     updateAlertText({ text, variant }) {
@@ -101,6 +107,16 @@ export default {
       >
         {{ $options.i18n.editPolicyProjectButtonText }}
       </gl-button>
+      <gl-button
+        v-else-if="hasAssignedPolicyProject"
+        data-testid="view-project-policy-button"
+        class="gl-mr-4"
+        target="_blank"
+        :href="securityPolicyProjectPath"
+      >
+        <gl-icon name="external-link" />
+        {{ $options.i18n.viewPolicyProjectButtonText }}
+      </gl-button>
       <gl-button
         data-testid="new-policy-button"
         data-qa-selector="new_policy_button"

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

@@ -17,6 +17,7 @@ describe('Policies Header Component', () => {
   const findHeader = () => wrapper.findByRole('heading');
   const findMoreInformationLink = () => wrapper.findComponent(GlButton);
   const findEditPolicyProjectButton = () => wrapper.findByTestId('edit-project-policy-button');
+  const findViewPolicyProjectButton = () => wrapper.findByTestId('view-project-policy-button');
   const findNewPolicyButton = () => wrapper.findByTestId('new-policy-button');
   const findSubheader = () => wrapper.findByTestId('policies-subheader');
 
@@ -58,12 +59,14 @@ describe('Policies Header Component', () => {
       expect(findNewPolicyButton().attributes('href')).toBe(newPolicyPath);
     });
 
-    it('displays the Edit policy project button', () => {
-      expect(findEditPolicyProjectButton().text()).toBe('Edit policy project');
-    });
-
-    it('does not display the alert component by default', () => {
-      expect(findAlert().exists()).toBe(false);
+    it.each`
+      status        | component                       | findFn                         | exists
+      ${'does'}     | ${'edit policy project button'} | ${findEditPolicyProjectButton} | ${true}
+      ${'does not'} | ${'view policy project button'} | ${findViewPolicyProjectButton} | ${false}
+      ${'does not'} | ${'alert component'}            | ${findAlert}                   | ${false}
+      ${'does'}     | ${'header'}                     | ${findHeader}                  | ${true}
+    `('$status display the $component', ({ findFn, exists }) => {
+      expect(findFn().exists()).toBe(exists);
     });
 
     it('mounts the scan new policy modal', () => {
@@ -76,10 +79,6 @@ describe('Policies Header Component', () => {
       expect(findScanNewPolicyModal().props().visible).toBe(true);
     });
 
-    it('displays the header', () => {
-      expect(findHeader().text()).toBe('Policies');
-    });
-
     it('displays the subheader', () => {
       expect(findSubheader().text()).toMatchInterpolatedText(
         'Enforce security for this project. More information.',
@@ -106,12 +105,36 @@ describe('Policies Header Component', () => {
   });
 
   describe('project user', () => {
-    beforeEach(() => {
-      createWrapper({ provide: { disableSecurityPolicyProject: true } });
+    describe('with a security policy project', () => {
+      beforeEach(() => {
+        createWrapper({
+          provide: { assignedPolicyProject: { id: '1' }, disableSecurityPolicyProject: true },
+        });
+      });
+
+      it.each`
+        status        | component                       | findFn                         | exists
+        ${'does not'} | ${'edit policy project button'} | ${findEditPolicyProjectButton} | ${false}
+        ${'does'}     | ${'view policy project button'} | ${findViewPolicyProjectButton} | ${true}
+      `('$status display the $component', ({ findFn, exists }) => {
+        expect(findFn().exists()).toBe(exists);
+      });
     });
 
-    it('does not display the Edit policy project button', () => {
-      expect(findEditPolicyProjectButton().exists()).toBe(false);
+    describe('without a security policy project', () => {
+      beforeEach(() => {
+        createWrapper({
+          provide: { disableSecurityPolicyProject: true },
+        });
+      });
+
+      it.each`
+        component                       | findFn
+        ${'edit policy project button'} | ${findEditPolicyProjectButton}
+        ${'view policy project button'} | ${findViewPolicyProjectButton}
+      `('does not display the $component', ({ findFn }) => {
+        expect(findFn().exists()).toBe(false);
+      });
     });
   });
 });

locale/gitlab.pot

@@ -32758,6 +32758,9 @@ msgstr ""
 msgid "SecurityOrchestration|Update scan policies"
 msgstr ""
 
+msgid "SecurityOrchestration|View policy project"
+msgstr ""
+
 msgid "SecurityOrchestration|a"
 msgstr ""