Finish using NamespaceSelectBadge in all places (#6972)

Signed-off-by: Roman <ixrock@gmail.com>

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/+config-autoscalers/hpa.tsx

@@ -10,15 +10,14 @@ import { observer } from "mobx-react";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
 import type { HorizontalPodAutoscaler } from "../../../common/k8s-api/endpoints/horizontal-pod-autoscaler.api";
 import { Badge } from "../badge";
-import { cssNames, prevDefault } from "../../utils";
+import { cssNames } from "../../utils";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
 import type { HorizontalPodAutoscalerStore } 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 horizontalPodAutoscalerStoreInjectable from "./store.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -33,7 +32,6 @@ enum columnId {
 
 interface Dependencies {
   horizontalPodAutoscalerStore: HorizontalPodAutoscalerStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 @observer
@@ -90,13 +88,10 @@ class NonInjectedHorizontalPodAutoscalers extends React.Component<Dependencies>
           renderTableContents={hpa => [
             hpa.getName(),
             <KubeObjectStatusIcon key="icon" object={hpa} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
-              onClick={prevDefault(() => this.props.filterByNamespace(hpa.getNs()))}
-            >
-              {hpa.getNs()}
-            </a>,
+              namespace={hpa.getNs()}
+            />,
             this.getTargets(hpa),
             hpa.getMinPods(),
             hpa.getMaxPods(),
@@ -124,7 +119,6 @@ class NonInjectedHorizontalPodAutoscalers extends React.Component<Dependencies>
 export const HorizontalPodAutoscalers = withInjectables<Dependencies>(NonInjectedHorizontalPodAutoscalers, {
   getProps: (di, props) => ({
     ...props,
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     horizontalPodAutoscalerStore: di.inject(horizontalPodAutoscalerStoreInjectable),
   }),
 });

src/renderer/components/+config-limit-ranges/limit-ranges.tsx

@@ -11,12 +11,10 @@ import React from "react";
 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 { LimitRangeStore } from "./store";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import limitRangeStoreInjectable from "./store.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -25,7 +23,6 @@ enum columnId {
 }
 
 interface Dependencies {
-  filterByNamespace: FilterByNamespace;
   limitRangeStore: LimitRangeStore;
 }
 
@@ -58,13 +55,10 @@ class NonInjectedLimitRanges extends React.Component<Dependencies> {
           renderTableContents={limitRange => [
             limitRange.getName(),
             <KubeObjectStatusIcon key="icon" object={limitRange}/>,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
-              onClick={prevDefault(() => this.props.filterByNamespace(limitRange.getNs()))}
-            >
-              {limitRange.getNs()}
-            </a>,
+              namespace={limitRange.getNs()}
+            />,
             <KubeObjectAge key="age" object={limitRange} />,
           ]}
         />
@@ -76,7 +70,6 @@ class NonInjectedLimitRanges extends React.Component<Dependencies> {
 export const LimitRanges = withInjectables<Dependencies>(NonInjectedLimitRanges, {
   getProps: (di, props) => ({
     ...props,
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     limitRangeStore: di.inject(limitRangeStoreInjectable),
   }),
 });

src/renderer/components/+custom-resources/crd-resources.scss

@@ -4,7 +4,4 @@
  */
 
 .CrdResources {
-  a.filterNamespace {
-    border-bottom: unset;
-  }
 }

src/renderer/components/+custom-resources/crd-resources.tsx

@@ -19,9 +19,7 @@ import { KubeObjectAge } from "../kube-object/age";
 import type { CustomResourceDefinitionStore } from "./definition.store";
 import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
 import customResourceDefinitionStoreInjectable from "./definition.store.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",
@@ -34,7 +32,6 @@ interface Dependencies {
   name: IComputedValue<string>;
   apiManager: ApiManager;
   customResourceDefinitionStore: CustomResourceDefinitionStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 @observer
@@ -107,13 +104,7 @@ class NonInjectedCustomResources extends React.Component<Dependencies> {
           renderTableContents={customResource => [
             customResource.getName(),
             isNamespaced && (
-              <a
-                key="namespace"
-                className="filterNamespace"
-                onClick={prevDefault(() => this.props.filterByNamespace(customResource.getNs() as string))}
-              >
-                {customResource.getNs()}
-              </a>
+              <NamespaceSelectBadge namespace={customResource.getNs() as string} />
             ),
             ...extraColumns.map((column) => safeJSONPathValue(customResource, column.jsonPath)),
             <KubeObjectAge key="age" object={customResource} />,
@@ -141,7 +132,6 @@ export const CustomResources = withInjectables<Dependencies>(NonInjectedCustomRe
     ...di.inject(customResourcesRouteParametersInjectable),
     apiManager: di.inject(apiManagerInjectable),
     customResourceDefinitionStore: di.inject(customResourceDefinitionStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
   }),
 });
 

src/renderer/components/+events/events.tsx

@@ -19,7 +19,7 @@ import type { HeaderCustomizer } from "../item-object-list";
 import { Tooltip } from "../tooltip";
 import { Link } from "react-router-dom";
 import type { IClassName } from "../../utils";
-import { prevDefault, cssNames, stopPropagation } from "../../utils";
+import { cssNames, stopPropagation } from "../../utils";
 import { Icon } from "../icon";
 import type { ApiManager } from "../../../common/k8s-api/api-manager";
 import { withInjectables } from "@ogre-tools/injectable-react";
@@ -28,10 +28,9 @@ import { KubeObjectAge } from "../kube-object/age";
 import { ReactiveDuration } from "../duration/reactive-duration";
 import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
 import eventStoreInjectable from "./store.injectable";
-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 type { GetDetailsUrl } from "../kube-detail-params/get-details-url.injectable";
 import getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   message = "message",
@@ -58,7 +57,6 @@ interface Dependencies {
   navigateToEvents: () => void;
   eventStore: EventStore;
   apiManager: ApiManager;
-  filterByNamespace: FilterByNamespace;
   getDetailsUrl: GetDetailsUrl;
 }
 
@@ -202,15 +200,7 @@ class NonInjectedEvents extends React.Component<Dependencies & EventsProps> {
               ),
             },
             compact
-              ? (
-                <a
-                  key="namespace"
-                  className="filterNamespace"
-                  onClick={prevDefault(() => this.props.filterByNamespace(event.getNs()))}
-                >
-                  {event.getNs()}
-                </a>
-              )
+              ? <NamespaceSelectBadge key="namespace" namespace={event.getNs()} />
               : event.getNs(),
             <Link
               key="link"
@@ -246,7 +236,6 @@ export const Events = withInjectables<Dependencies, EventsProps>(NonInjectedEven
     navigateToEvents: di.inject(navigateToEventsInjectable),
     apiManager: di.inject(apiManagerInjectable),
     eventStore: di.inject(eventStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     getDetailsUrl: di.inject(getDetailsUrlInjectable),
   }),
 });

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

@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 import { Link } from "react-router-dom";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
 import { unitsToBytes } from "../../../common/utils/convertMemory";
-import { prevDefault, stopPropagation } from "../../utils";
+import { stopPropagation } from "../../utils";
 import type { StorageClassApi } from "../../../common/k8s-api/endpoints";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
@@ -18,13 +18,12 @@ import { KubeObjectAge } from "../kube-object/age";
 import type { PersistentVolumeClaimStore } from "./store";
 import type { PodStore } from "../+workloads-pods/store";
 import type { GetDetailsUrl } from "../kube-detail-params/get-details-url.injectable";
-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 getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable";
 import persistentVolumeClaimStoreInjectable from "./store.injectable";
 import podStoreInjectable from "../+workloads-pods/store.injectable";
 import storageClassApiInjectable from "../../../common/k8s-api/endpoints/storage-class.api.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -41,7 +40,6 @@ interface Dependencies {
   storageClassApi: StorageClassApi;
   podStore: PodStore;
   getDetailsUrl: GetDetailsUrl;
-  filterByNamespace: FilterByNamespace;
 }
 
 @observer
@@ -49,7 +47,6 @@ class NonInjectedPersistentVolumeClaims extends React.Component<Dependencies> {
   render() {
     const {
       persistentVolumeClaimStore,
-      filterByNamespace,
       getDetailsUrl,
       podStore,
       storageClassApi,
@@ -97,13 +94,10 @@ class NonInjectedPersistentVolumeClaims extends React.Component<Dependencies> {
             return [
               pvc.getName(),
               <KubeObjectStatusIcon key="icon" object={pvc} />,
-              <a
+              <NamespaceSelectBadge
                 key="namespace"
-                className="filterNamespace"
-                onClick={prevDefault(() => filterByNamespace(pvc.getNs()))}
-              >
-                {pvc.getNs()}
-              </a>,
+                namespace={pvc.getNs()}
+              />,
               <Link
                 key="link"
                 to={storageClassDetailsUrl}
@@ -134,7 +128,6 @@ class NonInjectedPersistentVolumeClaims extends React.Component<Dependencies> {
 export const PersistentVolumeClaims = withInjectables<Dependencies>(NonInjectedPersistentVolumeClaims, {
   getProps: (di, props) => ({
     ...props,
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     getDetailsUrl: di.inject(getDetailsUrlInjectable),
     persistentVolumeClaimStore: di.inject(persistentVolumeClaimStoreInjectable),
     podStore: di.inject(podStoreInjectable),