Add DA table cell tooltips

This commit adds tooltips to the devops adoption
table cell components. These dispaly a boolean value.

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

 <script>
+import { GlTooltipDirective } from '@gitlab/ui';
+import { DEVOPS_ADOPTION_STRINGS } from '../constants';
+
+const {
+  tableCell: { trueText, falseText },
+} = DEVOPS_ADOPTION_STRINGS;
+
 export default {
   name: 'DevopsAdoptionTableCellFlag',
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     enabled: {
       type: Boolean,
       required: true,
     },
   },
+  data() {
+    return {
+      tooltipText: this.enabled ? trueText : falseText,
+    };
+  },
 };
 </script>
 <template>
-  <span class="circle" :class="{ 'circle-enabled': enabled }"></span>
+  <span
+    v-gl-tooltip.hover="tooltipText"
+    class="circle"
+    :class="{ 'circle-enabled': enabled }"
+  ></span>
 </template>

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

@@ -60,6 +60,10 @@ export const DEVOPS_ADOPTION_STRINGS = {
     confirm: s__('DevopsAdoption|Delete segment'),
     error: s__('DevopsAdoption|An error occured while deleting the segment. Please try again.'),
   },
+  tableCell: {
+    trueText: s__('DevopsAdoption|Adopted'),
+    falseText: s__('DevopsAdoption|Not adopted'),
+  },
 };
 
 export const DEVOPS_ADOPTION_TABLE_TEST_IDS = {

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

 import { shallowMount } from '@vue/test-utils';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import DevopsAdoptionTableCellFlag from 'ee/admin/dev_ops_report/components/devops_adoption_table_cell_flag.vue';
 
 describe('DevopsAdoptionTableCellFlag', () => {
@@ -10,6 +11,9 @@ describe('DevopsAdoptionTableCellFlag', () => {
         enabled: true,
         ...props,
       },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
     });
   };
 
@@ -18,17 +22,35 @@ describe('DevopsAdoptionTableCellFlag', () => {
     wrapper = null;
   });
 
-  it('contains the circle-enabled class when enabled', () => {
-    createComponent();
+  describe('enabled', () => {
+    beforeEach(() => createComponent());
+
+    it('contains the circle-enabled class', () => {
+      expect(wrapper.classes()).toContain('circle');
+      expect(wrapper.classes()).toContain('circle-enabled');
+    });
 
-    expect(wrapper.classes()).toContain('circle');
-    expect(wrapper.classes()).toContain('circle-enabled');
+    it('contains a tooltip', () => {
+      const tooltip = getBinding(wrapper.element, 'gl-tooltip');
+
+      expect(tooltip).toBeDefined();
+      expect(tooltip.value).toBe('Adopted');
+    });
   });
 
-  it('does not contain the circle-enabled class when disabled', () => {
-    createComponent({ enabled: false });
+  describe('disabled', () => {
+    beforeEach(() => createComponent({ enabled: false }));
 
-    expect(wrapper.classes()).toContain('circle');
-    expect(wrapper.classes()).not.toContain('circle-enabled');
+    it('does not contain the circle-enabled class', () => {
+      expect(wrapper.classes()).toContain('circle');
+      expect(wrapper.classes()).not.toContain('circle-enabled');
+    });
+
+    it('contains a tooltip', () => {
+      const tooltip = getBinding(wrapper.element, 'gl-tooltip');
+
+      expect(tooltip).toBeDefined();
+      expect(tooltip.value).toBe('Not adopted');
+    });
   });
 });

locale/gitlab.pot

@@ -9607,6 +9607,9 @@ msgstr ""
 msgid "DevopsAdoption|Add new segment"
 msgstr ""
 
+msgid "DevopsAdoption|Adopted"
+msgstr ""
+
 msgid "DevopsAdoption|An error occured while deleting the segment. Please try again."
 msgstr ""
 
@@ -9661,6 +9664,9 @@ msgstr ""
 msgid "DevopsAdoption|No filter results."
 msgstr ""
 
+msgid "DevopsAdoption|Not adopted"
+msgstr ""
+
 msgid "DevopsAdoption|Pipelines"
 msgstr ""