Technical requirements for behavioural unit tests (#5084)

* Implement a lot of technical requirements for behavioural unit tests Note: the crux of this was to make routing env-agnostic, and not based on URLs as magic strings, but instead something type-enforced. Note: extension-based routes comply to same exact interface by "late-registering" their routes when installed. Routes are just injectables. Note: another chunk of global shared state is no more. Note: a lot of explicit side effects have been cornered to injectables. Note: a lot of stuff has become reactive as part if this. Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Make a directory commonly available Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Require id for <Select /> to prevent non-deterministic renders This was caused by global state in a 3rd party lib: "react-select". Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Specify id for all <Select /> to satisfy previous commit Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Prevent explicit side effect in component by using existing dependency instead Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Extract instantiation of "conf" as injectables for causing side effects Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Introduce a legacy-helper to make gradual refactoring of inheritors of Singleton easier Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Make legacy unit tests for hotbar green and more simple by using the new legacy helper Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Temporarily kludge all unit tests green with a disclaimer about allowing side-effects Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Remove kludge in previous commit by explicitly permitting specific side effects where old unit tests require it Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Prevent old unit test with side effects from accessing file system Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Migrate to actual typing for di.permitSideEffects Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Prevent unit tests from failing because of non-standard method of HTML-element not present in js-dom Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Adapt integration tests to recent changes Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Fix code style Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Fix artifact from bad rebase Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Add a deprecation from a review comment Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Remove change that is not required Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove redundant comment Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix code style Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove redundant file Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix bad merge Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Improve variable name Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Tweak logger interface to be more descriptive Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Make injecting legacy singleton always provide new instance Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove conditional typing when not needed Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Improve naming of variable Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove unnecessary code style changes Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove flag for causing side effects from too broad scope Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Override side-effects in unit test using injectable instead of monkey patching Co-authored-by: Janne Savolainen <janne.savolainen@live.fi> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Flag some side-effects and add general overrides Co-authored-by: Janne Savolainen <janne.savolainen@live.fi> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Fix unit tests in CI by removing explicit side-effect Co-authored-by: Janne Savolainen <janne.savolainen@live.fi> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Remove explicit side-effect from getting default shell Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Introduce abstraction for getting absolute paths Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Switch to using abstraction for getting absolute path to control explicit side effect Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Introduce abstraction for joining paths Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Switch to using abstraction for joining paths to control explicit side effect Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix fake implementation for join paths Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix test after removing explicit side effect Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove explicit side effects from kubeconfig-syncs Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix arguments after removing explicit side effect Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Make registrators not async for not being needed anymore Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Make generalCatalogEntities non-observable, as there is no requirement Co-authored-by: Janne Savolainen <janne.savolainen@live.fi> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Remove redundant code Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Simplify logic for registering general catalog entity sources Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Add TODO Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Replace function for getting application menu items with reactive solution Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix typo in interface name Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove global shared state usages of hot bar store Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove redundant enum Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>
2025-05-20 05:10:56 +00:00 · 2022-03-31 16:57:05 +03:00
1 parent ab2cd27a27
commit a277cfcf02
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { ClusterRoleBindings } from "./view";
+import clusterRoleBindingsRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/cluster-role-bindings/cluster-role-bindings-route.injectable";
+import { routeSpecificComponentInjectionToken } from "../../../routes/route-specific-component-injection-token";
+
+const clusterRoleBindingsRouteComponentInjectable = getInjectable({
+  id: "cluster-role-bindings-route-component",
+
+  instantiate: (di) => ({
+    route: di.inject(clusterRoleBindingsRouteInjectable),
+    Component: ClusterRoleBindings,
+  }),
+
+  injectionToken: routeSpecificComponentInjectionToken,
+});
+
+export default clusterRoleBindingsRouteComponentInjectable;
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+
+import clusterRoleBindingsRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/cluster-role-bindings/cluster-role-bindings-route.injectable";
+import { userManagementSidebarItemId } from "../user-management-sidebar-items.injectable";
+import { sidebarItemsInjectionToken } from "../../layout/sidebar-items.injectable";
+import routeIsActiveInjectable from "../../../routes/route-is-active.injectable";
+import navigateToClusterRoleBindingsInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/cluster-role-bindings/navigate-to-cluster-role-bindings.injectable";
+
+const clusterRoleBindingsSidebarItemsInjectable = getInjectable({
+  id: "cluster-role-bindings-sidebar-items",
+
+  instantiate: (di) => {
+    const route = di.inject(clusterRoleBindingsRouteInjectable);
+    const navigateToClusterRoleBindings = di.inject(navigateToClusterRoleBindingsInjectable);
+    const routeIsActive = di.inject(routeIsActiveInjectable, route);
+
+    return computed(() => [
+      {
+        id: "cluster-role-bindings",
+        parentId: userManagementSidebarItemId,
+        title: "Cluster Role Bindings",
+        onClick: navigateToClusterRoleBindings,
+        isActive: routeIsActive,
+        isVisible: route.isEnabled,
+        orderNumber: 40,
+      },
+    ]);
+  },
+
+  injectionToken: sidebarItemsInjectionToken,
+});
+
+export default clusterRoleBindingsSidebarItemsInjectable;
@@ -172,6 +172,7 @@ export class ClusterRoleBindingDialog extends React.Component<ClusterRoleBinding
      <>
        <SubTitle title="Cluster Role Reference" />
        <Select
+          id="cluster-role-input"
          themeName="light"
          placeholder="Select cluster role ..."
          isDisabled={this.isEditing}
@@ -229,6 +230,7 @@ export class ClusterRoleBindingDialog extends React.Component<ClusterRoleBinding

        <b>Service Accounts</b>
        <Select
+          id="service-account-input"
          isMulti
          themeName="light"
          placeholder="Select service accounts ..."
@@ -7,14 +7,13 @@ import "./view.scss";

 import { observer } from "mobx-react";
 import React from "react";
-import type { RouteComponentProps } from "react-router";
 import { KubeObjectListLayout } from "../../kube-object-list-layout";
 import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
 import { ClusterRoleBindingDialog } from "./dialog";
 import { clusterRoleBindingsStore } from "./store";
 import { clusterRolesStore } from "../+cluster-roles/store";
 import { serviceAccountsStore } from "../+service-accounts/store";
-import type { ClusterRoleBindingsRouteParams } from "../../../../common/routes";
+import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../../kube-object/age";

 enum columnId {
@@ -24,14 +23,11 @@ enum columnId {
  age = "age",
 }

-export interface ClusterRoleBindingsProps extends RouteComponentProps<ClusterRoleBindingsRouteParams> {
-}
-
@observer
-export class ClusterRoleBindings extends React.Component<ClusterRoleBindingsProps> {
+export class ClusterRoleBindings extends React.Component {
  render() {
    return (
-      <>
+      <SiblingsInTabLayout>
        <KubeObjectListLayout
          isConfigurable
          tableId="access_cluster_role_bindings"
@@ -66,7 +62,7 @@ export class ClusterRoleBindings extends React.Component<ClusterRoleBindingsProp
          }}
        />
        <ClusterRoleBindingDialog />
-      </>
+      </SiblingsInTabLayout>
    );
  }
 }
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { ClusterRoles } from "./view";
+import clusterRolesRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/cluster-roles/cluster-roles-route.injectable";
+import { routeSpecificComponentInjectionToken } from "../../../routes/route-specific-component-injection-token";
+
+const clusterRolesRouteComponentInjectable = getInjectable({
+  id: "cluster-roles-route-component",
+
+  instantiate: (di) => ({
+    route: di.inject(clusterRolesRouteInjectable),
+    Component: ClusterRoles,
+  }),
+
+  injectionToken: routeSpecificComponentInjectionToken,
+});
+
+export default clusterRolesRouteComponentInjectable;
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+
+import clusterRolesRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/cluster-roles/cluster-roles-route.injectable";
+import { userManagementSidebarItemId } from "../user-management-sidebar-items.injectable";
+import { sidebarItemsInjectionToken } from "../../layout/sidebar-items.injectable";
+import routeIsActiveInjectable from "../../../routes/route-is-active.injectable";
+import navigateToClusterRolesInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/cluster-roles/navigate-to-cluster-roles.injectable";
+
+const clusterRolesSidebarItemsInjectable = getInjectable({
+  id: "cluster-roles-sidebar-items",
+
+  instantiate: (di) => {
+    const route = di.inject(clusterRolesRouteInjectable);
+    const navigateToClusterRoles = di.inject(navigateToClusterRolesInjectable);
+    const routeIsActive = di.inject(routeIsActiveInjectable, route);
+
+    return computed(() => [
+      {
+        id: "cluster-roles",
+        parentId: userManagementSidebarItemId,
+        title: "Cluster Roles",
+        onClick: navigateToClusterRoles,
+        isActive: routeIsActive,
+        isVisible: route.isEnabled,
+        orderNumber: 20,
+      },
+    ]);
+  },
+
+  injectionToken: sidebarItemsInjectionToken,
+});
+
+export default clusterRolesSidebarItemsInjectable;
@@ -7,12 +7,11 @@ import "./view.scss";

 import { observer } from "mobx-react";
 import React from "react";
-import type { RouteComponentProps } from "react-router";
 import { KubeObjectListLayout } from "../../kube-object-list-layout";
 import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
 import { AddClusterRoleDialog } from "./add-dialog";
 import { clusterRolesStore } from "./store";
-import type { ClusterRolesRouteParams } from "../../../../common/routes";
+import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../../kube-object/age";

 enum columnId {
@@ -21,14 +20,11 @@ enum columnId {
  age = "age",
 }

-export interface ClusterRolesProps extends RouteComponentProps<ClusterRolesRouteParams> {
-}
-
@observer
-export class ClusterRoles extends React.Component<ClusterRolesProps> {
+export class ClusterRoles extends React.Component {
  render() {
    return (
-      <>
+      <SiblingsInTabLayout>
        <KubeObjectListLayout
          isConfigurable
          tableId="access_cluster_roles"
@@ -58,7 +54,7 @@ export class ClusterRoles extends React.Component<ClusterRolesProps> {
          }}
        />
        <AddClusterRoleDialog/>
-      </>
+      </SiblingsInTabLayout>
    );
  }
 }
@@ -176,6 +176,7 @@ export class RoleBindingDialog extends React.Component<RoleBindingDialogProps> {
      <>
        <SubTitle title="Namespace" />
        <NamespaceSelect
+          id="dialog-namespace-input"
          themeName="light"
          isDisabled={this.isEditing}
          value={this.bindingNamespace}
@@ -185,6 +186,7 @@ export class RoleBindingDialog extends React.Component<RoleBindingDialogProps> {

        <SubTitle title="Role Reference" />
        <Select
+          id="role-reference-input"
          themeName="light"
          placeholder="Select role or cluster role ..."
          isDisabled={this.isEditing}
@@ -226,6 +228,7 @@ export class RoleBindingDialog extends React.Component<RoleBindingDialogProps> {

        <b>Service Accounts</b>
        <Select
+          id="service-account-input"
          isMulti
          themeName="light"
          placeholder="Select service accounts ..."
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { RoleBindings } from "./view";
+import roleBindingsRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/role-bindings/role-bindings-route.injectable";
+import { routeSpecificComponentInjectionToken } from "../../../routes/route-specific-component-injection-token";
+
+const roleBindingsRouteComponentInjectable = getInjectable({
+  id: "role-bindings-route-component",
+
+  instantiate: (di) => ({
+    route: di.inject(roleBindingsRouteInjectable),
+    Component: RoleBindings,
+  }),
+
+  injectionToken: routeSpecificComponentInjectionToken,
+});
+
+export default roleBindingsRouteComponentInjectable;
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+
+import roleBindingsRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/role-bindings/role-bindings-route.injectable";
+import { userManagementSidebarItemId } from "../user-management-sidebar-items.injectable";
+import { sidebarItemsInjectionToken } from "../../layout/sidebar-items.injectable";
+import routeIsActiveInjectable from "../../../routes/route-is-active.injectable";
+import navigateToRoleBindingsInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/role-bindings/navigate-to-role-bindings.injectable";
+
+const roleBindingsSidebarItemsInjectable = getInjectable({
+  id: "role-bindings-sidebar-items",
+
+  instantiate: (di) => {
+    const route = di.inject(roleBindingsRouteInjectable);
+    const navigateToRoleBindings = di.inject(navigateToRoleBindingsInjectable);
+    const routeIsActive = di.inject(routeIsActiveInjectable, route);
+
+    return computed(() => [
+      {
+        id: "role-bindings",
+        parentId: userManagementSidebarItemId,
+        title: "Role Bindings",
+        onClick: navigateToRoleBindings,
+        isActive: routeIsActive,
+        isVisible: route.isEnabled,
+        orderNumber: 50,
+      },
+    ]);
+  },
+
+  injectionToken: sidebarItemsInjectionToken,
+});
+
+export default roleBindingsSidebarItemsInjectable;
@@ -6,7 +6,6 @@ import "./view.scss";

 import { observer } from "mobx-react";
 import React from "react";
-import type { RouteComponentProps } from "react-router";
 import { KubeObjectListLayout } from "../../kube-object-list-layout";
 import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
 import { RoleBindingDialog } from "./dialog";
@@ -14,7 +13,7 @@ import { roleBindingsStore } from "./store";
 import { rolesStore } from "../+roles/store";
 import { clusterRolesStore } from "../+cluster-roles/store";
 import { serviceAccountsStore } from "../+service-accounts/store";
-import type { RoleBindingsRouteParams } from "../../../../common/routes";
+import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../../kube-object/age";

 enum columnId {
@@ -24,14 +23,11 @@ enum columnId {
  age = "age",
 }

-export interface RoleBindingsProps extends RouteComponentProps<RoleBindingsRouteParams> {
-}
-
@observer
-export class RoleBindings extends React.Component<RoleBindingsProps> {
+export class RoleBindings extends React.Component {
  render() {
    return (
-      <>
+      <SiblingsInTabLayout>
        <KubeObjectListLayout
          isConfigurable
          tableId="access_role_bindings"
@@ -69,7 +65,7 @@ export class RoleBindings extends React.Component<RoleBindingsProps> {
          }}
        />
        <RoleBindingDialog />
-      </>
+      </SiblingsInTabLayout>
    );
  }
 }
@@ -85,6 +85,7 @@ export class AddRoleDialog extends React.Component<AddRoleDialogProps> {
            />
            <SubTitle title="Namespace" />
            <NamespaceSelect
+              id="add-dialog-namespace-select-input"
              themeName="light"
              value={this.namespace}
              onChange={({ value }) => this.namespace = value}
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { Roles } from "./view";
+import rolesRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/roles/roles-route.injectable";
+import { routeSpecificComponentInjectionToken } from "../../../routes/route-specific-component-injection-token";
+
+const rolesRouteComponentInjectable = getInjectable({
+  id: "roles-route-component",
+
+  instantiate: (di) => ({
+    route: di.inject(rolesRouteInjectable),
+    Component: Roles,
+  }),
+
+  injectionToken: routeSpecificComponentInjectionToken,
+});
+
+export default rolesRouteComponentInjectable;
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+
+import rolesRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/roles/roles-route.injectable";
+import { userManagementSidebarItemId } from "../user-management-sidebar-items.injectable";
+import { sidebarItemsInjectionToken } from "../../layout/sidebar-items.injectable";
+import routeIsActiveInjectable from "../../../routes/route-is-active.injectable";
+import navigateToRolesInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/roles/navigate-to-roles.injectable";
+
+const rolesSidebarItemsInjectable = getInjectable({
+  id: "roles-sidebar-items",
+
+  instantiate: (di) => {
+    const route = di.inject(rolesRouteInjectable);
+    const navigateToRoles = di.inject(navigateToRolesInjectable);
+    const routeIsActive = di.inject(routeIsActiveInjectable, route);
+
+    return computed(() => [
+      {
+        id: "roles",
+        parentId: userManagementSidebarItemId,
+        title: "Roles",
+        onClick: navigateToRoles,
+        isActive: routeIsActive,
+        isVisible: route.isEnabled,
+        orderNumber: 30,
+      },
+    ]);
+  },
+
+  injectionToken: sidebarItemsInjectionToken,
+});
+
+export default rolesSidebarItemsInjectable;
@@ -7,12 +7,11 @@ import "./view.scss";

 import { observer } from "mobx-react";
 import React from "react";
-import type { RouteComponentProps } from "react-router";
 import { KubeObjectListLayout } from "../../kube-object-list-layout";
 import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
 import { AddRoleDialog } from "./add-dialog";
 import { rolesStore } from "./store";
-import type { RolesRouteParams } from "../../../../common/routes";
+import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../../kube-object/age";

 enum columnId {
@@ -21,14 +20,11 @@ enum columnId {
  age = "age",
 }

-export interface RolesProps extends RouteComponentProps<RolesRouteParams> {
-}
-
@observer
-export class Roles extends React.Component<RolesProps> {
+export class Roles extends React.Component {
  render() {
    return (
-      <>
+      <SiblingsInTabLayout>
        <KubeObjectListLayout
          isConfigurable
          tableId="access_roles"
@@ -61,7 +57,7 @@ export class Roles extends React.Component<RolesProps> {
          }}
        />
        <AddRoleDialog/>
-      </>
+      </SiblingsInTabLayout>
    );
  }
 }
@@ -81,6 +81,7 @@ export class CreateServiceAccountDialog extends React.Component<CreateServiceAcc
            />
            <SubTitle title="Namespace" />
            <NamespaceSelect
+              id="create-dialog-namespace-select-input"
              themeName="light"
              value={namespace}
              onChange={({ value }) => this.namespace = value}
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { ServiceAccounts } from "./view";
+import serviceAccountsRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/service-accounts/service-accounts-route.injectable";
+import { routeSpecificComponentInjectionToken } from "../../../routes/route-specific-component-injection-token";
+
+const serviceAccountsRouteComponentInjectable = getInjectable({
+  id: "service-accounts-route-component",
+
+  instantiate: (di) => ({
+    route: di.inject(serviceAccountsRouteInjectable),
+    Component: ServiceAccounts,
+  }),
+
+  injectionToken: routeSpecificComponentInjectionToken,
+});
+
+export default serviceAccountsRouteComponentInjectable;
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+
+import serviceAccountsRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/service-accounts/service-accounts-route.injectable";
+import { userManagementSidebarItemId } from "../user-management-sidebar-items.injectable";
+import { sidebarItemsInjectionToken } from "../../layout/sidebar-items.injectable";
+import routeIsActiveInjectable from "../../../routes/route-is-active.injectable";
+import navigateToServiceAccountsInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/service-accounts/navigate-to-service-accounts.injectable";
+
+const serviceAccountsSidebarItemsInjectable = getInjectable({
+  id: "service-accounts-sidebar-items",
+
+  instantiate: (di) => {
+    const route = di.inject(serviceAccountsRouteInjectable);
+    const navigateToServiceAccounts = di.inject(navigateToServiceAccountsInjectable);
+    const routeIsActive = di.inject(routeIsActiveInjectable, route);
+
+    return computed(() => [
+      {
+        id: "service-accounts",
+        parentId: userManagementSidebarItemId,
+        title: "Service Accounts",
+        onClick: navigateToServiceAccounts,
+        isActive: routeIsActive,
+        isVisible: route.isEnabled,
+        orderNumber: 10,
+      },
+    ]);
+  },
+
+  injectionToken: sidebarItemsInjectionToken,
+});
+
+export default serviceAccountsSidebarItemsInjectable;
@@ -7,12 +7,11 @@ import "./view.scss";

 import { observer } from "mobx-react";
 import React from "react";
-import type { RouteComponentProps } from "react-router";
 import { KubeObjectListLayout } from "../../kube-object-list-layout";
 import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
 import { CreateServiceAccountDialog } from "./create-dialog";
 import { serviceAccountsStore } from "./store";
-import type { ServiceAccountsRouteParams } from "../../../../common/routes";
+import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../../kube-object/age";

 enum columnId {
@@ -21,14 +20,11 @@ enum columnId {
  age = "age",
 }

-export interface ServiceAccountsProps extends RouteComponentProps<ServiceAccountsRouteParams> {
-}
-
@observer
-export class ServiceAccounts extends React.Component<ServiceAccountsProps> {
+export class ServiceAccounts extends React.Component {
  render() {
    return (
-      <>
+      <SiblingsInTabLayout>
        <KubeObjectListLayout
          isConfigurable
          tableId="access_service_accounts"
@@ -60,7 +56,7 @@ export class ServiceAccounts extends React.Component<ServiceAccountsProps> {
          }}
        />
        <CreateServiceAccountDialog/>
-      </>
+      </SiblingsInTabLayout>
    );
  }
 }
@@ -1,92 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
-import type { TabLayoutRoute } from "../layout/tab-layout";
-import type { IsAllowedResource } from "../../../common/utils/is-allowed-resource.injectable";
-import isAllowedResourceInjectable from "../../../common/utils/is-allowed-resource.injectable";
-import * as routes from "../../../common/routes";
-import { PodSecurityPolicies } from "../+pod-security-policies";
-import { ClusterRoleBindings } from "./+cluster-role-bindings";
-import { ClusterRoles } from "./+cluster-roles";
-import { RoleBindings } from "./+role-bindings";
-import { Roles } from "./+roles";
-import { ServiceAccounts } from "./+service-accounts";
-
-interface Dependencies {
-  isAllowedResource: IsAllowedResource;
-}
-
-function getRouteTabs({ isAllowedResource }: Dependencies) {
-  return computed(() => {
-    const tabs: TabLayoutRoute[] = [];
-
-    if (isAllowedResource("serviceaccounts")) {
-      tabs.push({
-        title: "Service Accounts",
-        component: ServiceAccounts,
-        url: routes.serviceAccountsURL(),
-        routePath: routes.serviceAccountsRoute.path.toString(),
-      });
-    }
-
-    if (isAllowedResource("clusterroles")) {
-      tabs.push({
-        title: "Cluster Roles",
-        component: ClusterRoles,
-        url: routes.clusterRolesURL(),
-        routePath: routes.clusterRolesRoute.path.toString(),
-      });
-    }
-
-    if (isAllowedResource("roles")) {
-      tabs.push({
-        title: "Roles",
-        component: Roles,
-        url: routes.rolesURL(),
-        routePath: routes.rolesRoute.path.toString(),
-      });
-    }
-
-    if (isAllowedResource("clusterrolebindings")) {
-      tabs.push({
-        title: "Cluster Role Bindings",
-        component: ClusterRoleBindings,
-        url: routes.clusterRoleBindingsURL(),
-        routePath: routes.clusterRoleBindingsRoute.path.toString(),
-      });
-    }
-
-    if (isAllowedResource("rolebindings")) {
-      tabs.push({
-        title: "Role Bindings",
-        component: RoleBindings,
-        url: routes.roleBindingsURL(),
-        routePath: routes.roleBindingsRoute.path.toString(),
-      });
-    }
-
-    if (isAllowedResource("podsecuritypolicies")) {
-      tabs.push({
-        title: "Pod Security Policies",
-        component: PodSecurityPolicies,
-        url: routes.podSecurityPoliciesURL(),
-        routePath: routes.podSecurityPoliciesRoute.path.toString(),
-      });
-    }
-
-    return tabs;
-  });
-}
-
-const userManagementRouteTabsInjectable = getInjectable({
-  id: "user-management-route-tabs",
-
-  instantiate: (di) => getRouteTabs({
-    isAllowedResource: di.inject(isAllowedResourceInjectable),
-  }),
-});
-
-export default userManagementRouteTabsInjectable;
@@ -1,31 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import "./user-management.scss";
-
-import React from "react";
-import { observer } from "mobx-react";
-import { TabLayout, TabLayoutRoute } from "../layout/tab-layout";
-import type { IComputedValue } from "mobx";
-import { withInjectables } from "@ogre-tools/injectable-react";
-import userManagementRouteTabsInjectable from "./route-tabs.injectable";
-
-interface Dependencies {
-  routes: IComputedValue<TabLayoutRoute[]>;
-}
-
-const NonInjectedUserManagementRoute = observer(({ routes }: Dependencies) => (
-  <TabLayout
-    className="UserManagement"
-    tabs={routes.get()}
-  />
-));
-
-export const UserManagementRoute = withInjectables<Dependencies>(NonInjectedUserManagementRoute, {
-  getProps: (di, props) => ({
-    routes: di.inject(userManagementRouteTabsInjectable),
-    ...props,
-  }),
-});
@@ -1,45 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { withInjectables } from "@ogre-tools/injectable-react";
-import type { IComputedValue } from "mobx";
-import { observer } from "mobx-react";
-import React from "react";
-import { usersManagementRoute, usersManagementURL } from "../../../common/routes";
-import { isActiveRoute } from "../../navigation";
-import { Icon } from "../icon";
-import { SidebarItem } from "../layout/sidebar-item";
-import type { TabLayoutRoute } from "../layout/tab-layout";
-import { renderTabRoutesSidebarItems } from "../layout/tab-routes-sidebar-items";
-import userManagementRouteTabsInjectable from "./route-tabs.injectable";
-
-export interface UserManagementSidebarItemProps {}
-
-interface Dependencies {
-  routes: IComputedValue<TabLayoutRoute[]>;
-}
-
-const NonInjectedUserManagementSidebarItem = observer(({ routes }: Dependencies & UserManagementSidebarItemProps) => {
-  const tabRoutes = routes.get();
-
-  return (
-    <SidebarItem
-      id="users"
-      text="Access Control"
-      isActive={isActiveRoute(usersManagementRoute)}
-      isHidden={tabRoutes.length === 0}
-      url={usersManagementURL()}
-      icon={<Icon material="security"/>}
-    >
-      {renderTabRoutesSidebarItems(tabRoutes)}
-    </SidebarItem>
-  );
-});
-
-export const UserManagementSidebarItem = withInjectables<Dependencies, UserManagementSidebarItemProps>(NonInjectedUserManagementSidebarItem, {
-  getProps: (di, props) => ({
-    routes: di.inject(userManagementRouteTabsInjectable),
-    ...props,
-  }),
-});
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { computed } from "mobx";
+import {
+  SidebarItemRegistration,
+  sidebarItemsInjectionToken,
+} from "../layout/sidebar-items.injectable";
+import { Icon } from "../icon";
+import React from "react";
+import { noop } from "lodash/fp";
+
+export const userManagementSidebarItemId = "user-management";
+
+const userManagementSidebarItemsInjectable = getInjectable({
+  id: "user-management-sidebar-items",
+
+  instantiate: () =>
+    computed((): SidebarItemRegistration[] => [
+      {
+        id: userManagementSidebarItemId,
+        parentId: null,
+        getIcon: () => <Icon material="security" />,
+        title: "Access Control",
+        onClick: noop,
+        orderNumber: 100,
+      },
+    ]),
+
+  injectionToken: sidebarItemsInjectionToken,
+});
+
+export default userManagementSidebarItemsInjectable;
@@ -1,7 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-.UserManagement {
-}