Add Config History Link to Secure Config Page

app/assets/javascripts/security_configuration/components/redesigned_app.vue

@@ -35,13 +35,27 @@ export default {
       type: Array,
       required: true,
     },
-
+    gitlabCiPresent: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    gitlabCiHistoryPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     latestPipelinePath: {
       type: String,
       required: false,
       default: '',
     },
   },
+  computed: {
+    canViewCiHistory() {
+      return Boolean(this.gitlabCiPresent && this.gitlabCiHistoryPath);
+    },
+  },
 };
 </script>
 
@@ -66,6 +80,11 @@ export default {
                 </template>
               </gl-sprintf>
             </p>
+            <p v-if="canViewCiHistory">
+              <gl-link data-testid="security-view-history-link" :href="gitlabCiHistoryPath">{{
+                $options.i18n.configurationHistory
+              }}</gl-link>
+            </p>
           </template>
 
           <template #features>
@@ -92,6 +111,11 @@ export default {
                 </template>
               </gl-sprintf>
             </p>
+            <p v-if="canViewCiHistory">
+              <gl-link data-testid="compliance-view-history-link" :href="gitlabCiHistoryPath">{{
+                $options.i18n.configurationHistory
+              }}</gl-link>
+            </p>
           </template>
           <template #features>
             <feature-card

app/assets/javascripts/security_configuration/index.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
+import { parseBooleanDataAttributes } from '~/lib/utils/dom_utils';
 import SecurityConfigurationApp from './components/app.vue';
 import { securityFeatures, complianceFeatures } from './components/constants';
 import RedesignedSecurityConfigurationApp from './components/redesigned_app.vue';
@@ -17,7 +18,13 @@ export const initStaticSecurityConfiguration = (el) => {
     defaultClient: createDefaultClient(),
   });
 
-  const { projectPath, upgradePath, features, latestPipelinePath } = el.dataset;
+  const {
+    projectPath,
+    upgradePath,
+    features,
+    latestPipelinePath,
+    gitlabCiHistoryPath,
+  } = el.dataset;
 
   if (gon.features.securityConfigurationRedesign) {
     const { augmentedSecurityFeatures, augmentedComplianceFeatures } = augmentFeatures(
@@ -39,6 +46,8 @@ export const initStaticSecurityConfiguration = (el) => {
             augmentedComplianceFeatures,
             augmentedSecurityFeatures,
             latestPipelinePath,
+            gitlabCiHistoryPath,
+            ...parseBooleanDataAttributes(el, ['gitlabCiPresent']),
           },
         });
       },

spec/frontend/security_configuration/components/redesigned_app_spec.js

@@ -36,6 +36,8 @@ describe('redesigned App component', () => {
   const findTabs = () => wrapper.findAllComponents(GlTab);
   const findByTestId = (id) => wrapper.findByTestId(id);
   const findFeatureCards = () => wrapper.findAllComponents(FeatureCard);
+  const findComplianceViewHistoryLink = () => findByTestId('compliance-view-history-link');
+  const findSecurityViewHistoryLink = () => findByTestId('security-view-history-link');
 
   const securityFeaturesMock = [
     {
@@ -103,6 +105,11 @@ describe('redesigned App component', () => {
     it('should not show latest pipeline link when latestPipelinePath is not defined', () => {
       expect(findByTestId('latest-pipeline-info').exists()).toBe(false);
     });
+
+    it('should not show configuration History Link when gitlabCiPresent & gitlabCiHistoryPath are not defined', () => {
+      expect(findComplianceViewHistoryLink().exists()).toBe(false);
+      expect(findSecurityViewHistoryLink().exists()).toBe(false);
+    });
   });
 
   describe('when given latestPipelinePath props', () => {
@@ -134,4 +141,23 @@ describe('redesigned App component', () => {
       expect(latestPipelineInfoCompliance.find('a').attributes('href')).toBe('test/path');
     });
   });
+
+  describe('given gitlabCiPresent & gitlabCiHistoryPath props', () => {
+    beforeEach(() => {
+      createComponent({
+        augmentedSecurityFeatures: securityFeaturesMock,
+        augmentedComplianceFeatures: complianceFeaturesMock,
+        gitlabCiPresent: true,
+        gitlabCiHistoryPath: 'test/historyPath',
+      });
+    });
+
+    it('should show configuration History Link', () => {
+      expect(findComplianceViewHistoryLink().exists()).toBe(true);
+      expect(findSecurityViewHistoryLink().exists()).toBe(true);
+
+      expect(findComplianceViewHistoryLink().attributes('href')).toBe('test/historyPath');
+      expect(findSecurityViewHistoryLink().attributes('href')).toBe('test/historyPath');
+    });
+  });
 });