Add devops adoption pending state

The pending state is the state that a segment is in
until the BE job runs to populate the segment snapshot
information.

ee/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_table.vue

@@ -110,7 +110,15 @@ export default {
 
       <template #cell(name)="{ item }">
         <div :data-testid="$options.testids.SEGMENT">
-          <strong>{{ item.name }}</strong>
+          <strong v-if="item.latestSnapshot">{{ item.name }}</strong>
+          <template v-else>
+            <span class="gl-text-gray-400">{{ item.name }}</span>
+            <gl-icon
+              v-gl-tooltip.hover="$options.i18n.pendingTooltip"
+              name="hourglass"
+              class="gl-text-gray-400"
+            />
+          </template>
         </div>
       </template>
 

ee/app/assets/javascripts/admin/dev_ops_report/constants.js

@@ -85,6 +85,7 @@ export const DEVOPS_ADOPTION_STRINGS = {
         tooltip: s__('DevopsAdoption|At least 1 security scan of any type run in pipeline'),
       },
     },
+    pendingTooltip: s__('DevopsAdoption|Segment data pending until the start of next month'),
   },
   deleteModal: {
     title: s__('DevopsAdoption|Confirm delete segment'),

ee/spec/frontend/admin/dev_ops_report/components/devops_adoption_table_spec.js

@@ -33,6 +33,12 @@ describe('DevopsAdoptionTable', () => {
 
   const findCol = testId => findTable().find(`[data-testid="${testId}"]`);
 
+  const findColRowChild = (col, row, child) =>
+    findTable()
+      .findAll(`[data-testid="${col}"]`)
+      .at(row)
+      .find(child);
+
   const findColSubComponent = (colTestId, childComponent) =>
     findCol(colTestId).find(childComponent);
 
@@ -82,10 +88,40 @@ describe('DevopsAdoptionTable', () => {
   });
 
   describe('table fields', () => {
+    describe('segment name', () => {
       it('displays the correct segment name', () => {
         expect(findCol(TEST_IDS.SEGMENT).text()).toBe('Segment 1');
       });
 
+      describe('pending state (no snapshot data available)', () => {
+        it('grays the text out', () => {
+          const name = findColRowChild(TEST_IDS.SEGMENT, 1, 'span');
+
+          expect(name.classes()).toStrictEqual(['gl-text-gray-400']);
+        });
+
+        describe('hourglass icon', () => {
+          let icon;
+
+          beforeEach(() => {
+            icon = findColRowChild(TEST_IDS.SEGMENT, 1, GlIcon);
+          });
+
+          it('displays the icon', () => {
+            expect(icon.exists()).toBe(true);
+            expect(icon.props('name')).toBe('hourglass');
+          });
+
+          it('contains a tooltip', () => {
+            const tooltip = getBinding(icon.element, 'gl-tooltip');
+
+            expect(tooltip).toBeDefined();
+            expect(tooltip.value).toBe('Segment data pending until the start of next month');
+          });
+        });
+      });
+    });
+
     it.each`
       id                    | field          | flag
       ${TEST_IDS.ISSUES}    | ${'issues'}    | ${true}

ee/spec/frontend/admin/dev_ops_report/mock_data.js

@@ -56,6 +56,17 @@ export const devopsAdoptionSegmentsData = {
       },
       __typename: 'devopsSegment',
     },
+    {
+      name: 'Segment 2',
+      id: 2,
+      groups: [
+        {
+          id: 'gid://gitlab/Group/1',
+        },
+      ],
+      latestSnapshot: null,
+      __typename: 'devopsSegment',
+    },
   ],
   __typename: 'devopsAdoptionSegments',
 };

ee/spec/frontend/admin/dev_ops_report/utils/cache_updates_spec.js

@@ -17,7 +17,7 @@ describe('addSegmentToCache', () => {
       expect.objectContaining({
         data: {
           devopsAdoptionSegments: {
-            nodes: devopsAdoptionSegmentsData.nodes,
+            nodes: [devopsAdoptionSegmentsData.nodes[0]],
           },
         },
       }),

locale/gitlab.pot

@@ -9697,6 +9697,9 @@ msgstr ""
 msgid "DevopsAdoption|Segment"
 msgstr ""
 
+msgid "DevopsAdoption|Segment data pending until the start of next month"
+msgstr ""
+
 msgid "DevopsAdoption|There was an error fetching Groups. Please refresh the page to try again."
 msgstr ""