From 74f3826235799f3bf9b73abc5ea56cda2119881a Mon Sep 17 00:00:00 2001
From: Juho Heikka <juho.heikka@gmail.com>
Date: Wed, 15 Sep 2021 15:48:12 +0300
Subject: [PATCH] Second click on list item closes the details view (#3809)

Signed-off-by: Juho Heikka <juho.heikka@gmail.com>
---
 .../components/+apps-helm-charts/helm-charts.tsx       | 10 +++++++++-
 src/renderer/components/+apps-releases/releases.tsx    | 10 +++++++++-
 src/renderer/components/+catalog/catalog.tsx           |  6 +++++-
 src/renderer/components/+cluster/cluster-issues.tsx    |  4 ++--
 src/renderer/components/kube-detail-params/params.ts   | 10 ++++++++++
 .../kube-object-list-layout.tsx                        |  4 ++--
 6 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/+apps-helm-charts/helm-charts.tsx b/src/renderer/components/+apps-helm-charts/helm-charts.tsx
index 8a47654adc..da5f9f8c5a 100644
--- a/src/renderer/components/+apps-helm-charts/helm-charts.tsx
+++ b/src/renderer/components/+apps-helm-charts/helm-charts.tsx
@@ -55,6 +55,14 @@ export class HelmCharts extends Component<Props> {
     return helmChartStore.getByName(chartName, repo);
   }
 
+  onDetails = (chart: HelmChart) => {
+    if (chart === this.selectedChart) {
+      this.hideDetails();
+    } else {
+      this.showDetails(chart);
+    }
+  };
+
   showDetails = (chart: HelmChart) => {
     if (!chart) {
       navigation.push(helmChartsURL());
@@ -121,7 +129,7 @@ export class HelmCharts extends Component<Props> {
             { className: "menu" }
           ]}
           detailsItem={this.selectedChart}
-          onDetails={this.showDetails}
+          onDetails={this.onDetails}
         />
         {this.selectedChart && (
           <HelmChartDetails
diff --git a/src/renderer/components/+apps-releases/releases.tsx b/src/renderer/components/+apps-releases/releases.tsx
index d43174cc10..b7777b8c67 100644
--- a/src/renderer/components/+apps-releases/releases.tsx
+++ b/src/renderer/components/+apps-releases/releases.tsx
@@ -75,6 +75,14 @@ export class HelmReleases extends Component<Props> {
     });
   }
 
+  onDetails = (item: HelmRelease) => {
+    if (item === this.selectedRelease) {
+      this.hideDetails();
+    } else {
+      this.showDetails(item);
+    }
+  };
+
   showDetails = (item: HelmRelease) => {
     navigation.push(releaseURL({
       params: {
@@ -169,7 +177,7 @@ export class HelmReleases extends Component<Props> {
             message: this.renderRemoveDialogMessage(selectedItems)
           })}
           detailsItem={this.selectedRelease}
-          onDetails={this.showDetails}
+          onDetails={this.onDetails}
         />
         <ReleaseDetails
           release={this.selectedRelease}
diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx
index 53c15fd02c..fae3b0d797 100644
--- a/src/renderer/components/+catalog/catalog.tsx
+++ b/src/renderer/components/+catalog/catalog.tsx
@@ -122,7 +122,11 @@ export class Catalog extends React.Component<Props> {
   }
 
   onDetails = (item: CatalogEntityItem<CatalogEntity>) => {
-    this.catalogEntityStore.selectedItemId = item.getId();
+    if (this.catalogEntityStore.selectedItemId === item.getId()) {
+      this.catalogEntityStore.selectedItemId = null;
+    } else {
+      this.catalogEntityStore.selectedItemId = item.getId();
+    }
   };
 
   onMenuItemClick(menuItem: CatalogEntityContextMenu) {
diff --git a/src/renderer/components/+cluster/cluster-issues.tsx b/src/renderer/components/+cluster/cluster-issues.tsx
index 9b5f73b9a6..fb5b98bc28 100644
--- a/src/renderer/components/+cluster/cluster-issues.tsx
+++ b/src/renderer/components/+cluster/cluster-issues.tsx
@@ -33,7 +33,7 @@ import { boundMethod, cssNames, prevDefault } from "../../utils";
 import type { ItemObject } from "../../../common/item.store";
 import { Spinner } from "../spinner";
 import { ThemeStore } from "../../theme.store";
-import { kubeSelectedUrlParam, showDetails } from "../kube-detail-params";
+import { kubeSelectedUrlParam, toggleDetails } from "../kube-detail-params";
 import { kubeWatchApi } from "../../../common/k8s-api/kube-watch-api";
 import { apiManager } from "../../../common/k8s-api/api-manager";
 
@@ -124,7 +124,7 @@ export class ClusterIssues extends React.Component<Props> {
         key={getId()}
         sortItem={warning}
         selected={selfLink === kubeSelectedUrlParam.get()}
-        onClick={prevDefault(() => showDetails(selfLink))}
+        onClick={prevDefault(() => toggleDetails(selfLink))}
       >
         <TableCell className="message">
           {message}
diff --git a/src/renderer/components/kube-detail-params/params.ts b/src/renderer/components/kube-detail-params/params.ts
index 09256077d0..856f4968a6 100644
--- a/src/renderer/components/kube-detail-params/params.ts
+++ b/src/renderer/components/kube-detail-params/params.ts
@@ -41,6 +41,16 @@ export const kubeSelectedUrlParam = createPageParam({
   }
 });
 
+export function toggleDetails(selfLink: string, resetSelected = true) {
+  const current = kubeSelectedUrlParam.get() === selfLink;
+
+  if (current) {
+    hideDetails();
+  } else {
+    showDetails(selfLink, resetSelected);
+  }
+}
+
 export function showDetails(selfLink = "", resetSelected = true) {
   const detailsUrl = getDetailsUrl(selfLink, resetSelected);
 
diff --git a/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx b/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx
index d55e30b28f..cefcc4b0f2 100644
--- a/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx
+++ b/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx
@@ -31,7 +31,7 @@ import { kubeWatchApi } from "../../../common/k8s-api/kube-watch-api";
 import { clusterContext } from "../context";
 import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter";
 import { ResourceKindMap, ResourceNames } from "../../utils/rbac";
-import { kubeSelectedUrlParam, showDetails } from "../kube-detail-params";
+import { kubeSelectedUrlParam, toggleDetails } from "../kube-detail-params";
 
 export interface KubeObjectListLayoutProps<K extends KubeObject> extends ItemListLayoutProps<K> {
   store: KubeObjectStore<K>;
@@ -39,7 +39,7 @@ export interface KubeObjectListLayoutProps<K extends KubeObject> extends ItemLis
 }
 
 const defaultProps: Partial<KubeObjectListLayoutProps<KubeObject>> = {
-  onDetails: (item: KubeObject) => showDetails(item.selfLink),
+  onDetails: (item: KubeObject) => toggleDetails(item.selfLink),
 };
 
 @observer