Split UserManagement into seperate Cluster and Namespace Roles and RoleBindings (#2755)

src/renderer/components/+user-management/+cluster-roles/add-dialog.scss

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+.AddRoleDialog {
+  .AceEditor {
+    min-height: 200px;
+  }
+}

src/renderer/components/+user-management/+cluster-roles/add-dialog.tsx

@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import "./add-dialog.scss";
+
+import { makeObservable, observable } from "mobx";
+import { observer } from "mobx-react";
+import React from "react";
+
+import { Dialog, DialogProps } from "../../dialog";
+import { Input } from "../../input";
+import { showDetails } from "../../kube-object";
+import { SubTitle } from "../../layout/sub-title";
+import { Notifications } from "../../notifications";
+import { Wizard, WizardStep } from "../../wizard";
+import { clusterRolesStore } from "./store";
+
+interface Props extends Partial<DialogProps> {
+}
+
+@observer
+export class AddClusterRoleDialog extends React.Component<Props> {
+  static isOpen = observable.box(false);
+
+  @observable clusterRoleName = "";
+
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
+  static open() {
+    AddClusterRoleDialog.isOpen.set(true);
+  }
+
+  static close() {
+    AddClusterRoleDialog.isOpen.set(false);
+  }
+
+  reset = () => {
+    this.clusterRoleName = "";
+  };
+
+  createRole = async () => {
+    try {
+      const role = await clusterRolesStore.create({ name: this.clusterRoleName });
+
+      showDetails(role.selfLink);
+      this.reset();
+      AddClusterRoleDialog.close();
+    } catch (err) {
+      Notifications.error(err.toString());
+    }
+  };
+
+  render() {
+    const { ...dialogProps } = this.props;
+
+    return (
+      <Dialog
+        {...dialogProps}
+        className="AddRoleDialog"
+        isOpen={AddClusterRoleDialog.isOpen.get()}
+        close={AddClusterRoleDialog.close}
+      >
+        <Wizard 
+          header={<h5>Create ClusterRole</h5>} 
+          done={AddClusterRoleDialog.close}
+        >
+          <WizardStep
+            contentClass="flex gaps column"
+            nextLabel="Create"
+            next={this.createRole}
+          >
+            <SubTitle title="ClusterRole Name" />
+            <Input
+              required autoFocus
+              placeholder="Name"
+              iconLeft="supervisor_account"
+              value={this.clusterRoleName}
+              onChange={v => this.clusterRoleName = v}
+            />
+          </WizardStep>
+        </Wizard>
+      </Dialog>
+    );
+  }
+}

src/renderer/components/+user-management/+cluster-roles/details.scss

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+.RoleDetails {
+  .rule {
+    display: grid;
+    grid-template-columns: min-content auto;
+    gap: $margin;
+
+    border: 1px solid $borderColor;
+    border-radius: $radius;
+    padding: $padding * 1.5;
+
+    > .name {
+      color: $textColorSecondary;
+      text-align: right;
+      white-space: nowrap;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: $margin * 2;
+    }
+  }
+}

src/renderer/components/+user-management/+cluster-roles/details.tsx

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import "./details.scss";
+
+import { observer } from "mobx-react";
+import React from "react";
+
+import { KubeEventDetails } from "../../+events/kube-event-details";
+import { kubeObjectDetailRegistry } from "../../../api/kube-object-detail-registry";
+import { DrawerTitle } from "../../drawer";
+import type { KubeObjectDetailsProps } from "../../kube-object";
+import { KubeObjectMeta } from "../../kube-object/kube-object-meta";
+import type { ClusterRole } from "../../../api/endpoints";
+
+interface Props extends KubeObjectDetailsProps<ClusterRole> {
+}
+
+@observer
+export class ClusterRoleDetails extends React.Component<Props> {
+  render() {
+    const { object: clusterRole } = this.props;
+
+    if (!clusterRole) return null;
+    const rules = clusterRole.getRules();
+
+    return (
+      <div className="ClusterRoleDetails">
+        <KubeObjectMeta object={clusterRole}/>
+
+        <DrawerTitle title="Rules"/>
+        {rules.map(({ resourceNames, apiGroups, resources, verbs }, index) => {
+          return (
+            <div className="rule" key={index}>
+              {resources && (
+                <>
+                  <div className="name">Resources</div>
+                  <div className="value">{resources.join(", ")}</div>
+                </>
+              )}
+              {verbs && (
+                <>
+                  <div className="name">Verbs</div>
+                  <div className="value">{verbs.join(", ")}</div>
+                </>
+              )}
+              {apiGroups && (
+                <>
+                  <div className="name">Api Groups</div>
+                  <div className="value">
+                    {apiGroups
+                      .map(apiGroup => apiGroup === "" ? `'${apiGroup}'` : apiGroup)
+                      .join(", ")
+                    }
+                  </div>
+                </>
+              )}
+              {resourceNames && (
+                <>
+                  <div className="name">Resource Names</div>
+                  <div className="value">{resourceNames.join(", ")}</div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+kubeObjectDetailRegistry.add({
+  kind: "ClusterRole",
+  apiVersions: ["rbac.authorization.k8s.io/v1"],
+  components: {
+    Details: (props) => <ClusterRoleDetails {...props}/>
+  }
+});
+kubeObjectDetailRegistry.add({
+  kind: "ClusterRole",
+  apiVersions: ["rbac.authorization.k8s.io/v1"],
+  priority: 5,
+  components: {
+    Details: (props) => <KubeEventDetails {...props}/>
+  }
+});

src/renderer/components/+user-management/+cluster-roles/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+export * from "./view";
+export * from "./details";
+export * from "./add-dialog";

src/renderer/components/+user-management/+cluster-roles/store.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import { apiManager } from "../../../api/api-manager";
+import { ClusterRole, clusterRoleApi } from "../../../api/endpoints";
+import { KubeObjectStore } from "../../../kube-object.store";
+import { autoBind } from "../../../utils";
+
+export class ClusterRolesStore extends KubeObjectStore<ClusterRole> {
+  api = clusterRoleApi;
+
+  constructor() {
+    super();
+    autoBind(this);
+  }
+
+  protected sortItems(items: ClusterRole[]) {
+    return super.sortItems(items, [
+      clusterRole => clusterRole.kind,
+      clusterRole => clusterRole.getName(),
+    ]);
+  }
+}
+
+export const clusterRolesStore = new ClusterRolesStore();
+
+apiManager.registerStore(clusterRolesStore);

src/renderer/components/+user-management/+cluster-roles/view.scss

@@ -0,0 +1,11 @@
+.ClusterRoles {
+  .help-icon {
+    margin-left: $margin / 2;
+  }
+
+  .TableCell {
+    &.warning {
+      @include table-cell-warning;
+    }
+  }
+}

src/renderer/components/+user-management/+cluster-roles/view.tsx

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import "./view.scss";
+
+import { observer } from "mobx-react";
+import React from "react";
+import type { RouteComponentProps } from "react-router";
+import type { ClusterRole } from "../../../api/endpoints";
+import { KubeObjectListLayout } from "../../kube-object";
+import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
+import type { ClusterRolesRouteParams } from "../user-management.route";
+import { AddClusterRoleDialog } from "./add-dialog";
+import { clusterRolesStore } from "./store";
+
+enum columnId {
+  name = "name",
+  namespace = "namespace",
+  age = "age",
+}
+
+interface Props extends RouteComponentProps<ClusterRolesRouteParams> {
+}
+
+@observer
+export class ClusterRoles extends React.Component<Props> {
+  render() {
+    return (
+      <>
+        <KubeObjectListLayout
+          isConfigurable
+          tableId="access_cluster_roles"
+          className="ClusterRoles"
+          store={clusterRolesStore}
+          sortingCallbacks={{
+            [columnId.name]: (clusterRole: ClusterRole) => clusterRole.getName(),
+            [columnId.age]: (clusterRole: ClusterRole) => clusterRole.getTimeDiffFromNow(),
+          }}
+          searchFilters={[
+            (clusterRole: ClusterRole) => clusterRole.getSearchFields(),
+          ]}
+          renderHeaderTitle="Cluster Roles"
+          renderTableHeader={[
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { className: "warning", showWithColumn: columnId.name },
+            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+          ]}
+          renderTableContents={(clusterRole: ClusterRole) => [
+            clusterRole.getName(),
+            <KubeObjectStatusIcon key="icon" object={clusterRole} />,
+            clusterRole.getAge(),
+          ]}
+          addRemoveButtons={{
+            onAdd: () => AddClusterRoleDialog.open(),
+            addTooltip: "Create new ClusterRole",
+          }}
+        />
+        <AddClusterRoleDialog/>
+      </>
+    );
+  }
+}