Merge branch '422328-add-compliance-framework-sidebar' into 'master'

Add projects to compliance framework sidebar

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/135634



Merged-by: Himanshu Kapoor <info@fleon.org>
Approved-by: Jay Montal <jmontal@gitlab.com>
Approved-by: Camellia X Yang <xyang@gitlab.com>
Approved-by: Himanshu Kapoor <info@fleon.org>
Reviewed-by: Jay Montal <jmontal@gitlab.com>
Co-authored-by: nrosandich <nrosandich@gitlab.com>

ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/framework_info_drawer.vue

 <script>
-import { GlDrawer, GlButton, GlLabel } from '@gitlab/ui';
+import {
+  GlDrawer,
+  GlButton,
+  GlLabel,
+  GlLink,
+  GlAccordion,
+  GlAccordionItem,
+  GlTruncate,
+} from '@gitlab/ui';
+import { s__ } from '~/locale';
 import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
 import { getContentWrapperHeight } from '~/lib/utils/dom_utils';
 
@@ -9,6 +18,10 @@ export default {
     GlDrawer,
     GlButton,
     GlLabel,
+    GlLink,
+    GlAccordion,
+    GlAccordionItem,
+    GlTruncate,
   },
   props: {
     framework: {
@@ -31,8 +44,17 @@ export default {
     defaultFramework() {
       return Boolean(this.framework.default);
     },
+    associatedProjectsTitle() {
+      return `${this.$options.i18n.associatedProjects} (${this.framework.associatedProjects.length})`;
+    },
   },
   DRAWER_Z_INDEX,
+  i18n: {
+    defaultFramework: s__('ComplianceFrameworksReport|Default'),
+    editFramework: s__('ComplianceFrameworksReport|Edit framework'),
+    frameworkDescription: s__('ComplianceFrameworksReport|Description'),
+    associatedProjects: s__('ComplianceFrameworksReport|Associated Projects'),
+  },
 };
 </script>
 
@@ -44,13 +66,13 @@ export default {
     @close="$emit('close')"
   >
     <template v-if="framework" #title>
-      <div>
+      <div style="max-width: 350px">
         <h2 class="gl-mt-0">
-          {{ framework.name }}
+          <gl-truncate :text="framework.name" with-tooltip />
           <gl-label
             v-if="defaultFramework"
             :background-color="framework.color"
-            :title="s__('ComplianceFrameworksReport|Default')"
+            :title="$options.i18n.defaultFramework"
             size="sm"
           />
         </h2>
@@ -60,16 +82,27 @@ export default {
           variant="confirm"
           @click="$emit('edit', framework)"
         >
-          {{ s__('ComplianceFrameworksReport|Edit framework') }}
+          {{ $options.i18n.editFramework }}
         </gl-button>
       </div>
     </template>
 
     <template v-if="framework" #default>
       <div>
-        <h4 class="gl-mt-0">
-          {{ s__('ComplianceFrameworksReport|Associated Projects') }}
-        </h4>
+        <gl-accordion :auto-collapse="false" :header-level="3">
+          <gl-accordion-item :title="$options.i18n.frameworkDescription" visible :header-level="2">
+            {{ framework.description }}
+          </gl-accordion-item>
+          <gl-accordion-item :title="associatedProjectsTitle">
+            <div
+              v-for="associatedProject in framework.associatedProjects"
+              :key="associatedProject.id"
+              class="gl-m-2"
+            >
+              <gl-link :href="associatedProject.webUrl">{{ associatedProject.name }}</gl-link>
+            </div>
+          </gl-accordion-item>
+        </gl-accordion>
       </div>
     </template>
   </gl-drawer>

ee/app/assets/javascripts/compliance_dashboard/components/frameworks_report/frameworks_table.vue

@@ -86,8 +86,8 @@ export default {
     {
       key: 'associatedProjects',
       label: __('Associated projects'),
-      thClass: 'gl-white-space-nowrap gl-vertical-align-middle!',
-      tdClass: 'gl-white-space-nowrap gl-vertical-align-middle! gl-cursor-pointer',
+      thClass: 'gl-md-max-w-26 gl-white-space-nowrap gl-vertical-align-middle!',
+      tdClass: 'gl-md-max-w-26 gl-vertical-align-middle! gl-cursor-pointer',
       sortable: false,
     },
   ],
@@ -127,9 +127,13 @@ export default {
         <framework-badge :framework="item" @edit="editComplianceFramework(item)" />
       </template>
       <template #cell(associatedProjects)="{ item: { associatedProjects } }">
-        <div v-for="(associatedProject, index) in associatedProjects" :key="associatedProject.id">
+        <div
+          v-for="(associatedProject, index) in associatedProjects"
+          :key="associatedProject.id"
+          class="gl-display-inline-block"
+        >
           <gl-link :href="associatedProject.webUrl">{{ associatedProject.name }}</gl-link
-          ><span v-if="index < associatedProjects.length - 1">,</span>
+          ><span v-if="index < associatedProjects.length - 1">, </span>
         </div>
       </template>
       <template #table-busy>

ee/spec/frontend/compliance_dashboard/components/frameworks_report/framework_info_drawer_spec.js

-import { GlLabel } from '@gitlab/ui';
+import { GlLabel, GlLink, GlAccordionItem, GlTruncate } from '@gitlab/ui';
 import FrameworkInfoDrawer from 'ee/compliance_dashboard/components/frameworks_report/framework_info_drawer.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { createFramework } from 'ee_jest/compliance_dashboard/mock_data';
+import { createFrameworkReportFramework } from 'ee_jest/compliance_dashboard/mock_data';
 
 describe('FrameworkInfoDrawer component', () => {
   let wrapper;
 
-  const defaultFramework = createFramework({ id: 1, isDefault: true });
-  const nonDefaultFramework = createFramework(2);
+  const defaultFramework = createFrameworkReportFramework({ id: 1, isDefault: true });
+  const nonDefaultFramework = createFrameworkReportFramework(2);
+  const associatedProjectsCount = defaultFramework.associatedProjects.length;
 
   const findDefaultBadge = () => wrapper.findComponent(GlLabel);
+  const findProjectLinks = () => wrapper.findAllComponents(GlLink);
+  const findAccordionItems = () => wrapper.findAllComponents(GlAccordionItem);
+  const findTitle = () => wrapper.findComponent(GlTruncate);
   const findEditFrameworkBtn = () => wrapper.findByText('Edit framework');
-  const findAssociatedProjectsTitle = () => wrapper.findByText('Associated Projects');
 
   const createComponent = ({ props = {} } = {}) => {
     wrapper = shallowMountExtended(FrameworkInfoDrawer, {
@@ -32,8 +35,8 @@ describe('FrameworkInfoDrawer component', () => {
     });
 
     describe('for drawer body content', () => {
-      it('renders the `requirement` title', () => {
-        expect(wrapper.findByText(defaultFramework.name).exists()).toBe(true);
+      it('renders the title', () => {
+        expect(findTitle().props()).toMatchObject({ text: defaultFramework.name, position: 'end' });
       });
 
       it('renders the default badge', () => {
@@ -44,8 +47,26 @@ describe('FrameworkInfoDrawer component', () => {
         expect(findEditFrameworkBtn().exists()).toBe(true);
       });
 
-      it('renders the Associated Projects Title', () => {
-        expect(findAssociatedProjectsTitle().exists()).toBe(true);
+      it('renders the Description accordion', () => {
+        expect(findAccordionItems().at(0).props('title')).toBe(`Description`);
+        expect(findAccordionItems().at(0).text()).toBe(defaultFramework.description);
+      });
+
+      it('renders the Associated Projects accordion', () => {
+        expect(findAccordionItems().at(1).props('title')).toBe(
+          `Associated Projects (${associatedProjectsCount})`,
+        );
+      });
+
+      it('renders the Associated Projects list', () => {
+        expect(findProjectLinks().exists()).toBe(true);
+        expect(findProjectLinks().wrappers).toHaveLength(3);
+        expect(findProjectLinks().at(0).text()).toContain(
+          defaultFramework.associatedProjects[0].name,
+        );
+        expect(findProjectLinks().at(0).attributes('href')).toBe(
+          defaultFramework.associatedProjects[0].webUrl,
+        );
       });
     });
   });

ee/spec/frontend/compliance_dashboard/mock_data.js

@@ -273,6 +273,19 @@ export const createFramework = ({ id, isDefault = false } = {}) => ({
   __typename: 'ComplianceFramework',
 });
 
+export const createFrameworkReportFramework = ({ id, isDefault = false, projects = 3 } = {}) => ({
+  id: `gid://gitlab/ComplianceManagement::Framework/${id}`,
+  name: `Some framework ${id}`,
+  default: isDefault,
+  description: `This is a framework ${id}`,
+  color: `#3cb37${id}`,
+  pipelineConfigurationFullPath: null,
+  associatedProjects: Array(projects)
+    .fill(null)
+    .map((_, pid) => createProject({ id: pid })),
+  __typename: 'ComplianceFramework',
+});
+
 export const createComplianceFrameworksReportResponse = ({ count = 1 } = {}) => {
   return {
     data: {

locale/gitlab.pot

@@ -12370,6 +12370,9 @@ msgstr ""
 msgid "ComplianceFrameworksReport|Default"
 msgstr ""
+msgid "ComplianceFrameworksReport|Description"
+msgstr ""
+
 msgid "ComplianceFrameworksReport|Edit framework"
 msgstr ""