Better visibility of updating global namespace from resource listing views

src/renderer/components/+config-leases/leases.scss

@@ -21,8 +21,6 @@
       flex: .5;
     }
 
-    a.filterNamespace {
-      border-bottom: unset;
-    }
+
   }
 }

src/renderer/components/+config-leases/leases.tsx

@@ -16,9 +16,7 @@ import { KubeObjectAge } from "../kube-object/age";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import leaseStoreInjectable from "./store.injectable";
 import type { LeaseStore } from "./store";
-import { prevDefault } from "../../utils";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -32,7 +30,6 @@ export interface LeaseProps extends KubeObjectDetailsProps<Lease> {
 
 interface Dependencies {
   leaseStore: LeaseStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 @observer
@@ -67,13 +64,10 @@ class NonInjectedLease extends React.Component<LeaseProps & Dependencies> {
           renderTableContents={lease => [
             lease.getName(),
             <KubeObjectStatusIcon key="icon" object={lease} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
-              onClick={prevDefault(() => this.props.filterByNamespace(lease.getNs()))}
-            >
-              {lease.getNs()}
-            </a>,
+              namespace={lease.getNs()}
+            />,
             lease.getHolderIdentity(),
             <KubeObjectAge key="age" object={lease} />,
           ]}
@@ -87,6 +81,5 @@ export const Leases = withInjectables<Dependencies, LeaseProps>(NonInjectedLease
   getProps: (di, props) => ({
     ...props,
     leaseStore: di.inject(leaseStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
   }),
 });

src/renderer/components/+config-maps/config-maps.scss

@@ -21,8 +21,6 @@
       flex: .5;
     }
 
-    a.filterNamespace {
-      border-bottom: unset;
-    }
+
   }
 }

src/renderer/components/+config-maps/config-maps.tsx

@@ -11,12 +11,10 @@ import { KubeObjectListLayout } from "../kube-object-list-layout";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
-import { prevDefault } from "../../utils";
 import type { ConfigMapStore } from "./store";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import configMapStoreInjectable from "./store.injectable";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -27,7 +25,6 @@ enum columnId {
 
 interface Dependencies {
   configMapStore: ConfigMapStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 @observer
@@ -61,13 +58,10 @@ class NonInjectedConfigMaps extends React.Component<Dependencies> {
           renderTableContents={configMap => [
             configMap.getName(),
             <KubeObjectStatusIcon key="icon" object={configMap} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
-              onClick={prevDefault(() => this.props.filterByNamespace(configMap.getNs()))}
-            >
-              {configMap.getNs()}
-            </a>,
+              namespace={configMap.getNs()}
+            />,
             configMap.getKeys().join(", "),
             <KubeObjectAge key="age" object={configMap} />,
           ]}
@@ -81,6 +75,5 @@ export const ConfigMaps = withInjectables<Dependencies>(NonInjectedConfigMaps, {
   getProps: (di, props) => ({
     ...props,
     configMapStore: di.inject(configMapStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
   }),
 });

src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.scss

@@ -21,8 +21,6 @@
       flex: .5;
     }
 
-    a.filterNamespace {
-      border-bottom: unset;
-    }
+
   }
 }

src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.tsx

@@ -13,12 +13,10 @@ import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
-import { prevDefault } from "../../utils";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import type { PodDisruptionBudgetStore } from "./store";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import podDisruptionBudgetStoreInjectable from "./store.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -34,7 +32,6 @@ export interface PodDisruptionBudgetsProps extends KubeObjectDetailsProps<PodDis
 }
 
 interface Dependencies {
-  filterByNamespace: FilterByNamespace;
   podDisruptionBudgetStore: PodDisruptionBudgetStore;
 }
 
@@ -74,13 +71,10 @@ class NonInjectedPodDisruptionBudgets extends React.Component<PodDisruptionBudge
           renderTableContents={pdb => [
             pdb.getName(),
             <KubeObjectStatusIcon key="icon" object={pdb} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
-              onClick={prevDefault(() => this.props.filterByNamespace(pdb.getNs()))}
-            >
-              {pdb.getNs()}
-            </a>,
+              namespace={pdb.getNs()}
+            />,
             pdb.getMinAvailable(),
             pdb.getMaxUnavailable(),
             pdb.getCurrentHealthy(),
@@ -96,7 +90,6 @@ class NonInjectedPodDisruptionBudgets extends React.Component<PodDisruptionBudge
 export const PodDisruptionBudgets = withInjectables<Dependencies, PodDisruptionBudgetsProps>(NonInjectedPodDisruptionBudgets, {
   getProps: (di, props) => ({
     ...props,
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     podDisruptionBudgetStore: di.inject(podDisruptionBudgetStoreInjectable),
   }),
 });

src/renderer/components/+config-resource-quotas/resource-quotas.scss

@@ -9,8 +9,6 @@
       @include table-cell-warning;
     }
 
-    a.filterNamespace {
-      border-bottom: unset;
-    }
+
   }
 }

src/renderer/components/+config-resource-quotas/resource-quotas.tsx

