Add buttons to quicky filter the current view by a specific namespace (#6677)

* Add quick namespace filtering in pods view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to HorizontalPodAutoscalers view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to Leases view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to LimitRanges view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to ConfigMaps view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Remove last usage of legacy global

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to PodDisruptionBudgets view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to ResourceQuotas view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to Secrets view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Remove last usage of legacy global secretsStore

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to CustomResources view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to Events view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to HelmReleases view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to Endpoints view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Remove last usage of legacy global endpointsStore

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to Ingresses view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to NetworkPolicies view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to PortForwards view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to Services view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to PersistentVolumeClaims view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to RoleBindings view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to Roles view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to ServiceAccounts view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to CronJobs view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to DaemonSets view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to Deployments view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to Jobs view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to StatefulSets view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Add quick namespace filtering to ReplicaSets view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Remove last usage of legacy global replicaSetStore

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix up missing styles

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/+config-secrets/__tests__/secret-details.test.tsx

@@ -8,6 +8,7 @@ import { SecretDetails } from "../secret-details";
 import { Secret, SecretType } from "../../../../common/k8s-api/endpoints";
 import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
 import { renderFor } from "../../test-utils/renderFor";
+import storesAndApisCanBeCreatedInjectable from "../../../stores-apis-can-be-created.injectable";
 
 jest.mock("../../kube-object-meta/kube-object-meta", () => ({
   KubeObjectMeta: () => null,
@@ -18,6 +19,8 @@ describe("SecretDetails tests", () => {
     const di = getDiForUnitTesting({ doGeneralOverrides: true });
     const render = renderFor(di);
 
+    di.override(storesAndApisCanBeCreatedInjectable, () => true);
+
     const secret = new Secret({
       apiVersion: "v1",
       kind: "secret",

src/renderer/components/+config-secrets/legacy-store.ts

@@ -1,12 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import { asLegacyGlobalForExtensionApi } from "../../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api";
-import secretStoreInjectable from "./store.injectable";
-
-/**
- * @deprecated use `di.inject(secretStoreInjectable)` instead
- */
-export const secretStore = asLegacyGlobalForExtensionApi(secretStoreInjectable);

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

@@ -11,25 +11,38 @@ import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Input } from "../input";
 import { Button } from "../button";
-import { Notifications } from "../notifications";
+import type { ShowNotification } from "../notifications";
 import { base64, toggle } from "../../utils";
 import { Icon } from "../icon";
-import { secretStore } from "./legacy-store";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { Secret } from "../../../common/k8s-api/endpoints";
 import { KubeObjectMeta } from "../kube-object-meta";
-import logger from "../../../common/logger";
+import type { Logger } from "../../../common/logger";
+import type { SecretStore } from "./store";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import loggerInjectable from "../../../common/logger.injectable";
+import secretStoreInjectable from "./store.injectable";
+import showSuccessNotificationInjectable from "../notifications/show-success-notification.injectable";
+import type { ShowCheckedErrorNotification } from "../notifications/show-checked-error.injectable";
+import showCheckedErrorNotificationInjectable from "../notifications/show-checked-error.injectable";
 
 export interface SecretDetailsProps extends KubeObjectDetailsProps<Secret> {
 }
 
+interface Dependencies {
+  secretStore: SecretStore;
+  logger: Logger;
+  showSuccessNotification: ShowNotification;
+  showCheckedErrorNotification: ShowCheckedErrorNotification;
+}
+
 @observer
-export class SecretDetails extends React.Component<SecretDetailsProps> {
+class NonInjectedSecretDetails extends React.Component<SecretDetailsProps & Dependencies> {
   @observable isSaving = false;
   @observable data: Partial<Record<string, string>> = {};
   @observable revealSecret = observable.set<string>();
 
-  constructor(props: SecretDetailsProps) {
+  constructor(props: SecretDetailsProps & Dependencies) {
     super(props);
     makeObservable(this);
   }
@@ -53,10 +66,10 @@ export class SecretDetails extends React.Component<SecretDetailsProps> {
     this.isSaving = true;
 
     try {
-      await secretStore.update(secret, { ...secret, data: this.data });
-      Notifications.ok("Secret successfully updated.");
+      await this.props.secretStore.update(secret, { ...secret, data: this.data });
+      this.props.showSuccessNotification("Secret successfully updated.");
     } catch (err) {
-      Notifications.checkedError(err, "Unknown error occured while updating the secret");
+      this.props.showCheckedErrorNotification(err, "Unknown error occured while updating the secret");
     }
     this.isSaving = false;
   };
@@ -134,7 +147,7 @@ export class SecretDetails extends React.Component<SecretDetailsProps> {
   }
 
   render() {
-    const { object: secret } = this.props;
+    const { object: secret, logger } = this.props;
 
     if (!secret) {
       return null;
@@ -157,3 +170,13 @@ export class SecretDetails extends React.Component<SecretDetailsProps> {
     );
   }
 }
+
+export const SecretDetails = withInjectables<Dependencies, SecretDetailsProps>(NonInjectedSecretDetails, {
+  getProps: (di, props) => ({
+    ...props,
+    logger: di.inject(loggerInjectable),
+    secretStore: di.inject(secretStoreInjectable),
+    showCheckedErrorNotification: di.inject(showCheckedErrorNotificationInjectable),
+    showSuccessNotification: di.inject(showSuccessNotificationInjectable),
+  }),
+});

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

@@ -16,5 +16,9 @@
     &.labels {
       @include table-cell-labels-offsets;
     }
+
+    a.filterNamespace {
+      border-bottom: unset;
+    }
   }
 }

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

@@ -10,10 +10,15 @@ import { observer } from "mobx-react";
 import { AddSecretDialog } from "./add-secret-dialog";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
 import { Badge } from "../badge";
-import { secretStore } from "./legacy-store";
 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";
 
 enum columnId {
   name = "name",
@@ -24,8 +29,13 @@ enum columnId {
   age = "age",
 }
 
+interface Dependencies {
+  filterByNamespace: FilterByNamespace;
+  secretStore: SecretStore;
+}
+
 @observer
-export class Secrets extends React.Component {
+class NonInjectedSecrets extends React.Component<Dependencies> {
   render() {
     return (
       <SiblingsInTabLayout>
@@ -33,7 +43,7 @@ export class Secrets extends React.Component {
           isConfigurable
           tableId="configuration_secrets"
           className="Secrets"
-          store={secretStore}
+          store={this.props.secretStore}
           sortingCallbacks={{
             [columnId.name]: secret => secret.getName(),
             [columnId.namespace]: secret => secret.getNs(),
@@ -59,7 +69,13 @@ export class Secrets extends React.Component {
           renderTableContents={secret => [
             secret.getName(),
             <KubeObjectStatusIcon key="icon" object={secret} />,
-            secret.getNs(),
+            <a
+              key="namespace"
+              className="filterNamespace"
+              onClick={prevDefault(() => this.props.filterByNamespace(secret.getNs()))}
+            >
+              {secret.getNs()}
+            </a>,
             secret.getLabels().map(label => (
               <Badge
                 scrollable
@@ -82,3 +98,11 @@ export class Secrets extends React.Component {
     );
   }
 }
+
+export const Secrets = withInjectables<Dependencies>(NonInjectedSecrets, {
+  getProps: (di, props) => ({
+    ...props,
+    filterByNamespace: di.inject(filterByNamespaceInjectable),
+    secretStore: di.inject(secretStoreInjectable),
+  }),
+});