From 1da1ccdb21779e49b154ca14d598dad950cece04 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Fri, 15 Sep 2023 16:33:13 +0200
Subject: [PATCH] PMM-12378 Clear toggle when clicking on services link

---
 .../app/percona/inventory/Inventory.constants.ts  |  1 +
 public/app/percona/inventory/Tabs/Nodes.tsx       | 15 ++++++++++-----
 public/app/percona/inventory/Tabs/Services.tsx    |  9 ++-------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/public/app/percona/inventory/Inventory.constants.ts b/public/app/percona/inventory/Inventory.constants.ts
index a357f6c9ad833..f17755c294f47 100644
--- a/public/app/percona/inventory/Inventory.constants.ts
+++ b/public/app/percona/inventory/Inventory.constants.ts
@@ -29,3 +29,4 @@ export const inventoryTypes = {
 export const GET_SERVICES_CANCEL_TOKEN = 'getServices';
 export const GET_NODES_CANCEL_TOKEN = 'getNodes';
 export const GET_AGENTS_CANCEL_TOKEN = 'getAgents';
+export const CLUSTERS_SWITCH_KEY = 'pmm-organize-by-clusters';
diff --git a/public/app/percona/inventory/Tabs/Nodes.tsx b/public/app/percona/inventory/Tabs/Nodes.tsx
index 5019cb6240751..7d738f55d8cc1 100644
--- a/public/app/percona/inventory/Tabs/Nodes.tsx
+++ b/public/app/percona/inventory/Tabs/Nodes.tsx
@@ -27,7 +27,7 @@ import { useAppDispatch } from 'app/store/store';
 import { useSelector } from 'app/types';
 
 import { appEvents } from '../../../core/app_events';
-import { GET_NODES_CANCEL_TOKEN } from '../Inventory.constants';
+import { CLUSTERS_SWITCH_KEY, GET_NODES_CANCEL_TOKEN } from '../Inventory.constants';
 import { Messages } from '../Inventory.messages';
 import { FlattenNode, MonitoringStatus, Node } from '../Inventory.types';
 import { StatusBadge } from '../components/StatusBadge/StatusBadge';
@@ -65,6 +65,11 @@ export const NodesTab = () => {
     [styles.actionItemTxtSpan]
   );
 
+  const clearClusterToggle = useCallback(() => {
+    // Reset toggle to false when linking from nodes
+    localStorage.removeItem(CLUSTERS_SWITCH_KEY);
+  }, []);
+
   const columns = useMemo(
     (): Array<ExtendedColumn<Node>> => [
       {
@@ -155,7 +160,7 @@ export const NodesTab = () => {
 
           if (value.length === 1) {
             return (
-              <Link className={styles.link} href={getServiceLink(value[0].serviceId)}>
+              <Link className={styles.link} href={getServiceLink(value[0].serviceId)} onClick={clearClusterToggle}>
                 {value[0].serviceName}
               </Link>
             );
@@ -166,7 +171,7 @@ export const NodesTab = () => {
       },
       getExpandAndActionsCol(getActions),
     ],
-    [styles, getActions]
+    [styles, getActions, clearClusterToggle]
   );
 
   const loadData = useCallback(async () => {
@@ -206,7 +211,7 @@ export const NodesTab = () => {
             <DetailsRow.Contents title={Messages.nodes.details.serviceNames}>
               {row.original.services.map((service) => (
                 <div key={service.serviceId}>
-                  <Link className={styles.link} href={getServiceLink(service.serviceId)}>
+                  <Link className={styles.link} href={getServiceLink(service.serviceId)} onClick={clearClusterToggle}>
                     {service.serviceName}
                   </Link>
                 </div>
@@ -234,7 +239,7 @@ export const NodesTab = () => {
         </DetailsRow>
       );
     },
-    [styles.tagList, styles.link]
+    [styles.tagList, styles.link, clearClusterToggle]
   );
 
   const deletionMsg = useMemo(() => {
diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
index f68e7e9f696aa..6e900b62d5b85 100644
--- a/public/app/percona/inventory/Tabs/Services.tsx
+++ b/public/app/percona/inventory/Tabs/Services.tsx
@@ -6,7 +6,6 @@ import { useLocalStorage } from 'react-use';
 import { locationService } from '@grafana/runtime';
 import { Button, HorizontalGroup, Icon, InlineSwitch, Tooltip, useStyles2 } from '@grafana/ui';
 import { OldPage } from 'app/core/components/Page/Page';
-import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoader';
 import { ReadMoreLink } from 'app/percona/shared/components/Elements/TechnicalPreview/TechnicalPreview';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
@@ -18,7 +17,7 @@ import { logger } from 'app/percona/shared/helpers/logger';
 import { useAppDispatch } from 'app/store/store';
 import { useSelector } from 'app/types';
 
-import { GET_SERVICES_CANCEL_TOKEN } from '../Inventory.constants';
+import { CLUSTERS_SWITCH_KEY, GET_SERVICES_CANCEL_TOKEN } from '../Inventory.constants';
 import { Messages } from '../Inventory.messages';
 import { FlattenService } from '../Inventory.types';
 import DeleteServiceModal from '../components/DeleteServiceModal';
@@ -50,8 +49,7 @@ export const Services = () => {
       }),
     [fetchedServices]
   );
-  const [showClusters, setShowClusters] = useLocalStorage('pmm-organize-by-clusters', false);
-  const [params] = useQueryParams();
+  const [showClusters, setShowClusters] = useLocalStorage(CLUSTERS_SWITCH_KEY, false);
 
   const loadData = useCallback(async () => {
     try {
@@ -73,9 +71,6 @@ export const Services = () => {
   useEffect(() => {
     loadData();
 
-    // Reset when linking from nodes
-    setShowClusters(params['search-select'] !== 'serviceId');
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);