From 019414182fdfdfa44da9a1ba106f18acf9943257 Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Tue, 26 Jul 2022 09:14:29 -0400 Subject: [PATCH] Fix AddRoleDialog's create button being enabled before entering data Signed-off-by: Sebastian Malton --- src/common/k8s-api/kube-object.store.ts | 10 +- .../add-new-role-dialog.test.tsx.snap | 5696 +++++++++++++++++ .../roles/add-new-role-dialog.test.tsx | 187 + .../+namespaces/namespace-select.tsx | 18 +- .../namespaces-sidebar-items.injectable.tsx | 2 +- .../+namespaces/namespaces.injectable.ts | 18 + .../+user-management/+roles/add-dialog.tsx | 100 - .../+roles/add-dialog/open.injectable.ts | 25 + .../+roles/add-dialog/state.injectable.ts | 18 + .../{add-dialog.scss => add-dialog/view.scss} | 0 .../+roles/add-dialog/view.tsx | 111 + .../+user-management/+roles/index.ts | 7 - .../+roles/navigate-to.injectable.ts | 19 + .../+user-management/+roles/view.tsx | 107 +- .../add-remove-buttons/add-remove-buttons.tsx | 81 +- .../role-detail-item.injectable.ts | 2 +- src/renderer/components/wizard/wizard.tsx | 4 +- 17 files changed, 6186 insertions(+), 219 deletions(-) create mode 100644 src/features/cluster/kube-object-views/roles/__snapshots__/add-new-role-dialog.test.tsx.snap create mode 100644 src/features/cluster/kube-object-views/roles/add-new-role-dialog.test.tsx create mode 100644 src/renderer/components/+namespaces/namespaces.injectable.ts delete mode 100644 src/renderer/components/+user-management/+roles/add-dialog.tsx create mode 100644 src/renderer/components/+user-management/+roles/add-dialog/open.injectable.ts create mode 100644 src/renderer/components/+user-management/+roles/add-dialog/state.injectable.ts rename src/renderer/components/+user-management/+roles/{add-dialog.scss => add-dialog/view.scss} (100%) create mode 100644 src/renderer/components/+user-management/+roles/add-dialog/view.tsx delete mode 100644 src/renderer/components/+user-management/+roles/index.ts create mode 100644 src/renderer/components/+user-management/+roles/navigate-to.injectable.ts diff --git a/src/common/k8s-api/kube-object.store.ts b/src/common/k8s-api/kube-object.store.ts index 309c183e42..13eb3e5fd7 100644 --- a/src/common/k8s-api/kube-object.store.ts +++ b/src/common/k8s-api/kube-object.store.ts @@ -12,7 +12,7 @@ import type { KubeJsonApiDataFor, KubeObject } from "./kube-object"; import { KubeStatus } from "./kube-object"; import type { IKubeWatchEvent } from "./kube-watch-event"; import { ItemStore } from "../item.store"; -import type { KubeApiQueryParams, KubeApi, KubeApiWatchCallback } from "./kube-api"; +import type { KubeApiQueryParams, KubeApi, KubeApiWatchCallback, ResourceDescriptor } from "./kube-api"; import { parseKubeApi } from "./kube-api-parse"; import type { RequestInit } from "node-fetch"; import type { Patch } from "rfc6902"; @@ -327,12 +327,12 @@ export abstract class KubeObjectStore< if (error) this.reset(); } - protected async loadItem(params: { name: string; namespace?: string }): Promise { + protected async loadItem(params: ResourceDescriptor): Promise { return this.api.get(params); } @action - async load(params: { name: string; namespace?: string }): Promise { + async load(params: ResourceDescriptor): Promise { const { name, namespace } = params; let item: K | null | undefined = this.getByName(name, namespace); @@ -356,11 +356,11 @@ export abstract class KubeObjectStore< return this.load({ name, namespace }); } - protected async createItem(params: { name: string; namespace?: string }, data?: PartialDeep): Promise { + protected async createItem(params: ResourceDescriptor, data?: PartialDeep): Promise { return this.api.create(params, data); } - async create(params: { name: string; namespace?: string }, data?: PartialDeep): Promise { + async create(params: ResourceDescriptor, data?: PartialDeep): Promise { const newItem = await this.createItem(params, data); assert(newItem, "Failed to create item from kube"); diff --git a/src/features/cluster/kube-object-views/roles/__snapshots__/add-new-role-dialog.test.tsx.snap b/src/features/cluster/kube-object-views/roles/__snapshots__/add-new-role-dialog.test.tsx.snap new file mode 100644 index 0000000000..fadf2f3460 --- /dev/null +++ b/src/features/cluster/kube-object-views/roles/__snapshots__/add-new-role-dialog.test.tsx.snap @@ -0,0 +1,5696 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Roles view/add new role dialog renders 1`] = ` + +
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ +
+
+ + + + list + + + + Config + + +
+
+ +
+
+ + + + storage + + + + Storage + + +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Roles +
+
+ 0 items +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ Name +
+ + + arrow_drop_down + + +
+
+
+
+
+
+ Namespace +
+ + + arrow_drop_down + + +
+
+
+ Age +
+ + + arrow_drop_down + + +
+
+
+ + + more_vert + + +
+
+
+
+
+
+ +
+ Create new Role +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+ +`; + +exports[`Roles view/add new role dialog when add new role button is clicked renders 1`] = ` + +
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ +
+
+ + + + list + + + + Config + + +
+
+ +
+
+ + + + storage + + + + Storage + + +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Roles +
+
+ 0 items +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ Name +
+ + + arrow_drop_down + + +
+
+
+
+
+
+ Namespace +
+ + + arrow_drop_down + + +
+
+
+ Age +
+ + + arrow_drop_down + + +
+
+
+ + + more_vert + + +
+
+
+
+
+
+ +
+ Create new Role +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+
+
+
+
+
+ Create Role +
+
+
+
+
+ Role Name + +
+
+ +
+
+
+ Namespace + +
+
+ + +
+
+
+ Select... +
+
+ +
+
+
+ + +
+
+
+
+
+ + +
+ +
+
+
+ +`; + +exports[`Roles view/add new role dialog when add new role button is clicked with name inputed renders 1`] = ` + +
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ +
+
+ + + + list + + + + Config + + +
+
+ +
+
+ + + + storage + + + + Storage + + +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Roles +
+
+ 0 items +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ Name +
+ + + arrow_drop_down + + +
+
+
+
+
+
+ Namespace +
+ + + arrow_drop_down + + +
+
+
+ Age +
+ + + arrow_drop_down + + +
+
+
+ + + more_vert + + +
+
+
+
+
+
+ +
+ Create new Role +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+
+
+
+
+
+ Create Role +
+
+
+
+
+ Role Name + +
+
+ +
+
+
+ Namespace + +
+
+ + +
+
+
+ Select... +
+
+ +
+
+
+ + +
+
+
+
+
+ + +
+ +
+
+
+ +`; + +exports[`Roles view/add new role dialog when add new role button is clicked with name inputed with namespace selected renders 1`] = ` + +
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ +
+
+ + + + list + + + + Config + + +
+
+ +
+
+ + + + storage + + + + Storage + + +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Roles +
+
+ 0 items +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ Name +
+ + + arrow_drop_down + + +
+
+
+
+
+
+ Namespace +
+ + + arrow_drop_down + + +
+
+
+ Age +
+ + + arrow_drop_down + + +
+
+
+ + + more_vert + + +
+
+
+
+
+
+ +
+ Create new Role +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+
+
+
+
+
+ Create Role +
+
+
+
+
+ Role Name + +
+
+ +
+
+
+ Namespace + +
+
+ + +
+
+
+ default +
+
+ +
+
+
+ + +
+
+
+
+
+ + +
+ +
+
+
+ +`; + +exports[`Roles view/add new role dialog when add new role button is clicked with name inputed with namespace selected when create button is clicked renders 1`] = ` + +
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ +
+
+ + + + list + + + + Config + + +
+
+ +
+
+ + + + storage + + + + Storage + + +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Roles +
+
+ 0 items +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ Name +
+ + + arrow_drop_down + + +
+
+
+
+
+
+ Namespace +
+ + + arrow_drop_down + + +
+
+
+ Age +
+ + + arrow_drop_down + + +
+
+
+ + + more_vert + + +
+
+
+
+
+
+ +
+ Create new Role +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+
+
+
+
+
+ Create Role +
+
+
+
+
+ Role Name + +
+
+ +
+
+
+ Namespace + +
+
+ + +
+
+
+ default +
+
+ +
+
+
+ + +
+
+
+
+
+ + +
+ +
+
+
+ +`; + +exports[`Roles view/add new role dialog when add new role button is clicked with name inputed with namespace selected when create button is clicked when roleStore.create rejects renders 1`] = ` + +
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ +
+
+ + + + list + + + + Config + + +
+
+ +
+
+ + + + storage + + + + Storage + + +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Roles +
+
+ 0 items +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ Name +
+ + + arrow_drop_down + + +
+
+
+
+
+
+ Namespace +
+ + + arrow_drop_down + + +
+
+
+ Age +
+ + + arrow_drop_down + + +
+
+
+ + + more_vert + + +
+
+
+
+
+
+ +
+ Create new Role +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+
+
+
+
+
+ Create Role +
+
+
+
+
+ Role Name + +
+
+ +
+
+
+ Namespace + +
+
+ + +
+
+
+ default +
+
+ +
+
+
+ + +
+
+
+
+
+ + +
+ +
+
+
+ +`; + +exports[`Roles view/add new role dialog when add new role button is clicked with name inputed with namespace selected when create button is clicked when roleStore.create resolves renders 1`] = ` + +
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ +
+
+ + + + list + + + + Config + + +
+
+ +
+
+ + + + storage + + + + Storage + + +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Roles +
+
+ 0 items +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ Name +
+ + + arrow_drop_down + + +
+
+
+
+
+
+ Namespace +
+ + + arrow_drop_down + + +
+
+
+ Age +
+ + + arrow_drop_down + + +
+
+
+ + + more_vert + + +
+
+
+
+
+
+ +
+ Create new Role +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+
+
+
+ +`; diff --git a/src/features/cluster/kube-object-views/roles/add-new-role-dialog.test.tsx b/src/features/cluster/kube-object-views/roles/add-new-role-dialog.test.tsx new file mode 100644 index 0000000000..bdfb47cb4b --- /dev/null +++ b/src/features/cluster/kube-object-views/roles/add-new-role-dialog.test.tsx @@ -0,0 +1,187 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import type { AsyncFnMock } from "@async-fn/jest"; +import asyncFn from "@async-fn/jest"; +import type { RenderResult } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { computed } from "mobx"; +import type { PartialDeep } from "type-fest"; +import { Role } from "../../../../common/k8s-api/endpoints"; +import type { ResourceDescriptor } from "../../../../common/k8s-api/kube-api"; +import namespacesInjectable from "../../../../renderer/components/+namespaces/namespaces.injectable"; +import navigateToRolesViewInjectable from "../../../../renderer/components/+user-management/+roles/navigate-to.injectable"; +import roleStoreInjectable from "../../../../renderer/components/+user-management/+roles/store.injectable"; +import type { ShowDetails } from "../../../../renderer/components/kube-detail-params/show-details.injectable"; +import showDetailsInjectable from "../../../../renderer/components/kube-detail-params/show-details.injectable"; +import type { ShowNotification } from "../../../../renderer/components/notifications"; +import showErrorNotificationInjectable from "../../../../renderer/components/notifications/show-error-notification.injectable"; +import type { ApplicationBuilder } from "../../../../renderer/components/test-utils/get-application-builder"; +import { getApplicationBuilder } from "../../../../renderer/components/test-utils/get-application-builder"; + +describe("Roles view/add new role dialog", () => { + let applicationBuilder: ApplicationBuilder; + let renderResult: RenderResult; + let createRoleMock: AsyncFnMock<(params: ResourceDescriptor, data?: PartialDeep) => Promise>; + let showDetailsMock: jest.MockedFunction; + let showErrorNotificationMock: jest.MockedFunction; + + beforeEach(async () => { + applicationBuilder = getApplicationBuilder(); + applicationBuilder.setEnvironmentToClusterFrame(); + applicationBuilder.allowKubeResource("roles"); + + applicationBuilder.beforeWindowStart((windowDi) => { + windowDi.override(namespacesInjectable, () => computed(() => ( + ["default", "my-namespace", "my-namespace-2"] + ))); + + createRoleMock = asyncFn(); + showDetailsMock = jest.fn(); + showErrorNotificationMock = jest.fn(); + windowDi.inject(roleStoreInjectable).create = createRoleMock; + windowDi.override(showDetailsInjectable, () => showDetailsMock); + windowDi.override(showErrorNotificationInjectable, () => showErrorNotificationMock); + + windowDi.inject(navigateToRolesViewInjectable)(); + }); + + renderResult = await applicationBuilder.render(); + }); + + it("renders", () => { + expect(renderResult.baseElement).toMatchSnapshot(); + }); + + it("does not show the add role dialog yet", () => { + expect(renderResult.queryByTestId("add-role-dialog")).not.toBeInTheDocument(); + }); + + describe("when add new role button is clicked", () => { + beforeEach(() => { + renderResult.getByTestId("roles-view-add-button").click(); + }); + + it("renders", () => { + expect(renderResult.baseElement).toMatchSnapshot(); + }); + + it("shows the add role dialog", () => { + expect(renderResult.queryByTestId("add-role-dialog")).toBeInTheDocument(); + }); + + it("create role button is disabled", () => { + expect(renderResult.getByTestId("add-role-dialog-create-step")).toBeDisabled(); + }); + + describe("with name inputed", () => { + beforeEach(() => { + userEvent.type( + renderResult.getByTestId("add-role-dialog-name-input"), + "my-role-name", + ); + }); + + it("renders", () => { + expect(renderResult.baseElement).toMatchSnapshot(); + }); + + it("create role button is disabled", () => { + expect(renderResult.getByTestId("add-role-dialog-create-step")).toBeDisabled(); + }); + + describe("with namespace selected", () => { + beforeEach(() => { + applicationBuilder.select + .openMenu("add-dialog-namespace-select-input") + .selectOption("default"); + }); + + it("renders", () => { + expect(renderResult.baseElement).toMatchSnapshot(); + }); + + it("create role button is enabled", () => { + expect(renderResult.getByTestId("add-role-dialog-create-step")).toBeEnabled(); + }); + + describe("when create button is clicked", () => { + beforeEach(() => { + renderResult.getByTestId("add-role-dialog-create-step").click(); + }); + + it("renders", () => { + expect(renderResult.baseElement).toMatchSnapshot(); + }); + + it("calls roleStore.create", () => { + expect(createRoleMock).toBeCalledWith({ + name: "my-role-name", + namespace: "default", + }); + }); + + it("still shows the dialog", () => { + expect(renderResult.queryByTestId("add-role-dialog")).toBeInTheDocument(); + }); + + it("shows the create button as loading", () => { + expect(renderResult.getByTestId("add-role-dialog-create-step").getAttribute("data-waiting")).toBe("true"); + }); + + describe("when roleStore.create resolves", () => { + beforeEach(async () => { + await createRoleMock.resolve(new Role({ + apiVersion: "rbac.authorization.k8s.io/v1", + kind: "Role", + metadata: { + name: "my-role-name", + namespace: "default", + resourceVersion: "1", + selfLink: "/apis/rbac.authorization.k8s.io/v1/role/default/my-role-name", + uid: "123", + }, + })); + }); + + it("renders", () => { + expect(renderResult.baseElement).toMatchSnapshot(); + }); + + it("no longer shows the dialog", () => { + expect(renderResult.queryByTestId("add-role-dialog")).not.toBeInTheDocument(); + }); + + it("shows kube details", () => { + expect(showDetailsMock).toBeCalledWith("/apis/rbac.authorization.k8s.io/v1/role/default/my-role-name"); + }); + }); + + describe("when roleStore.create rejects", () => { + beforeEach(async () => { + await createRoleMock.reject("some-error"); + }); + + it("renders", () => { + expect(renderResult.baseElement).toMatchSnapshot(); + }); + + it("still shows the dialog", () => { + expect(renderResult.queryByTestId("add-role-dialog")).toBeInTheDocument(); + }); + + it("no longer shows the create button as loading", () => { + expect(renderResult.getByTestId("add-role-dialog-create-step").getAttribute("data-waiting")).toBe("false"); + }); + + it("shows an error notification", () => { + expect(showErrorNotificationMock).toBeCalledWith("some-error", undefined); + }); + }); + }); + }); + }); + }); +}); diff --git a/src/renderer/components/+namespaces/namespace-select.tsx b/src/renderer/components/+namespaces/namespace-select.tsx index 6c50f3f921..c1262e3381 100644 --- a/src/renderer/components/+namespaces/namespace-select.tsx +++ b/src/renderer/components/+namespaces/namespace-select.tsx @@ -6,15 +6,15 @@ import "./namespace-select.scss"; import React, { useEffect, useState } from "react"; +import type { IComputedValue } from "mobx"; import { computed } from "mobx"; import { observer } from "mobx-react"; import type { SelectProps } from "../select"; import { Select } from "../select"; import { cssNames } from "../../utils"; import { Icon } from "../icon"; -import type { NamespaceStore } from "./store"; import { withInjectables } from "@ogre-tools/injectable-react"; -import namespaceStoreInjectable from "./store.injectable"; +import namespacesInjectable from "./namespaces.injectable"; export type NamespaceSelectSort = (left: string, right: string) => number; @@ -25,12 +25,12 @@ export interface NamespaceSelectProps extends Omit; } -function getOptions(namespaceStore: NamespaceStore, sort: NamespaceSelectSort | undefined) { +function getOptions(namespaces: IComputedValue, sort: NamespaceSelectSort | undefined) { return computed(() => { - const baseOptions = namespaceStore.items.map(ns => ns.getName()); + const baseOptions = namespaces.get(); if (sort) { baseOptions.sort(sort); @@ -44,16 +44,16 @@ function getOptions(namespaceStore: NamespaceStore, sort: NamespaceSelectSort | } const NonInjectedNamespaceSelect = observer(({ - namespaceStore, + namespaces, showIcons, formatOptionLabel, sort, className, ...selectProps }: Dependencies & NamespaceSelectProps) => { - const [baseOptions, setBaseOptions] = useState(getOptions(namespaceStore, sort)); + const [baseOptions, setBaseOptions] = useState(getOptions(namespaces, sort)); - useEffect(() => setBaseOptions(getOptions(namespaceStore, sort)), [sort]); + useEffect(() => setBaseOptions(getOptions(namespaces, sort)), [sort]); return ( this.roleName = v} - /> - - this.namespace = option?.value ?? "default"} - /> - - - - ); - } -} diff --git a/src/renderer/components/+user-management/+roles/add-dialog/open.injectable.ts b/src/renderer/components/+user-management/+roles/add-dialog/open.injectable.ts new file mode 100644 index 0000000000..64669f4b89 --- /dev/null +++ b/src/renderer/components/+user-management/+roles/add-dialog/open.injectable.ts @@ -0,0 +1,25 @@ +/** + * 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 type { AddRoleDialogState } from "./state.injectable"; +import addRoleDialogStateInjectable from "./state.injectable"; + +export type OpenAddRoleDialog = () => void; + +const openAddRoleDialogInjectable = getInjectable({ + id: "open-add-role-dialog", + instantiate: (di): OpenAddRoleDialog => { + const state = di.inject(addRoleDialogStateInjectable); + + return () => state.set(getBlankAddRoleDialogState()); + }, +}); + +const getBlankAddRoleDialogState = (): AddRoleDialogState => ({ + name: "", + namespace: "", +}); + +export default openAddRoleDialogInjectable; diff --git a/src/renderer/components/+user-management/+roles/add-dialog/state.injectable.ts b/src/renderer/components/+user-management/+roles/add-dialog/state.injectable.ts new file mode 100644 index 0000000000..900bbd6c0e --- /dev/null +++ b/src/renderer/components/+user-management/+roles/add-dialog/state.injectable.ts @@ -0,0 +1,18 @@ +/** + * 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 { observable } from "mobx"; + +export interface AddRoleDialogState { + name: string; + namespace: string; +} + +const addRoleDialogStateInjectable = getInjectable({ + id: "add-role-dialog-state", + instantiate: () => observable.box(), +}); + +export default addRoleDialogStateInjectable; diff --git a/src/renderer/components/+user-management/+roles/add-dialog.scss b/src/renderer/components/+user-management/+roles/add-dialog/view.scss similarity index 100% rename from src/renderer/components/+user-management/+roles/add-dialog.scss rename to src/renderer/components/+user-management/+roles/add-dialog/view.scss diff --git a/src/renderer/components/+user-management/+roles/add-dialog/view.tsx b/src/renderer/components/+user-management/+roles/add-dialog/view.tsx new file mode 100644 index 0000000000..4143b1582d --- /dev/null +++ b/src/renderer/components/+user-management/+roles/add-dialog/view.tsx @@ -0,0 +1,111 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ + +import "./view.scss"; + +import React from "react"; +import type { IObservableValue } from "mobx"; +import { observer } from "mobx-react"; + +import { NamespaceSelect } from "../../../+namespaces/namespace-select"; +import type { DialogProps } from "../../../dialog"; +import { Dialog } from "../../../dialog"; +import { Input } from "../../../input"; +import { SubTitle } from "../../../layout/sub-title"; +import { Wizard, WizardStep } from "../../../wizard"; +import type { AddRoleDialogState } from "./state.injectable"; +import type { RoleStore } from "../store"; +import type { ShowDetails } from "../../../kube-detail-params/show-details.injectable"; +import type { ShowCheckedErrorNotification } from "../../../notifications/show-checked-error.injectable"; +import { withInjectables } from "@ogre-tools/injectable-react"; +import roleStoreInjectable from "../store.injectable"; +import showCheckedErrorNotificationInjectable from "../../../notifications/show-checked-error.injectable"; +import showDetailsInjectable from "../../../kube-detail-params/show-details.injectable"; +import addRoleDialogStateInjectable from "./state.injectable"; + +export interface AddRoleDialogProps extends Partial { +} + +interface Dependencies { + state: IObservableValue; + roleStore: RoleStore; + showDetails: ShowDetails; + showCheckedErrorNotification: ShowCheckedErrorNotification; +} + +const NonInjectedAddRoleDialog = observer(({ + state, + roleStore, + showDetails, + showCheckedErrorNotification, + ...dialogProps +}: Dependencies & AddRoleDialogProps) => { + const close = () => state.set(undefined); + const createRole = async (roleDescriptor: AddRoleDialogState) => { + try { + const role = await roleStore.create(roleDescriptor); + + close(); + showDetails(role.selfLink); + } catch (err) { + showCheckedErrorNotification(err, "Unknown error occured while creating role"); + } + }; + + const currentState = state.get(); + + return ( + + {currentState && ( + Create Role} + done={close} + > + createRole(currentState)} + testIdForNext="add-role-dialog-create-step" + > + + currentState.name = v} + data-testid="add-role-dialog-name-input" + /> + + currentState.namespace = option?.value ?? ""} + /> + + + )} + + ); +}); + +export const AddRoleDialog = withInjectables(NonInjectedAddRoleDialog, { + getProps: (di, props) => ({ + ...props, + roleStore: di.inject(roleStoreInjectable), + showCheckedErrorNotification: di.inject(showCheckedErrorNotificationInjectable), + showDetails: di.inject(showDetailsInjectable), + state: di.inject(addRoleDialogStateInjectable), + }), +}); diff --git a/src/renderer/components/+user-management/+roles/index.ts b/src/renderer/components/+user-management/+roles/index.ts deleted file mode 100644 index 2b770fa1cd..0000000000 --- a/src/renderer/components/+user-management/+roles/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -/** - * Copyright (c) OpenLens Authors. All rights reserved. - * Licensed under MIT License. See LICENSE in root directory for more information. - */ -export * from "./view"; -export * from "./details"; -export * from "./add-dialog"; diff --git a/src/renderer/components/+user-management/+roles/navigate-to.injectable.ts b/src/renderer/components/+user-management/+roles/navigate-to.injectable.ts new file mode 100644 index 0000000000..256a27e355 --- /dev/null +++ b/src/renderer/components/+user-management/+roles/navigate-to.injectable.ts @@ -0,0 +1,19 @@ +/** + * 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 { navigateToRouteInjectionToken } from "../../../../common/front-end-routing/navigate-to-route-injection-token"; +import rolesRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/roles/roles-route.injectable"; + +const navigateToRolesViewInjectable = getInjectable({ + id: "navigate-to-roles-view", + instantiate: (di) => { + const navigateToRoute = di.inject(navigateToRouteInjectionToken); + const route = di.inject(rolesRouteInjectable); + + return () => navigateToRoute(route); + }, +}); + +export default navigateToRolesViewInjectable; diff --git a/src/renderer/components/+user-management/+roles/view.tsx b/src/renderer/components/+user-management/+roles/view.tsx index 35b9bdc0d8..4828c3d389 100644 --- a/src/renderer/components/+user-management/+roles/view.tsx +++ b/src/renderer/components/+user-management/+roles/view.tsx @@ -9,7 +9,6 @@ import { observer } from "mobx-react"; import React from "react"; import { KubeObjectListLayout } from "../../kube-object-list-layout"; import { KubeObjectStatusIcon } from "../../kube-object-status-icon"; -import { AddRoleDialog } from "./add-dialog"; import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout"; import { KubeObjectAge } from "../../kube-object/age"; import type { RoleStore } from "./store"; @@ -18,6 +17,9 @@ import type { FilterByNamespace } from "../../+namespaces/namespace-select-filte import { withInjectables } from "@ogre-tools/injectable-react"; import filterByNamespaceInjectable from "../../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable"; import roleStoreInjectable from "./store.injectable"; +import type { OpenAddRoleDialog } from "./add-dialog/open.injectable"; +import openAddRoleDialogInjectable from "./add-dialog/open.injectable"; +import { AddRoleDialog } from "./add-dialog/view"; enum columnId { name = "name", @@ -28,65 +30,62 @@ enum columnId { interface Dependencies { roleStore: RoleStore; filterByNamespace: FilterByNamespace; + openAddRoleDialog: OpenAddRoleDialog; } -@observer -class NonInjectedRoles extends React.Component { - render() { - const { - filterByNamespace, - roleStore, - } = this.props; - - return ( - - role.getName(), - [columnId.namespace]: role => role.getNs(), - [columnId.age]: role => -role.getCreationTimestamp(), - }} - searchFilters={[ - role => role.getSearchFields(), - ]} - renderHeaderTitle="Roles" - renderTableHeader={[ - { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, - { className: "warning", showWithColumn: columnId.name }, - { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }, - { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, - ]} - renderTableContents={role => [ - role.getName(), - , - filterByNamespace(role.getNs()))} - > - {role.getNs()} - , - , - ]} - addRemoveButtons={{ - onAdd: () => AddRoleDialog.open(), - addTooltip: "Create new Role", - }} - /> - - - ); - } -} +const NonInjectedRoles = observer(({ + roleStore, + openAddRoleDialog, + filterByNamespace, +}: Dependencies) => ( + + role.getName(), + [columnId.namespace]: role => role.getNs(), + [columnId.age]: role => -role.getCreationTimestamp(), + }} + searchFilters={[ + role => role.getSearchFields(), + ]} + renderHeaderTitle="Roles" + renderTableHeader={[ + { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name }, + { className: "warning", showWithColumn: columnId.name }, + { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace }, + { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age }, + ]} + renderTableContents={role => [ + role.getName(), + , + filterByNamespace(role.getNs()))} + > + {role.getNs()} + , + , + ]} + addRemoveButtons={{ + onAdd: openAddRoleDialog, + addTooltip: "Create new Role", + "data-testid": "roles-view", + }} + /> + + +)); export const Roles = withInjectables(NonInjectedRoles, { getProps: (di, props) => ({ ...props, - filterByNamespace: di.inject(filterByNamespaceInjectable), + openAddRoleDialog: di.inject(openAddRoleDialogInjectable), roleStore: di.inject(roleStoreInjectable), + filterByNamespace: di.inject(filterByNamespaceInjectable), }), }); diff --git a/src/renderer/components/add-remove-buttons/add-remove-buttons.tsx b/src/renderer/components/add-remove-buttons/add-remove-buttons.tsx index e38e0ffe67..b8355533a9 100644 --- a/src/renderer/components/add-remove-buttons/add-remove-buttons.tsx +++ b/src/renderer/components/add-remove-buttons/add-remove-buttons.tsx @@ -10,50 +10,49 @@ import { cssNames } from "../../utils"; import { Button } from "../button"; import { Icon } from "../icon"; -export interface AddRemoveButtonsProps extends React.HTMLAttributes { +export interface AddRemoveButtonsProps { onAdd?: () => void; onRemove?: () => void; addTooltip?: React.ReactNode; removeTooltip?: React.ReactNode; + className?: string; + "data-testid"?: string; } -export class AddRemoveButtons extends React.PureComponent { - renderButtons() { - const { onRemove, onAdd, addTooltip, removeTooltip } = this.props; - - return [ - { - onClick: onRemove, - className: "remove-button", - icon: "remove", - tooltip: removeTooltip, - }, - { - onClick: onAdd, - className: "add-button", - icon: "add", - tooltip: addTooltip, - }, - ] - .filter(button => button.onClick) - .map(({ icon, ...props }) => ( - - )); - } - - render() { - return ( -
- {this.renderButtons()} -
- ); - } -} +export const AddRemoveButtons = ({ + onRemove, + onAdd, + addTooltip, + removeTooltip, + className, + "data-testid": dataTestid, +}: AddRemoveButtonsProps) => ( +
+ {onRemove && ( + + )} + {onAdd && ( + + )} +
+); diff --git a/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/role-detail-item.injectable.ts b/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/role-detail-item.injectable.ts index c6acc8aa9f..9352349c67 100644 --- a/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/role-detail-item.injectable.ts +++ b/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/role-detail-item.injectable.ts @@ -5,7 +5,7 @@ import { getInjectable } from "@ogre-tools/injectable"; import { kubeObjectDetailItemInjectionToken } from "../kube-object-detail-item-injection-token"; import { computed } from "mobx"; -import { RoleDetails } from "../../../+user-management/+roles"; +import { RoleDetails } from "../../../+user-management/+roles/details"; import { kubeObjectMatchesToKindAndApiVersion } from "../kube-object-matches-to-kind-and-api-version"; import currentKubeObjectInDetailsInjectable from "../../current-kube-object-in-details.injectable"; diff --git a/src/renderer/components/wizard/wizard.tsx b/src/renderer/components/wizard/wizard.tsx index 5a1e5af789..1c81149ed9 100755 --- a/src/renderer/components/wizard/wizard.tsx +++ b/src/renderer/components/wizard/wizard.tsx @@ -190,7 +190,9 @@ export class WizardStep extends React.Component, WizardSte if (this.form.noValidate || this.form.checkValidity()) { this.next(); } - }, 100); + }, 100, { + leading: true, + }); renderLoading() { return (