Merge branch '321599-devops-adoption-add-this-group-badge-in-adoption-table' into 'master'

Resolve "[DevOps Adoption] Add "This group" badge in adoption table"

See merge request gitlab-org/gitlab!57689

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_table.vue

 <script>
-import { GlTable, GlButton, GlModalDirective, GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import {
+  GlTable,
+  GlButton,
+  GlModalDirective,
+  GlTooltipDirective,
+  GlIcon,
+  GlBadge,
+} from '@gitlab/ui';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import {
   DEVOPS_ADOPTION_TABLE_TEST_IDS,
@@ -58,6 +65,7 @@ export default {
     LocalStorageSync,
     DevopsAdoptionDeleteModal,
     GlIcon,
+    GlBadge,
   },
   i18n,
   devopsSegmentModalId: DEVOPS_ADOPTION_SEGMENT_MODAL_ID,
@@ -66,6 +74,11 @@ export default {
     GlTooltip: GlTooltipDirective,
     GlModal: GlModalDirective,
   },
+  inject: {
+    groupGid: {
+      default: null,
+    },
+  },
   tableHeaderFields: [
     ...headers,
     {
@@ -102,6 +115,9 @@ export default {
     slotName(key) {
       return `head(${key})`;
     },
+    isCurrentGroup(item) {
+      return item.namespace?.id === this.groupGid;
+    },
   },
 };
 </script>
@@ -140,20 +156,16 @@ export default {
         </div>
       </template>
 
-      <template
-        #cell(name)="{
-          item: {
-            namespace: { fullName },
-            latestSnapshot,
-          },
-        }"
-      >
+      <template #cell(name)="{ item }">
         <div :data-testid="$options.testids.SEGMENT">
-          <strong v-if="latestSnapshot">{{ fullName }}</strong>
+          <strong v-if="item.latestSnapshot">{{ item.namespace.fullName }}</strong>
           <template v-else>
-            <span class="gl-text-gray-400">{{ fullName }}</span>
+            <span class="gl-text-gray-400">{{ item.namespace.fullName }}</span>
             <gl-icon name="hourglass" class="gl-text-gray-400" />
           </template>
+          <gl-badge v-if="isCurrentGroup(item)" class="gl-ml-1" variant="info">{{
+            __('This group')
+          }}</gl-badge>
         </div>
       </template>
 

ee/spec/frontend/analytics/devops_report/devops_adoption/components/devops_adoption_table_spec.js

-import { GlTable, GlButton, GlIcon } from '@gitlab/ui';
+import { GlTable, GlButton, GlIcon, GlBadge } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import DevopsAdoptionDeleteModal from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_delete_modal.vue';
@@ -12,12 +12,15 @@ import { devopsAdoptionSegmentsData, devopsAdoptionTableHeaders } from '../mock_
 describe('DevopsAdoptionTable', () => {
   let wrapper;
 
-  const createComponent = () => {
+  const createComponent = (options = {}) => {
+    const { provide = {} } = options;
+
     wrapper = mount(DevopsAdoptionTable, {
       propsData: {
         segments: devopsAdoptionSegmentsData.nodes,
         selectedSegment: devopsAdoptionSegmentsData.nodes[0],
       },
+      provide,
       directives: {
         GlTooltip: createMockDirective(),
       },
@@ -26,7 +29,6 @@ describe('DevopsAdoptionTable', () => {
 
   beforeEach(() => {
     localStorage.clear();
-    createComponent();
   });
 
   afterEach(() => {
@@ -53,6 +55,7 @@ describe('DevopsAdoptionTable', () => {
     let headers;
 
     beforeEach(() => {
+      createComponent();
       headers = findTable().findAll(`[data-testid="${TEST_IDS.TABLE_HEADERS}"]`);
     });
 
@@ -97,10 +100,33 @@ describe('DevopsAdoptionTable', () => {
   describe('table fields', () => {
     describe('segment name', () => {
       it('displays the correct segment name', () => {
+        createComponent();
+
         expect(findCol(TEST_IDS.SEGMENT).text()).toBe('Group 1');
       });
 
+      describe('"This group" badge', () => {
+        const thisGroupGid = devopsAdoptionSegmentsData.nodes[0].namespace.id;
+
+        it.each`
+          scenario                            | expected | provide
+          ${'is not shown by default'}        | ${false} | ${null}
+          ${'is not shown for other groups'}  | ${false} | ${{ groupGid: 'anotherGroupGid' }}
+          ${'is shown for the current group'} | ${true}  | ${{ groupGid: thisGroupGid }}
+        `('$scenario', ({ expected, provide }) => {
+          createComponent({ provide });
+
+          const badge = findColSubComponent(TEST_IDS.SEGMENT, GlBadge);
+
+          expect(badge.exists()).toBe(expected);
+        });
+      });
+
       describe('pending state (no snapshot data available)', () => {
+        beforeEach(() => {
+          createComponent();
+        });
+
         it('grays the text out', () => {
           const name = findColRowChild(TEST_IDS.SEGMENT, 1, 'span');
 
@@ -132,12 +158,16 @@ describe('DevopsAdoptionTable', () => {
       ${TEST_IDS.DEPLOYS}   | ${'deploys'}   | ${false}
       ${TEST_IDS.SCANNING}  | ${'scanning'}  | ${false}
     `('displays the correct $field snapshot value', ({ id, flag }) => {
+      createComponent();
+
       const booleanFlag = findColSubComponent(id, DevopsAdoptionTableCellFlag);
 
       expect(booleanFlag.props('enabled')).toBe(flag);
     });
 
     it('displays the actions icon', () => {
+      createComponent();
+
       const button = findColSubComponent(TEST_IDS.ACTIONS, GlButton);
 
       expect(button.exists()).toBe(true);
@@ -147,6 +177,10 @@ describe('DevopsAdoptionTable', () => {
   });
 
   describe('delete modal integration', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     it('re emits trackModalOpenState with the given value', async () => {
       findDeleteModal().vm.$emit('trackModalOpenState', true);
 
@@ -158,6 +192,7 @@ describe('DevopsAdoptionTable', () => {
     let headers;
 
     beforeEach(() => {
+      createComponent();
       headers = findTable().findAll(`[data-testid="${TEST_IDS.TABLE_HEADERS}"]`);
     });