[8.10] [Infra UI] Fix filter popovers not being closed on trigger but…

…ton click (elastic#164060) (elastic#164143)

# Backport

This will backport the following commits from `main` to `8.10`:
- [[Infra UI] Fix filter popovers not being closed on trigger button
click (elastic#164060)](elastic#164060)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Mykola
Harmash","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-08-17T09:05:32Z","message":"[Infra
UI] Fix filter popovers not being closed on trigger button click
(elastic#164060)\n\nFixes elastic#96534 \r\n\r\n## Summary\r\n\r\nFixes the bug with
some popovers are not closed if their trigger buttons\r\nare
clicked\r\n\r\n*Bug demos from the original
issue*\r\nInventory:\r\n\r\n![](https://user-images.githubusercontent.com/4104278/113987390-a222e900-984e-11eb-872b-f12f5abe4540.gif)\r\nMetrics
Explorer\r\n\r\n![](https://user-images.githubusercontent.com/4104278/113988929-3b9eca80-9850-11eb-859a-c639b89af8a5.gif)\r\n\r\n###
How to test\r\n\r\n* Checkout the branch locally\r\n* Goto \"Inventory\"
section\r\n* Click on \"Hosts\" filter\r\n* Make sure popover opens\r\n*
Click on \"Hosts\" again\r\n* Make sure the popover closes\r\n* Check
the same for \"Sort by\" filter\r\n* Check the same for chart
\"Actions\" in \"Metrics
Explorer\"","sha":"c8083dd6767a88f15379531319b5636d20e79451","branchLabelMapping":{"^v8.10.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Metrics
UI","Team:Infra Monitoring
UI","release_note:skip","backport:prev-minor","v8.11.0"],"number":164060,"url":"https://github.com/elastic/kibana/pull/164060","mergeCommit":{"message":"[Infra
UI] Fix filter popovers not being closed on trigger button click
(elastic#164060)\n\nFixes elastic#96534 \r\n\r\n## Summary\r\n\r\nFixes the bug with
some popovers are not closed if their trigger buttons\r\nare
clicked\r\n\r\n*Bug demos from the original
issue*\r\nInventory:\r\n\r\n![](https://user-images.githubusercontent.com/4104278/113987390-a222e900-984e-11eb-872b-f12f5abe4540.gif)\r\nMetrics
Explorer\r\n\r\n![](https://user-images.githubusercontent.com/4104278/113988929-3b9eca80-9850-11eb-859a-c639b89af8a5.gif)\r\n\r\n###
How to test\r\n\r\n* Checkout the branch locally\r\n* Goto \"Inventory\"
section\r\n* Click on \"Hosts\" filter\r\n* Make sure popover opens\r\n*
Click on \"Hosts\" again\r\n* Make sure the popover closes\r\n* Check
the same for \"Sort by\" filter\r\n* Check the same for chart
\"Actions\" in \"Metrics
Explorer\"","sha":"c8083dd6767a88f15379531319b5636d20e79451"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"8.11","label":"v8.11.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Mykola Harmash <[email protected]>

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_inventory_switcher.tsx

@@ -31,7 +31,7 @@ export const WaffleInventorySwitcher: React.FC = () => {
   } = useWaffleOptionsContext();
   const [isOpen, setIsOpen] = useState(false);
   const closePopover = useCallback(() => setIsOpen(false), []);
-  const openPopover = useCallback(() => setIsOpen(true), []);
+  const togglePopover = useCallback(() => setIsOpen((currentIsOpen) => !currentIsOpen), []);
   const goToNodeType = useCallback(
     (targetNodeType: InventoryItemType) => {
       closePopover();
@@ -127,7 +127,7 @@ export const WaffleInventorySwitcher: React.FC = () => {
   const button = (
     <DropdownButton
       data-test-subj={'openInventorySwitcher'}
-      onClick={openPopover}
+      onClick={togglePopover}
       label={i18n.translate('xpack.infra.waffle.showLabel', { defaultMessage: 'Show' })}
       showKubernetesInfo={true}
     >

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls.tsx

@@ -25,20 +25,15 @@ const LABELS = {
 export const WaffleSortControls = ({ sort, onChange }: Props) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
-  const showPopover = useCallback(() => {
-    setIsOpen(true);
-  }, [setIsOpen]);
-
-  const closePopover = useCallback(() => {
-    setIsOpen(false);
-  }, [setIsOpen]);
+  const togglePopover = useCallback(() => setIsOpen((currentIsOpen) => !currentIsOpen), []);
+  const closePopover = useCallback(() => setIsOpen(false), []);
 
   const label = LABELS[sort.by];
 
   const button = (
     <DropdownButton
       label={i18n.translate('xpack.infra.waffle.sortLabel', { defaultMessage: 'Sort by' })}
-      onClick={showPopover}
+      onClick={togglePopover}
       data-test-subj={'waffleSortByDropdown'}
     >
       {label}

x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart_context_menu.tsx

@@ -181,7 +181,7 @@ export const MetricsExplorerChartContextMenu: React.FC<Props> = ({
   ];
 
   const handleClose = () => setPopoverState(false);
-  const handleOpen = () => setPopoverState(true);
+  const togglePopover = () => setPopoverState((currentIsOpen) => !currentIsOpen);
   const actionAriaLabel = i18n.translate('xpack.infra.metricsExplorer.actionsLabel.aria', {
     defaultMessage: 'Actions for {grouping}',
     values: { grouping: series.id },
@@ -193,7 +193,7 @@ export const MetricsExplorerChartContextMenu: React.FC<Props> = ({
     <EuiButtonEmpty
       data-test-subj="infraMetricsExplorerChartContextMenuButton"
       contentProps={{ 'aria-label': actionAriaLabel }}
-      onClick={handleOpen}
+      onClick={togglePopover}
       size="s"
       iconType="arrowDown"
       iconSide="right"

x-pack/test/functional/apps/infra/home_page.ts

@@ -197,6 +197,10 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         await pageObjects.infraHome.openTimeline();
         await pageObjects.infraHome.closeTimeline();
       });
+
+      it('toggles the inventory switcher', async () => {
+        await pageObjects.infraHome.toggleInventorySwitcher();
+      });
     });
 
     describe('alerts flyouts', () => {

x-pack/test/functional/page_objects/infra_home_page.ts

@@ -171,9 +171,16 @@ export function InfraHomePageProvider({ getService, getPageObjects }: FtrProvide
       return timelineSelectorsVisible.every((visible) => !visible);
     },
 
-    async openInvenotrySwitcher() {
+    async openInventorySwitcher() {
       await testSubjects.click('openInventorySwitcher');
-      return await testSubjects.find('goToHost');
+      return await testSubjects.find('goToHost1');
+    },
+
+    async toggleInventorySwitcher() {
+      await testSubjects.click('openInventorySwitcher');
+      await testSubjects.find('goToHost');
+      await testSubjects.click('openInventorySwitcher');
+      return await testSubjects.missingOrFail('goToHost');
     },
 
     async goToHost() {