@@ -12,13 +12,11 @@ import { AddQuotaDialog } from "./add-dialog/view";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
-import { prevDefault } from "../../utils";
 import type { ResourceQuotaStore } from "./store";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import resourceQuotaStoreInjectable from "./store.injectable";
 import openAddQuotaDialogInjectable from "./add-dialog/open.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -28,7 +26,6 @@ enum columnId {
 
 interface Dependencies {
   resourceQuotaStore: ResourceQuotaStore;
-  filterByNamespace: FilterByNamespace;
   openAddQuotaDialog: () => void;
 }
 
@@ -61,13 +58,10 @@ class NonInjectedResourceQuotas extends React.Component<Dependencies> {
           renderTableContents={resourceQuota => [
             resourceQuota.getName(),
             <KubeObjectStatusIcon key="icon" object={resourceQuota}/>,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
-              onClick={prevDefault(() => this.props.filterByNamespace(resourceQuota.getNs()))}
-            >
-              {resourceQuota.getNs()}
-            </a>,
+              namespace={resourceQuota.getNs()}
+            />,
             <KubeObjectAge key="age" object={resourceQuota} />,
           ]}
           addRemoveButtons={{
@@ -84,7 +78,6 @@ class NonInjectedResourceQuotas extends React.Component<Dependencies> {
 export const ResourceQuotas = withInjectables<Dependencies>(NonInjectedResourceQuotas, {
   getProps: (di, props) => ({
     ...props,
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     resourceQuotaStore: di.inject(resourceQuotaStoreInjectable),
     openAddQuotaDialog: di.inject(openAddQuotaDialogInjectable),
   }),

src/renderer/components/+config-secrets/secrets.scss

@@ -17,8 +17,6 @@
       @include table-cell-labels-offsets;
     }
 
-    a.filterNamespace {
-      border-bottom: unset;
-    }
+
   }
 }

src/renderer/components/+config-secrets/secrets.tsx

@@ -13,13 +13,11 @@ import { Badge } from "../badge";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
-import { prevDefault } from "../../utils";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import type { SecretStore } from "./store";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import secretStoreInjectable from "./store.injectable";
 import openAddSecretDialogInjectable from "./add-dialog/open.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -31,7 +29,6 @@ enum columnId {
 }
 
 interface Dependencies {
-  filterByNamespace: FilterByNamespace;
   secretStore: SecretStore;
   openAddSecretDialog: () => void;
 }
@@ -71,13 +68,10 @@ class NonInjectedSecrets extends React.Component<Dependencies> {
           renderTableContents={secret => [
             secret.getName(),
             <KubeObjectStatusIcon key="icon" object={secret} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
-              onClick={prevDefault(() => this.props.filterByNamespace(secret.getNs()))}
-            >
-              {secret.getNs()}
-            </a>,
+              namespace={secret.getNs()}
+            />,
             secret.getLabels().map(label => (
               <Badge
                 scrollable
@@ -104,7 +98,6 @@ class NonInjectedSecrets extends React.Component<Dependencies> {
 export const Secrets = withInjectables<Dependencies>(NonInjectedSecrets, {
   getProps: (di, props) => ({
     ...props,
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     secretStore: di.inject(secretStoreInjectable),
     openAddSecretDialog: di.inject(openAddSecretDialogInjectable),
   }),

src/renderer/components/+helm-releases/releases.scss

@@ -21,8 +21,6 @@
       }
     }
 
-    a.filterNamespace {
-      border-bottom: unset;
-    }
+
   }
 }

src/renderer/components/+helm-releases/releases.tsx

@@ -23,9 +23,7 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import helmReleasesRouteParametersInjectable from "./helm-releases-route-parameters.injectable";
 import type { NavigateToHelmReleases } from "../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
 import navigateToHelmReleasesInjectable from "../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
-import { prevDefault } from "../../utils";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -43,19 +41,9 @@ interface Dependencies {
   releasesArePending: IComputedValue<boolean>;
   namespace: IComputedValue<string>;
   navigateToHelmReleases: NavigateToHelmReleases;
-  filterByNamespace: FilterByNamespace;
 }
 
 class NonInjectedHelmReleases extends Component<Dependencies> {
-  // TODO: This side-effect in mount must go.
-  componentDidMount() {
-    const namespace = this.props.namespace.get();
-
-    if (namespace) {
-      this.props.filterByNamespace(namespace);
-    }
-  }
-
   onDetails = (item: HelmRelease) => {
     this.showDetails(item);
   };
@@ -188,13 +176,10 @@ class NonInjectedHelmReleases extends Component<Dependencies> {
           ]}
           renderTableContents={release => [
             release.getName(),
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
-              onClick={prevDefault(() => this.props.filterByNamespace(release.getNs()))}
-            >
-              {release.getNs()}
-            </a>,
+              namespace={release.getNs()}
+            />,
             release.getChart(),
             release.getRevision(),
             release.getVersion(),
@@ -226,7 +211,6 @@ export const HelmReleases = withInjectables<Dependencies>(NonInjectedHelmRelease
     releases: di.inject(removableReleasesInjectable),
     releasesArePending: di.inject(releasesInjectable).pending,
     navigateToHelmReleases: di.inject(navigateToHelmReleasesInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     ...di.inject(helmReleasesRouteParametersInjectable),
   }),
 });

src/renderer/components/+namespaces/namespace-select-badge.module.scss

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.NamespaceSelectBadge {
+  @include pseudo-link;
+  border-bottom: unset;
+}