From 8fec70fb0afc70c6f3443a69f15a7a9d7dafea00 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 30 Nov 2022 09:22:26 -0500
Subject: [PATCH] Add quick namespace filtering to Roles view

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../+user-management/+roles/view.scss         |  4 +++
 .../+user-management/+roles/view.tsx          | 35 +++++++++++++++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/+user-management/+roles/view.scss b/src/renderer/components/+user-management/+roles/view.scss
index 690aa3d8b0..7ed72f8cc2 100644
--- a/src/renderer/components/+user-management/+roles/view.scss
+++ b/src/renderer/components/+user-management/+roles/view.scss
@@ -12,5 +12,9 @@
     &.warning {
       @include table-cell-warning;
     }
+
+    a.filterNamespace {
+      border-bottom: unset;
+    }
   }
 }
diff --git a/src/renderer/components/+user-management/+roles/view.tsx b/src/renderer/components/+user-management/+roles/view.tsx
index c67f630919..35b9bdc0d8 100644
--- a/src/renderer/components/+user-management/+roles/view.tsx
+++ b/src/renderer/components/+user-management/+roles/view.tsx
@@ -10,9 +10,14 @@ import React from "react";
 import { KubeObjectListLayout } from "../../kube-object-list-layout";
 import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
 import { AddRoleDialog } from "./add-dialog";
-import { roleStore } from "./legacy-store";
 import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../../kube-object/age";
+import type { RoleStore } from "./store";
+import { prevDefault } from "../../../utils";
+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 roleStoreInjectable from "./store.injectable";
 
 enum columnId {
   name = "name",
@@ -20,9 +25,19 @@ enum columnId {
   age = "age",
 }
 
+interface Dependencies {
+  roleStore: RoleStore;
+  filterByNamespace: FilterByNamespace;
+}
+
 @observer
-export class Roles extends React.Component {
+class NonInjectedRoles extends React.Component<Dependencies> {
   render() {
+    const {
+      filterByNamespace,
+      roleStore,
+    } = this.props;
+
     return (
       <SiblingsInTabLayout>
         <KubeObjectListLayout
@@ -48,7 +63,13 @@ export class Roles extends React.Component {
           renderTableContents={role => [
             role.getName(),
             <KubeObjectStatusIcon key="icon" object={role} />,
-            role.getNs(),
+            <a
+              key="namespace"
+              className="filterNamespace"
+              onClick={prevDefault(() => filterByNamespace(role.getNs()))}
+            >
+              {role.getNs()}
+            </a>,
             <KubeObjectAge key="age" object={role} />,
           ]}
           addRemoveButtons={{
@@ -61,3 +82,11 @@ export class Roles extends React.Component {
     );
   }
 }
+
+export const Roles = withInjectables<Dependencies>(NonInjectedRoles, {
+  getProps: (di, props) => ({
+    ...props,
+    filterByNamespace: di.inject(filterByNamespaceInjectable),
+    roleStore: di.inject(roleStoreInjectable),
+  }),
+});