Replace GlDeprecatedDropdown with GlDropdown in app/assets/javascripts/logs

app/assets/javascripts/logs/components/environment_logs.vue

@@ -3,12 +3,11 @@ import { throttle } from 'lodash';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import {
   GlSprintf,
-  GlIcon,
   GlAlert,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownHeader,
-  GlDeprecatedDropdownItem,
-  GlDeprecatedDropdownDivider,
+  GlDropdown,
+  GlDropdownSectionHeader,
+  GlDropdownItem,
+  GlDropdownDivider,
   GlInfiniteScroll,
 } from '@gitlab/ui';
 
@@ -23,12 +22,11 @@ import { formatDate } from '../utils';
 export default {
   components: {
     GlSprintf,
-    GlIcon,
     GlAlert,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownHeader,
-    GlDeprecatedDropdownItem,
-    GlDeprecatedDropdownDivider,
+    GlDropdown,
+    GlDropdownSectionHeader,
+    GlDropdownItem,
+    GlDropdownDivider,
     GlInfiniteScroll,
     LogSimpleFilters,
     LogAdvancedFilters,
@@ -174,46 +172,38 @@ export default {
 
     <div class="top-bar d-md-flex border bg-secondary-50 pt-2 pr-1 pb-0 pl-2">
       <div class="flex-grow-0">
-        <gl-deprecated-dropdown
+        <gl-dropdown
           id="environments-dropdown"
           :text="environments.current || managedApps.current"
           :disabled="environments.isLoading"
-          class="mb-2 gl-h-32 pr-2 d-flex d-md-block js-environments-dropdown"
+          class="gl-mr-3 gl-mb-3 gl-display-flex gl-display-md-block js-environments-dropdown"
         >
-          <gl-deprecated-dropdown-header class="gl-text-center">
+          <gl-dropdown-section-header>
             {{ s__('Environments|Environments') }}
-          </gl-deprecated-dropdown-header>
-          <gl-deprecated-dropdown-item
+          </gl-dropdown-section-header>
+          <gl-dropdown-item
             v-for="env in environments.options"
             :key="env.id"
+            :is-check-item="true"
+            :is-checked="isCurrentEnvironment(env.name)"
             @click="showEnvironment(env.name)"
           >
-            <div class="d-flex">
-              <gl-icon
-                :class="{ invisible: !isCurrentEnvironment(env.name) }"
-                name="status_success_borderless"
-              />
-              <div class="gl-flex-grow-1">{{ env.name }}</div>
-            </div>
-          </gl-deprecated-dropdown-item>
-          <gl-deprecated-dropdown-divider />
-          <gl-deprecated-dropdown-header class="gl-text-center">
+            {{ env.name }}
+          </gl-dropdown-item>
+          <gl-dropdown-divider />
+          <gl-dropdown-section-header>
             {{ s__('Environments|Managed apps') }}
-          </gl-deprecated-dropdown-header>
-          <gl-deprecated-dropdown-item
+          </gl-dropdown-section-header>
+          <gl-dropdown-item
             v-for="app in managedApps.options"
             :key="app.id"
+            :is-check-item="true"
+            :is-checked="isCurrentManagedApp(app.name)"
             @click="showManagedApp(app.name)"
           >
-            <div class="gl-display-flex">
-              <gl-icon
-                :class="{ invisible: !isCurrentManagedApp(app.name) }"
-                name="status_success_borderless"
-              />
-              <div class="gl-flex-grow-1">{{ app.name }}</div>
-            </div>
-          </gl-deprecated-dropdown-item>
-        </gl-deprecated-dropdown>
+            {{ app.name }}
+          </gl-dropdown-item>
+        </gl-dropdown>
       </div>
 
       <log-advanced-filters

app/assets/javascripts/logs/components/log_simple_filters.vue

 <script>
 import { mapActions, mapState } from 'vuex';
-import {
-  GlIcon,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownHeader,
-  GlDeprecatedDropdownItem,
-} from '@gitlab/ui';
+import { GlDropdown, GlDropdownSectionHeader, GlDropdownItem } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 export default {
   components: {
-    GlIcon,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownHeader,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownSectionHeader,
+    GlDropdownItem,
   },
   props: {
     disabled: {
@@ -44,35 +38,31 @@ export default {
 </script>
 <template>
   <div>
-    <gl-deprecated-dropdown
+    <gl-dropdown
       ref="podsDropdown"
       :text="podDropdownText"
       :disabled="disabled"
-      class="mb-2 gl-h-32 pr-2 d-flex d-md-block flex-grow-0 qa-pods-dropdown"
+      class="gl-mr-3 gl-mb-3 gl-display-flex gl-display-md-block qa-pods-dropdown"
     >
-      <gl-deprecated-dropdown-header class="text-center">
+      <gl-dropdown-section-header>
         {{ s__('Environments|Select pod') }}
-      </gl-deprecated-dropdown-header>
+      </gl-dropdown-section-header>
 
-      <gl-deprecated-dropdown-item v-if="!pods.options.length" disabled>
+      <gl-dropdown-item v-if="!pods.options.length" disabled>
         <span ref="noPodsMsg" class="text-muted">
           {{ s__('Environments|No pods to display') }}
         </span>
-      </gl-deprecated-dropdown-item>
-      <gl-deprecated-dropdown-item
+      </gl-dropdown-item>
+      <gl-dropdown-item
         v-for="podName in pods.options"
         :key="podName"
+        :is-check-item="true"
+        :is-checked="isCurrentPod(podName)"
         class="text-nowrap"
         @click="showPodLogs(podName)"
       >
-        <div class="d-flex">
-          <gl-icon
-            :class="{ invisible: !isCurrentPod(podName) }"
-            name="status_success_borderless"
-          />
-          <div class="flex-grow-1">{{ podName }}</div>
-        </div>
-      </gl-deprecated-dropdown-item>
-    </gl-deprecated-dropdown>
+        {{ podName }}
+      </gl-dropdown-item>
+    </gl-dropdown>
   </div>
 </template>

changelogs/unreleased/Replace-GlDeprecatedDropdown-with-GlDropdown-in-app-assets-javascripts-lo.yml

+---
+title: Replace-GlDeprecatedDropdown-with-GlDropdown-in-app/assets/javascripts/logs
+merge_request: 41421
+author: nuwe1
+type: other

spec/frontend/logs/components/environment_logs_spec.js

-import { GlSprintf, GlIcon, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlSprintf, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import EnvironmentLogs from '~/logs/components/environment_logs.vue';
 
@@ -121,7 +121,7 @@ describe('EnvironmentLogs', () => {
   it('displays UI elements', () => {
     initWrapper();
 
-    expect(findEnvironmentsDropdown().is(GlDeprecatedDropdown)).toBe(true);
+    expect(findEnvironmentsDropdown().is(GlDropdown)).toBe(true);
     expect(findSimpleFilters().exists()).toBe(true);
     expect(findLogControlButtons().exists()).toBe(true);
 
@@ -164,7 +164,7 @@ describe('EnvironmentLogs', () => {
 
     it('displays a disabled environments dropdown', () => {
       expect(findEnvironmentsDropdown().attributes('disabled')).toBe('true');
-      expect(findEnvironmentsDropdown().findAll(GlDeprecatedDropdownItem).length).toBe(0);
+      expect(findEnvironmentsDropdown().findAll(GlDropdownItem).length).toBe(0);
     });
 
     it('does not update buttons state', () => {
@@ -241,7 +241,7 @@ describe('EnvironmentLogs', () => {
     });
 
     it('populates environments dropdown', () => {
-      const items = findEnvironmentsDropdown().findAll(GlDeprecatedDropdownItem);
+      const items = findEnvironmentsDropdown().findAll(GlDropdownItem);
       expect(findEnvironmentsDropdown().props('text')).toBe(mockEnvName);
       expect(items.length).toBe(mockEnvironments.length);
       mockEnvironments.forEach((env, i) => {
@@ -251,14 +251,14 @@ describe('EnvironmentLogs', () => {
     });
 
     it('dropdown has one environment selected', () => {
-      const items = findEnvironmentsDropdown().findAll(GlDeprecatedDropdownItem);
+      const items = findEnvironmentsDropdown().findAll(GlDropdownItem);
       mockEnvironments.forEach((env, i) => {
         const item = items.at(i);
 
         if (item.text() !== mockEnvName) {
-          expect(item.find(GlIcon).classes('invisible')).toBe(true);
+          expect(item.find(GlDropdownItem).attributes('ischecked')).toBeFalsy();
         } else {
-          expect(item.find(GlIcon).classes('invisible')).toBe(false);
+          expect(item.find(GlDropdownItem).attributes('ischecked')).toBeTruthy();
         }
       });
     });
@@ -286,7 +286,7 @@ describe('EnvironmentLogs', () => {
 
     describe('when user clicks', () => {
       it('environment name, trace is refreshed', () => {
-        const items = findEnvironmentsDropdown().findAll(GlDeprecatedDropdownItem);
+        const items = findEnvironmentsDropdown().findAll(GlDropdownItem);
         const index = 1; // any env
 
         expect(dispatch).not.toHaveBeenCalledWith(`${module}/showEnvironment`, expect.anything());

spec/frontend/logs/components/log_simple_filters_spec.js

-import { GlIcon, GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { createStore } from '~/logs/stores';
 import { mockPods, mockPodName } from '../mock_data';
@@ -17,7 +17,7 @@ describe('LogSimpleFilters', () => {
   const findPodsNoPodsText = () => wrapper.find({ ref: 'noPodsMsg' });
   const findPodsDropdownItems = () =>
     findPodsDropdown()
-      .findAll(GlDeprecatedDropdownItem)
+      .findAll(GlDropdownItem)
       .filter(item => !('disabled' in item.attributes()));
 
   const mockPodsLoading = () => {
@@ -114,9 +114,9 @@ describe('LogSimpleFilters', () => {
       mockPods.forEach((pod, i) => {
         const item = items.at(i);
         if (item.text() !== mockPodName) {
-          expect(item.find(GlIcon).classes('invisible')).toBe(true);
+          expect(item.find(GlDropdownItem).attributes('ischecked')).toBeFalsy();
         } else {
-          expect(item.find(GlIcon).classes('invisible')).toBe(false);
+          expect(item.find(GlDropdownItem).attributes('ischecked')).toBeTruthy();
         }
       });
     });