[Upgrade assistant] Filter Kibana deprecations issues by status (#211900

) Part of #208262 ## Summary On the Kibana list of deprecations in Upgrade Assistant, replace the `Critical` button filter with a Dropdown allowing to select between `Critical` and `Warning`. Similar to what was done for Elasticsearch deprecations #211581
elastic · Feb 21, 2025 · 3cb68cd · 3cb68cd
1 parent 26fe149
commit 3cb68cd
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 33 deletions.
diff --git a/...st__/client_integration/kibana_deprecations/deprecations_table/deprecations_table.test.ts b/...st__/client_integration/kibana_deprecations/deprecations_table/deprecations_table.test.ts
@@ -81,12 +81,14 @@ describe('Kibana deprecations - Deprecations table', () => {
       const { actions, table } = testBed;
 
       // Show only critical deprecations
-      await actions.searchBar.clickCriticalFilterButton();
+      await actions.searchBar.openStatusFilterDropdown();
+      await actions.searchBar.filterByTitle('Critical');
       const { rows: criticalRows } = table.getMetaData('kibanaDeprecationsTable');
       expect(criticalRows.length).toEqual(mockedCriticalKibanaDeprecations.length);
 
       // Show all deprecations
-      await actions.searchBar.clickCriticalFilterButton();
+      await actions.searchBar.openStatusFilterDropdown();
+      await actions.searchBar.filterByTitle('Critical');
       const { rows: allRows } = table.getMetaData('kibanaDeprecationsTable');
       expect(allRows.length).toEqual(mockedKibanaDeprecations.length);
     });
@@ -95,7 +97,7 @@ describe('Kibana deprecations - Deprecations table', () => {
       const { table, actions } = testBed;
 
       await actions.searchBar.openTypeFilterDropdown();
-      await actions.searchBar.filterByConfigType();
+      await actions.searchBar.filterByTitle('Config');
 
       const { rows: configRows } = table.getMetaData('kibanaDeprecationsTable');
 

diff --git a/..._assistant/__jest__/client_integration/kibana_deprecations/kibana_deprecations.helpers.ts b/..._assistant/__jest__/client_integration/kibana_deprecations/kibana_deprecations.helpers.ts
@@ -57,44 +57,43 @@ const createActions = (testBed: TestBed) => {
     },
   };
 
+  const openFilterByIndex = async (index: number) => {
+    await act(async () => {
+      // EUI doesn't support data-test-subj's on the filter buttons, so we must access via CSS selector
+      find('kibanaDeprecations')
+        .find('.euiSearchBar__filtersHolder')
+        .find('.euiPopover')
+        .find('button.euiFilterButton')
+        .at(index)
+        .simulate('click');
+    });
+
+    component.update();
+
+    // Wait for the filter dropdown to be displayed
+    await new Promise(requestAnimationFrame);
+  };
+
   const searchBarActions = {
     openTypeFilterDropdown: async () => {
-      await act(async () => {
-        // EUI doesn't support data-test-subj's on the filter buttons, so we must access via CSS selector
-        find('kibanaDeprecations')
-          .find('.euiSearchBar__filtersHolder')
-          .find('.euiPopover')
-          .find('button.euiFilterButton')
-          .at(0)
-          .simulate('click');
-      });
-
-      component.update();
+      await openFilterByIndex(1);
     },
 
-    clickCriticalFilterButton: async () => {
-      await act(async () => {
-        // EUI doesn't support data-test-subj's on the filter buttons, so we must access via CSS selector
-        find('kibanaDeprecations')
-          .find('.euiSearchBar__filtersHolder')
-          .find('button.euiFilterButton')
-          .at(0)
-          .simulate('click');
-      });
-
-      component.update();
+    openStatusFilterDropdown: async () => {
+      await openFilterByIndex(0);
     },
 
-    filterByConfigType: async () => {
+    filterByTitle: async (title: string) => {
       // We need to read the document "body" as the filter dropdown (an EuiSelectable)
       // is added in a portalled popover and not inside the component DOM tree.
-      // The "Config" option is expected to be the first item.
-      const configTypeFilterButton: HTMLButtonElement | null = document.body.querySelector(
-        '.euiSelectableList .euiSelectableListItem'
+      const filterButton: HTMLButtonElement | null = document.body.querySelector(
+        `.euiSelectableListItem[title=${title}]`
       );
 
+      expect(filterButton).not.toBeNull();
+
       await act(async () => {
-        configTypeFilterButton!.click();
+        filterButton!.click();
       });
 
       component.update();

diff --git a/...assistant/public/application/components/kibana_deprecations/kibana_deprecations_table.tsx b/...assistant/public/application/components/kibana_deprecations/kibana_deprecations_table.tsx
@@ -74,12 +74,24 @@ const i18nTexts = {
       defaultMessage: 'Type',
     }
   ),
+  statusFilterLabel: i18n.translate(
+    'xpack.upgradeAssistant.kibanaDeprecations.table.statusFilterLabel',
+    {
+      defaultMessage: 'Status',
+    }
+  ),
   criticalFilterLabel: i18n.translate(
     'xpack.upgradeAssistant.kibanaDeprecations.table.criticalFilterLabel',
     {
       defaultMessage: 'Critical',
     }
   ),
+  warningFilterLabel: i18n.translate(
+    'xpack.upgradeAssistant.kibanaDeprecations.table.warningFilterLabel',
+    {
+      defaultMessage: 'Warning',
+    }
+  ),
   searchPlaceholderLabel: i18n.translate(
     'xpack.upgradeAssistant.kibanaDeprecations.table.searchPlaceholderLabel',
     {
@@ -181,10 +193,20 @@ export const KibanaDeprecationsTable: React.FunctionComponent<Props> = ({
   const searchConfig: Search = {
     filters: [
       {
-        type: 'field_value_toggle',
-        name: i18nTexts.criticalFilterLabel,
+        type: 'field_value_selection',
         field: 'level',
-        value: 'critical',
+        name: i18nTexts.statusFilterLabel,
+        multiSelect: false,
+        options: [
+          {
+            value: 'critical',
+            name: i18nTexts.criticalFilterLabel,
+          },
+          {
+            value: 'warning',
+            name: i18nTexts.warningFilterLabel,
+          },
+        ],
       },
       {
         type: 'field_value_selection',