Merge branch '451969-add-edit-button-to-policies' into 'master'

Add edit button to policies

See merge request !149768



Merged-by: Illya Klymov <iklymov@gitlab.com>
Approved-by: Janis Altherr <jaltherr@gitlab.com>
Reviewed-by: Janis Altherr <jaltherr@gitlab.com>

ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/edit_framework/components/policies_section.vue

 <script>
-import { GlBadge, GlFormCheckbox, GlLoadingIcon, GlTable, GlTooltipDirective } from '@gitlab/ui';
+import {
+  GlBadge,
+  GlButton,
+  GlFormCheckbox,
+  GlLoadingIcon,
+  GlTable,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 
 import { sprintf } from '~/locale';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
@@ -24,6 +31,7 @@ export default {
     EditSection,
 
     GlBadge,
+    GlButton,
     GlLoadingIcon,
     GlFormCheckbox,
     GlTable,
@@ -217,6 +225,12 @@ export default {
       key: 'description',
       label: i18n.policiesTableFields.desc,
     },
+    {
+      key: 'edit',
+      label: '',
+      thClass: 'gl-w-1',
+      tdClass: 'gl-text-right',
+    },
   ],
   i18n,
 };
@@ -249,6 +263,11 @@ export default {
           </gl-badge>
         </div>
       </template>
+      <template #cell(edit)="{ item }">
+        <gl-button variant="link" size="small" icon="pencil" :href="item.editPath">
+          {{ __('Edit') }}
+        </gl-button>
+      </template>
 
       <template #table-busy>
         <gl-loading-icon size="lg" />

ee/spec/frontend/compliance_dashboard/components/frameworks_report/edit_framework/components/policies_section_spec.js

@@ -21,12 +21,13 @@ const pageInfo = (endCursor) => ({
   __typename: 'PageInfo',
 });
 
+const editPath = (name) => `http://fake-path/edit/${name}`;
 const makePolicy = ({ name, enabled, description, __typename, ...rest }) => ({
   name,
   enabled,
   description,
   yaml: '',
-  editPath: '',
+  editPath: editPath(name),
   source: {
     inherited: false,
     namespace: {
@@ -204,6 +205,12 @@ describe('Basic information section', () => {
       ]);
     });
 
+    it('renders link to edit policy', () => {
+      const { items: policies } = wrapper.findComponent(GlTable).vm.$attrs;
+      const policyLink = wrapper.find('table tbody a');
+      expect(policyLink.attributes('href')).toBe(editPath(policies[0].name));
+    });
+
     describe('Drawer', () => {
       it('renders with selected policy', async () => {
         const drawer = wrapper.findComponent(DrawerWrapper);