diff --git a/src/extensions/registries/modal-registry.ts b/src/extensions/registries/modal-registry.ts index fb9f99c634..7b31aa1152 100644 --- a/src/extensions/registries/modal-registry.ts +++ b/src/extensions/registries/modal-registry.ts @@ -10,6 +10,6 @@ import type { IComputedValue } from "mobx"; export interface ClusterModalRegistration { id: string; Component: React.ComponentType; - visible?: IComputedValue; + visible: IComputedValue; } diff --git a/src/features/cluster/__snapshots__/cluster-modal-items.test.tsx.snap b/src/features/cluster/__snapshots__/cluster-modal-items.test.tsx.snap index f4efc1e286..344ed10635 100644 --- a/src/features/cluster/__snapshots__/cluster-modal-items.test.tsx.snap +++ b/src/features/cluster/__snapshots__/cluster-modal-items.test.tsx.snap @@ -1,6 +1,518 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`cluster modal elements given custom cluster modal available renders 1`] = ` +exports[` elements originated from cluster modal registration given custom component for cluster view not available renders 1`] = ` +
+
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ + + + + + Workloads + + + + keyboard_arrow_down + + + +
+
+ + + + list + + + + Config + + +
+
+ + + + device_hub + + + + Network + + + + keyboard_arrow_down + + + +
+
+ + + + storage + + + + Storage + + +
+
+ + + + + + Helm + + + + keyboard_arrow_down + + + +
+
+ + + + security + + + + Access Control + + +
+
+ + + + extension + + + + Custom Resources + + + + keyboard_arrow_down + + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Overview +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+`; + +exports[` elements originated from cluster modal registration given custom components for cluster view available renders 1`] = `
`; - -exports[`cluster modal elements given custom cluster modal not available renders 1`] = ` -
-
-
-
-
-
-
-
- ?? -
-
-
-
-
- - - - - - Workloads - - - - keyboard_arrow_down - - - -
-
- - - - list - - - - Config - - -
-
- - - - device_hub - - - - Network - - - - keyboard_arrow_down - - - -
-
- - - - storage - - - - Storage - - -
-
- - - - - - Helm - - - - keyboard_arrow_down - - - -
-
- - - - security - - - - Access Control - - -
-
- - - - extension - - - - Custom Resources - - - - keyboard_arrow_down - - - -
-
-
-
-
-
-
-
- -
-
-
-
-
- Overview -
-
-
- - -
-
-
- All namespaces -
-
- -
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
- - - add - - -
- New tab -
-
- - - fullscreen - - -
- Fit to window -
- - - keyboard_arrow_up - - -
- Open -
-
-
-
-
-
-
-`; diff --git a/src/features/cluster/cluster-modal-items.test.tsx b/src/features/cluster/cluster-modal-items.test.tsx index c799f6f1d1..16cd80315b 100644 --- a/src/features/cluster/cluster-modal-items.test.tsx +++ b/src/features/cluster/cluster-modal-items.test.tsx @@ -2,30 +2,64 @@ * 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 { getInjectable, Injectable } from "@ogre-tools/injectable"; import type { RenderResult } from "@testing-library/react"; -import { computed, runInAction } from "mobx"; +import { computed, IComputedValue, IObservableValue, observable, runInAction } from "mobx"; import React from "react"; import type { ClusterModalRegistration } from "../../extensions/registries"; import { clusterModalsInjectionToken } from "../../renderer/cluster-modals/cluster-modals-injection-token"; import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder"; import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder"; -describe("cluster modal elements", () => { +describe(" elements originated from cluster modal registration", () => { let builder: ApplicationBuilder; let rendered: RenderResult; beforeEach(() => { builder = getApplicationBuilder(); - builder.setEnvironmentToClusterFrame(); }); - describe("given custom cluster modal available", () => { + describe("given custom components for cluster view available", () => { + let someObservable: IObservableValue; + let clusterModalInjectable: Injectable, any, any>; + let clusterDialogInjectable: Injectable, any, any>; + beforeEach(async () => { + someObservable = observable.box(false); + + clusterModalInjectable = getInjectable({ + id: "some-cluster-modal-injectable", + + instantiate: () => { + return computed((): ClusterModalRegistration[] => [{ + id: "test-modal-id", + Component: () =>
test modal
, + visible: computed(() => true), + }]); + }, + + injectionToken: clusterModalsInjectionToken, + }); + + clusterDialogInjectable = getInjectable({ + id: "dialog-with-observable-visibility-injectable", + + instantiate: () => { + return computed((): ClusterModalRegistration[] => [{ + id: "dialog-with-observable-visibility-id", + Component: () =>
dialog contents
, + visible: computed(() => someObservable.get()), + }]); + }, + + injectionToken: clusterModalsInjectionToken, + }); + builder.beforeWindowStart((windowDi) => { runInAction(() => { - windowDi.register(testClusterModalsInjectable); + windowDi.register(clusterModalInjectable); + windowDi.register(clusterDialogInjectable); }); }); @@ -35,9 +69,31 @@ describe("cluster modal elements", () => { it("renders", () => { expect(rendered.container).toMatchSnapshot(); }); + + it("renders provided component html", () => { + const modal = rendered.getByTestId("test-modal"); + + expect(modal).toBeInTheDocument(); + }); + + it("doesn't render component which should be invisible", () => { + const dialog = rendered.queryByTestId("dialog-with-observable-visibility"); + + expect(dialog).not.toBeInTheDocument(); + }); + + it("when injectable component becomes visible, shows it", () => { + runInAction(() => { + someObservable.set(true); + }); + + const dialog = rendered.getByTestId("dialog-with-observable-visibility"); + + expect(dialog).toBeInTheDocument(); + }); }); - describe("given custom cluster modal not available", () => { + describe("given custom component for cluster view not available", () => { beforeEach(async () => { rendered = await builder.render(); }); @@ -45,19 +101,11 @@ describe("cluster modal elements", () => { it("renders", () => { expect(rendered.container).toMatchSnapshot(); }); + + it("doesn't render any custom html", () => { + const modal = rendered.queryByTestId("test-modal"); + + expect(modal).not.toBeInTheDocument(); + }) }); }); - -const testClusterModalsInjectable = getInjectable({ - id: "some-cluster-modal-injectable", - - instantiate: () => { - return computed((): ClusterModalRegistration[] => [{ - id: "test-modal-id", - Component: () =>
test modal
, - visible: computed(() => true), - }]); - }, - - injectionToken: clusterModalsInjectionToken, -}); diff --git a/src/renderer/cluster-modals/cluster-modals.tsx b/src/renderer/cluster-modals/cluster-modals.tsx index 7279f1a71e..0fe97c227c 100644 --- a/src/renderer/cluster-modals/cluster-modals.tsx +++ b/src/renderer/cluster-modals/cluster-modals.tsx @@ -8,20 +8,21 @@ import { withInjectables } from "@ogre-tools/injectable-react"; import React from "react"; import type { ClusterModalRegistration } from "../../extensions/registries"; import clusterModalsInjectable from "./cluster-modals.injectable"; +import { observer } from "mobx-react"; interface Dependencies { clusterModals: ClusterModalRegistration[]; } -export const NonInjectedClusterModals = ({ clusterModals }: Dependencies) => { +export const NonInjectedClusterModals = observer(({ clusterModals }: Dependencies) => { return (
{clusterModals.map((modal) => { - return modal.visible ? : null; + return modal.visible.get() ? : null; })}
); -}; +}); export const ClusterModals = withInjectables(NonInjectedClusterModals, { getProps: (di, props) => ({