From 3ef06b961aae2811b32064455e5a4dad78a4de85 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 27 Jan 2021 13:58:53 +0300
Subject: [PATCH] Configurable columns in Access Control section

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../pod-security-policies.tsx                 | 22 ++++++++++---------
 .../role-bindings.tsx                         | 22 ++++++++++---------
 .../+user-management-roles/roles.tsx          | 18 ++++++++-------
 .../service-accounts.tsx                      | 18 ++++++++-------
 4 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/src/renderer/components/+pod-security-policies/pod-security-policies.tsx b/src/renderer/components/+pod-security-policies/pod-security-policies.tsx
index 30ec1d6304..a91e0114d6 100644
--- a/src/renderer/components/+pod-security-policies/pod-security-policies.tsx
+++ b/src/renderer/components/+pod-security-policies/pod-security-policies.tsx
@@ -7,7 +7,7 @@ import { podSecurityPoliciesStore } from "./pod-security-policies.store";
 import { PodSecurityPolicy } from "../../api/endpoints";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   volumes = "volumes",
   privileged = "privileged",
@@ -19,14 +19,16 @@ export class PodSecurityPolicies extends React.Component {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="access_roles"
         className="PodSecurityPolicies"
         isClusterScoped={true}
         store={podSecurityPoliciesStore}
         sortingCallbacks={{
-          [sortBy.name]: (item: PodSecurityPolicy) => item.getName(),
-          [sortBy.volumes]: (item: PodSecurityPolicy) => item.getVolumes(),
-          [sortBy.privileged]: (item: PodSecurityPolicy) => +item.isPrivileged(),
-          [sortBy.age]: (item: PodSecurityPolicy) => item.metadata.creationTimestamp,
+          [columnId.name]: (item: PodSecurityPolicy) => item.getName(),
+          [columnId.volumes]: (item: PodSecurityPolicy) => item.getVolumes(),
+          [columnId.privileged]: (item: PodSecurityPolicy) => +item.isPrivileged(),
+          [columnId.age]: (item: PodSecurityPolicy) => item.metadata.creationTimestamp,
         }}
         searchFilters={[
           (item: PodSecurityPolicy) => item.getSearchFields(),
@@ -35,11 +37,11 @@ export class PodSecurityPolicies extends React.Component {
         ]}
         renderHeaderTitle="Pod Security Policies"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Privileged", className: "privileged", sortBy: sortBy.privileged },
-          { title: "Volumes", className: "volumes", sortBy: sortBy.volumes },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Privileged", className: "privileged", sortBy: columnId.privileged, id: columnId.privileged },
+          { title: "Volumes", className: "volumes", sortBy: columnId.volumes, id: columnId.volumes },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(item: PodSecurityPolicy) => {
           return [
diff --git a/src/renderer/components/+user-management-roles-bindings/role-bindings.tsx b/src/renderer/components/+user-management-roles-bindings/role-bindings.tsx
index 3d64562047..f55e781e0e 100644
--- a/src/renderer/components/+user-management-roles-bindings/role-bindings.tsx
+++ b/src/renderer/components/+user-management-roles-bindings/role-bindings.tsx
@@ -10,7 +10,7 @@ import { KubeObjectListLayout } from "../kube-object";
 import { AddRoleBindingDialog } from "./add-role-binding-dialog";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   bindings = "bindings",
@@ -25,13 +25,15 @@ export class RoleBindings extends React.Component<Props> {
   render() {
     return (
       <KubeObjectListLayout
+        isConfigurable
+        tableId="access_role_bindings"
         className="RoleBindings"
         store={roleBindingsStore}
         sortingCallbacks={{
-          [sortBy.name]: (binding: RoleBinding) => binding.getName(),
-          [sortBy.namespace]: (binding: RoleBinding) => binding.getNs(),
-          [sortBy.bindings]: (binding: RoleBinding) => binding.getSubjectNames(),
-          [sortBy.age]: (binding: RoleBinding) => binding.metadata.creationTimestamp,
+          [columnId.name]: (binding: RoleBinding) => binding.getName(),
+          [columnId.namespace]: (binding: RoleBinding) => binding.getNs(),
+          [columnId.bindings]: (binding: RoleBinding) => binding.getSubjectNames(),
+          [columnId.age]: (binding: RoleBinding) => binding.metadata.creationTimestamp,
         }}
         searchFilters={[
           (binding: RoleBinding) => binding.getSearchFields(),
@@ -39,11 +41,11 @@ export class RoleBindings extends React.Component<Props> {
         ]}
         renderHeaderTitle="Role Bindings"
         renderTableHeader={[
-          { title: "Name", className: "name", sortBy: sortBy.name },
-          { className: "warning" },
-          { title: "Bindings", className: "bindings", sortBy: sortBy.bindings },
-          { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-          { title: "Age", className: "age", sortBy: sortBy.age },
+          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+          { className: "warning", showWithColumn: columnId.name },
+          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          { title: "Bindings", className: "bindings", sortBy: columnId.bindings, id: columnId.bindings },
+          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={(binding: RoleBinding) => [
           binding.getName(),
diff --git a/src/renderer/components/+user-management-roles/roles.tsx b/src/renderer/components/+user-management-roles/roles.tsx
index 21ad3bdf8a..a990cbfa7e 100644
--- a/src/renderer/components/+user-management-roles/roles.tsx
+++ b/src/renderer/components/+user-management-roles/roles.tsx
@@ -10,7 +10,7 @@ import { KubeObjectListLayout } from "../kube-object";
 import { AddRoleDialog } from "./add-role-dialog";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   age = "age",
@@ -25,22 +25,24 @@ export class Roles extends React.Component<Props> {
     return (
       <>
         <KubeObjectListLayout
+          isConfigurable
+          tableId="access_roles"
           className="Roles"
           store={rolesStore}
           sortingCallbacks={{
-            [sortBy.name]: (role: Role) => role.getName(),
-            [sortBy.namespace]: (role: Role) => role.getNs(),
-            [sortBy.age]: (role: Role) => role.metadata.creationTimestamp,
+            [columnId.name]: (role: Role) => role.getName(),
+            [columnId.namespace]: (role: Role) => role.getNs(),
+            [columnId.age]: (role: Role) => role.metadata.creationTimestamp,
           }}
           searchFilters={[
             (role: Role) => role.getSearchFields(),
           ]}
           renderHeaderTitle="Roles"
           renderTableHeader={[
-            { title: "Name", className: "name", sortBy: sortBy.name },
-            { className: "warning" },
-            { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-            { title: "Age", className: "age", sortBy: sortBy.age },
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { className: "warning", showWithColumn: columnId.name },
+            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
           ]}
           renderTableContents={(role: Role) => [
             role.getName(),
diff --git a/src/renderer/components/+user-management-service-accounts/service-accounts.tsx b/src/renderer/components/+user-management-service-accounts/service-accounts.tsx
index 37bed40ba9..4ea78904c0 100644
--- a/src/renderer/components/+user-management-service-accounts/service-accounts.tsx
+++ b/src/renderer/components/+user-management-service-accounts/service-accounts.tsx
@@ -15,7 +15,7 @@ import { CreateServiceAccountDialog } from "./create-service-account-dialog";
 import { kubeObjectMenuRegistry } from "../../../extensions/registries/kube-object-menu-registry";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 
-enum sortBy {
+enum columnId {
   name = "name",
   namespace = "namespace",
   age = "age",
@@ -30,21 +30,23 @@ export class ServiceAccounts extends React.Component<Props> {
     return (
       <>
         <KubeObjectListLayout
+          isConfigurable
+          tableId="access_service_accounts"
           className="ServiceAccounts" store={serviceAccountsStore}
           sortingCallbacks={{
-            [sortBy.name]: (account: ServiceAccount) => account.getName(),
-            [sortBy.namespace]: (account: ServiceAccount) => account.getNs(),
-            [sortBy.age]: (account: ServiceAccount) => account.metadata.creationTimestamp,
+            [columnId.name]: (account: ServiceAccount) => account.getName(),
+            [columnId.namespace]: (account: ServiceAccount) => account.getNs(),
+            [columnId.age]: (account: ServiceAccount) => account.metadata.creationTimestamp,
           }}
           searchFilters={[
             (account: ServiceAccount) => account.getSearchFields(),
           ]}
           renderHeaderTitle="Service Accounts"
           renderTableHeader={[
-            { title: "Name", className: "name", sortBy: sortBy.name },
-            { className: "warning" },
-            { title: "Namespace", className: "namespace", sortBy: sortBy.namespace },
-            { title: "Age", className: "age", sortBy: sortBy.age },
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { className: "warning", showWithColumn: columnId.name },
+            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
           ]}
           renderTableContents={(account: ServiceAccount) => [
             account.getName(),