Refactor DevOps Adoption strings into primitives

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

@@ -11,19 +11,19 @@ import { TYPE_GROUP } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import {
   DEBOUNCE_DELAY,
-  DEVOPS_ADOPTION_GROUP_DROPDOWN_TEXT,
-  DEVOPS_ADOPTION_GROUP_DROPDOWN_HEADER,
-  DEVOPS_ADOPTION_ADMIN_DROPDOWN_TEXT,
-  DEVOPS_ADOPTION_ADMIN_DROPDOWN_HEADER,
-  DEVOPS_ADOPTION_NO_RESULTS,
-  DEVOPS_ADOPTION_NO_SUB_GROUPS,
+  I18N_GROUP_DROPDOWN_TEXT,
+  I18N_GROUP_DROPDOWN_HEADER,
+  I18N_ADMIN_DROPDOWN_TEXT,
+  I18N_ADMIN_DROPDOWN_HEADER,
+  I18N_NO_RESULTS,
+  I18N_NO_SUB_GROUPS,
 } from '../constants';
 import bulkEnableDevopsAdoptionNamespacesMutation from '../graphql/mutations/bulk_enable_devops_adoption_namespaces.mutation.graphql';
 
 export default {
   name: 'DevopsAdoptionAddDropdown',
   i18n: {
-    noResults: DEVOPS_ADOPTION_NO_RESULTS,
+    noResults: I18N_NO_RESULTS,
   },
   debounceDelay: DEBOUNCE_DELAY,
   components: {
@@ -69,17 +69,13 @@ export default {
       return this.groups?.length;
     },
     dropdownTitle() {
-      return this.isGroup
-        ? DEVOPS_ADOPTION_GROUP_DROPDOWN_TEXT
-        : DEVOPS_ADOPTION_ADMIN_DROPDOWN_TEXT;
+      return this.isGroup ? I18N_GROUP_DROPDOWN_TEXT : I18N_ADMIN_DROPDOWN_TEXT;
     },
     dropdownHeader() {
-      return this.isGroup
-        ? DEVOPS_ADOPTION_GROUP_DROPDOWN_HEADER
-        : DEVOPS_ADOPTION_ADMIN_DROPDOWN_HEADER;
+      return this.isGroup ? I18N_GROUP_DROPDOWN_HEADER : I18N_ADMIN_DROPDOWN_HEADER;
     },
     tooltipText() {
-      return this.isLoadingGroups || this.hasSubgroups ? false : DEVOPS_ADOPTION_NO_SUB_GROUPS;
+      return this.isLoadingGroups || this.hasSubgroups ? false : I18N_NO_SUB_GROUPS;
     },
   },
   beforeDestroy() {

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

@@ -7,11 +7,11 @@ import API from '~/api';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { mergeUrlParams, updateHistory, getParameterValues } from '~/lib/utils/url_utility';
 import {
-  DEVOPS_ADOPTION_STRINGS,
-  DEVOPS_ADOPTION_ERROR_KEYS,
+  I18N_GROUPS_QUERY_ERROR,
+  I18N_ENABLED_NAMESPACE_QUERY_ERROR,
+  I18N_ENABLE_NAMESPACE_MUTATION_ERROR,
   DATE_TIME_FORMAT,
   DEFAULT_POLLING_INTERVAL,
-  DEVOPS_ADOPTION_GROUP_LEVEL_LABEL,
   DEVOPS_ADOPTION_TABLE_CONFIGURATION,
   TRACK_ADOPTION_TAB_CLICK_EVENT,
   TRACK_DEVOPS_SCORE_TAB_CLICK_EVENT,
@@ -56,10 +56,6 @@ export default {
       default: '',
     },
   },
-  i18n: {
-    groupLevelLabel: DEVOPS_ADOPTION_GROUP_LEVEL_LABEL,
-    ...DEVOPS_ADOPTION_STRINGS.app,
-  },
   trackDevopsTabClickEvent: TRACK_ADOPTION_TAB_CLICK_EVENT,
   trackDevopsScoreTabClickEvent: TRACK_DEVOPS_SCORE_TAB_CLICK_EVENT,
   devopsAdoptionTableConfiguration: DEVOPS_ADOPTION_TABLE_CONFIGURATION,
@@ -70,11 +66,7 @@ export default {
       isLoadingEnableGroup: false,
       requestCount: 0,
       openModal: false,
-      errors: {
-        [DEVOPS_ADOPTION_ERROR_KEYS.groups]: false,
-        [DEVOPS_ADOPTION_ERROR_KEYS.enabledNamespaces]: false,
-        [DEVOPS_ADOPTION_ERROR_KEYS.addEnabledNamespaces]: false,
-      },
+      errors: [],
       groups: {
         nodes: [],
         pageInfo: null,
@@ -109,7 +101,7 @@ export default {
         }
       },
       error(error) {
-        this.handleError(DEVOPS_ADOPTION_ERROR_KEYS.enabledNamespaces, error);
+        this.handleError(I18N_ENABLED_NAMESPACE_QUERY_ERROR, error);
       },
     },
   },
@@ -124,7 +116,7 @@ export default {
       return Boolean(this.devopsAdoptionEnabledNamespaces?.nodes?.length);
     },
     hasLoadingError() {
-      return Object.values(this.errors).some((error) => error === true);
+      return this.errors.length;
     },
     timestamp() {
       return dateformat(
@@ -194,14 +186,14 @@ export default {
             } = data;
 
             if (errors.length) {
-              this.handleError(DEVOPS_ADOPTION_ERROR_KEYS.addEnabledNamespaces, errors);
+              this.handleError(I18N_ENABLE_NAMESPACE_MUTATION_ERROR, errors);
             } else {
               this.addEnabledNamespacesToCache(enabledNamespaces);
             }
           },
         })
         .catch((error) => {
-          this.handleError(DEVOPS_ADOPTION_ERROR_KEYS.addEnabledNamespaces, error);
+          this.handleError(I18N_ENABLE_NAMESPACE_MUTATION_ERROR, error);
         })
         .finally(() => {
           this.isLoadingEnableGroup = false;
@@ -224,8 +216,8 @@ export default {
     startPollingTableData() {
       this.pollingTableData = setInterval(this.pollTableData, DEFAULT_POLLING_INTERVAL);
     },
-    handleError(key, error) {
-      this.errors[key] = true;
+    handleError(message, error) {
+      this.errors.push(message);
       Sentry.captureException(error);
     },
     fetchGroups(searchTerm = '') {
@@ -251,7 +243,7 @@ export default {
 
           this.isLoadingGroups = false;
         })
-        .catch((error) => this.handleError(DEVOPS_ADOPTION_ERROR_KEYS.groups, error));
+        .catch((error) => this.handleError(I18N_GROUPS_QUERY_ERROR, error));
     },
     addEnabledNamespacesToCache(enabledNamespaces) {
       const { cache } = this.$apollo.getClient();
@@ -322,7 +314,7 @@ export default {
         <div v-if="hasLoadingError">
           <template v-for="(error, key) in errors">
             <gl-alert v-if="error" :key="key" variant="danger" :dismissible="false" class="gl-mt-3">
-              {{ $options.i18n[key] }}
+              {{ error }}
             </gl-alert>
           </template>
         </div>

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

 <script>
 import { GlModal, GlSprintf, GlAlert } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
-import { DEVOPS_ADOPTION_STRINGS, DEVOPS_ADOPTION_DELETE_MODAL_ID } from '../constants';
+import {
+  I18N_DELETE_MODAL_TITLE,
+  I18N_DELETE_MODAL_CONFIRMATION_MESSAGE,
+  I18N_DELETE_MODAL_CANCEL,
+  I18N_DELETE_MODAL_CONFIRM,
+  I18N_DELETE_MODAL_ERROR,
+  DELETE_MODAL_ID,
+} from '../constants';
 import disableDevopsAdoptionNamespaceMutation from '../graphql/mutations/disable_devops_adoption_namespace.mutation.graphql';
 
 export default {
   name: 'DevopsAdoptionDeleteModal',
   components: { GlModal, GlSprintf, GlAlert },
-  i18n: DEVOPS_ADOPTION_STRINGS.deleteModal,
-  deleteModalId: DEVOPS_ADOPTION_DELETE_MODAL_ID,
+  i18n: {
+    title: I18N_DELETE_MODAL_TITLE,
+    confirmationMessage: I18N_DELETE_MODAL_CONFIRMATION_MESSAGE,
+    cancel: I18N_DELETE_MODAL_CANCEL,
+    confirm: I18N_DELETE_MODAL_CONFIRM,
+    error: I18N_DELETE_MODAL_ERROR,
+  },
+  deleteModalId: DELETE_MODAL_ID,
   props: {
     namespace: {
       type: Object,

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

 <script>
 import { GlEmptyState, GlModalDirective } from '@gitlab/ui';
-import { DEVOPS_ADOPTION_STRINGS } from '../constants';
+import { I18N_EMPTY_STATE_TITLE, I18N_EMPTY_STATE_DESCRIPTION } from '../constants';
 
 export default {
   name: 'DevopsAdoptionEmptyState',
@@ -11,7 +11,10 @@ export default {
     GlModal: GlModalDirective,
   },
   inject: ['emptyStateSvgPath'],
-  i18n: DEVOPS_ADOPTION_STRINGS.emptyState,
+  i18n: {
+    title: I18N_EMPTY_STATE_TITLE,
+    description: I18N_EMPTY_STATE_DESCRIPTION,
+  },
   props: {
     hasGroupsData: {
       type: Boolean,

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

@@ -4,7 +4,7 @@ import { sprintf } from '~/locale';
 import {
   DEVOPS_ADOPTION_TABLE_CONFIGURATION,
   DEVOPS_ADOPTION_OVERALL_CONFIGURATION,
-  TABLE_HEADER_TEXT,
+  I18N_TABLE_HEADER_TEXT,
 } from '../constants';
 import DevopsAdoptionOverviewCard from './devops_adoption_overview_card.vue';
 
@@ -56,7 +56,7 @@ export default {
       return [this.overallData, ...this.featuresData];
     },
     headerText() {
-      return sprintf(TABLE_HEADER_TEXT, { timestamp: this.timestamp });
+      return sprintf(I18N_TABLE_HEADER_TEXT, { timestamp: this.timestamp });
     },
   },
 };

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

 <script>
 import { GlIcon, GlProgressBar } from '@gitlab/ui';
 import { sprintf } from '~/locale';
-import {
-  DEVOPS_ADOPTION_FEATURES_ADOPTED_TEXT,
-  DEVOPS_ADOPTION_PROGRESS_BAR_HEIGHT,
-} from '../constants';
+import { I18N_FEATURES_ADOPTED_TEXT, PROGRESS_BAR_HEIGHT } from '../constants';
 import DevopsAdoptionTableCellFlag from './devops_adoption_table_cell_flag.vue';
 
 export default {
   name: 'DevopsAdoptionOverviewCard',
-  progressBarHeight: DEVOPS_ADOPTION_PROGRESS_BAR_HEIGHT,
+  progressBarHeight: PROGRESS_BAR_HEIGHT,
   components: {
     GlIcon,
     GlProgressBar,
@@ -48,7 +45,7 @@ export default {
       return this.featureMeta.filter((feature) => feature.adopted).length;
     },
     description() {
-      return sprintf(DEVOPS_ADOPTION_FEATURES_ADOPTED_TEXT, {
+      return sprintf(I18N_FEATURES_ADOPTED_TEXT, {
         adoptedCount: this.adoptedCount,
         featuresCount: this.featuresCount,
         title: this.displayMeta ? this.title : '',

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

 <script>
 import { GlLoadingIcon, GlSprintf } from '@gitlab/ui';
-import { TABLE_HEADER_TEXT } from '../constants';
+import { I18N_TABLE_HEADER_TEXT } from '../constants';
 import DevopsAdoptionAddDropdown from './devops_adoption_add_dropdown.vue';
 import DevopsAdoptionEmptyState from './devops_adoption_empty_state.vue';
 import DevopsAdoptionTable from './devops_adoption_table.vue';
@@ -14,7 +14,7 @@ export default {
     DevopsAdoptionAddDropdown,
   },
   i18n: {
-    tableHeaderText: TABLE_HEADER_TEXT,
+    tableHeaderText: I18N_TABLE_HEADER_TEXT,
   },
   props: {
     isLoading: {

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

@@ -9,13 +9,17 @@ import {
 } from '@gitlab/ui';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import {
-  DEVOPS_ADOPTION_TABLE_TEST_IDS,
-  DEVOPS_ADOPTION_STRINGS,
-  DEVOPS_ADOPTION_DELETE_MODAL_ID,
-  DEVOPS_ADOPTION_TABLE_SORT_BY_STORAGE_KEY,
-  DEVOPS_ADOPTION_TABLE_SORT_DESC_STORAGE_KEY,
-  DEVOPS_ADOPTION_TABLE_REMOVE_BUTTON_DISABLED,
-  DEVOPS_ADOPTION_GROUP_COL_LABEL,
+  TABLE_TEST_IDS_HEADERS,
+  TABLE_TEST_IDS_NAMESPACE,
+  TABLE_TEST_IDS_ACTIONS,
+  TABLE_TEST_IDS_LOCAL_STORAGE_SORT_BY,
+  TABLE_TEST_IDS_LOCAL_STORAGE_SORT_DESC,
+  DELETE_MODAL_ID,
+  TABLE_SORT_BY_STORAGE_KEY,
+  TABLE_SORT_DESC_STORAGE_KEY,
+  I18N_TABLE_REMOVE_BUTTON,
+  I18N_TABLE_REMOVE_BUTTON_DISABLED,
+  I18N_GROUP_COL_LABEL,
 } from '../constants';
 import DevopsAdoptionDeleteModal from './devops_adoption_delete_modal.vue';
 import DevopsAdoptionTableCellFlag from './devops_adoption_table_cell_flag.vue';
@@ -38,14 +42,12 @@ const formatter = (value, key, item) => {
 
 const fieldOptions = {
   thClass: 'gl-bg-white! gl-text-gray-400',
-  thAttr: { 'data-testid': DEVOPS_ADOPTION_TABLE_TEST_IDS.TABLE_HEADERS },
+  thAttr: { 'data-testid': TABLE_TEST_IDS_HEADERS },
   formatter,
   sortable: true,
   sortByFormatted: true,
 };
 
-const { table: i18n } = DEVOPS_ADOPTION_STRINGS;
-
 export default {
   name: 'DevopsAdoptionTable',
   components: {
@@ -67,13 +69,18 @@ export default {
     },
   },
   i18n: {
-    ...i18n,
-    removeButtonDisabled: DEVOPS_ADOPTION_TABLE_REMOVE_BUTTON_DISABLED,
-  },
-  deleteModalId: DEVOPS_ADOPTION_DELETE_MODAL_ID,
-  testids: DEVOPS_ADOPTION_TABLE_TEST_IDS,
-  sortByStorageKey: DEVOPS_ADOPTION_TABLE_SORT_BY_STORAGE_KEY,
-  sortDescStorageKey: DEVOPS_ADOPTION_TABLE_SORT_DESC_STORAGE_KEY,
+    removeButtonDisabled: I18N_TABLE_REMOVE_BUTTON_DISABLED,
+    removeButton: I18N_TABLE_REMOVE_BUTTON,
+  },
+  deleteModalId: DELETE_MODAL_ID,
+  testids: {
+    NAMESPACE: TABLE_TEST_IDS_NAMESPACE,
+    ACTIONS: TABLE_TEST_IDS_ACTIONS,
+    LOCAL_STORAGE_SORT_BY: TABLE_TEST_IDS_LOCAL_STORAGE_SORT_BY,
+    LOCAL_STORAGE_SORT_DESC: TABLE_TEST_IDS_LOCAL_STORAGE_SORT_DESC,
+  },
+  sortByStorageKey: TABLE_SORT_BY_STORAGE_KEY,
+  sortDescStorageKey: TABLE_SORT_DESC_STORAGE_KEY,
   props: {
     enabledNamespaces: {
       type: Array,
@@ -96,7 +103,7 @@ export default {
       return [
         {
           key: 'name',
-          label: DEVOPS_ADOPTION_GROUP_COL_LABEL,
+          label: I18N_GROUP_COL_LABEL,
           ...fieldOptions,
         },
         ...this.cols.map((item) => ({

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/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;
+import { I18N_CELL_FLAG_TRUE_TEXT, I18N_CELL_FLAG_FALSE_TEXT } from '../constants';
 
 export default {
   name: 'DevopsAdoptionTableCellFlag',
@@ -24,7 +20,7 @@ export default {
   },
   computed: {
     tooltipText() {
-      return this.enabled ? trueText : falseText;
+      return this.enabled ? I18N_CELL_FLAG_TRUE_TEXT : I18N_CELL_FLAG_FALSE_TEXT;
     },
   },
 };

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/constants.js

 import { s__, __ } from '~/locale';
 
 export const DEFAULT_POLLING_INTERVAL = 30000;
-
 export const PER_PAGE = 20;
-
 export const DEBOUNCE_DELAY = 500;
+export const PROGRESS_BAR_HEIGHT = '8px';
+export const DATE_TIME_FORMAT = 'yyyy-mm-dd HH:MM';
+export const DELETE_MODAL_ID = 'devopsDeleteModal';
 
-export const DEVOPS_ADOPTION_PROGRESS_BAR_HEIGHT = '8px';
-
-export const DEVOPS_ADOPTION_DELETE_MODAL_ID = 'devopsDeleteModal';
+export const TABLE_TEST_IDS_HEADERS = 'header';
+export const TABLE_TEST_IDS_NAMESPACE = 'namespaceCol';
+export const TABLE_TEST_IDS_ACTIONS = 'actionsCol';
+export const TABLE_TEST_IDS_LOCAL_STORAGE_SORT_BY = 'localStorageSortBy';
+export const TABLE_TEST_IDS_LOCAL_STORAGE_SORT_DESC = 'localStorageSortDesc';
 
-export const DATE_TIME_FORMAT = 'yyyy-mm-dd HH:MM';
+export const TABLE_SORT_BY_STORAGE_KEY = 'devops_adoption_table_sort_by';
+export const TABLE_SORT_DESC_STORAGE_KEY = 'devops_adoption_table_sort_desc';
 
-export const DEVOPS_ADOPTION_ERROR_KEYS = {
-  groups: 'groupsError',
-  enabledNamespaces: 'enabledNamespacesError',
-  addEnabledNamespaces: 'addEnabledNamespacesError',
-};
+export const TRACK_ADOPTION_TAB_CLICK_EVENT = 'i_analytics_dev_ops_adoption';
+export const TRACK_DEVOPS_SCORE_TAB_CLICK_EVENT = 'i_analytics_dev_ops_score';
 
-export const TABLE_HEADER_TEXT = s__(
-  'DevopsAdoption|Feature adoption is based on usage in the previous calendar month. Last updated: %{timestamp}.',
+export const I18N_GROUPS_QUERY_ERROR = s__(
+  'DevopsAdoption|There was an error fetching Groups. Please refresh the page.',
+);
+export const I18N_ENABLED_NAMESPACE_QUERY_ERROR = s__(
+  'DevopsAdoption|There was an error fetching Group adoption data. Please refresh the page.',
+);
+export const I18N_ENABLE_NAMESPACE_MUTATION_ERROR = s__(
+  'DevopsAdoption|There was an error enabling the current group. Please refresh the page.',
 );
 
-export const DEVOPS_ADOPTION_GROUP_LEVEL_LABEL = s__('DevopsAdoption|Add/remove sub-groups');
-
-export const DEVOPS_ADOPTION_TABLE_REMOVE_BUTTON_DISABLED = s__(
+export const I18N_TABLE_REMOVE_BUTTON = s__('DevopsAdoption|Remove Group from the table.');
+export const I18N_TABLE_REMOVE_BUTTON_DISABLED = s__(
   'DevopsAdoption|You cannot remove the group you are currently in.',
 );
 
-export const DEVOPS_ADOPTION_GROUP_DROPDOWN_TEXT = s__('DevopsAdoption|Add sub-group to table');
-export const DEVOPS_ADOPTION_GROUP_DROPDOWN_HEADER = s__('DevopsAdoption|Add sub-group');
-export const DEVOPS_ADOPTION_ADMIN_DROPDOWN_TEXT = s__('DevopsAdoption|Add group to table');
-export const DEVOPS_ADOPTION_ADMIN_DROPDOWN_HEADER = s__('DevopsAdoption|Add group');
+export const I18N_GROUP_DROPDOWN_TEXT = s__('DevopsAdoption|Add sub-group to table');
+export const I18N_GROUP_DROPDOWN_HEADER = s__('DevopsAdoption|Add sub-group');
+export const I18N_ADMIN_DROPDOWN_TEXT = s__('DevopsAdoption|Add group to table');
+export const I18N_ADMIN_DROPDOWN_HEADER = s__('DevopsAdoption|Add group');
 
-export const DEVOPS_ADOPTION_NO_RESULTS = s__('DevopsAdoption|No results…');
+export const I18N_NO_RESULTS = s__('DevopsAdoption|No results…');
+export const I18N_NO_SUB_GROUPS = s__('DevopsAdoption|This group has no sub-groups');
 
-export const DEVOPS_ADOPTION_NO_SUB_GROUPS = s__('DevopsAdoption|This group has no sub-groups');
-
-export const DEVOPS_ADOPTION_FEATURES_ADOPTED_TEXT = s__(
+export const I18N_FEATURES_ADOPTED_TEXT = s__(
   'DevopsAdoption|%{adoptedCount}/%{featuresCount} %{title} features adopted',
 );
 
-export const DEVOPS_ADOPTION_STRINGS = {
-  app: {
-    [DEVOPS_ADOPTION_ERROR_KEYS.groups]: s__(
-      'DevopsAdoption|There was an error fetching Groups. Please refresh the page.',
-    ),
-    [DEVOPS_ADOPTION_ERROR_KEYS.enabledNamespaces]: s__(
-      'DevopsAdoption|There was an error fetching Group adoption data. Please refresh the page.',
-    ),
-    [DEVOPS_ADOPTION_ERROR_KEYS.addEnabledNamespaces]: s__(
-      'DevopsAdoption|There was an error enabling the current group. Please refresh the page.',
-    ),
-    tableHeader: {
-      button: s__('DevopsAdoption|Add/remove groups'),
-    },
-  },
-  emptyState: {
-    title: s__('DevopsAdoption|Add a group to get started'),
-    description: s__(
+export const I18N_EMPTY_STATE_TITLE = s__('DevopsAdoption|Add a group to get started');
+export const I18N_EMPTY_STATE_DESCRIPTION = s__(
   'DevopsAdoption|DevOps adoption tracks the use of key features across your favorite groups. Add a group to the table to begin.',
-    ),
-    button: s__('DevopsAdoption|Add Group'),
-  },
-  modal: {
-    addingTitle: s__('DevopsAdoption|Add/remove groups'),
-    addingButton: s__('DevopsAdoption|Save changes'),
-    cancel: __('Cancel'),
-    namePlaceholder: s__('DevopsAdoption|My group'),
-    filterPlaceholder: s__('DevopsAdoption|Filter by name'),
-    error: s__('DevopsAdoption|An error occurred while saving changes. Please try again.'),
-    noResults: s__('DevopsAdoption|No filter results.'),
-  },
-  table: {
-    removeButton: s__('DevopsAdoption|Remove Group from the table.'),
-  },
-  deleteModal: {
-    title: s__('DevopsAdoption|Confirm remove Group'),
-    confirmationMessage: s__(
-      'DevopsAdoption|Are you sure that you would like to remove %{name} from the table?',
-    ),
-    cancel: __('Cancel'),
-    confirm: s__('DevopsAdoption|Remove Group'),
-    error: s__('DevopsAdoption|An error occurred while removing the group. Please try again.'),
-  },
-  tableCell: {
-    trueText: s__('DevopsAdoption|Adopted'),
-    falseText: s__('DevopsAdoption|Not adopted'),
-  },
-};
+);
 
-export const DEVOPS_ADOPTION_TABLE_TEST_IDS = {
-  TABLE_HEADERS: 'header',
-  NAMESPACE: 'namespaceCol',
-  ACTIONS: 'actionsCol',
-  LOCAL_STORAGE_SORT_BY: 'localStorageSortBy',
-  LOCAL_STORAGE_SORT_DESC: 'localStorageSortDesc',
-};
+export const I18N_DELETE_MODAL_TITLE = s__('DevopsAdoption|Confirm remove Group');
+export const I18N_DELETE_MODAL_CONFIRMATION_MESSAGE = s__(
+  'DevopsAdoption|Are you sure that you would like to remove %{name} from the table?',
+);
+export const I18N_DELETE_MODAL_CANCEL = __('Cancel');
+export const I18N_DELETE_MODAL_CONFIRM = s__('DevopsAdoption|Remove Group');
+export const I18N_DELETE_MODAL_ERROR = s__(
+  'DevopsAdoption|An error occurred while removing the group. Please try again.',
+);
 
-export const DEVOPS_ADOPTION_TABLE_SORT_BY_STORAGE_KEY = 'devops_adoption_table_sort_by';
+export const I18N_TABLE_HEADER_TEXT = s__(
+  'DevopsAdoption|Feature adoption is based on usage in the previous calendar month. Last updated: %{timestamp}.',
+);
 
-export const DEVOPS_ADOPTION_TABLE_SORT_DESC_STORAGE_KEY = 'devops_adoption_table_sort_desc';
+export const I18N_CELL_FLAG_TRUE_TEXT = s__('DevopsAdoption|Adopted');
+export const I18N_CELL_FLAG_FALSE_TEXT = s__('DevopsAdoption|Not adopted');
 
-export const DEVOPS_ADOPTION_GROUP_COL_LABEL = __('Group');
+export const I18N_GROUP_COL_LABEL = __('Group');
 
 export const DEVOPS_ADOPTION_OVERALL_CONFIGURATION = {
   title: s__('DevopsAdoption|Overall adoption'),
@@ -197,7 +163,3 @@ export const DEVOPS_ADOPTION_TABLE_CONFIGURATION = [
     ],
   },
 ];
-
-export const TRACK_ADOPTION_TAB_CLICK_EVENT = 'i_analytics_dev_ops_adoption';
-
-export const TRACK_DEVOPS_SCORE_TAB_CLICK_EVENT = 'i_analytics_dev_ops_score';

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

@@ -8,7 +8,9 @@ import DevopsAdoptionApp from 'ee/analytics/devops_report/devops_adoption/compon
 import DevopsAdoptionOverview from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_overview.vue';
 import DevopsAdoptionSection from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_section.vue';
 import {
-  DEVOPS_ADOPTION_STRINGS,
+  I18N_GROUPS_QUERY_ERROR,
+  I18N_ENABLE_NAMESPACE_MUTATION_ERROR,
+  I18N_ENABLED_NAMESPACE_QUERY_ERROR,
   DEFAULT_POLLING_INTERVAL,
   DEVOPS_ADOPTION_TABLE_CONFIGURATION,
 } from 'ee/analytics/devops_report/devops_adoption/constants';
@@ -170,7 +172,7 @@ describe('DevopsAdoptionApp', () => {
       it('displays the error message and calls Sentry', () => {
         const alert = wrapper.findComponent(GlAlert);
         expect(alert.exists()).toBe(true);
-        expect(alert.text()).toBe(DEVOPS_ADOPTION_STRINGS.app.groupsError);
+        expect(alert.text()).toBe(I18N_GROUPS_QUERY_ERROR);
         expect(Sentry.captureException.mock.calls[0][0].networkError).toBe(NETWORK_ERROR);
       });
     });
@@ -270,7 +272,7 @@ describe('DevopsAdoptionApp', () => {
             it('displays the error message ', () => {
               const alert = wrapper.findComponent(GlAlert);
               expect(alert.exists()).toBe(true);
-              expect(alert.text()).toBe(DEVOPS_ADOPTION_STRINGS.app.addEnabledNamespacesError);
+              expect(alert.text()).toBe(I18N_ENABLE_NAMESPACE_MUTATION_ERROR);
             });
 
             it('calls Sentry', () => {
@@ -301,7 +303,7 @@ describe('DevopsAdoptionApp', () => {
       it('displays the error message ', () => {
         const alert = wrapper.findComponent(GlAlert);
         expect(alert.exists()).toBe(true);
-        expect(alert.text()).toBe(DEVOPS_ADOPTION_STRINGS.app.enabledNamespacesError);
+        expect(alert.text()).toBe(I18N_ENABLED_NAMESPACE_QUERY_ERROR);
       });
 
       it('calls Sentry', () => {

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

@@ -4,7 +4,7 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import DevopsAdoptionDeleteModal from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_delete_modal.vue';
-import { DEVOPS_ADOPTION_DELETE_MODAL_ID } from 'ee/analytics/devops_report/devops_adoption/constants';
+import { DELETE_MODAL_ID } from 'ee/analytics/devops_report/devops_adoption/constants';
 import disableDevopsAdoptionNamespaceMutation from 'ee/analytics/devops_report/devops_adoption/graphql/mutations/disable_devops_adoption_namespace.mutation.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -72,7 +72,7 @@ describe('DevopsAdoptionDeleteModal', () => {
       const modal = findModal();
 
       expect(modal.exists()).toBe(true);
-      expect(modal.props('modalId')).toBe(DEVOPS_ADOPTION_DELETE_MODAL_ID);
+      expect(modal.props('modalId')).toBe(DELETE_MODAL_ID);
     });
 
     it('displays the confirmation message', () => {

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

 import { GlEmptyState } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import DevopsAdoptionEmptyState from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_empty_state.vue';
-import { DEVOPS_ADOPTION_STRINGS } from 'ee/analytics/devops_report/devops_adoption/constants';
+import {
+  I18N_EMPTY_STATE_TITLE,
+  I18N_EMPTY_STATE_DESCRIPTION,
+} from 'ee/analytics/devops_report/devops_adoption/constants';
 
 const emptyStateSvgPath = 'illustrations/monitoring/getting_started.svg';
 
@@ -40,7 +43,7 @@ describe('DevopsAdoptionEmptyState', () => {
 
     const emptyState = findEmptyState();
 
-    expect(emptyState.props('title')).toBe(DEVOPS_ADOPTION_STRINGS.emptyState.title);
-    expect(emptyState.props('description')).toBe(DEVOPS_ADOPTION_STRINGS.emptyState.description);
+    expect(emptyState.props('title')).toBe(I18N_EMPTY_STATE_TITLE);
+    expect(emptyState.props('description')).toBe(I18N_EMPTY_STATE_DESCRIPTION);
   });
 });

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

@@ -5,7 +5,9 @@ import DevopsAdoptionDeleteModal from 'ee/analytics/devops_report/devops_adoptio
 import DevopsAdoptionTable from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_table.vue';
 import DevopsAdoptionTableCellFlag from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_table_cell_flag.vue';
 import {
-  DEVOPS_ADOPTION_TABLE_TEST_IDS as TEST_IDS,
+  TABLE_TEST_IDS_NAMESPACE,
+  TABLE_TEST_IDS_ACTIONS,
+  TABLE_TEST_IDS_HEADERS,
   DEVOPS_ADOPTION_TABLE_CONFIGURATION,
 } from 'ee/analytics/devops_report/devops_adoption/constants';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
@@ -58,7 +60,7 @@ describe('DevopsAdoptionTable', () => {
 
     beforeEach(() => {
       createComponent();
-      headers = findTable().findAll(`[data-testid="${TEST_IDS.TABLE_HEADERS}"]`);
+      headers = findTable().findAll(`[data-testid="${TABLE_TEST_IDS_HEADERS}"]`);
     });
 
     it('displays the correct number of headings', () => {
@@ -108,7 +110,7 @@ describe('DevopsAdoptionTable', () => {
       it('displays the correct name', () => {
         createComponent();
 
-        expect(findCol(TEST_IDS.NAMESPACE).text()).toBe('Group 1');
+        expect(findCol(TABLE_TEST_IDS_NAMESPACE).text()).toBe('Group 1');
       });
 
       describe('"This group" badge', () => {
@@ -122,7 +124,7 @@ describe('DevopsAdoptionTable', () => {
         `('$scenario', ({ expected, provide }) => {
           createComponent({ provide });
 
-          const badge = findColSubComponent(TEST_IDS.NAMESPACE, GlBadge);
+          const badge = findColSubComponent(TABLE_TEST_IDS_NAMESPACE, GlBadge);
 
           expect(badge.exists()).toBe(expected);
         });
@@ -134,7 +136,7 @@ describe('DevopsAdoptionTable', () => {
         });
 
         it('grays the text out', () => {
-          const name = findColRowChild(TEST_IDS.NAMESPACE, 1, 'span');
+          const name = findColRowChild(TABLE_TEST_IDS_NAMESPACE, 1, 'span');
 
           expect(name.classes()).toStrictEqual(['gl-text-gray-400']);
         });
@@ -143,7 +145,7 @@ describe('DevopsAdoptionTable', () => {
           let icon;
 
           beforeEach(() => {
-            icon = findColRowChild(TEST_IDS.NAMESPACE, 1, GlIcon);
+            icon = findColRowChild(TABLE_TEST_IDS_NAMESPACE, 1, GlIcon);
           });
 
           it('displays the icon', () => {
@@ -174,7 +176,7 @@ describe('DevopsAdoptionTable', () => {
       });
 
       it('displays the actions icon', () => {
-        const button = findColSubComponent(TEST_IDS.ACTIONS, GlButton);
+        const button = findColSubComponent(TABLE_TEST_IDS_ACTIONS, GlButton);
 
         expect(button.exists()).toBe(true);
         expect(button.props('disabled')).toBe(disabled);
@@ -183,7 +185,7 @@ describe('DevopsAdoptionTable', () => {
       });
 
       it('wraps the icon in an element with a tooltip', () => {
-        const iconWrapper = findCol(TEST_IDS.ACTIONS);
+        const iconWrapper = findCol(TABLE_TEST_IDS_ACTIONS);
         const tooltip = getBinding(iconWrapper.element, 'gl-tooltip');
 
         expect(iconWrapper.exists()).toBe(true);
@@ -214,17 +216,17 @@ describe('DevopsAdoptionTable', () => {
 
     beforeEach(() => {
       createComponent();
-      headers = findTable().findAll(`[data-testid="${TEST_IDS.TABLE_HEADERS}"]`);
+      headers = findTable().findAll(`[data-testid="${TABLE_TEST_IDS_HEADERS}"]`);
     });
 
     it('sorts the namespaces by name', async () => {
-      expect(findCol(TEST_IDS.NAMESPACE).text()).toBe('Group 1');
+      expect(findCol(TABLE_TEST_IDS_NAMESPACE).text()).toBe('Group 1');
 
       headers.at(0).trigger('click');
 
       await nextTick();
 
-      expect(findCol(TEST_IDS.NAMESPACE).text()).toBe('Group 2');
+      expect(findCol(TABLE_TEST_IDS_NAMESPACE).text()).toBe('Group 2');
     });
 
     it('should update local storage when the sort column changes', async () => {

locale/gitlab.pot

@@ -11243,9 +11243,6 @@ msgstr ""
 msgid "DevopsAdoption|%{adoptedCount}/%{featuresCount} %{title} features adopted"
 msgstr ""
 
-msgid "DevopsAdoption|Add Group"
-msgstr ""
-
 msgid "DevopsAdoption|Add a group to get started"
 msgstr ""
 
@@ -11261,21 +11258,12 @@ msgstr ""
 msgid "DevopsAdoption|Add sub-group to table"
 msgstr ""
 
-msgid "DevopsAdoption|Add/remove groups"
-msgstr ""
-
-msgid "DevopsAdoption|Add/remove sub-groups"
-msgstr ""
-
 msgid "DevopsAdoption|Adopted"
 msgstr ""
 
 msgid "DevopsAdoption|An error occurred while removing the group. Please try again."
 msgstr ""
 
-msgid "DevopsAdoption|An error occurred while saving changes. Please try again."
-msgstr ""
-
 msgid "DevopsAdoption|Approvals"
 msgstr ""
 
@@ -11327,21 +11315,12 @@ msgstr ""
 msgid "DevopsAdoption|Feature adoption is based on usage in the previous calendar month. Last updated: %{timestamp}."
 msgstr ""
 
-msgid "DevopsAdoption|Filter by name"
-msgstr ""
-
 msgid "DevopsAdoption|Issues"
 msgstr ""
 
 msgid "DevopsAdoption|MRs"
 msgstr ""
 
-msgid "DevopsAdoption|My group"
-msgstr ""
-
-msgid "DevopsAdoption|No filter results."
-msgstr ""
-
 msgid "DevopsAdoption|No results…"
 msgstr ""
 
@@ -11375,9 +11354,6 @@ msgstr ""
 msgid "DevopsAdoption|SAST enabled for at least one project"
 msgstr ""
 
-msgid "DevopsAdoption|Save changes"
-msgstr ""
-
 msgid "DevopsAdoption|Scanning"
 msgstr ""