Migrate health status dropdown to use gitlab ui

Updates FE by using constant and reference from $options

ee/app/assets/javascripts/sidebar/components/status/health_status_dropdown.vue

 <script>
-import {
-  GlButton,
-  GlDeprecatedDropdownItem,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownDivider,
-} from '@gitlab/ui';
-import { s__ } from '~/locale';
-import { healthStatusTextMap } from '../../constants';
+import { GlDropdownItem, GlDropdown, GlDropdownDivider } from '@gitlab/ui';
+import { healthStatusTextMap, I18N_DROPDOWN } from '../../constants';
 
 export default {
   components: {
-    GlButton,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
-    GlDeprecatedDropdownDivider,
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownDivider,
   },
   props: {
     isEditable: {
@@ -44,23 +37,16 @@ export default {
   },
   computed: {
     statusText() {
-      return this.status ? healthStatusTextMap[this.status] : s__('Sidebar|None');
+      return this.status ? healthStatusTextMap[this.status] : this.$options.i18n.noneText;
     },
     dropdownText() {
       if (this.status === null) {
-        return s__('No status');
+        return this.$options.i18n.noStatusText;
       }
 
-      return this.status ? healthStatusTextMap[this.status] : s__('Select health status');
-    },
-    tooltipText() {
-      let tooltipText = s__('Sidebar|Health status');
-
-      if (this.status) {
-        tooltipText += `: ${this.statusText}`;
-      }
-
-      return tooltipText;
+      return this.status
+        ? healthStatusTextMap[this.status]
+        : this.$options.i18n.selectPlaceholderText;
     },
   },
   watch: {
@@ -81,56 +67,40 @@ export default {
       return this.status === status;
     },
   },
+  i18n: I18N_DROPDOWN,
 };
 </script>
 
 <template>
-  <div class="dropdown dropdown-menu-selectable">
-    <gl-deprecated-dropdown
+  <div class="dropdown">
+    <gl-dropdown
       ref="dropdown"
-      class="w-100"
+      class="gl-w-full"
+      :header-text="$options.i18n.dropdownHeaderText"
       :text="dropdownText"
       @keydown.esc.native="hideDropdown"
       @hide="hideDropdown"
     >
-      <div class="dropdown-title gl-display-flex">
-        <span class="health-title gl-ml-auto">{{ s__('Sidebar|Assign health status') }}</span>
-        <gl-button
-          :aria-label="__('Close')"
-          variant="link"
-          class="dropdown-title-button dropdown-menu-close gl-ml-auto gl-text-gray-200!"
-          icon="close"
-          @click="hideDropdown"
-        />
-      </div>
-
-      <div class="dropdown-content dropdown-body">
-        <gl-deprecated-dropdown-item @click="handleDropdownClick(null)">
-          <gl-button
-            variant="link"
-            class="dropdown-item health-dropdown-item"
-            :class="{ 'is-active': isSelected(null) }"
-          >
-            {{ s__('Sidebar|No status') }}
-          </gl-button>
-        </gl-deprecated-dropdown-item>
+      <gl-dropdown-item
+        :is-check-item="true"
+        :is-checked="isSelected(null)"
+        @click="handleDropdownClick(null)"
+      >
+        {{ $options.i18n.noStatusText }}
+      </gl-dropdown-item>
 
-        <gl-deprecated-dropdown-divider class="divider health-divider" />
+      <gl-dropdown-divider />
 
-        <gl-deprecated-dropdown-item
-          v-for="option in statusOptions"
-          :key="option.key"
-          @click="handleDropdownClick(option.key)"
-        >
-          <gl-button
-            variant="link"
-            class="dropdown-item health-dropdown-item"
-            :class="{ 'is-active': isSelected(option.key) }"
-          >
-            {{ option.value }}
-          </gl-button>
-        </gl-deprecated-dropdown-item>
-      </div>
-    </gl-deprecated-dropdown>
+      <gl-dropdown-item
+        v-for="option in statusOptions"
+        :key="option.key"
+        :is-check-item="true"
+        :is-checked="isSelected(option.key)"
+        data-testid="health-status-dropdown-item"
+        @click="handleDropdownClick(option.key)"
+      >
+        {{ option.value }}
+      </gl-dropdown-item>
+    </gl-dropdown>
   </div>
 </template>

ee/app/assets/javascripts/sidebar/components/status/status.vue

@@ -10,7 +10,7 @@ import {
 } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import { s__ } from '~/locale';
-import { healthStatusTextMap } from '../../constants';
+import { healthStatusTextMap, I18N_DROPDOWN } from '../../constants';
 
 export default {
   directives: {
@@ -62,10 +62,12 @@ export default {
       return this.isEditable && this.status;
     },
     statusText() {
-      return this.status ? healthStatusTextMap[this.status] : s__('Sidebar|None');
+      return this.status ? healthStatusTextMap[this.status] : this.$options.i18n.noneText;
     },
     dropdownText() {
-      return this.status ? healthStatusTextMap[this.status] : s__('Select health status');
+      return this.status
+        ? healthStatusTextMap[this.status]
+        : this.$options.i18n.selectPlaceholderText;
     },
     statusTooltip() {
       let tooltipText = s__('Sidebar|Health status');
@@ -137,6 +139,7 @@ export default {
       }
     },
   },
+  i18n: I18N_DROPDOWN,
 };
 </script>
 
@@ -173,61 +176,43 @@ export default {
 
       <div
         data-testid="dropdownWrapper"
-        class="dropdown dropdown-menu-selectable"
+        class="dropdown"
         :class="{ show: isDropdownShowing, 'gl-display-none': !isDropdownShowing }"
       >
         <gl-dropdown
           ref="dropdown"
           class="gl-w-full"
+          :header-text="$options.i18n.dropdownHeaderText"
           :text="dropdownText"
           @keydown.esc.native="hideDropdown"
           @hide="hideDropdown"
         >
-          <div class="dropdown-title gl-display-flex">
-            <span class="health-title gl-ml-auto">{{ s__('Sidebar|Assign health status') }}</span>
-            <gl-button
-              :aria-label="__('Close')"
-              variant="link"
-              class="dropdown-title-button dropdown-menu-close gl-ml-auto gl-text-gray-200!"
-              icon="close"
-              @click="hideDropdown"
-            />
-          </div>
-
-          <div class="dropdown-content dropdown-body">
-            <gl-dropdown-item @click="handleDropdownClick(null)">
-              <gl-button
-                variant="link"
-                class="dropdown-item health-dropdown-item gl-px-8!"
-                :class="{ 'is-active': isSelected(null) }"
-              >
-                {{ s__('Sidebar|No status') }}
-              </gl-button>
-            </gl-dropdown-item>
+          <gl-dropdown-item
+            :is-check-item="true"
+            :is-checked="isSelected(null)"
+            @click="handleDropdownClick(null)"
+          >
+            {{ $options.i18n.noStatusText }}
+          </gl-dropdown-item>
 
-            <gl-dropdown-divider class="divider health-divider" />
+          <gl-dropdown-divider />
 
-            <gl-dropdown-item
-              v-for="option in statusOptions"
-              :key="option.key"
-              @click="handleDropdownClick(option.key)"
-            >
-              <gl-button
-                variant="link"
-                class="dropdown-item health-dropdown-item gl-px-8!"
-                :class="{ 'is-active': isSelected(option.key) }"
-              >
-                {{ option.value }}
-              </gl-button>
-            </gl-dropdown-item>
-          </div>
+          <gl-dropdown-item
+            v-for="option in statusOptions"
+            :key="option.key"
+            :is-check-item="true"
+            :is-checked="isSelected(option.key)"
+            @click="handleDropdownClick(option.key)"
+          >
+            {{ option.value }}
+          </gl-dropdown-item>
         </gl-dropdown>
       </div>
 
       <gl-loading-icon v-if="isFetching" :inline="true" />
       <p v-else-if="!isDropdownShowing" class="value gl-m-0" :class="{ 'no-value': !status }">
         <span v-if="status" class="text-plain gl-font-weight-bold">{{ statusText }}</span>
-        <span v-else>{{ __('None') }}</span>
+        <span v-else>{{ $options.i18n.noneText }}</span>
       </p>
     </div>
   </div>

ee/app/assets/javascripts/sidebar/constants.js

-import { __ } from '~/locale';
+import { s__, __ } from '~/locale';
 
 export const healthStatus = {
   ON_TRACK: 'onTrack',
@@ -29,3 +29,10 @@ export const healthStatusForRestApi = {
 };
 
 export const MAX_DISPLAY_WEIGHT = 99999;
+
+export const I18N_DROPDOWN = {
+  dropdownHeaderText: s__('Sidebar|Assign health status'),
+  noStatusText: s__('Sidebar|No status'),
+  noneText: s__('Sidebar|None'),
+  selectPlaceholderText: s__('Select health status'),
+};

ee/changelogs/unreleased/233598-health-status-sidebar-dropdown.yml

+---
+title: Migrate health status dropdown to use gitlab ui
+merge_request: 52273
+author:
+type: changed

ee/spec/features/issues/bulk_assignment_health_status_spec.rb

@@ -113,7 +113,7 @@ RSpec.describe 'Issues > Health status bulk assignment' do
     page.within('.issues-bulk-update') do
       click_button 'Select health status'
       items.map do |item|
-        find('.gl-button-text', text: item).click
+        find('[data-testid="health-status-dropdown-item"]', text: item).click
       end
     end
   end

ee/spec/frontend/sidebar/components/status/status_spec.js

 import { GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import Status from 'ee/sidebar/components/status/status.vue';
-import { healthStatus, healthStatusTextMap } from 'ee/sidebar/constants';
+import { healthStatus, healthStatusTextMap, I18N_DROPDOWN } from 'ee/sidebar/constants';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
 const getStatusText = (wrapper) => wrapper.find('.value .text-plain').text();
@@ -182,7 +182,7 @@ describe('Status', () => {
       });
 
       it('shows "None"', () => {
-        expect(wrapper.find('.no-value').text()).toBe('None');
+        expect(wrapper.find('.no-value').text()).toBe(I18N_DROPDOWN.noneText);
       });
 
       it('shows "Status" in the tooltip', () => {
@@ -258,9 +258,9 @@ describe('Status', () => {
       });
 
       it('shows text to ask the user to pick an option', () => {
-        const message = 'Assign health status';
-
-        expect(getDropdownElement(wrapper).find('.health-title').text()).toContain(message);
+        expect(getDropdownElement(wrapper).props('headerText')).toBe(
+          I18N_DROPDOWN.dropdownHeaderText,
+        );
       });
 
       it('hides form when the `edit` button is clicked', async () => {

locale/gitlab.pot

@@ -19516,9 +19516,6 @@ msgstr ""
 msgid "No start date"
 msgstr ""
 
-msgid "No status"
-msgstr ""
-
 msgid "No template"
 msgstr ""