Second click on list item closes the details view (#3809)

Signed-off-by: Juho Heikka <juho.heikka@gmail.com>

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

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}

src/renderer/components/+catalog/catalog.tsx

@@ -122,7 +122,11 @@ export class Catalog extends React.Component<Props> {
   }
 
   onDetails = (item: CatalogEntityItem<CatalogEntity>) => {
+    if (this.catalogEntityStore.selectedItemId === item.getId()) {
+      this.catalogEntityStore.selectedItemId = null;
+    } else {
       this.catalogEntityStore.selectedItemId = item.getId();
+    }
   };
 
   onMenuItemClick(menuItem: CatalogEntityContextMenu) {

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}

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);
 

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