Refactor cluster settings to catalog entity settings (#2525)

* fix cluster settings page layout

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* cleanup

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* refactor cluster settings to pluggable entity settings

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix gh actions network timeout on yarn install

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* review changes

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/components/+add-cluster/add-cluster.tsx

@@ -345,7 +345,7 @@ export class AddCluster extends React.Component {
 
     return (
       <DropFileInput onDropFiles={this.onDropKubeConfig}>
-        <PageLayout className="AddClusters" header={<><Icon svg="logo-lens" big /> <h2>Add Clusters</h2></>} showOnTop={true}>
+        <PageLayout className="AddClusters" showOnTop={true}>
           <h2>Add Clusters from Kubeconfig</h2>
           {this.renderInfo()}
           {this.renderKubeConfigSource()}

src/renderer/components/+cluster-settings/cluster-settings.route.ts

@@ -1,12 +0,0 @@
-import type { IClusterViewRouteParams } from "../cluster-manager/cluster-view.route";
-import type { RouteProps } from "react-router";
-import { buildURL } from "../../../common/utils/buildUrl";
-
-export interface IClusterSettingsRouteParams extends IClusterViewRouteParams {
-}
-
-export const clusterSettingsRoute: RouteProps = {
-  path: `/cluster/:clusterId/settings`,
-};
-
-export const clusterSettingsURL = buildURL<IClusterSettingsRouteParams>(clusterSettingsRoute.path);

src/renderer/components/+cluster-settings/cluster-settings.scss

@@ -1,51 +0,0 @@
-.ClusterSettings {
-  $spacing: $padding * 3;
-
-  > .content-wrapper {
-    --flex-gap: #{$spacing};
-  }
-
-  // TODO: move sub-component styles to separate files
-  .admin-note {
-    font-size: small;
-    opacity: 0.5;
-    margin-left: $margin;
-  }
-
-  .button-area {
-    margin-top: $margin * 2;
-  }
-
-  .file-loader {
-    margin-top: $margin * 2;
-  }
-
-  .status-table {
-    margin: $spacing 0;
-
-    .Table {
-      border: 1px solid var(--drawerSubtitleBackground);
-      border-radius: $radius;
-
-      .TableRow {
-        &:not(:last-of-type) {
-          border-bottom: 1px solid var(--drawerSubtitleBackground);
-        }
-
-        .value {
-          flex-grow: 2;
-          word-break: break-word;
-          color: var(--textColorSecondary);
-        }
-
-        .link {
-          @include pseudo-link;
-        }
-      }
-    }
-  }
-
-  .Input, .Select {
-    margin-top: $padding;
-  }
-}

src/renderer/components/+cluster-settings/cluster-settings.tsx

@@ -1,69 +0,0 @@
-import "./cluster-settings.scss";
-
-import React from "react";
-import { reaction } from "mobx";
-import { RouteComponentProps } from "react-router";
-import { observer, disposeOnUnmount } from "mobx-react";
-import { Status } from "./status";
-import { General } from "./general";
-import { Cluster } from "../../../main/cluster";
-import { IClusterSettingsRouteParams } from "./cluster-settings.route";
-import { clusterStore } from "../../../common/cluster-store";
-import { PageLayout } from "../layout/page-layout";
-import { requestMain } from "../../../common/ipc";
-import { clusterActivateHandler, clusterRefreshHandler } from "../../../common/cluster-ipc";
-import { navigation } from "../../navigation";
-
-interface Props extends RouteComponentProps<IClusterSettingsRouteParams> {
-}
-
-@observer
-export class ClusterSettings extends React.Component<Props> {
-  get clusterId() {
-    return this.props.match.params.clusterId;
-  }
-
-  get cluster(): Cluster {
-    return clusterStore.getById(this.clusterId);
-  }
-
-  componentDidMount() {
-    const { hash } = navigation.location;
-
-    document.getElementById(hash.slice(1))?.scrollIntoView();
-
-    disposeOnUnmount(this, [
-      reaction(() => this.cluster, this.refreshCluster, {
-        fireImmediately: true,
-      }),
-      reaction(() => this.clusterId, clusterId => clusterStore.setActive(clusterId), {
-        fireImmediately: true,
-      })
-    ]);
-  }
-
-  refreshCluster = async () => {
-    if (this.cluster) {
-      await requestMain(clusterActivateHandler, this.cluster.id);
-      await requestMain(clusterRefreshHandler, this.cluster.id);
-    }
-  };
-
-  render() {
-    const cluster = this.cluster;
-
-    if (!cluster) return null;
-    const header = (
-      <>
-        <h2>{cluster.preferences.clusterName}</h2>
-      </>
-    );
-
-    return (
-      <PageLayout className="ClusterSettings" header={header} showOnTop={true}>
-        <Status cluster={cluster}></Status>
-        <General cluster={cluster}></General>
-      </PageLayout>
-    );
-  }
-}

src/renderer/components/+cluster-settings/general.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import { Cluster } from "../../../main/cluster";
-import { ClusterNameSetting } from "./components/cluster-name-setting";
-import { ClusterProxySetting } from "./components/cluster-proxy-setting";
-import { ClusterPrometheusSetting } from "./components/cluster-prometheus-setting";
-import { ClusterHomeDirSetting } from "./components/cluster-home-dir-setting";
-import { ClusterAccessibleNamespaces } from "./components/cluster-accessible-namespaces";
-import { ClusterMetricsSetting } from "./components/cluster-metrics-setting";
-import { ShowMetricsSetting } from "./components/show-metrics";
-
-interface Props {
-  cluster: Cluster;
-}
-
-export class General extends React.Component<Props> {
-  render() {
-    return <div>
-      <h2>General</h2>
-      <ClusterNameSetting cluster={this.props.cluster} />
-      <ClusterProxySetting cluster={this.props.cluster} />
-      <ClusterPrometheusSetting cluster={this.props.cluster} />
-      <ClusterHomeDirSetting cluster={this.props.cluster} />
-      <ClusterAccessibleNamespaces cluster={this.props.cluster} />
-      <ClusterMetricsSetting cluster={this.props.cluster}/>
-      <ShowMetricsSetting cluster={this.props.cluster}/>
-    </div>;
-  }
-}

src/renderer/components/+cluster-settings/status.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-import { Cluster } from "../../../main/cluster";
-import { SubTitle } from "../layout/sub-title";
-import { Table, TableCell, TableRow } from "../table";
-import { autobind } from "../../utils";
-import { shell } from "electron";
-
-interface Props {
-  cluster: Cluster;
-}
-
-export class Status extends React.Component<Props> {
-
-  @autobind()
-  openKubeconfig() {
-    const { cluster } = this.props;
-
-    shell.showItemInFolder(cluster.kubeConfigPath);
-  }
-
-  renderStatusRows() {
-    const { cluster } = this.props;
-    const rows = [
-      ["Online Status", cluster.online ? "online" : `offline (${cluster.failureReason || "unknown reason"})`],
-      ["Distribution", cluster.metadata.distribution ? String(cluster.metadata.distribution) : "N/A"],
-      ["Kernel Version", cluster.metadata.version ? String(cluster.metadata.version) : "N/A"],
-      ["API Address", cluster.apiUrl || "N/A"],
-      ["Nodes Count", cluster.metadata.nodes ? String(cluster.metadata.nodes) : "N/A"]
-    ];
-
-    return (
-      <Table scrollable={false}>
-        {rows.map(([name, value]) => {
-          return (
-            <TableRow key={name}>
-              <TableCell>{name}</TableCell>
-              <TableCell className="value">{value}</TableCell>
-            </TableRow>
-          );
-        })}
-        <TableRow>
-          <TableCell>Kubeconfig</TableCell>
-          <TableCell className="link value" onClick={this.openKubeconfig}>{cluster.kubeConfigPath}</TableCell>
-        </TableRow>
-      </Table>
-    );
-  }
-
-  render() {
-    return <div>
-      <h2>Status</h2>
-      <SubTitle title="Cluster Status"/>
-      <p>
-        Cluster status information including: detected distribution, kernel version, and online status.
-      </p>
-      <div className="status-table">
-        {this.renderStatusRows()}
-      </div>
-    </div>;
-  }
-}

src/renderer/components/+cluster/cluster-overview.tsx

@@ -13,7 +13,7 @@ import { ClusterIssues } from "./cluster-issues";
 import { ClusterMetrics } from "./cluster-metrics";
 import { clusterOverviewStore } from "./cluster-overview.store";
 import { ClusterPieCharts } from "./cluster-pie-charts";
-import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
 
 @observer
 export class ClusterOverview extends React.Component {

src/renderer/components/+entity-settings/entity-settings.route.ts

@@ -0,0 +1,12 @@
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
+
+export interface EntitySettingsRouteParams {
+  entityId: string;
+}
+
+export const entitySettingsRoute: RouteProps = {
+  path: `/entity/:entityId/settings`,
+};
+
+export const entitySettingsURL = buildURL<EntitySettingsRouteParams>(entitySettingsRoute.path);

src/renderer/components/+entity-settings/entity-settings.scss

@@ -0,0 +1,23 @@
+.EntitySettings {
+  $spacing: $padding * 3;
+
+
+  // TODO: move sub-component styles to separate files
+  .admin-note {
+    font-size: small;
+    opacity: 0.5;
+    margin-left: $margin;
+  }
+
+  .button-area {
+    margin-top: $margin * 2;
+  }
+
+  .file-loader {
+    margin-top: $margin * 2;
+  }
+
+  .Input, .Select {
+    margin-top: $padding;
+  }
+}

src/renderer/components/+entity-settings/entity-settings.tsx

@@ -0,0 +1,99 @@
+import "./entity-settings.scss";
+
+import React from "react";
+import { observable } from "mobx";
+import { RouteComponentProps } from "react-router";
+import { observer } from "mobx-react";
+import { PageLayout } from "../layout/page-layout";
+import { navigation } from "../../navigation";
+import { Tabs, Tab } from "../tabs";
+import { CatalogEntity } from "../../api/catalog-entity";
+import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
+import { entitySettingRegistry } from "../../../extensions/registries";
+import { EntitySettingsRouteParams } from "./entity-settings.route";
+
+interface Props extends RouteComponentProps<EntitySettingsRouteParams> {
+}
+
+@observer
+export class EntitySettings extends React.Component<Props> {
+  @observable activeTab: string;
+
+  get entityId() {
+    return this.props.match.params.entityId;
+  }
+
+  get entity(): CatalogEntity {
+    return catalogEntityRegistry.getById(this.entityId);
+  }
+
+  get menuItems() {
+    if (!this.entity) return [];
+
+    return entitySettingRegistry.getItemsForKind(this.entity.kind, this.entity.apiVersion, this.entity.metadata.source);
+  }
+
+  async componentDidMount() {
+    const { hash } = navigation.location;
+
+    this.ensureActiveTab();
+
+    document.getElementById(hash.slice(1))?.scrollIntoView();
+  }
+
+  onTabChange = (tabId: string) => {
+    this.activeTab = tabId;
+  };
+
+  renderNavigation() {
+    return (
+      <>
+        <h2>{this.entity.metadata.name}</h2>
+        <Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
+          <div className="header">Settings</div>
+          { this.menuItems.map((setting) => (
+            <Tab
+              key={setting.id}
+              value={setting.id}
+              label={setting.title}
+              data-testid={`${setting.id}-tab`}
+            />
+          ))}
+        </Tabs>
+      </>
+    );
+  }
+
+  ensureActiveTab() {
+    if (!this.activeTab) {
+      this.activeTab = this.menuItems[0]?.id;
+    }
+  }
+
+  render() {
+    if (!this.entity) {
+      console.error("entity not found", this.entityId);
+
+      return null;
+    }
+
+    this.ensureActiveTab();
+    const activeSetting = this.menuItems.find((setting) => setting.id === this.activeTab);
+
+    return (
+      <PageLayout
+        className="CatalogEntitySettings"
+        navigation={this.renderNavigation()}
+        showOnTop={true}
+        contentGaps={false}
+      >
+        <section>
+          <h2 data-testid={`${activeSetting.id}-header`}>{activeSetting.title}</h2>
+          <section>
+            <activeSetting.components.View entity={this.entity} />
+          </section>
+        </section>
+      </PageLayout>
+    );
+  }
+}

src/renderer/components/+entity-settings/index.ts

@@ -0,0 +1,4 @@
+import "../cluster-settings";
+
+export * from "./entity-settings.route";
+export * from "./entity-settings";

src/renderer/components/+extensions/extensions.tsx

@@ -482,12 +482,11 @@ export class Extensions extends React.Component {
   }
 
   render() {
-    const topHeader = <h2>Manage Lens Extensions</h2>;
     const { installPath } = this;
 
     return (
       <DropFileInput onDropFiles={this.installOnDrop}>
-        <PageLayout showOnTop className="Extensions" header={topHeader} contentGaps={false}>
+        <PageLayout showOnTop className="Extensions" contentGaps={false}>
           <h2>Lens Extensions</h2>
           <div>
             Add new features and functionality via Lens Extensions.

src/renderer/components/+network-ingresses/ingress-details.tsx

@@ -14,7 +14,7 @@ import { IngressCharts } from "./ingress-charts";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 import { getBackendServiceNamePort } from "../../api/endpoints/ingress.api";
-import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
 import { clusterStore } from "../../../common/cluster-store";
 
 interface Props extends KubeObjectDetailsProps<Ingress> {

src/renderer/components/+nodes/node-details.tsx

@@ -17,7 +17,7 @@ import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
-import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
 import { clusterStore } from "../../../common/cluster-store";
 
 interface Props extends KubeObjectDetailsProps<Node> {

src/renderer/components/+storage-volume-claims/volume-claim-details.tsx

@@ -14,7 +14,7 @@ import { VolumeClaimDiskChart } from "./volume-claim-disk-chart";
 import { getDetailsUrl, KubeObjectDetailsProps, KubeObjectMeta } from "../kube-object";
 import { PersistentVolumeClaim } from "../../api/endpoints";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
-import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
 import { clusterStore } from "../../../common/cluster-store";
 
 interface Props extends KubeObjectDetailsProps<PersistentVolumeClaim> {

src/renderer/components/+workloads-daemonsets/daemonset-details.tsx

@@ -18,7 +18,7 @@ import { reaction } from "mobx";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
-import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
 import { clusterStore } from "../../../common/cluster-store";
 
 interface Props extends KubeObjectDetailsProps<DaemonSet> {

src/renderer/components/+workloads-deployments/deployment-details.tsx

@@ -19,7 +19,7 @@ import { reaction } from "mobx";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
-import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
 import { clusterStore } from "../../../common/cluster-store";
 
 interface Props extends KubeObjectDetailsProps<Deployment> {

src/renderer/components/+workloads-pods/pod-details-container.tsx

@@ -11,7 +11,7 @@ import { PodContainerPort } from "./pod-container-port";
 import { ResourceMetrics } from "../resource-metrics";
 import { IMetrics } from "../../api/endpoints/metrics.api";
 import { ContainerCharts } from "./container-charts";
-import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
 import { clusterStore } from "../../../common/cluster-store";
 
 interface Props {

src/renderer/components/+workloads-pods/pod-details.tsx

@@ -22,7 +22,7 @@ import { getItemMetrics } from "../../api/endpoints/metrics.api";
 import { PodCharts, podMetricTabs } from "./pod-charts";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
-import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
 import { clusterStore } from "../../../common/cluster-store";
 
 interface Props extends KubeObjectDetailsProps<Pod> {

src/renderer/components/+workloads-replicasets/replicaset-details.tsx

@@ -17,7 +17,7 @@ import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
-import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
 import { clusterStore } from "../../../common/cluster-store";
 
 interface Props extends KubeObjectDetailsProps<ReplicaSet> {

src/renderer/components/+workloads-statefulsets/statefulset-details.tsx

@@ -18,7 +18,7 @@ import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
-import { ResourceType } from "../+cluster-settings/components/cluster-metrics-setting";
+import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
 import { clusterStore } from "../../../common/cluster-store";
 
 interface Props extends KubeObjectDetailsProps<StatefulSet> {

src/renderer/components/cluster-manager/cluster-actions.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-import uniqueId from "lodash/uniqueId";
-import { clusterSettingsURL } from "../+cluster-settings";
-import { catalogURL } from "../+catalog";
-
-import { clusterStore } from "../../../common/cluster-store";
-import { broadcastMessage, requestMain } from "../../../common/ipc";
-import { clusterDisconnectHandler } from "../../../common/cluster-ipc";
-import { ConfirmDialog } from "../confirm-dialog";
-import { Cluster } from "../../../main/cluster";
-import { Tooltip } from "../../components//tooltip";
-import { IpcRendererNavigationEvents } from "../../navigation/events";
-
-const navigate = (route: string) =>
-  broadcastMessage(IpcRendererNavigationEvents.NAVIGATE_IN_APP, route);
-
-/**
- * Creates handlers for high-level actions
- * that could be performed on an individual cluster
- * @param cluster Cluster
- */
-export const ClusterActions = (cluster: Cluster) => ({
-  showSettings: () => navigate(clusterSettingsURL({
-    params: { clusterId: cluster.id }
-  })),
-  disconnect: async () => {
-    clusterStore.deactivate(cluster.id);
-    navigate(catalogURL());
-    await requestMain(clusterDisconnectHandler, cluster.id);
-  },
-  remove: () => {
-    const tooltipId = uniqueId("tooltip_target_");
-
-    return ConfirmDialog.open({
-      okButtonProps: {
-        primary: false,
-        accent: true,
-        label: "Remove"
-      },
-      ok: () => {
-        clusterStore.deactivate(cluster.id);
-        clusterStore.removeById(cluster.id);
-        navigate(catalogURL());
-      },
-      message: <p>
-        Are you sure want to remove cluster <b id={tooltipId}>{cluster.name}</b>?
-        <Tooltip  targetId={tooltipId}>{cluster.id}</Tooltip>
-      </p>
-    });
-  }
-});

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -9,7 +9,6 @@ import { Catalog, catalogRoute, catalogURL } from "../+catalog";
 import { Preferences, preferencesRoute } from "../+preferences";
 import { AddCluster, addClusterRoute } from "../+add-cluster";
 import { ClusterView } from "./cluster-view";
-import { ClusterSettings, clusterSettingsRoute } from "../+cluster-settings";
 import { clusterViewRoute } from "./cluster-view.route";
 import { clusterStore } from "../../../common/cluster-store";
 import { hasLoadedView, initView, lensViews, refreshViews } from "./lens-views";
@@ -17,6 +16,7 @@ import { globalPageRegistry } from "../../../extensions/registries/page-registry
 import { Extensions, extensionsRoute } from "../+extensions";
 import { getMatchedClusterId } from "../../navigation";
 import { HotbarMenu } from "../hotbar/hotbar-menu";
+import { EntitySettings, entitySettingsRoute } from "../+entity-settings";
 
 @observer
 export class ClusterManager extends React.Component {
@@ -58,7 +58,7 @@ export class ClusterManager extends React.Component {
             <Route component={Extensions} {...extensionsRoute} />
             <Route component={AddCluster} {...addClusterRoute} />
             <Route component={ClusterView} {...clusterViewRoute} />
-            <Route component={ClusterSettings} {...clusterSettingsRoute} />
+            <Route component={EntitySettings} {...entitySettingsRoute} />
             {globalPageRegistry.getItems().map(({ url, components: { Page } }) => {
               return <Route key={url} path={url} component={Page}/>;
             })}

src/renderer/components/cluster-manager/index.tsx

@@ -1,2 +1 @@
 export * from "./cluster-manager";
-export * from "./cluster-actions";

src/renderer/components/cluster-settings/cluster-settings.command.ts

@@ -1,15 +1,15 @@
 import { navigate } from "../../navigation";
 import { commandRegistry } from "../../../extensions/registries/command-registry";
-import { clusterSettingsURL } from "./cluster-settings.route";
 import { clusterStore } from "../../../common/cluster-store";
+import { entitySettingsURL } from "../+entity-settings";
 
 commandRegistry.add({
   id: "cluster.viewCurrentClusterSettings",
   title: "Cluster: View Settings",
   scope: "global",
-  action: () => navigate(clusterSettingsURL({
+  action: () => navigate(entitySettingsURL({
     params: {
-      clusterId: clusterStore.active.id
+      entityId: clusterStore.active.id
     }
   })),
   isActive: (context) => !!context.entity

src/renderer/components/cluster-settings/cluster-settings.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+import { clusterStore } from "../../../common/cluster-store";
+import { ClusterProxySetting } from "./components/cluster-proxy-setting";
+import { ClusterNameSetting } from "./components/cluster-name-setting";
+import { ClusterHomeDirSetting } from "./components/cluster-home-dir-setting";
+import { ClusterAccessibleNamespaces } from "./components/cluster-accessible-namespaces";
+import { ClusterMetricsSetting } from "./components/cluster-metrics-setting";
+import { ShowMetricsSetting } from "./components/show-metrics";
+import { ClusterPrometheusSetting } from "./components/cluster-prometheus-setting";
+import { ClusterKubeconfig } from "./components/cluster-kubeconfig";
+import { entitySettingRegistry } from "../../../extensions/registries";
+import { CatalogEntity } from "../../api/catalog-entity";
+
+
+function getClusterForEntity(entity: CatalogEntity) {
+  const cluster = clusterStore.getById(entity.metadata.uid);
+
+  if (!cluster?.enabled) {
+    return null;
+  }
+
+  return cluster;
+}
+
+entitySettingRegistry.add([
+  {
+    apiVersions: ["entity.k8slens.dev/v1alpha1"],
+    kind: "KubernetesCluster",
+    source: "local",
+    title: "General",
+    components: {
+      View: (props: { entity: CatalogEntity }) => {
+        const cluster = getClusterForEntity(props.entity);
+
+        if (!cluster) {
+          return null;
+        }
+
+        return (
+          <section>
+            <section>
+              <ClusterNameSetting cluster={cluster} />
+            </section>
+            <section>
+              <ClusterKubeconfig cluster={cluster} />
+            </section>
+          </section>
+        );
+      }
+    }
+  },
+  {
+    apiVersions: ["entity.k8slens.dev/v1alpha1"],
+    kind: "KubernetesCluster",
+    title: "Proxy",
+    components: {
+      View: (props: { entity: CatalogEntity }) => {
+        const cluster = getClusterForEntity(props.entity);
+
+        if (!cluster) {
+          return null;
+        }
+
+        return (
+          <section>
+            <ClusterProxySetting cluster={cluster} />
+          </section>
+        );
+      }
+    }
+  },
+  {
+    apiVersions: ["entity.k8slens.dev/v1alpha1"],
+    kind: "KubernetesCluster",
+    title: "Terminal",
+    components: {
+      View: (props: { entity: CatalogEntity }) => {
+        const cluster = getClusterForEntity(props.entity);
+
+        if (!cluster) {
+          return null;
+        }
+
+        return (
+          <section>
+            <ClusterHomeDirSetting cluster={cluster} />
+          </section>
+        );
+      }
+    }
+  },
+  {
+    apiVersions: ["entity.k8slens.dev/v1alpha1"],
+    kind: "KubernetesCluster",
+    title: "Namespaces",
+    components: {
+      View: (props: { entity: CatalogEntity }) => {
+        const cluster = getClusterForEntity(props.entity);
+
+        if (!cluster) {
+          return null;
+        }
+
+        return (
+          <section>
+            <ClusterAccessibleNamespaces cluster={cluster} />
+          </section>
+        );
+      }
+    }
+  },
+  {
+    apiVersions: ["entity.k8slens.dev/v1alpha1"],
+    kind: "KubernetesCluster",
+    source: "local",
+    title: "Metrics",
+    components: {
+      View: (props: { entity: CatalogEntity }) => {
+        const cluster = getClusterForEntity(props.entity);
+
+        if (!cluster) {
+          return null;
+        }
+
+        return (
+          <section>
+            <section>
+              <ClusterPrometheusSetting cluster={cluster} />
+            </section>
+            <section>
+              <ClusterMetricsSetting cluster={cluster}/>
+            </section>
+            <section>
+              <ShowMetricsSetting cluster={cluster}/>
+            </section>
+          </section>
+        );
+      }
+    }
+  }
+]);

src/renderer/components/cluster-settings/components/cluster-accessible-namespaces.tsx

@@ -17,7 +17,6 @@ export class ClusterAccessibleNamespaces extends React.Component<Props> {
     return (
       <>
         <SubTitle title="Accessible Namespaces" id="accessible-namespaces" />
-        <p>This setting is useful for manually specifying which namespaces you have access to. This is useful when you do not have permissions to list namespaces.</p>
         <EditableList
           placeholder="Add new namespace..."
           add={(newNamespace) => {
@@ -30,6 +29,9 @@ export class ClusterAccessibleNamespaces extends React.Component<Props> {
             this.props.cluster.accessibleNamespaces = Array.from(this.namespaces);
           }}
         />
+        <small className="hint">
+        This setting is useful for manually specifying which namespaces you have access to. This is useful when you do not have permissions to list namespaces.
+        </small>
       </>
     );
   }

src/renderer/components/cluster-settings/components/cluster-home-dir-setting.tsx

@@ -33,7 +33,6 @@ export class ClusterHomeDirSetting extends React.Component<Props> {
     return (
       <>
         <SubTitle title="Working Directory"/>
-        <p>Terminal working directory.</p>
         <Input
           theme="round-black"
           value={this.directory}

src/renderer/components/cluster-settings/components/cluster-kubeconfig.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Cluster } from "../../../../main/cluster";
+import { observer } from "mobx-react";
+import { SubTitle } from "../../layout/sub-title";
+import { autobind } from "../../../../common/utils";
+import { shell } from "electron";
+
+interface Props {
+  cluster: Cluster;
+}
+
+@observer
+export class ClusterKubeconfig extends React.Component<Props> {
+
+  @autobind()
+  openKubeconfig() {
+    const { cluster } = this.props;
+
+    shell.showItemInFolder(cluster.kubeConfigPath);
+  }
+
+  render() {
+    return (
+      <>
+        <SubTitle title="Kubeconfig" />
+
+        <span>
+          <a className="link value" onClick={this.openKubeconfig}>{this.props.cluster.kubeConfigPath}</a>
+        </span>
+
+      </>
+    );
+  }
+}

src/renderer/components/cluster-settings/components/cluster-name-setting.tsx

@@ -34,7 +34,6 @@ export class ClusterNameSetting extends React.Component<Props> {
     return (
       <>
         <SubTitle title="Cluster Name" />
-        <p>Define cluster name.</p>
         <Input
           theme="round-black"
           validators={isRequired}

src/renderer/components/cluster-settings/components/cluster-prometheus-setting.tsx

@@ -81,13 +81,12 @@ export class ClusterPrometheusSetting extends React.Component<Props> {
   render() {
     return (
       <>
-        <SubTitle title="Prometheus"/>
+        <SubTitle title="Prometheus installation method"/>
         <p>
           Use pre-installed Prometheus service for metrics. Please refer to the{" "}
           <a href="https://github.com/lensapp/lens/blob/master/troubleshooting/custom-prometheus.md" target="_blank" rel="noreferrer">guide</a>{" "}
           for possible configuration changes.
         </p>
-        <p>Prometheus installation method.</p>
         <Select
           value={this.provider}
           onChange={({value}) => {

src/renderer/components/cluster-settings/components/cluster-proxy-setting.tsx

@@ -33,7 +33,6 @@ export class ClusterProxySetting extends React.Component<Props> {
     return (
       <>
         <SubTitle title="HTTP Proxy" />
-        <p>HTTP Proxy server. Used for communicating with Kubernetes API.</p>
         <Input
           theme="round-black"
           value={this.proxy}
@@ -42,6 +41,9 @@ export class ClusterProxySetting extends React.Component<Props> {
           placeholder="http://<address>:<port>"
           validators={this.proxy ? InputValidators.isUrl : undefined}
         />
+        <small className="hint">
+          HTTP Proxy server. Used for communicating with Kubernetes API.
+        </small>
       </>
     );
   }

src/renderer/components/cluster-settings/index.ts

@@ -1,3 +1,2 @@
-export * from "./cluster-settings.route";
 export * from "./cluster-settings";
 export * from "./cluster-settings.command";

src/renderer/components/layout/page-layout.scss

@@ -43,6 +43,15 @@
       width: 218px;
       padding: 60px 0 60px 20px;
 
+      h2 {
+        margin-bottom: 10px;
+        font-size: 18px;
+        padding: 6px 10px;
+        overflow-wrap: anywhere;
+        color: var(--textColorAccent);
+        font-weight: 600;
+      }
+
       .Tabs {
         .header {
           padding: 6px 10px;

src/renderer/components/layout/page-layout.tsx

@@ -8,8 +8,6 @@ import { Icon } from "../icon";
 
 export interface PageLayoutProps extends React.DOMAttributes<any> {
   className?: IClassName;
-  header?: React.ReactNode;
-  headerClass?: IClassName;
   contentClass?: IClassName;
   provideBackButtonNavigation?: boolean;
   contentGaps?: boolean;
@@ -57,7 +55,7 @@ export class PageLayout extends React.Component<PageLayoutProps> {
 
   render() {
     const {
-      contentClass, headerClass, provideBackButtonNavigation,
+      contentClass, provideBackButtonNavigation,
       contentGaps, showOnTop, navigation, children, ...elemProps
     } = this.props;
     const className = cssNames("PageLayout", { showOnTop, showNavigation: navigation }, this.props.className);