From e55bce8d4db43268a162ea6e2c4f41e5bd3f5a3d Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 27 Jan 2021 10:56:27 +0300
Subject: [PATCH] Configurable columns in Apps section

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../+apps-helm-charts/helm-charts.tsx         | 27 +++++++++------
 .../components/+apps-releases/releases.tsx    | 34 +++++++++++--------
 2 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/src/renderer/components/+apps-helm-charts/helm-charts.tsx b/src/renderer/components/+apps-helm-charts/helm-charts.tsx
index 8bf5486a55..348ce00969 100644
--- a/src/renderer/components/+apps-helm-charts/helm-charts.tsx
+++ b/src/renderer/components/+apps-helm-charts/helm-charts.tsx
@@ -11,8 +11,11 @@ import { navigation } from "../../navigation";
 import { ItemListLayout } from "../item-object-list/item-list-layout";
 import { SearchInputUrl } from "../input";
 
-enum sortBy {
+enum columnId {
   name = "name",
+  description = "description",
+  version = "version",
+  appVersion = "app-version",
   repo = "repo",
 }
 
@@ -53,13 +56,15 @@ export class HelmCharts extends Component<Props> {
     return (
       <>
         <ItemListLayout
+          isConfigurable
+          tableId="helm_charts"
           className="HelmCharts"
           store={helmChartStore}
           isClusterScoped={true}
           isSelectable={false}
           sortingCallbacks={{
-            [sortBy.name]: (chart: HelmChart) => chart.getName(),
-            [sortBy.repo]: (chart: HelmChart) => chart.getRepository(),
+            [columnId.name]: (chart: HelmChart) => chart.getName(),
+            [columnId.repo]: (chart: HelmChart) => chart.getRepository(),
           }}
           searchFilters={[
             (chart: HelmChart) => chart.getName(),
@@ -74,13 +79,12 @@ export class HelmCharts extends Component<Props> {
             <SearchInputUrl placeholder={`Search Helm Charts`} />
           )}
           renderTableHeader={[
-            { className: "icon" },
-            { title: "Name", className: "name", sortBy: sortBy.name },
-            { title: "Description", className: "description" },
-            { title: "Version", className: "version" },
-            { title: "App Version", className: "app-version" },
-            { title: "Repository", className: "repository", sortBy: sortBy.repo },
-
+            { className: "icon", showWithColumn: columnId.name },
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { title: "Description", className: "description", id: columnId.description },
+            { title: "Version", className: "version", id: columnId.version },
+            { title: "App Version", className: "app-version", id: columnId.appVersion },
+            { title: "Repository", className: "repository", sortBy: columnId.repo, id: columnId.repo },
           ]}
           renderTableContents={(chart: HelmChart) => [
             <figure key="image">
@@ -93,7 +97,8 @@ export class HelmCharts extends Component<Props> {
             chart.getDescription(),
             chart.getVersion(),
             chart.getAppVersion(),
-            { title: chart.getRepository(), className: chart.getRepository().toLowerCase() }
+            { title: chart.getRepository(), className: chart.getRepository().toLowerCase() },
+            { className: "menu" }
           ]}
           detailsItem={this.selectedChart}
           onDetails={this.showDetails}
diff --git a/src/renderer/components/+apps-releases/releases.tsx b/src/renderer/components/+apps-releases/releases.tsx
index 709c6f9bbd..71cf3d954f 100644
--- a/src/renderer/components/+apps-releases/releases.tsx
+++ b/src/renderer/components/+apps-releases/releases.tsx
@@ -14,11 +14,13 @@ import { ItemListLayout } from "../item-object-list/item-list-layout";
 import { HelmReleaseMenu } from "./release-menu";
 import { secretsStore } from "../+config-secrets/secrets.store";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   revision = "revision",
   chart = "chart",
+  version = "version",
+  appVersion = "app-version",
   status = "status",
   updated = "update"
 }
@@ -81,16 +83,18 @@ export class HelmReleases extends Component<Props> {
     return (
       <>
         <ItemListLayout
+          isConfigurable
+          tableId="helm_releases"
           className="HelmReleases"
           store={releaseStore}
           dependentStores={[secretsStore]}
           sortingCallbacks={{
-            [sortBy.name]: (release: HelmRelease) => release.getName(),
-            [sortBy.namespace]: (release: HelmRelease) => release.getNs(),
-            [sortBy.revision]: (release: HelmRelease) => release.getRevision(),
-            [sortBy.chart]: (release: HelmRelease) => release.getChart(),
-            [sortBy.status]: (release: HelmRelease) => release.getStatus(),
-            [sortBy.updated]: (release: HelmRelease) => release.getUpdated(false, false),
+            [columnId.name]: (release: HelmRelease) => release.getName(),
+            [columnId.namespace]: (release: HelmRelease) => release.getNs(),
+            [columnId.revision]: (release: HelmRelease) => release.getRevision(),
+            [columnId.chart]: (release: HelmRelease) => release.getChart(),
+            [columnId.status]: (release: HelmRelease) => release.getStatus(),
+            [columnId.updated]: (release: HelmRelease) => release.getUpdated(false, false),
           }}
           searchFilters={[
             (release: HelmRelease) => release.getName(),
@@ -101,14 +105,14 @@ export class HelmReleases extends Component<Props> {
           ]}
           renderHeaderTitle="Releases"
           renderTableHeader={[
-            { title: "Name", className: "name", sortBy: sortBy.name },
-            { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-            { title: "Chart", className: "chart", sortBy: sortBy.chart },
-            { title: "Revision", className: "revision", sortBy: sortBy.revision },
-            { title: "Version", className: "version" },
-            { title: "App Version", className: "app-version" },
-            { title: "Status", className: "status", sortBy: sortBy.status },
-            { title: "Updated", className: "updated", sortBy: sortBy.updated },
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            { title: "Chart", className: "chart", sortBy: columnId.chart, id: columnId.chart },
+            { title: "Revision", className: "revision", sortBy: columnId.revision, id: columnId.revision },
+            { title: "Version", className: "version", id: columnId.version },
+            { title: "App Version", className: "app-version", id: columnId.appVersion },
+            { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
+            { title: "Updated", className: "updated", sortBy: columnId.updated, id: columnId.updated },
           ]}
           renderTableContents={(release: HelmRelease) => {
             const version = release.getVersion();