hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Add ability to hide KubeObjectMenu Edit and Remove buttons in extensions (#5107)

Browse Source
This commit is contained in:
Sebastian Malton 2022-05-04 09:44:31 -07:00 committed by GitHub
parent e532b90b72
commit dbdde19222
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
51 changed files with 1245 additions and 765 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/common/catalog/catalog-entity.ts
View File

@ -278,11 +278,22 @@ export interface CatalogEntitySettingsMenu {
};
}
export interface CatalogEntityContextMenuNavigate {
/**
* @param pathname The location to navigate to in the main iframe
*/
(pathname: string, forceMainFrame?: boolean): void;
/**
* @param pathname The location to navigate to in the current iframe. Useful for when called within the cluster frame
*/
(pathname: string, forceMainFrame: false): void;
}
export interface CatalogEntityContextMenuContext {
/**
* Navigate to the specified pathname
*/
navigate: (pathname: string) => void;
navigate: CatalogEntityContextMenuNavigate;
menuItems: CatalogEntityContextMenu[];
}

1
src/common/utils/index.ts
View File

@ -32,6 +32,7 @@ export * from "./objects";
export * from "./openBrowser";
export * from "./paths";
export * from "./promise-exec";
export * from "./readonly";
export * from "./reject-promise";
export * from "./singleton";
export * from "./sort-compare";

10
src/common/utils/readonly.ts Normal file
View File

@ -0,0 +1,10 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { ReadonlyDeep } from "type-fest";
export function readonly<T>(src: T): ReadonlyDeep<T> {
return src as ReadonlyDeep<T>;
}

3
src/extensions/common-api/registrations.ts
View File

@ -3,7 +3,7 @@
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
export type { StatusBarRegistration } from "../../renderer/components/status-bar/status-bar-registration";
export type { KubeObjectMenuRegistration, KubeObjectMenuComponents } from "../../renderer/components/kube-object-menu/dependencies/kube-object-menu-items/kube-object-menu-registration";
export type { KubeObjectMenuRegistration, KubeObjectMenuComponents } from "../../renderer/components/kube-object-menu/kube-object-menu-registration";
export type { AppPreferenceRegistration, AppPreferenceComponents } from "../../renderer/components/+preferences/app-preferences/app-preference-registration";
export type { KubeObjectDetailRegistration, KubeObjectDetailComponents } from "../registries/kube-object-detail-registry";
export type { KubeObjectStatusRegistration } from "../../renderer/components/kube-object-status-icon/kube-object-status-registration";
@ -12,3 +12,4 @@ export type { ClusterPageMenuRegistration, ClusterPageMenuComponents } from "../
export type { ProtocolHandlerRegistration, RouteParams as ProtocolRouteParams, RouteHandler as ProtocolRouteHandler } from "../registries/protocol-handler";
export type { CustomCategoryViewProps, CustomCategoryViewComponents, CustomCategoryViewRegistration } from "../../renderer/components/+catalog/custom-views";
export type { ShellEnvModifier, ShellEnvContext } from "../../main/shell-session/shell-env-modifier/shell-env-modifier-registration";
export type { KubeObjectContextMenuItem, KubeObjectOnContextMenuOpenContext, KubeObjectOnContextMenuOpen, KubeObjectHandlers, KubeObjectHandlerRegistration } from "../../renderer/kube-object/handler";

4
src/extensions/lens-renderer-extension.ts
View File

@ -20,7 +20,7 @@ import type { AppPreferenceRegistration } from "../renderer/components/+preferen
import type { AdditionalCategoryColumnRegistration } from "../renderer/components/+catalog/custom-category-columns";
import type { CustomCategoryViewRegistration } from "../renderer/components/+catalog/custom-views";
import type { StatusBarRegistration } from "../renderer/components/status-bar/status-bar-registration";
import type { KubeObjectMenuRegistration } from "../renderer/components/kube-object-menu/dependencies/kube-object-menu-items/kube-object-menu-registration";
import type { KubeObjectMenuRegistration } from "../renderer/components/kube-object-menu/kube-object-menu-registration";
import type { WorkloadsOverviewDetailRegistration } from "../renderer/components/+workloads-overview/workloads-overview-detail-registration";
import type { KubeObjectStatusRegistration } from "../renderer/components/kube-object-status-icon/kube-object-status-registration";
import { Environments, getEnvironmentSpecificLegacyGlobalDiForExtensionApi } from "./as-legacy-globals-for-extension-api/legacy-global-di-for-extension-api";
@ -30,6 +30,7 @@ import extensionPageParametersInjectable from "../renderer/routes/extension-page
import { pipeline } from "@ogre-tools/fp";
import { getExtensionRoutePath } from "../renderer/routes/get-extension-route-path";
import { navigateToRouteInjectionToken } from "../common/front-end-routing/navigate-to-route-injection-token";
import type { KubeObjectHandlerRegistration } from "../renderer/kube-object/handler";
export class LensRendererExtension extends LensExtension {
globalPages: registries.PageRegistration[] = [];
@ -49,6 +50,7 @@ export class LensRendererExtension extends LensExtension {
topBarItems: TopBarRegistration[] = [];
additionalCategoryColumns: AdditionalCategoryColumnRegistration[] = [];
customCategoryViews: CustomCategoryViewRegistration[] = [];
kubeObjectHandlers: KubeObjectHandlerRegistration[] = [];
async navigate<P extends object>(pageId?: string, params?: P) {
const di = getEnvironmentSpecificLegacyGlobalDiForExtensionApi(

15
src/extensions/renderer-api/components.ts
View File

@ -15,6 +15,10 @@ import sendCommandInjectable from "../../renderer/components/dock/terminal/send-
import { podsStore } from "../../renderer/components/+workloads-pods/pods.store";
import renameTabInjectable from "../../renderer/components/dock/dock/rename-tab.injectable";
import { asLegacyGlobalObjectForExtensionApiWithModifications } from "../as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api-with-modifications";
import { ConfirmDialog as _ConfirmDialog } from "../../renderer/components/confirm-dialog";
import type { ConfirmDialogBooleanParams, ConfirmDialogParams, ConfirmDialogProps } from "../../renderer/components/confirm-dialog";
import openConfirmDialogInjectable from "../../renderer/components/confirm-dialog/open.injectable";
import confirmInjectable from "../../renderer/components/confirm-dialog/confirm.injectable";
// layouts
export * from "../../renderer/components/layout/main-layout";
@ -43,6 +47,16 @@ export type {
} from "../../renderer/components/+catalog/custom-category-columns";
// other components
export type {
ConfirmDialogBooleanParams,
ConfirmDialogParams,
ConfirmDialogProps,
};
export const ConfirmDialog = Object.assign(_ConfirmDialog, {
open: asLegacyGlobalFunctionForExtensionApi(openConfirmDialogInjectable),
confirm: asLegacyGlobalFunctionForExtensionApi(confirmInjectable),
});
export * from "../../renderer/components/icon";
export * from "../../renderer/components/tooltip";
export * from "../../renderer/components/tabs";
@ -50,7 +64,6 @@ export * from "../../renderer/components/table";
export * from "../../renderer/components/badge";
export * from "../../renderer/components/drawer";
export * from "../../renderer/components/dialog";
export * from "../../renderer/components/confirm-dialog";
export * from "../../renderer/components/line-progress";
export * from "../../renderer/components/menu";
export * from "../../renderer/components/notifications";

43
src/renderer/catalog/normalize-menu-item.injectable.ts Normal file
View File

@ -0,0 +1,43 @@
/**
* 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 { CatalogEntityContextMenu } from "../api/catalog-entity";
import withConfirmationInjectable from "../components/confirm-dialog/with-confirm.injectable";
export interface NormalizedCatalogEntityContextMenu {
title: string;
icon?: string;
onClick: () => void;
}
export type NormalizeCatalogEntityContextMenu = (menuItem: CatalogEntityContextMenu) => NormalizedCatalogEntityContextMenu;
const normalizeCatalogEntityContextMenuInjectable = getInjectable({
id: "normalize-catalog-entity-context-menu",
instantiate: (di): NormalizeCatalogEntityContextMenu => {
const withConfirmation = di.inject(withConfirmationInjectable);
return (menuItem) => {
if (menuItem.confirm) {
return {
title: menuItem.title,
icon: menuItem.icon,
onClick: withConfirmation({
message: menuItem.confirm.message,
ok: menuItem.onClick,
okButtonProps: {
primary: false,
accent: true,
},
}),
};
}
return menuItem;
};
},
});
export default normalizeCatalogEntityContextMenuInjectable;

68
src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx
View File

@ -7,24 +7,32 @@ import React from "react";
import { cssNames } from "../../utils";
import type { MenuActionsProps } from "../menu/menu-actions";
import { MenuActions } from "../menu/menu-actions";
import type { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../api/catalog-entity";
import type { CatalogEntity, CatalogEntityContextMenuContext } from "../../api/catalog-entity";
import { observer } from "mobx-react";
import { makeObservable, observable } from "mobx";
import { navigate } from "../../navigation";
import { MenuItem } from "../menu";
import { ConfirmDialog } from "../confirm-dialog";
import { Icon } from "../icon";
import { HotbarToggleMenuItem } from "./hotbar-toggle-menu-item";
import { withInjectables } from "@ogre-tools/injectable-react";
import type { Navigate } from "../../navigation/navigate.injectable";
import navigateInjectable from "../../navigation/navigate.injectable";
import type { NormalizeCatalogEntityContextMenu } from "../../catalog/normalize-menu-item.injectable";
import normalizeCatalogEntityContextMenuInjectable from "../../catalog/normalize-menu-item.injectable";
export interface CatalogEntityDrawerMenuProps<T extends CatalogEntity> extends MenuActionsProps {
entity: T;
}
interface Dependencies {
normalizeMenuItem: NormalizeCatalogEntityContextMenu;
navigate: Navigate;
}
@observer
export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Component<CatalogEntityDrawerMenuProps<T>> {
class NonInjectedCatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Component<CatalogEntityDrawerMenuProps<T> & Dependencies> {
@observable private contextMenu: CatalogEntityContextMenuContext;
constructor(props: CatalogEntityDrawerMenuProps<T>) {
constructor(props: CatalogEntityDrawerMenuProps<T> & Dependencies) {
super(props);
makeObservable(this);
}
@ -32,52 +40,28 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
componentDidMount() {
this.contextMenu = {
menuItems: [],
navigate: (url: string) => navigate(url),
navigate: this.props.navigate,
};
this.props.entity?.onContextMenuOpen(this.contextMenu);
}
onMenuItemClick(menuItem: CatalogEntityContextMenu) {
if (menuItem.confirm) {
ConfirmDialog.open({
okButtonProps: {
primary: false,
accent: true,
},
ok: () => {
menuItem.onClick();
},
message: menuItem.confirm.message,
});
} else {
menuItem.onClick();
}
}
getMenuItems(entity: T): React.ReactChild[] {
if (!entity) {
return [];
}
const items: React.ReactChild[] = [];
for (const menuItem of this.contextMenu.menuItems) {
if (!menuItem.icon) {
continue;
}
const key = Icon.isSvg(menuItem.icon) ? "svg" : "material";
items.push(
<MenuItem key={menuItem.title} onClick={() => this.onMenuItemClick(menuItem)}>
const items = this.contextMenu.menuItems
.filter(menuItem => menuItem.icon)
.map(this.props.normalizeMenuItem)
.map(menuItem => (
<MenuItem key={menuItem.title} onClick={menuItem.onClick}>
<Icon
interactive
tooltip={menuItem.title}
{...{ [key]: menuItem.icon }}
{...{ [Icon.isSvg(menuItem.icon) ? "svg" : "material"]: menuItem.icon }}
/>
</MenuItem>,
);
}
</MenuItem>
));
items.push(
<HotbarToggleMenuItem
@ -109,3 +93,11 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
);
}
}
export const CatalogEntityDrawerMenu = withInjectables<Dependencies, CatalogEntityDrawerMenuProps<CatalogEntity>>(NonInjectedCatalogEntityDrawerMenu, {
getProps: (di, props) => ({
...props,
normalizeMenuItem: di.inject(normalizeCatalogEntityContextMenuInjectable),
navigate: di.inject(navigateInjectable),
}),
}) as <Entity extends CatalogEntity>(props: CatalogEntityDrawerMenuProps<Entity>) => React.ReactElement;

52
src/renderer/components/+catalog/catalog.tsx
View File

@ -11,10 +11,9 @@ import { ItemListLayout } from "../item-object-list";
import type { IComputedValue } from "mobx";
import { action, computed, makeObservable, observable, reaction, runInAction, when } from "mobx";
import type { CatalogEntityStore } from "./catalog-entity-store/catalog-entity.store";
import { navigate } from "../../navigation";
import { MenuItem, MenuActions } from "../menu";
import type { CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../api/catalog-entity";
import { ConfirmDialog } from "../confirm-dialog";
import type { CatalogEntityContextMenuContext } from "../../api/catalog-entity";
import type { HotbarStore } from "../../../common/hotbar-store";
import type { CatalogEntity } from "../../../common/catalog";
import { catalogCategoryRegistry } from "../../../common/catalog";
import { CatalogAddButton } from "./catalog-add-button";
@ -42,7 +41,10 @@ import { browseCatalogTab } from "./catalog-browse-tab";
import type { AppEvent } from "../../../common/app-event-bus/event-bus";
import appEventBusInjectable from "../../../common/app-event-bus/app-event-bus.injectable";
import hotbarStoreInjectable from "../../../common/hotbar-store.injectable";
import type { HotbarStore } from "../../../common/hotbar-store";
import type { Navigate } from "../../navigation/navigate.injectable";
import navigateInjectable from "../../navigation/navigate.injectable";
import type { NormalizeCatalogEntityContextMenu } from "../../catalog/normalize-menu-item.injectable";
import normalizeCatalogEntityContextMenuInjectable from "../../catalog/normalize-menu-item.injectable";
interface Dependencies {
catalogPreviousActiveTabStorage: { set: (value: string ) => void; get: () => string };
@ -50,14 +52,14 @@ interface Dependencies {
getCategoryColumns: (params: GetCategoryColumnsParams) => CategoryColumns;
customCategoryViews: IComputedValue<Map<string, Map<string, RegisteredCustomCategoryViewDecl>>>;
emitEvent: (event: AppEvent) => void;
routeParameters: {
group: IComputedValue<string>;
kind: IComputedValue<string>;
};
navigateToCatalog: NavigateToCatalog;
hotbarStore: HotbarStore;
navigate: Navigate;
normalizeMenuItem: NormalizeCatalogEntityContextMenu;
}
@observer
@ -93,7 +95,7 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
async componentDidMount() {
this.contextMenu = {
menuItems: observable.array([]),
navigate: (url: string) => navigate(url),
navigate: this.props.navigate,
};
disposeOnUnmount(this, [
this.props.catalogEntityStore.watch(),
@ -149,23 +151,6 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
}
};
onMenuItemClick(menuItem: CatalogEntityContextMenu) {
if (menuItem.confirm) {
ConfirmDialog.open({
okButtonProps: {
primary: false,
accent: true,
},
ok: () => {
menuItem.onClick();
},
message: menuItem.confirm.message,
});
} else {
menuItem.onClick();
}
}
get categories() {
return catalogCategoryRegistry.items;
}
@ -209,11 +194,13 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
View Details
</MenuItem>
{
this.contextMenu.menuItems.map((menuItem, index) => (
<MenuItem key={index} onClick={() => this.onMenuItemClick(menuItem)}>
{menuItem.title}
</MenuItem>
))
this.contextMenu.menuItems
.map(this.props.normalizeMenuItem)
.map((menuItem, index) => (
<MenuItem key={index} onClick={menuItem.onClick}>
{menuItem.title}
</MenuItem>
))
}
<HotbarToggleMenuItem
key="hotbar-toggle"
@ -342,8 +329,9 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
}
}
export const Catalog = withInjectables<Dependencies>( NonInjectedCatalog, {
getProps: (di) => ({
export const Catalog = withInjectables<Dependencies>(NonInjectedCatalog, {
getProps: (di, props) => ({
...props,
catalogEntityStore: di.inject(catalogEntityStoreInjectable),
catalogPreviousActiveTabStorage: di.inject(catalogPreviousActiveTabStorageInjectable),
getCategoryColumns: di.inject(getCategoryColumnsInjectable),
@ -352,5 +340,7 @@ export const Catalog = withInjectables<Dependencies>( NonInjectedCatalog, {
navigateToCatalog: di.inject(navigateToCatalogInjectable),
emitEvent: di.inject(appEventBusInjectable).emit,
hotbarStore: di.inject(hotbarStoreInjectable),
navigate: di.inject(navigateInjectable),
normalizeMenuItem: di.inject(normalizeCatalogEntityContextMenuInjectable),
}),
});

138
src/renderer/components/+extensions/attempt-install-by-info.injectable.tsx Normal file
View File

@ -0,0 +1,138 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { ExtendableDisposer } from "../../../common/utils";
import { downloadFile, downloadJson } from "../../../common/utils";
import { Notifications } from "../notifications";
import React from "react";
import path from "path";
import { SemVer } from "semver";
import URLParse from "url-parse";
import type { InstallRequest } from "./attempt-install/install-request";
import { reduce } from "lodash";
import type { ExtensionInstallationStateStore } from "../../../extensions/extension-installation-state-store/extension-installation-state-store";
import type { Confirm } from "../confirm-dialog/confirm.injectable";
import { getInjectable } from "@ogre-tools/injectable";
import attemptInstallInjectable from "./attempt-install/attempt-install.injectable";
import getBaseRegistryUrlInjectable from "./get-base-registry-url/get-base-registry-url.injectable";
import extensionInstallationStateStoreInjectable from "../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
import confirmInjectable from "../confirm-dialog/confirm.injectable";
export interface ExtensionInfo {
name: string;
version?: string;
requireConfirmation?: boolean;
}
export type AttemptInstallByInfo = (info: ExtensionInfo) => Promise<void>;
interface Dependencies {
attemptInstall: (request: InstallRequest, d: ExtendableDisposer) => Promise<void>;
getBaseRegistryUrl: () => Promise<string>;
extensionInstallationStateStore: ExtensionInstallationStateStore;
confirm: Confirm;
}
const attemptInstallByInfo = ({
attemptInstall,
getBaseRegistryUrl,
extensionInstallationStateStore,
confirm,
}: Dependencies): AttemptInstallByInfo => (
async (info) => {
const { name, version, requireConfirmation = false } = info;
const disposer = extensionInstallationStateStore.startPreInstall();
const baseUrl = await getBaseRegistryUrl();
const registryUrl = new URLParse(baseUrl).set("pathname", name).toString();
let json: any;
let finalVersion = version;
try {
json = await downloadJson({ url: registryUrl }).promise;
if (!json || json.error || typeof json.versions !== "object" || !json.versions) {
const message = json?.error ? `: ${json.error}` : "";
Notifications.error(`Failed to get registry information for that extension${message}`);
return disposer();
}
} catch (error) {
if (error instanceof SyntaxError) {
// assume invalid JSON
console.warn("Set registry has invalid json", { url: baseUrl }, error);
Notifications.error("Failed to get valid registry information for that extension. Registry did not return valid JSON");
} else {
console.error("Failed to download registry information", error);
Notifications.error(`Failed to get valid registry information for that extension. ${error}`);
}
return disposer();
}
if (version) {
if (!json.versions[version]) {
if (json["dist-tags"][version]) {
finalVersion = json["dist-tags"][version];
} else {
Notifications.error((
<p>
The <em>{name}</em> extension does not have a version or tag <code>{version}</code>.
</p>
));
return disposer();
}
}
} else {
const versions = Object.keys(json.versions)
.map(version => new SemVer(version, { loose: true, includePrerelease: true }))
// ignore pre-releases for auto picking the version
.filter(version => version.prerelease.length === 0);
finalVersion = reduce(
versions,
(prev, curr) => prev.compareMain(curr) === -1 ? curr : prev,
).format();
}
if (requireConfirmation) {
const proceed = await confirm({
message: (
<p>
Are you sure you want to install{" "}
<b>
{name}@{finalVersion}
</b>
?
</p>
),
labelCancel: "Cancel",
labelOk: "Install",
});
if (!proceed) {
return disposer();
}
}
const url = json.versions[finalVersion].dist.tarball;
const fileName = path.basename(url);
const { promise: dataP } = downloadFile({ url, timeout: 10 * 60 * 1000 });
return attemptInstall({ fileName, dataP }, disposer);
}
);
const attemptInstallByInfoInjectable = getInjectable({
id: "attempt-install-by-info",
instantiate: (di) => attemptInstallByInfo({
attemptInstall: di.inject(attemptInstallInjectable),
getBaseRegistryUrl: di.inject(getBaseRegistryUrlInjectable),
extensionInstallationStateStore: di.inject(extensionInstallationStateStoreInjectable),
confirm: di.inject(confirmInjectable),
}),
});
export default attemptInstallByInfoInjectable;

23
src/renderer/components/+extensions/attempt-install-by-info/attempt-install-by-info.injectable.ts
View File

@ -1,23 +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 { attemptInstallByInfo } from "./attempt-install-by-info";
import attemptInstallInjectable from "../attempt-install/attempt-install.injectable";
import getBaseRegistryUrlInjectable from "../get-base-registry-url/get-base-registry-url.injectable";
import extensionInstallationStateStoreInjectable
from "../../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";
const attemptInstallByInfoInjectable = getInjectable({
id: "attempt-install-by-info",
instantiate: (di) =>
attemptInstallByInfo({
attemptInstall: di.inject(attemptInstallInjectable),
getBaseRegistryUrl: di.inject(getBaseRegistryUrlInjectable),
extensionInstallationStateStore: di.inject(extensionInstallationStateStoreInjectable),
}),
});
export default attemptInstallByInfoInjectable;

116
src/renderer/components/+extensions/attempt-install-by-info/attempt-install-by-info.tsx
View File

@ -1,116 +0,0 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { ExtendableDisposer } from "../../../../common/utils";
import { downloadFile, downloadJson } from "../../../../common/utils";
import { Notifications } from "../../notifications";
import { ConfirmDialog } from "../../confirm-dialog";
import React from "react";
import path from "path";
import { SemVer } from "semver";
import URLParse from "url-parse";
import type { InstallRequest } from "../attempt-install/install-request";
import lodash from "lodash";
import type { ExtensionInstallationStateStore } from "../../../../extensions/extension-installation-state-store/extension-installation-state-store";
export interface ExtensionInfo {
name: string;
version?: string;
requireConfirmation?: boolean;
}
interface Dependencies {
attemptInstall: (request: InstallRequest, d: ExtendableDisposer) => Promise<void>;
getBaseRegistryUrl: () => Promise<string>;
extensionInstallationStateStore: ExtensionInstallationStateStore;
}
export const attemptInstallByInfo = ({ attemptInstall, getBaseRegistryUrl, extensionInstallationStateStore }: Dependencies) => async ({
name,
version,
requireConfirmation = false,
}: ExtensionInfo) => {
const disposer = extensionInstallationStateStore.startPreInstall();
const baseUrl = await getBaseRegistryUrl();
const registryUrl = new URLParse(baseUrl).set("pathname", name).toString();
let json: any;
try {
json = await downloadJson({ url: registryUrl }).promise;
if (!json || json.error || typeof json.versions !== "object" || !json.versions) {
const message = json?.error ? `: ${json.error}` : "";
Notifications.error(`Failed to get registry information for that extension${message}`);
return disposer();
}
} catch (error) {
if (error instanceof SyntaxError) {
// assume invalid JSON
console.warn("Set registry has invalid json", { url: baseUrl }, error);
Notifications.error("Failed to get valid registry information for that extension. Registry did not return valid JSON");
} else {
console.error("Failed to download registry information", error);
Notifications.error(`Failed to get valid registry information for that extension. ${error}`);
}
return disposer();
}
if (version) {
if (!json.versions[version]) {
if (json["dist-tags"][version]) {
version = json["dist-tags"][version];
} else {
Notifications.error(
<p>
The <em>{name}</em> extension does not have a version or tag{" "}
<code>{version}</code>.
</p>,
);
return disposer();
}
}
} else {
const versions = Object.keys(json.versions)
.map(
version =>
new SemVer(version, { loose: true, includePrerelease: true }),
)
// ignore pre-releases for auto picking the version
.filter(version => version.prerelease.length === 0);
version = lodash.reduce(versions, (prev, curr) =>
prev.compareMain(curr) === -1 ? curr : prev,
).format();
}
if (requireConfirmation) {
const proceed = await ConfirmDialog.confirm({
message: (
<p>
Are you sure you want to install{" "}
<b>
{name}@{version}
</b>
?
</p>
),
labelCancel: "Cancel",
labelOk: "Install",
});
if (!proceed) {
return disposer();
}
}
const url = json.versions[version].dist.tarball;
const fileName = path.basename(url);
const { promise: dataP } = downloadFile({ url, timeout: 10 * 60 * 1000 });
return attemptInstall({ fileName, dataP }, disposer);
};

54
src/renderer/components/+extensions/confirm-uninstall-extension.injectable.tsx Normal file
View File

@ -0,0 +1,54 @@
/**
* 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 React from "react";
import type { InstalledExtension } from "../../../extensions/extension-discovery/extension-discovery";
import type { LensExtensionId } from "../../../extensions/lens-extension";
import { extensionDisplayName } from "../../../extensions/lens-extension";
import type { Confirm } from "../confirm-dialog/confirm.injectable";
import confirmInjectable from "../confirm-dialog/confirm.injectable";
import uninstallExtensionInjectable from "./uninstall-extension/uninstall-extension.injectable";
interface Dependencies {
uninstallExtension: (id: LensExtensionId) => Promise<boolean>;
confirm: Confirm;
}
export type ConfirmUninstallExtension = (ext: InstalledExtension) => Promise<void>;
const confirmUninstallExtension = ({
uninstallExtension,
confirm,
}: Dependencies): ConfirmUninstallExtension => (
async (extension) => {
const displayName = extensionDisplayName(
extension.manifest.name,
extension.manifest.version,
);
const confirmed = await confirm({
message: (
<p>
Are you sure you want to uninstall extension <b>{displayName}</b>?
</p>
),
labelOk: "Yes",
labelCancel: "No",
});
if (confirmed) {
await uninstallExtension(extension.id);
}
}
);
const confirmUninstallExtensionInjectable = getInjectable({
id: "confirm-uninstall-extension",
instantiate: (di) => confirmUninstallExtension({
uninstallExtension: di.inject(uninstallExtensionInjectable),
confirm: di.inject(confirmInjectable),
}),
});
export default confirmUninstallExtensionInjectable;

18
src/renderer/components/+extensions/confirm-uninstall-extension/confirm-uninstall-extension.injectable.ts
View File

@ -1,18 +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 { confirmUninstallExtension } from "./confirm-uninstall-extension";
import uninstallExtensionInjectable from "../uninstall-extension/uninstall-extension.injectable";
const confirmUninstallExtensionInjectable = getInjectable({
id: "confirm-uninstall-extension",
instantiate: (di) =>
confirmUninstallExtension({
uninstallExtension: di.inject(uninstallExtensionInjectable),
}),
});
export default confirmUninstallExtensionInjectable;

35
src/renderer/components/+extensions/confirm-uninstall-extension/confirm-uninstall-extension.tsx
View File

@ -1,35 +0,0 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import React from "react";
import type { InstalledExtension } from "../../../../extensions/extension-discovery/extension-discovery";
import type { LensExtensionId } from "../../../../extensions/lens-extension";
import { extensionDisplayName } from "../../../../extensions/lens-extension";
import { ConfirmDialog } from "../../confirm-dialog";
interface Dependencies {
uninstallExtension: (id: LensExtensionId) => Promise<boolean>;
}
export const confirmUninstallExtension =
({ uninstallExtension }: Dependencies) =>
async (extension: InstalledExtension): Promise<void> => {
const displayName = extensionDisplayName(
extension.manifest.name,
extension.manifest.version,
);
const confirmed = await ConfirmDialog.confirm({
message: (
<p>
Are you sure you want to uninstall extension <b>{displayName}</b>?
</p>
),
labelOk: "Yes",
labelCancel: "No",
});
if (confirmed) {
await uninstallExtension(extension.id);
}
};

5
src/renderer/components/+extensions/extensions.tsx
View File

@ -26,7 +26,8 @@ import { withInjectables } from "@ogre-tools/injectable-react";
import userExtensionsInjectable from "./user-extensions/user-extensions.injectable";
import enableExtensionInjectable from "./enable-extension/enable-extension.injectable";
import disableExtensionInjectable from "./disable-extension/disable-extension.injectable";
import confirmUninstallExtensionInjectable from "./confirm-uninstall-extension/confirm-uninstall-extension.injectable";
import type { ConfirmUninstallExtension } from "./confirm-uninstall-extension.injectable";
import confirmUninstallExtensionInjectable from "./confirm-uninstall-extension.injectable";
import installFromInputInjectable from "./install-from-input/install-from-input.injectable";
import installFromSelectFileDialogInjectable from "./install-from-select-file-dialog.injectable";
import type { LensExtensionId } from "../../../extensions/lens-extension";
@ -39,7 +40,7 @@ interface Dependencies {
userExtensions: IComputedValue<InstalledExtension[]>;
enableExtension: (id: LensExtensionId) => void;
disableExtension: (id: LensExtensionId) => void;
confirmUninstallExtension: (extension: InstalledExtension) => Promise<void>;
confirmUninstallExtension: ConfirmUninstallExtension;
installFromInput: (input: string) => Promise<void>;
installFromSelectFileDialog: () => Promise<void>;
installOnDrop: (files: File[]) => Promise<void>;

2
src/renderer/components/+extensions/install-from-input/install-from-input.injectable.ts
View File

@ -5,7 +5,7 @@
import { getInjectable } from "@ogre-tools/injectable";
import attemptInstallInjectable from "../attempt-install/attempt-install.injectable";
import { installFromInput } from "./install-from-input";
import attemptInstallByInfoInjectable from "../attempt-install-by-info/attempt-install-by-info.injectable";
import attemptInstallByInfoInjectable from "../attempt-install-by-info.injectable";
import extensionInstallationStateStoreInjectable
from "../../../../extensions/extension-installation-state-store/extension-installation-state-store.injectable";

2
src/renderer/components/+extensions/install-from-input/install-from-input.tsx
View File

@ -12,7 +12,7 @@ import path from "path";
import React from "react";
import { readFileNotify } from "../read-file-notify/read-file-notify";
import type { InstallRequest } from "../attempt-install/install-request";
import type { ExtensionInfo } from "../attempt-install-by-info/attempt-install-by-info";
import type { ExtensionInfo } from "../attempt-install-by-info.injectable";
import type { ExtensionInstallationStateStore } from "../../../../extensions/extension-installation-state-store/extension-installation-state-store";
interface Dependencies {

23
src/renderer/components/+user-management/+cluster-role-bindings/details.tsx
View File

@ -12,7 +12,6 @@ import React from "react";
import type { ClusterRoleBinding, ClusterRoleBindingSubject } from "../../../../common/k8s-api/endpoints";
import { autoBind, ObservableHashSet, prevDefault } from "../../../utils";
import { AddRemoveButtons } from "../../add-remove-buttons";
import { ConfirmDialog } from "../../confirm-dialog";
import { DrawerTitle } from "../../drawer";
import type { KubeObjectDetailsProps } from "../../kube-object-details";
import { KubeObjectMeta } from "../../kube-object-meta";
@ -20,15 +19,22 @@ import { Table, TableCell, TableHead, TableRow } from "../../table";
import { ClusterRoleBindingDialog } from "./dialog";
import { clusterRoleBindingsStore } from "./store";
import { hashClusterRoleBindingSubject } from "./hashers";
import type { OpenConfirmDialog } from "../../confirm-dialog/open.injectable";
import { withInjectables } from "@ogre-tools/injectable-react";
import openConfirmDialogInjectable from "../../confirm-dialog/open.injectable";
export interface ClusterRoleBindingDetailsProps extends KubeObjectDetailsProps<ClusterRoleBinding> {
}
interface Dependencies {
openConfirmDialog: OpenConfirmDialog;
}
@observer
export class ClusterRoleBindingDetails extends React.Component<ClusterRoleBindingDetailsProps> {
class NonInjectedClusterRoleBindingDetails extends React.Component<ClusterRoleBindingDetailsProps & Dependencies> {
selectedSubjects = new ObservableHashSet<ClusterRoleBindingSubject>([], hashClusterRoleBindingSubject);
constructor(props: ClusterRoleBindingDetailsProps) {
constructor(props: ClusterRoleBindingDetailsProps & Dependencies) {
super(props);
autoBind(this);
}
@ -42,10 +48,10 @@ export class ClusterRoleBindingDetails extends React.Component<ClusterRoleBindin
}
removeSelectedSubjects() {
const { object: clusterRoleBinding } = this.props;
const { object: clusterRoleBinding, openConfirmDialog } = this.props;
const { selectedSubjects } = this;
ConfirmDialog.open({
openConfirmDialog({
ok: () => clusterRoleBindingsStore.removeSubjects(clusterRoleBinding, selectedSubjects),
labelOk: `Remove`,
message: (
@ -123,3 +129,10 @@ export class ClusterRoleBindingDetails extends React.Component<ClusterRoleBindin
);
}
}
export const ClusterRoleBindingDetails = withInjectables<Dependencies, ClusterRoleBindingDetailsProps>(NonInjectedClusterRoleBindingDetails, {
getProps: (di, props) => ({
...props,
openConfirmDialog: di.inject(openConfirmDialogInjectable),
}),
});

21
src/renderer/components/+user-management/+role-bindings/details.tsx
View File

@ -11,7 +11,6 @@ import React from "react";
import type { RoleBinding, RoleBindingSubject } from "../../../../common/k8s-api/endpoints";
import { prevDefault } from "../../../utils";
import { AddRemoveButtons } from "../../add-remove-buttons";
import { ConfirmDialog } from "../../confirm-dialog";
import { DrawerTitle } from "../../drawer";
import type { KubeObjectDetailsProps } from "../../kube-object-details";
import { KubeObjectMeta } from "../../kube-object-meta";
@ -20,12 +19,19 @@ import { RoleBindingDialog } from "./dialog";
import { roleBindingsStore } from "./store";
import { ObservableHashSet } from "../../../../common/utils/hash-set";
import { hashRoleBindingSubject } from "./hashers";
import type { OpenConfirmDialog } from "../../confirm-dialog/open.injectable";
import { withInjectables } from "@ogre-tools/injectable-react";
import openConfirmDialogInjectable from "../../confirm-dialog/open.injectable";
export interface RoleBindingDetailsProps extends KubeObjectDetailsProps<RoleBinding> {
}
interface Dependencies {
openConfirmDialog: OpenConfirmDialog;
}
@observer
export class RoleBindingDetails extends React.Component<RoleBindingDetailsProps> {
class NonInjectedRoleBindingDetails extends React.Component<RoleBindingDetailsProps & Dependencies> {
selectedSubjects = new ObservableHashSet<RoleBindingSubject>([], hashRoleBindingSubject);
async componentDidMount() {
@ -37,10 +43,10 @@ export class RoleBindingDetails extends React.Component<RoleBindingDetailsProps>
}
removeSelectedSubjects = () => {
const { object: roleBinding } = this.props;
const { object: roleBinding, openConfirmDialog } = this.props;
const { selectedSubjects } = this;
ConfirmDialog.open({
openConfirmDialog({
ok: () => roleBindingsStore.removeSubjects(roleBinding, selectedSubjects.toJSON()),
labelOk: `Remove`,
message: (
@ -118,3 +124,10 @@ export class RoleBindingDetails extends React.Component<RoleBindingDetailsProps>
);
}
}
export const RoleBindingDetails = withInjectables<Dependencies, RoleBindingDetailsProps>(NonInjectedRoleBindingDetails, {
getProps: (di, props) => ({
...props,
openConfirmDialog: di.inject(openConfirmDialogInjectable),
}),
});

111
src/renderer/components/+workloads-cronjobs/cron-job-menu.tsx
View File

@ -9,56 +9,73 @@ import { cronJobApi } from "../../../common/k8s-api/endpoints";
import { MenuItem } from "../menu";
import { CronJobTriggerDialog } from "./cronjob-trigger-dialog";
import { Icon } from "../icon";
import { ConfirmDialog } from "../confirm-dialog";
import { Notifications } from "../notifications";
import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable";
import { withInjectables } from "@ogre-tools/injectable-react";
import openConfirmDialogInjectable from "../confirm-dialog/open.injectable";
export function CronJobMenu(props: KubeObjectMenuProps<CronJob>) {
const { object, toolbar } = props;
export interface CronJobMenuProps extends KubeObjectMenuProps<CronJob> {}
return (
<>
<MenuItem onClick={() => CronJobTriggerDialog.open(object)}>
<Icon material="play_circle_filled" tooltip="Trigger" interactive={toolbar}/>
<span className="title">Trigger</span>
interface Dependencies {
openConfirmDialog: OpenConfirmDialog;
}
const NonInjectedCronJobMenu = ({
object,
toolbar,
openConfirmDialog,
}: Dependencies & CronJobMenuProps) => (
<>
<MenuItem onClick={() => CronJobTriggerDialog.open(object)}>
<Icon material="play_circle_filled" tooltip="Trigger" interactive={toolbar}/>
<span className="title">Trigger</span>
</MenuItem>
{object.isSuspend() ?
<MenuItem onClick={() => openConfirmDialog({
ok: async () => {
try {
await cronJobApi.resume({ namespace: object.getNs(), name: object.getName() });
} catch (err) {
Notifications.error(err);
}
},
labelOk: `Resume`,
message: (
<p>
Resume CronJob <b>{object.getName()}</b>?
</p>
),
})}>
<Icon material="play_circle_outline" tooltip="Resume" interactive={toolbar}/>
<span className="title">Resume</span>
</MenuItem>
{object.isSuspend() ?
<MenuItem onClick={() => ConfirmDialog.open({
ok: async () => {
try {
await cronJobApi.resume({ namespace: object.getNs(), name: object.getName() });
} catch (err) {
Notifications.error(err);
}
},
labelOk: `Resume`,
message: (
<p>
Resume CronJob <b>{object.getName()}</b>?
</p>),
})}>
<Icon material="play_circle_outline" tooltip="Resume" interactive={toolbar}/>
<span className="title">Resume</span>
</MenuItem>
: <MenuItem onClick={() => openConfirmDialog({
ok: async () => {
try {
await cronJobApi.suspend({ namespace: object.getNs(), name: object.getName() });
} catch (err) {
Notifications.error(err);
}
},
labelOk: `Suspend`,
message: (
<p>
Suspend CronJob <b>{object.getName()}</b>?
</p>
),
})}>
<Icon material="pause_circle_filled" tooltip="Suspend" interactive={toolbar}/>
<span className="title">Suspend</span>
</MenuItem>
}
</>
);
: <MenuItem onClick={() => ConfirmDialog.open({
ok: async () => {
try {
await cronJobApi.suspend({ namespace: object.getNs(), name: object.getName() });
} catch (err) {
Notifications.error(err);
}
},
labelOk: `Suspend`,
message: (
<p>
Suspend CronJob <b>{object.getName()}</b>?
</p>),
})}>
<Icon material="pause_circle_filled" tooltip="Suspend" interactive={toolbar}/>
<span className="title">Suspend</span>
</MenuItem>
}
</>
);
}
export const CronJobMenu = withInjectables<Dependencies, CronJobMenuProps>(NonInjectedCronJobMenu, {
getProps: (di, props) => ({
...props,
openConfirmDialog: di.inject(openConfirmDialogInjectable),
}),
});

80
src/renderer/components/+workloads-deployments/deployment-menu.tsx
View File

@ -9,40 +9,54 @@ import { deploymentApi } from "../../../common/k8s-api/endpoints";
import { MenuItem } from "../menu";
import { DeploymentScaleDialog } from "./deployment-scale-dialog";
import { Icon } from "../icon";
import { ConfirmDialog } from "../confirm-dialog";
import { Notifications } from "../notifications";
import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable";
import { withInjectables } from "@ogre-tools/injectable-react";
import openConfirmDialogInjectable from "../confirm-dialog/open.injectable";
export function DeploymentMenu(props: KubeObjectMenuProps<Deployment>) {
const { object, toolbar } = props;
export interface DeploymentMenuProps extends KubeObjectMenuProps<Deployment> {}
return (
<>
<MenuItem onClick={() => DeploymentScaleDialog.open(object)}>
<Icon material="open_with" tooltip="Scale" interactive={toolbar}/>
<span className="title">Scale</span>
</MenuItem>
<MenuItem onClick={() => ConfirmDialog.open({
ok: async () =>
{
try {
await deploymentApi.restart({
namespace: object.getNs(),
name: object.getName(),
});
} catch (err) {
Notifications.error(err);
}
},
labelOk: `Restart`,
message: (
<p>
Are you sure you want to restart deployment <b>{object.getName()}</b>?
</p>
),
})}>
<Icon material="autorenew" tooltip="Restart" interactive={toolbar}/>
<span className="title">Restart</span>
</MenuItem>
</>
);
interface Dependencies {
openConfirmDialog: OpenConfirmDialog;
}
const NonInjectedDeploymentMenu = ({
object,
toolbar,
openConfirmDialog,
}: Dependencies & DeploymentMenuProps) => (
<>
<MenuItem onClick={() => DeploymentScaleDialog.open(object)}>
<Icon material="open_with" tooltip="Scale" interactive={toolbar}/>
<span className="title">Scale</span>
</MenuItem>
<MenuItem onClick={() => openConfirmDialog({
ok: async () => {
try {
await deploymentApi.restart({
namespace: object.getNs(),
name: object.getName(),
});
} catch (err) {
Notifications.error(err);
}
},
labelOk: `Restart`,
message: (
<p>
Are you sure you want to restart deployment <b>{object.getName()}</b>?
</p>
),
})}>
<Icon material="autorenew" tooltip="Restart" interactive={toolbar}/>
<span className="title">Restart</span>
</MenuItem>
</>
);
export const DeploymentMenu = withInjectables<Dependencies, DeploymentMenuProps>(NonInjectedDeploymentMenu, {
getProps: (di, props) => ({
...props,
openConfirmDialog: di.inject(openConfirmDialogInjectable),
}),
});

23
src/renderer/components/+workloads-statefulsets/stateful-set-menu.tsx
View File

@ -1,23 +0,0 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import React from "react";
import type { KubeObjectMenuProps } from "../kube-object-menu";
import type { StatefulSet } from "../../../common/k8s-api/endpoints";
import { MenuItem } from "../menu";
import { StatefulSetScaleDialog } from "./statefulset-scale-dialog";
import { Icon } from "../icon";
export function StatefulSetMenu(props: KubeObjectMenuProps<StatefulSet>) {
const { object, toolbar } = props;
return (
<>
<MenuItem onClick={() => StatefulSetScaleDialog.open(object)}>
<Icon material="open_with" tooltip="Scale" interactive={toolbar}/>
<span className="title">Scale</span>
</MenuItem>
</>
);
}

29
src/renderer/components/animate/animate.tsx
View File

@ -5,8 +5,8 @@
import "./animate.scss";
import React from "react";
import { observable, reaction, makeObservable } from "mobx";
import { disposeOnUnmount, observer } from "mobx-react";
import { observable, makeObservable } from "mobx";
import { observer } from "mobx-react";
import { cssNames, noop } from "../../utils";
export type AnimateName = "opacity" | "slide-right" | "opacity-scale" | string;
@ -46,15 +46,24 @@ export class Animate extends React.Component<AnimateProps> {
return React.Children.only(this.props.children) as React.ReactElement<React.HTMLAttributes<any>>;
}
private toggle(enter: boolean) {
if (enter) {
this.enter();
} else {
this.leave();
}
}
componentDidMount() {
disposeOnUnmount(this, [
reaction(() => this.props.enter, enter => {
if (enter) this.enter();
else this.leave();
}, {
fireImmediately: true,
}),
]);
this.toggle(this.props.enter);
}
componentDidUpdate(prevProps: Readonly<AnimateProps>): void {
const { enter } = this.props;
if (prevProps.enter !== enter) {
this.toggle(enter);
}
}
enter() {

71
src/renderer/components/confirm-dialog/confirm-dialog.tsx
View File

@ -7,7 +7,8 @@ import "./confirm-dialog.scss";
import type { ReactNode } from "react";
import React from "react";
import { observable, makeObservable } from "mobx";
import type { IObservableValue } from "mobx";
import { observable, makeObservable, computed } from "mobx";
import { observer } from "mobx-react";
import { cssNames, noop, prevDefault } from "../../utils";
import type { ButtonProps } from "../button";
@ -16,6 +17,8 @@ import type { DialogProps } from "../dialog";
import { Dialog } from "../dialog";
import { Icon } from "../icon";
import { Notifications } from "../notifications";
import { withInjectables } from "@ogre-tools/injectable-react";
import confirmDialogStateInjectable from "./state.injectable";
export interface ConfirmDialogProps extends Partial<DialogProps> {
}
@ -34,45 +37,30 @@ export interface ConfirmDialogBooleanParams {
cancelButtonProps?: Partial<ButtonProps>;
}
const dialogState = observable.object({
isOpen: false,
params: null as ConfirmDialogParams,
});
interface Dependencies {
state: IObservableValue<ConfirmDialogParams | undefined>;
}
const defaultParams: Partial<ConfirmDialogParams> = {
ok: noop,
cancel: noop,
labelOk: "Ok",
labelCancel: "Cancel",
icon: <Icon big material="warning"/>,
};
@observer
export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
class NonInjectedConfirmDialog extends React.Component<ConfirmDialogProps & Dependencies> {
@observable isSaving = false;
constructor(props: ConfirmDialogProps) {
constructor(props: ConfirmDialogProps & Dependencies) {
super(props);
makeObservable(this);
}
static open(params: ConfirmDialogParams) {
dialogState.isOpen = true;
dialogState.params = params;
}
static confirm(params: ConfirmDialogBooleanParams): Promise<boolean> {
return new Promise(resolve => {
ConfirmDialog.open({
ok: () => resolve(true),
cancel: () => resolve(false),
...params,
});
});
}
static defaultParams: Partial<ConfirmDialogParams> = {
ok: noop,
cancel: noop,
labelOk: "Ok",
labelCancel: "Cancel",
icon: <Icon big material="warning"/>,
};
get params(): ConfirmDialogParams {
return Object.assign({}, ConfirmDialog.defaultParams, dialogState.params);
@computed
get params() {
return Object.assign({}, defaultParams, this.props.state.get() ?? {});
}
ok = async () => {
@ -88,7 +76,7 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
);
} finally {
this.isSaving = false;
dialogState.isOpen = false;
this.props.state.set(undefined);
}
};
@ -108,12 +96,14 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
);
} finally {
this.isSaving = false;
dialogState.isOpen = false;
this.props.state.set(undefined);
}
};
render() {
const { className, ...dialogProps } = this.props;
const { state, className, ...dialogProps } = this.props;
const dialogState = state.get();
const isOpen = Boolean(dialogState);
const {
icon, labelOk, labelCancel, message,
okButtonProps = {},
@ -124,10 +114,10 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
<Dialog
{...dialogProps}
className={cssNames("ConfirmDialog", className)}
isOpen={dialogState.isOpen}
isOpen={isOpen}
onClose={this.onClose}
close={this.close}
{...(dialogState.isOpen ? { "data-testid":"confirmation-dialog" } : {})}
{...(isOpen ? { "data-testid": "confirmation-dialog" } : {})}
>
<div className="confirm-content">
{icon} {message}
@ -154,3 +144,10 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
);
}
}
export const ConfirmDialog = withInjectables<Dependencies, ConfirmDialogProps>(NonInjectedConfirmDialog, {
getProps: (di, props) => ({
...props,
state: di.inject(confirmDialogStateInjectable),
}),
});

26
src/renderer/components/confirm-dialog/confirm.injectable.ts Normal file
View File

@ -0,0 +1,26 @@
/**
* 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 { ConfirmDialogBooleanParams } from "./confirm-dialog";
import openConfirmDialogInjectable from "./open.injectable";
export type Confirm = (params: ConfirmDialogBooleanParams) => Promise<boolean>;
const confirmInjectable = getInjectable({
id: "confirm",
instantiate: (di): Confirm => {
const open = di.inject(openConfirmDialogInjectable);
return (params) => new Promise(resolve => {
open({
ok: () => resolve(true),
cancel: () => resolve(false),
...params,
});
});
},
});
export default confirmInjectable;

20
src/renderer/components/confirm-dialog/open.injectable.ts Normal file
View File

@ -0,0 +1,20 @@
/**
* 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 { ConfirmDialogParams } from "./confirm-dialog";
import confirmDialogStateInjectable from "./state.injectable";
export type OpenConfirmDialog = (params: ConfirmDialogParams) => void;
const openConfirmDialogInjectable = getInjectable({
id: "open-confirm-dialog",
instantiate: (di): OpenConfirmDialog => {
const state = di.inject(confirmDialogStateInjectable);
return params => state.set(params);
},
});
export default openConfirmDialogInjectable;

14
src/renderer/components/confirm-dialog/state.injectable.ts Normal file
View File

@ -0,0 +1,14 @@
/**
* 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";
import type { ConfirmDialogParams } from ".";
const confirmDialogStateInjectable = getInjectable({
id: "confirm-dialog-state",
instantiate: () => observable.box<ConfirmDialogParams | undefined>(),
});
export default confirmDialogStateInjectable;

21
src/renderer/components/confirm-dialog/with-confirm.injectable.ts Normal file
View File

@ -0,0 +1,21 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { ConfirmDialogParams } from "./confirm-dialog";
import { getInjectable } from "@ogre-tools/injectable";
import openConfirmDialogInjectable from "./open.injectable";
export type WithConfirmation = (params: ConfirmDialogParams) => () => void;
const withConfirmationInjectable = getInjectable({
id: "with-confirmation",
instantiate: (di): WithConfirmation => {
const open = di.inject(openConfirmDialogInjectable);
return (params) => () => open(params);
},
});
export default withConfirmationInjectable;

2
src/renderer/components/drawer/drawer.tsx
View File

@ -199,7 +199,7 @@ class NonInjectedDrawer extends React.Component<DrawerProps & Dependencies, Stat
)}
</div>
{toolbar}
<Icon material="close" onClick={this.close}/>
<Icon material="close" tooltip="Close" onClick={this.close}/>
</div>
<div
className={cssNames("drawer-content flex column box grow", contentClass)}

48
src/renderer/components/hotbar/hotbar-icon.tsx
View File

@ -9,13 +9,15 @@ import React, { useState } from "react";
import type { CatalogEntityContextMenu } from "../../../common/catalog";
import { cssNames } from "../../utils";
import { ConfirmDialog } from "../confirm-dialog";
import { Menu, MenuItem } from "../menu";
import { observer } from "mobx-react";
import type { AvatarProps } from "../avatar";
import { Avatar } from "../avatar";
import { Icon } from "../icon";
import { Tooltip } from "../tooltip";
import type { NormalizeCatalogEntityContextMenu } from "../../catalog/normalize-menu-item.injectable";
import { withInjectables } from "@ogre-tools/injectable-react";
import normalizeCatalogEntityContextMenuInjectable from "../../catalog/normalize-menu-item.injectable";
export interface HotbarIconProps extends AvatarProps {
uid: string;
@ -28,24 +30,17 @@ export interface HotbarIconProps extends AvatarProps {
tooltip?: string;
}
function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
if (menuItem.confirm) {
ConfirmDialog.open({
okButtonProps: {
primary: false,
accent: true,
},
ok: () => {
menuItem.onClick();
},
message: menuItem.confirm.message,
});
} else {
menuItem.onClick();
}
interface Dependencies {
normalizeMenuItem: NormalizeCatalogEntityContextMenu;
}
export const HotbarIcon = observer(({ menuItems = [], size = 40, tooltip, ...props }: HotbarIconProps) => {
const NonInjectedHotbarIcon = observer(({
menuItems = [],
size = 40,
tooltip,
normalizeMenuItem,
...props
}: HotbarIconProps & Dependencies) => {
const { uid, title, src, material, active, className, source, disabled, onMenuOpen, onClick, children, ...rest } = props;
const id = `hotbarIcon-${uid}`;
const [menuOpen, setMenuOpen] = useState(false);
@ -83,13 +78,22 @@ export const HotbarIcon = observer(({ menuItems = [], size = 40, tooltip, ...pro
}}
close={() => toggleMenu()}>
{
menuItems.map((menuItem) => (
<MenuItem key={menuItem.title} onClick={() => onMenuItemClick(menuItem)}>
{menuItem.title}
</MenuItem>
))
menuItems
.map(normalizeMenuItem)
.map((menuItem) => (
<MenuItem key={menuItem.title} onClick={menuItem.onClick}>
{menuItem.title}
</MenuItem>
))
}
</Menu>
</div>
);
});
export const HotbarIcon = withInjectables<Dependencies, HotbarIconProps>(NonInjectedHotbarIcon, {
getProps: (di, props) => ({
...props,
normalizeMenuItem: di.inject(normalizeCatalogEntityContextMenuInjectable),
}),
});

16
src/renderer/components/hotbar/hotbar-remove-command.tsx
View File

@ -7,13 +7,15 @@ import React from "react";
import { observer } from "mobx-react";
import { Select } from "../select";
import hotbarStoreInjectable from "../../../common/hotbar-store.injectable";
import { ConfirmDialog } from "../confirm-dialog";
import { withInjectables } from "@ogre-tools/injectable-react";
import commandOverlayInjectable from "../command-palette/command-overlay.injectable";
import type { Hotbar } from "../../../common/hotbar-types";
import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable";
import openConfirmDialogInjectable from "../confirm-dialog/open.injectable";
interface Dependencies {
closeCommandOverlay: () => void;
openConfirmDialog: OpenConfirmDialog;
hotbarStore: {
hotbars: Hotbar[];
getById: (id: string) => Hotbar | undefined;
@ -22,7 +24,11 @@ interface Dependencies {
};
}
const NonInjectedHotbarRemoveCommand = observer(({ closeCommandOverlay, hotbarStore }: Dependencies) => {
const NonInjectedHotbarRemoveCommand = observer(({
closeCommandOverlay,
hotbarStore,
openConfirmDialog,
}: Dependencies) => {
const options = hotbarStore.hotbars.map(hotbar => ({
value: hotbar.id,
label: hotbarStore.getDisplayLabel(hotbar),
@ -36,8 +42,7 @@ const NonInjectedHotbarRemoveCommand = observer(({ closeCommandOverlay, hotbarSt
}
closeCommandOverlay();
// TODO: make confirm dialog injectable
ConfirmDialog.open({
openConfirmDialog({
okButtonProps: {
label: "Remove Hotbar",
primary: false,
@ -71,8 +76,9 @@ const NonInjectedHotbarRemoveCommand = observer(({ closeCommandOverlay, hotbarSt
export const HotbarRemoveCommand = withInjectables<Dependencies>(NonInjectedHotbarRemoveCommand, {
getProps: (di, props) => ({
...props,
closeCommandOverlay: di.inject(commandOverlayInjectable).close,
hotbarStore: di.inject(hotbarStoreInjectable),
...props,
openConfirmDialog: di.inject(openConfirmDialogInjectable),
}),
});

71
src/renderer/components/icon/icon.tsx
View File

@ -15,22 +15,69 @@ import { withTooltip } from "../tooltip";
import isNumber from "lodash/isNumber";
import { decode } from "../../../common/utils/base64";
export interface IconProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
material?: string; // material-icon, see available names at https://material.io/icons/
svg?: string; // svg-filename without extension in current folder
link?: LocationDescriptor; // render icon as NavLink from react-router-dom
href?: string; // render icon as hyperlink
size?: string | number; // icon-size
small?: boolean; // pre-defined icon-size
smallest?: boolean; // pre-defined icon-size
big?: boolean; // pre-defined icon-size
active?: boolean; // apply active-state styles
interactive?: boolean; // indicates that icon is interactive and highlight it on focus/hover
focusable?: boolean; // allow focus to the icon + show .active styles (default: "true", when icon is interactive)
export interface BaseIconProps {
/**
* One of the names from https://material.io/icons/
*/
material?: string;
/**
* Either an SVG data URL or one of the following strings
*/
svg?: string;
/**
* render icon as NavLink from react-router-dom
*/
link?: LocationDescriptor;
/**
* render icon as hyperlink
*/
href?: string;
/**
* The icon size (css units)
*/
size?: string | number;
/**
* A pre-defined icon-size
*/
small?: boolean;
/**
* A pre-defined icon-size
*/
smallest?: boolean;
/**
* A pre-defined icon-size
*/
big?: boolean;
/**
* apply active-state styles
*/
active?: boolean;
/**
* indicates that icon is interactive and highlight it on focus/hover
*/
interactive?: boolean;
/**
* Allow focus to the icon to show `.active` styles. Only applicable if {@link IconProps.interactive} is `true`.
*
* @default true
*/
focusable?: boolean;
sticker?: boolean;
disabled?: boolean;
}
export interface IconProps extends React.HTMLAttributes<any>, TooltipDecoratorProps, BaseIconProps {}
@withTooltip
export class Icon extends React.PureComponent<IconProps> {
private readonly ref = createRef<HTMLAnchorElement>();

23
src/renderer/components/item-object-list/content.tsx
View File

@ -10,7 +10,6 @@ import React from "react";
import { computed, makeObservable } from "mobx";
import { Observer, observer } from "mobx-react";
import type { ConfirmDialogParams } from "../confirm-dialog";
import { ConfirmDialog } from "../confirm-dialog";
import type { TableCellProps, TableProps, TableRowProps, TableSortCallbacks } from "../table";
import { Table, TableCell, TableHead, TableRow } from "../table";
import type { IClassName } from "../../utils";
@ -27,6 +26,9 @@ import { MenuActions } from "../menu/menu-actions";
import { MenuItem } from "../menu";
import { Checkbox } from "../checkbox";
import { UserStore } from "../../../common/user-store";
import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable";
import { withInjectables } from "@ogre-tools/injectable-react";
import openConfirmDialogInjectable from "../confirm-dialog/open.injectable";
export interface ItemListLayoutContentProps<I extends ItemObject> {
getFilters: () => Filter[];
@ -63,9 +65,13 @@ export interface ItemListLayoutContentProps<I extends ItemObject> {
failedToLoadMessage?: React.ReactNode;
}
interface Dependencies {
openConfirmDialog: OpenConfirmDialog;
}
@observer
export class ItemListLayoutContent<I extends ItemObject> extends React.Component<ItemListLayoutContentProps<I>> {
constructor(props: ItemListLayoutContentProps<I>) {
class NonInjectedItemListLayoutContent<I extends ItemObject> extends React.Component<ItemListLayoutContentProps<I> & Dependencies> {
constructor(props: ItemListLayoutContentProps<I> & Dependencies) {
super(props);
makeObservable(this);
autoBind(this);
@ -150,7 +156,7 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
}
removeItemsDialog(selectedItems: I[]) {
const { customizeRemoveDialog, store } = this.props;
const { customizeRemoveDialog, store, openConfirmDialog } = this.props;
const visibleMaxNamesCount = 5;
const selectedNames = selectedItems.map(ns => ns.getName()).slice(0, visibleMaxNamesCount).join(", ");
const dialogCustomProps = customizeRemoveDialog ? customizeRemoveDialog(selectedItems) : {};
@ -168,7 +174,7 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
? () => store.removeItems(selectedItems)
: store.removeSelectedItems;
ConfirmDialog.open({
openConfirmDialog({
ok: onConfirm,
labelOk: "Remove",
message,
@ -315,3 +321,10 @@ export class ItemListLayoutContent<I extends ItemObject> extends React.Component
);
}
}
export const ItemListLayoutContent = withInjectables<Dependencies, ItemListLayoutContentProps<ItemObject>>(NonInjectedItemListLayoutContent, {
getProps: (di, props) => ({
...props,
openConfirmDialog: di.inject(openConfirmDialogInjectable),
}),
}) as <I extends ItemObject>(props: ItemListLayoutContentProps<I>) => React.ReactElement;

110
src/renderer/components/kube-object-menu/__snapshots__/kube-object-menu.test.tsx.snap
View File

@ -5,15 +5,14 @@ exports[`kube-object-menu given kube object renders 1`] = `
<div>
<div>
<ul
class="Animate opacity Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
style="--enter-duration: 100ms; --leave-duration: 100ms;"
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
>
<li>
Some menu item
</li>
<li
class="MenuItem"
data-testid="menu-action-remove"
data-testid="menu-action-delete"
tabindex="0"
>
<i
@ -45,15 +44,14 @@ exports[`kube-object-menu given kube object when removing kube object renders 1`
<div>
<div>
<ul
class="Animate opacity Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
style="--enter-duration: 100ms; --leave-duration: 100ms;"
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
>
<li>
Some menu item
</li>
<li
class="MenuItem"
data-testid="menu-action-remove"
data-testid="menu-action-delete"
tabindex="0"
>
<i
@ -78,9 +76,8 @@ exports[`kube-object-menu given kube object when removing kube object renders 1`
</div>
</div>
<div
class="Animate opacity-scale Dialog flex center ConfirmDialog modal"
class="Dialog flex center ConfirmDialog modal"
data-testid="confirmation-dialog"
style="--enter-duration: 100ms; --leave-duration: 100ms;"
>
<div
class="box"
@ -99,21 +96,19 @@ exports[`kube-object-menu given kube object when removing kube object renders 1`
</span>
</i>
<div>
<p>
Remove
some-kind
<p>
Remove
some-kind
<b>
some-namespace/some-name
</b>
from
<b>
Some name
</b>
?
</p>
</div>
<b>
some-namespace/some-name
</b>
from
<b>
Some name
</b>
?
</p>
</div>
<div
class="confirm-buttons"
@ -142,15 +137,14 @@ exports[`kube-object-menu given kube object with namespace when removing kube ob
<div>
<div>
<ul
class="Animate opacity Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
style="--enter-duration: 100ms; --leave-duration: 100ms;"
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
>
<li>
Some menu item
</li>
<li
class="MenuItem"
data-testid="menu-action-remove"
data-testid="menu-action-delete"
tabindex="0"
>
<i
@ -175,9 +169,8 @@ exports[`kube-object-menu given kube object with namespace when removing kube ob
</div>
</div>
<div
class="Animate opacity-scale Dialog flex center ConfirmDialog modal"
class="Dialog flex center ConfirmDialog modal"
data-testid="confirmation-dialog"
style="--enter-duration: 100ms; --leave-duration: 100ms;"
>
<div
class="box"
@ -196,21 +189,19 @@ exports[`kube-object-menu given kube object with namespace when removing kube ob
</span>
</i>
<div>
<p>
Remove
some-kind
<p>
Remove
some-kind
<b>
some-namespace/some-name
</b>
from
<b>
Some name
</b>
?
</p>
</div>
<b>
some-namespace/some-name
</b>
from
<b>
Some name
</b>
?
</p>
</div>
<div
class="confirm-buttons"
@ -239,15 +230,14 @@ exports[`kube-object-menu given kube object without namespace when removing kube
<div>
<div>
<ul
class="Animate opacity Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
style="--enter-duration: 100ms; --leave-duration: 100ms;"
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
>
<li>
Some menu item
</li>
<li
class="MenuItem"
data-testid="menu-action-remove"
data-testid="menu-action-delete"
tabindex="0"
>
<i
@ -272,9 +262,8 @@ exports[`kube-object-menu given kube object without namespace when removing kube
</div>
</div>
<div
class="Animate opacity-scale Dialog flex center ConfirmDialog modal"
class="Dialog flex center ConfirmDialog modal"
data-testid="confirmation-dialog"
style="--enter-duration: 100ms; --leave-duration: 100ms;"
>
<div
class="box"
@ -293,21 +282,19 @@ exports[`kube-object-menu given kube object without namespace when removing kube
</span>
</i>
<div>
<p>
Remove
some-kind
<p>
Remove
some-kind
<b>
some-name
</b>
from
<b>
Some name
</b>
?
</p>
</div>
<b>
some-name
</b>
from
<b>
Some name
</b>
?
</p>
</div>
<div
class="confirm-buttons"
@ -335,8 +322,7 @@ exports[`kube-object-menu given no kube object, renders 1`] = `
<body>
<div>
<ul
class="Animate opacity Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
style="--enter-duration: 100ms; --leave-duration: 100ms;"
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
/>
</div>
</body>

3
src/renderer/components/kube-object-menu/dependencies/kube-object-menu-items/get-kube-object-menu-items.ts
View File

@ -5,7 +5,7 @@
import { conforms, includes, eq } from "lodash/fp";
import type { KubeObject } from "../../../../../common/k8s-api/kube-object";
import type { LensRendererExtension } from "../../../../../extensions/lens-renderer-extension";
import { staticKubeObjectMenuItems as staticMenuItems } from "./static-kube-object-menu-items";
import { staticKubeObjectMenuItems as staticMenuItems } from "../static-kube-object-menu-items";
interface Dependencies {
extensions: LensRendererExtension[];
@ -31,7 +31,6 @@ export const getKubeObjectMenuItems = ({
apiVersions: includes(kubeObject.apiVersion),
}),
)
.map((item) => item.components.MenuItem);
};

16
src/renderer/components/kube-object-menu/dependencies/kube-object-menu-items/static-kube-object-menu-items.ts → src/renderer/components/kube-object-menu/dependencies/static-kube-object-menu-items.ts
View File

@ -2,11 +2,10 @@
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { ServiceAccountMenu } from "../../../+user-management/+service-accounts/service-account-menu";
import { CronJobMenu } from "../../../+workloads-cronjobs/cron-job-menu";
import { DeploymentMenu } from "../../../+workloads-deployments/deployment-menu";
import { ReplicaSetMenu } from "../../../+workloads-replicasets/replica-set-menu";
import { StatefulSetMenu } from "../../../+workloads-statefulsets/stateful-set-menu";
import { ServiceAccountMenu } from "../../+user-management/+service-accounts/service-account-menu";
import { CronJobMenu } from "../../+workloads-cronjobs/cron-job-menu";
import { DeploymentMenu } from "../../+workloads-deployments/deployment-menu";
import { ReplicaSetMenu } from "../../+workloads-replicasets/replica-set-menu";
export const staticKubeObjectMenuItems = [
{
@ -37,11 +36,4 @@ export const staticKubeObjectMenuItems = [
MenuItem: ReplicaSetMenu,
},
},
{
kind: "StatefulSet",
apiVersions: ["apps/v1"],
components: {
MenuItem: StatefulSetMenu,
},
},
];

2
src/renderer/components/kube-object-menu/dependencies/kube-object-menu-items/kube-object-menu-registration.ts → src/renderer/components/kube-object-menu/kube-object-menu-registration.ts
View File

@ -4,7 +4,7 @@
*/
import type React from "react";
import type { KubeObject } from "../../../../../common/k8s-api/kube-object";
import type { KubeObject } from "../../../common/k8s-api/kube-object";
export interface KubeObjectMenuItemProps {
object: KubeObject;

46
src/renderer/components/kube-object-menu/kube-object-menu.test.tsx
View File

@ -3,7 +3,7 @@
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import React from "react";
import { screen } from "@testing-library/react";
import { screen, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { KubeObject } from "../../../common/k8s-api/kube-object";
import userEvent from "@testing-library/user-event";
@ -21,7 +21,7 @@ import type { Cluster } from "../../../common/cluster/cluster";
import type { ApiManager } from "../../../common/k8s-api/api-manager";
import apiManagerInjectable from "./dependencies/api-manager.injectable";
import { KubeObjectMenu } from "./index";
import type { KubeObjectMenuRegistration } from "./dependencies/kube-object-menu-items/kube-object-menu-registration";
import type { KubeObjectMenuRegistration } from "./kube-object-menu-registration";
import { computed } from "mobx";
import { LensRendererExtension } from "../../../extensions/lens-renderer-extension";
import rendererExtensionsInjectable from "../../../extensions/renderer-extensions.injectable";
@ -30,6 +30,8 @@ import createEditResourceTabInjectable from "../dock/edit-resource/edit-resource
// TODO: Make tooltips free of side effects by making it deterministic
jest.mock("../tooltip");
// TODO: make `animated={false}` not required to make tests deterministic
class SomeTestExtension extends LensRendererExtension {
constructor(
kubeObjectMenuItems: KubeObjectMenuRegistration[],
@ -144,7 +146,7 @@ describe("kube-object-menu", () => {
({ baseElement } = render(
<div>
<ConfirmDialog />
<ConfirmDialog animated={false} />
<KubeObjectMenu
object={objectStub}
@ -164,23 +166,18 @@ describe("kube-object-menu", () => {
});
describe("when removing kube object", () => {
beforeEach(() => {
const menuItem = screen.getByTestId("menu-action-remove");
userEvent.click(menuItem);
beforeEach(async () => {
userEvent.click(await screen.findByTestId("menu-action-delete"));
});
it("renders", () => {
it("renders", async () => {
await screen.findByTestId("confirmation-dialog");
expect(baseElement).toMatchSnapshot();
});
it("opens a confirmation dialog", () => {
screen.getByTestId("confirmation-dialog");
});
describe("when remove is confirmed", () => {
beforeEach(() => {
const confirmRemovalButton = screen.getByTestId("confirm");
beforeEach(async () => {
const confirmRemovalButton = await screen.findByTestId("confirm");
userEvent.click(confirmRemovalButton);
});
@ -189,14 +186,15 @@ describe("kube-object-menu", () => {
expect(removeActionMock).toHaveBeenCalledWith();
});
it("does not close the confirmation dialog yet", () => {
screen.getByTestId("confirmation-dialog");
it("does not close the confirmation dialog yet", async () => {
await screen.findByTestId("confirmation-dialog");
});
it("when removal resolves, closes the confirmation dialog", async () => {
await removeActionMock.resolve();
expect(screen.queryByTestId("confirmation-dialog")).toBeNull();
await waitFor(() => {
expect(screen.queryByTestId("confirmation-dialog")).toBeNull();
});
});
});
});
@ -219,7 +217,7 @@ describe("kube-object-menu", () => {
({ baseElement } = render(
<div>
<ConfirmDialog />
<ConfirmDialog animated={false} />
<KubeObjectMenu
object={objectStub}
@ -230,8 +228,8 @@ describe("kube-object-menu", () => {
));
});
it("when removing kube object, renders confirmation dialog with namespace", () => {
const menuItem = screen.getByTestId("menu-action-remove");
it("when removing kube object, renders confirmation dialog with namespace", async () => {
const menuItem = await screen.findByTestId("menu-action-delete");
userEvent.click(menuItem);
@ -256,7 +254,7 @@ describe("kube-object-menu", () => {
({ baseElement } = render(
<div>
<ConfirmDialog />
<ConfirmDialog animated={false} />
<KubeObjectMenu
object={objectStub}
@ -267,8 +265,8 @@ describe("kube-object-menu", () => {
));
});
it("when removing kube object, renders confirmation dialog without namespace", () => {
const menuItem = screen.getByTestId("menu-action-remove");
it("when removing kube object, renders confirmation dialog without namespace", async () => {
const menuItem = await screen.findByTestId("menu-action-delete");
userEvent.click(menuItem);

210
src/renderer/components/kube-object-menu/kube-object-menu.tsx
View File

@ -4,10 +4,10 @@
*/
import React from "react";
import { autoBind, cssNames } from "../../utils";
import { cssNames } from "../../utils";
import type { KubeObject } from "../../../common/k8s-api/kube-object";
import type { MenuActionsProps } from "../menu";
import { MenuActions } from "../menu";
import { MenuItem, MenuActions } from "../menu";
import identity from "lodash/identity";
import type { ApiManager } from "../../../common/k8s-api/api-manager";
import { withInjectables } from "@ogre-tools/injectable-react";
@ -16,6 +16,16 @@ import createEditResourceTabInjectable from "../dock/edit-resource/edit-resource
import hideDetailsInjectable from "./dependencies/hide-details.injectable";
import kubeObjectMenuItemsInjectable from "./dependencies/kube-object-menu-items/kube-object-menu-items.injectable";
import apiManagerInjectable from "./dependencies/api-manager.injectable";
import type { OnKubeObjectContextMenuOpen } from "./on-context-menu-open.injectable";
import onKubeObjectContextMenuOpenInjectable from "./on-context-menu-open.injectable";
import type { KubeObjectContextMenuItem } from "../../kube-object/handler";
import { observable, runInAction } from "mobx";
import type { WithConfirmation } from "../confirm-dialog/with-confirm.injectable";
import type { Navigate } from "../../navigation/navigate.injectable";
import { Icon } from "../icon";
import navigateInjectable from "../../navigation/navigate.injectable";
import withConfirmationInjectable from "../confirm-dialog/with-confirm.injectable";
import { observer } from "mobx-react";
export interface KubeObjectMenuProps<TKubeObject extends KubeObject> extends MenuActionsProps {
object: TKubeObject | null | undefined;
@ -29,52 +39,17 @@ interface Dependencies {
clusterName: string;
hideDetails: () => void;
createEditResourceTab: (kubeObject: KubeObject) => void;
onContextMenuOpen: OnKubeObjectContextMenuOpen;
withConfirmation: WithConfirmation;
navigate: Navigate;
}
class NonInjectedKubeObjectMenu<TKubeObject extends KubeObject, Props extends KubeObjectMenuProps<TKubeObject> & Dependencies> extends React.Component<Props> {
constructor(props: Props) {
super(props);
autoBind(this);
}
get store() {
const { object } = this.props;
if (!object) return null;
return this.props.apiManager.getStore(object.selfLink);
}
get isEditable() {
return this.props.editable ?? Boolean(this.store?.patch);
}
get isRemovable() {
return this.props.removable ?? Boolean(this.store?.remove);
}
async update() {
this.props.hideDetails();
this.props.createEditResourceTab(this.props.object);
}
async remove() {
this.props.hideDetails();
const { object, removeAction } = this.props;
if (removeAction) await removeAction();
else await this.store.remove(object);
}
renderRemoveMessage() {
const { object } = this.props;
if (!object) {
return null;
}
@observer
class NonInjectedKubeObjectMenu<Kube extends KubeObject> extends React.Component<KubeObjectMenuProps<Kube> & Dependencies> {
private menuItems = observable.array<KubeObjectContextMenuItem>();
private renderRemoveMessage(object: KubeObject) {
const breadcrumbParts = [object.getNs(), object.getName()];
const breadcrumb = breadcrumbParts.filter(identity).join("/");
return (
@ -84,7 +59,7 @@ class NonInjectedKubeObjectMenu<TKubeObject extends KubeObject, Props extends Ku
);
}
getMenuItems(): React.ReactChild[] {
private renderMenuItems() {
const { object, toolbar } = this.props;
return this.props.kubeObjectMenuItems.map((MenuItem, index) => (
@ -92,43 +67,134 @@ class NonInjectedKubeObjectMenu<TKubeObject extends KubeObject, Props extends Ku
));
}
private emitOnContextMenuOpen(object: KubeObject) {
const {
apiManager,
editable,
removable,
hideDetails,
createEditResourceTab,
withConfirmation,
removeAction,
onContextMenuOpen,
navigate,
updateAction,
} = this.props;
const store = apiManager.getStore(object.selfLink);
const isEditable = editable ?? (Boolean(store?.patch) || Boolean(updateAction));
const isRemovable = removable ?? (Boolean(store?.remove) || Boolean(removeAction));
runInAction(() => {
this.menuItems.clear();
if (isRemovable) {
this.menuItems.push({
title: "Delete",
icon: "delete",
onClick: withConfirmation({
message: this.renderRemoveMessage(object),
labelOk: "Remove",
ok: async () => {
hideDetails();
if (removeAction) {
await removeAction();
} else if (store?.remove) {
await store.remove(object);
}
},
}),
});
}
if (isEditable) {
this.menuItems.push({
title: "Edit",
icon: "edit",
onClick: async () => {
hideDetails();
if (updateAction) {
await updateAction();
} else {
createEditResourceTab(object);
}
},
});
}
});
onContextMenuOpen(object, {
menuItems: this.menuItems,
navigate,
});
}
private renderContextMenuItems = (object: KubeObject) => (
[...this.menuItems]
.reverse() // This is done because the order that we "grow" is right->left
.map(({ icon, ...rest }) => ({
...rest,
icon: typeof icon === "string"
? { material: icon }
: icon,
}))
.map((item, index) => (
<MenuItem
key={`context-menu-item-${index}`}
onClick={() => item.onClick(object)}
data-testid={`menu-action-${item.title.toLowerCase().replace(/\s+/, "-")}`}
>
<Icon
{...item.icon}
interactive={this.props.toolbar}
tooltip={item.title}
/>
<span className="title">
{item.title}
</span>
</MenuItem>
))
);
render() {
const { remove, update, renderRemoveMessage, isEditable, isRemovable } = this;
const { className, editable, removable, ...menuProps } = this.props;
const {
className,
editable,
removable,
object,
removeAction, // This is here so we don't pass it down to `<MenuAction>`
removeConfirmationMessage, // This is here so we don't pass it down to `<MenuAction>`
updateAction, // This is here so we don't pass it down to `<MenuAction>`
...menuProps
} = this.props;
return (
<MenuActions
className={cssNames("KubeObjectMenu", className)}
updateAction={isEditable ? update : undefined}
removeAction={isRemovable ? remove : undefined}
removeConfirmationMessage={renderRemoveMessage}
onOpen={object ? () => this.emitOnContextMenuOpen(object) : undefined}
{...menuProps}
>
{this.getMenuItems()}
{this.renderMenuItems()}
{object && this.renderContextMenuItems(object)}
</MenuActions>
);
}
}
const InjectedKubeObjectMenu = withInjectables<Dependencies, KubeObjectMenuProps<KubeObject>>(
NonInjectedKubeObjectMenu,
{
getProps: (di, props) => ({
clusterName: di.inject(clusterNameInjectable),
apiManager: di.inject(apiManagerInjectable),
createEditResourceTab: di.inject(createEditResourceTabInjectable),
hideDetails: di.inject(hideDetailsInjectable),
kubeObjectMenuItems: di.inject(kubeObjectMenuItemsInjectable, {
kubeObject: props.object,
}),
...props,
export const KubeObjectMenu = withInjectables<Dependencies, KubeObjectMenuProps<KubeObject>>(NonInjectedKubeObjectMenu, {
getProps: (di, props) => ({
...props,
clusterName: di.inject(clusterNameInjectable),
apiManager: di.inject(apiManagerInjectable),
createEditResourceTab: di.inject(createEditResourceTabInjectable),
hideDetails: di.inject(hideDetailsInjectable),
kubeObjectMenuItems: di.inject(kubeObjectMenuItemsInjectable, {
kubeObject: props.object,
}),
},
);
export function KubeObjectMenu<T extends KubeObject>(
props: KubeObjectMenuProps<T>,
) {
return <InjectedKubeObjectMenu {...props} />;
}
onContextMenuOpen: di.inject(onKubeObjectContextMenuOpenInjectable),
navigate: di.inject(navigateInjectable),
withConfirmation: di.inject(withConfirmationInjectable),
}),
}) as <T extends KubeObject>(props: KubeObjectMenuProps<T>) => React.ReactElement;

27
src/renderer/components/kube-object-menu/on-context-menu-open.injectable.ts Normal file
View File

@ -0,0 +1,27 @@
/**
* 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 { KubeObject } from "../../../common/k8s-api/kube-object";
import type { KubeObjectOnContextMenuOpenContext } from "../../kube-object/handler";
import kubeObjectHandlersInjectable from "../../kube-object/handlers.injectable";
export type OnKubeObjectContextMenuOpen = (obj: KubeObject, ctx: KubeObjectOnContextMenuOpenContext) => void;
const onKubeObjectContextMenuOpenInjectable = getInjectable({
id: "on-kube-object-context-menu-open",
instantiate: (di): OnKubeObjectContextMenuOpen => {
const handlers = di.inject(kubeObjectHandlersInjectable);
return (obj, ctx) => {
const specificHandlers = handlers.get().get(obj.apiVersion)?.get(obj.kind) ?? [];
for (const { onContextMenuOpen } of specificHandlers) {
onContextMenuOpen?.(ctx);
}
};
},
});
export default onKubeObjectContextMenuOpenInjectable;

129
src/renderer/components/layout/sidebar-cluster.tsx
View File

@ -7,74 +7,52 @@ import styles from "./sidebar-cluster.module.scss";
import { observable } from "mobx";
import React, { useState } from "react";
import { broadcastMessage } from "../../../common/ipc";
import type { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../api/catalog-entity";
import type { CatalogEntity, CatalogEntityContextMenu } from "../../api/catalog-entity";
import { IpcRendererNavigationEvents } from "../../navigation/events";
import { Avatar } from "../avatar";
import { Icon } from "../icon";
import { navigate } from "../../navigation";
import { Menu, MenuItem } from "../menu";
import { ConfirmDialog } from "../confirm-dialog";
import { Tooltip } from "../tooltip";
import { withInjectables } from "@ogre-tools/injectable-react";
import hotbarStoreInjectable from "../../../common/hotbar-store.injectable";
import type { HotbarStore } from "../../../common/hotbar-store";
import { observer } from "mobx-react";
import type { Navigate } from "../../navigation/navigate.injectable";
import type { NormalizeCatalogEntityContextMenu } from "../../catalog/normalize-menu-item.injectable";
import navigateInjectable from "../../navigation/navigate.injectable";
import normalizeCatalogEntityContextMenuInjectable from "../../catalog/normalize-menu-item.injectable";
const contextMenu: CatalogEntityContextMenuContext = observable({
menuItems: [],
navigate: (url: string, forceMainFrame = true) => {
if (forceMainFrame) {
broadcastMessage(IpcRendererNavigationEvents.NAVIGATE_IN_APP, url);
} else {
navigate(url);
}
},
});
function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
if (menuItem.confirm) {
ConfirmDialog.open({
okButtonProps: {
primary: false,
accent: true,
},
ok: () => {
menuItem.onClick();
},
message: menuItem.confirm.message,
});
} else {
menuItem.onClick();
}
}
function renderLoadingSidebarCluster() {
return (
<div className={styles.SidebarCluster}>
<Avatar
title="??"
background="var(--halfGray)"
size={40}
className={styles.loadingAvatar}
/>
<div className={styles.loadingClusterName} />
</div>
);
}
interface Dependencies {
hotbarStore: HotbarStore;
}
interface SidebarClusterProps {
export interface SidebarClusterProps {
clusterEntity: CatalogEntity;
}
const NonInjectedSidebarCluster = observer(({ clusterEntity, hotbarStore }: Dependencies & SidebarClusterProps) => {
interface Dependencies {
navigate: Navigate;
normalizeMenuItem: NormalizeCatalogEntityContextMenu;
hotbarStore: HotbarStore;
}
function NonInjectedSidebarCluster({
clusterEntity,
hotbarStore,
navigate,
normalizeMenuItem,
}: SidebarClusterProps & Dependencies) {
const [opened, setOpened] = useState(false);
const [menuItems] = useState(observable.array<CatalogEntityContextMenu>());
if (!clusterEntity) {
return renderLoadingSidebarCluster();
// render a Loading version of the SidebarCluster
return (
<div className={styles.SidebarCluster}>
<Avatar
title="??"
background="var(--halfGray)"
size={40}
className={styles.loadingAvatar}
/>
<div className={styles.loadingClusterName} />
</div>
);
}
const onMenuOpen = () => {
@ -86,8 +64,17 @@ const NonInjectedSidebarCluster = observer(({ clusterEntity, hotbarStore }: Depe
? () => hotbarStore.removeFromHotbar(clusterEntity.getId())
: () => hotbarStore.addToHotbar(clusterEntity);
contextMenu.menuItems = [{ title, onClick }];
clusterEntity.onContextMenuOpen(contextMenu);
menuItems.replace([{ title, onClick }]);
clusterEntity.onContextMenuOpen({
menuItems,
navigate: (url, forceMainFrame = true) => {
if (forceMainFrame) {
broadcastMessage(IpcRendererNavigationEvents.NAVIGATE_IN_APP, url);
} else {
navigate(url);
}
},
});
toggle();
};
@ -139,24 +126,24 @@ const NonInjectedSidebarCluster = observer(({ clusterEntity, hotbarStore }: Depe
className={styles.menu}
>
{
contextMenu.menuItems.map((menuItem) => (
<MenuItem key={menuItem.title} onClick={() => onMenuItemClick(menuItem)}>
{menuItem.title}
</MenuItem>
))
menuItems
.map(normalizeMenuItem)
.map((menuItem) => (
<MenuItem key={menuItem.title} onClick={menuItem.onClick}>
{menuItem.title}
</MenuItem>
))
}
</Menu>
</div>
);
}
export const SidebarCluster = withInjectables<Dependencies, SidebarClusterProps>(NonInjectedSidebarCluster, {
getProps: (di, props) => ({
...props,
hotbarStore: di.inject(hotbarStoreInjectable),
navigate: di.inject(navigateInjectable),
normalizeMenuItem: di.inject(normalizeCatalogEntityContextMenuInjectable),
}),
});
export const SidebarCluster = withInjectables<Dependencies, SidebarClusterProps>(
NonInjectedSidebarCluster,
{
getProps: (di, props) => ({
hotbarStore: di.inject(hotbarStoreInjectable),
...props,
}),
},
);

82
src/renderer/components/menu/menu-actions.tsx
View File

@ -6,34 +6,47 @@
import "./menu-actions.scss";
import React, { isValidElement } from "react";
import { observable, makeObservable } from "mobx";
import { observer } from "mobx-react";
import { observable, makeObservable, reaction } from "mobx";
import { disposeOnUnmount, observer } from "mobx-react";
import { autoBind, cssNames } from "../../utils";
import { ConfirmDialog } from "../confirm-dialog";
import type { IconProps } from "../icon";
import { Icon } from "../icon";
import type { MenuProps } from "./menu";
import { Menu, MenuItem } from "./menu";
import uniqueId from "lodash/uniqueId";
import isString from "lodash/isString";
import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable";
import { withInjectables } from "@ogre-tools/injectable-react";
import openConfirmDialogInjectable from "../confirm-dialog/open.injectable";
export interface MenuActionsProps extends Partial<MenuProps> {
className?: string;
toolbar?: boolean; // display menu as toolbar with icons
autoCloseOnSelect?: boolean;
triggerIcon?: string | IconProps | React.ReactNode;
/**
* @deprecated Provide your own remove `<MenuItem>` as part of the `children` passed to this component
*/
removeConfirmationMessage?: React.ReactNode | (() => React.ReactNode);
updateAction?(): void;
removeAction?(): void;
onOpen?(): void;
/**
* @deprecated Provide your own update `<MenuItem>` as part of the `children` passed to this component
*/
updateAction?: () => void | Promise<void>;
/**
* @deprecated Provide your own remove `<MenuItem>` as part of the `children` passed to this component
*/
removeAction?: () => void | Promise<void>;
onOpen?: () => void;
}
interface Dependencies {
openConfirmDialog: OpenConfirmDialog;
}
@observer
export class MenuActions extends React.Component<MenuActionsProps> {
static defaultProps: MenuActionsProps = {
get removeConfirmationMessage() {
return `Remove item?`;
},
class NonInjectedMenuActions extends React.Component<MenuActionsProps & Dependencies> {
static defaultProps = {
removeConfirmationMessage: "Remove item?",
};
public id = uniqueId("menu_actions_");
@ -45,22 +58,34 @@ export class MenuActions extends React.Component<MenuActionsProps> {
this.isOpen = !this.isOpen;
};
constructor(props: MenuActionsProps) {
constructor(props: MenuActionsProps & Dependencies) {
super(props);
makeObservable(this);
autoBind(this);
}
componentDidMount(): void {
disposeOnUnmount(this, [
reaction(() => this.isOpen, (isOpen) => {
if (isOpen) {
this.props.onOpen?.();
}
}, {
fireImmediately: true,
}),
]);
}
remove() {
const { removeAction } = this.props;
const { removeAction, openConfirmDialog } = this.props;
let { removeConfirmationMessage } = this.props;
if (typeof removeConfirmationMessage === "function") {
removeConfirmationMessage = removeConfirmationMessage();
}
ConfirmDialog.open({
openConfirmDialog({
ok: removeAction,
labelOk: `Remove`,
labelOk: "Remove",
message: <div>{removeConfirmationMessage}</div>,
});
}
@ -83,10 +108,6 @@ export class MenuActions extends React.Component<MenuActionsProps> {
...(typeof triggerIcon === "object" ? triggerIcon : {}),
};
if (this.props.onOpen) {
iconProps.onClick = this.props.onOpen;
}
if (iconProps.tooltip && this.isOpen) {
delete iconProps.tooltip; // don't show tooltip for icon when menu is open
}
@ -101,10 +122,6 @@ export class MenuActions extends React.Component<MenuActionsProps> {
className, toolbar, autoCloseOnSelect, children, updateAction, removeAction, triggerIcon, removeConfirmationMessage,
...menuProps
} = this.props;
const menuClassName = cssNames("MenuActions flex", className, {
toolbar,
gaps: toolbar, // add spacing for .flex
});
const autoClose = !toolbar;
return (
@ -113,11 +130,17 @@ export class MenuActions extends React.Component<MenuActionsProps> {
<Menu
htmlFor={this.id}
isOpen={this.isOpen} open={this.toggle} close={this.toggle}
className={menuClassName}
isOpen={this.isOpen}
open={this.toggle}
close={this.toggle}
className={cssNames("MenuActions flex", className, {
toolbar,
gaps: toolbar, // add spacing for .flex
})}
animated={!toolbar}
usePortal={autoClose}
closeOnScroll={autoClose}
closeOnClickItem={autoCloseOnSelect ?? autoClose }
closeOnClickItem={autoCloseOnSelect ?? autoClose}
closeOnClickOutside={autoClose}
{...menuProps}
>
@ -139,3 +162,10 @@ export class MenuActions extends React.Component<MenuActionsProps> {
);
}
}
export const MenuActions = withInjectables<Dependencies, MenuActionsProps>(NonInjectedMenuActions, {
getProps: (di, props) => ({
...props,
openConfirmDialog: di.inject(openConfirmDialogInjectable),
}),
});

46
src/renderer/components/menu/menu.tsx
View File

@ -42,6 +42,7 @@ export interface MenuProps {
closeOnScroll?: boolean; // applicable when usePortal={true}
position?: MenuPosition; // applicable when usePortal={false}
children?: ReactNode;
animated?: boolean;
toggleEvent?: "click" | "contextmenu";
}
@ -58,6 +59,7 @@ const defaultPropsMenu: Partial<MenuProps> = {
closeOnClickOutside: true,
closeOnScroll: false,
toggleEvent: "click",
animated: true,
};
export class Menu extends React.Component<MenuProps, State> {
@ -297,7 +299,7 @@ export class Menu extends React.Component<MenuProps, State> {
}
render() {
const { position, id } = this.props;
const { position, id, animated } = this.props;
let { className, usePortal } = this.props;
className = cssNames("Menu", className, this.state.position || position, {
@ -319,28 +321,40 @@ export class Menu extends React.Component<MenuProps, State> {
return item;
});
const menu = (
<MenuContext.Provider value={this}>
let menu = (
<ul
id={id}
ref={this.bindRef}
className={className}
style={{
left: this.state?.menuStyle?.left,
top: this.state?.menuStyle?.top,
}}
onKeyDown={this.onKeyDown}
>
{menuItems}
</ul>
);
if (animated) {
menu = (
<Animate enter={this.isOpen}>
<ul
id={id}
ref={this.bindRef}
className={className}
style={{
left: this.state?.menuStyle?.left,
top: this.state?.menuStyle?.top,
}}
onKeyDown={this.onKeyDown}
>
{menuItems}
</ul>
{menu}
</Animate>
);
}
menu = (
<MenuContext.Provider value={this}>
{menu}
</MenuContext.Provider>
);
if (usePortal === true) usePortal = document.body;
return usePortal instanceof HTMLElement ? createPortal(menu, usePortal) : menu;
return usePortal instanceof HTMLElement
? createPortal(menu, usePortal)
: menu;
}
}

44
src/renderer/kube-object/handler.ts Normal file
View File

@ -0,0 +1,44 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RequireAtLeastOne } from "type-fest";
import type { KubeObject } from "../../common/k8s-api/kube-object";
import type { BaseIconProps } from "../components/icon";
export interface KubeObjectContextMenuItem {
/**
* If the type is `string` then it is shorthand for {@link BaseIconProps.material}
*
* This is required because this item can be either rendered as a context menu or as a toolbar in
* the kube object details page.
*/
icon: string | BaseIconProps;
/**
* The title text for the menu item or the hover text for the icon.
*/
title: string;
/**
* The action when clicked
*/
onClick: (obj: KubeObject) => void;
}
export interface KubeObjectOnContextMenuOpenContext {
menuItems: KubeObjectContextMenuItem[];
navigate: (location: string) => void;
}
export type KubeObjectOnContextMenuOpen = (ctx: KubeObjectOnContextMenuOpenContext) => void;
export interface KubeObjectHandlers {
onContextMenuOpen: KubeObjectOnContextMenuOpen;
}
export type KubeObjectHandlerRegistration = {
apiVersions: string[];
kind: string;
} & RequireAtLeastOne<KubeObjectHandlers>;

41
src/renderer/kube-object/handlers.injectable.ts Normal file
View File

@ -0,0 +1,41 @@
/**
* 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 rendererExtensionsInjectable from "../../extensions/renderer-extensions.injectable";
import { getOrInsert, getOrInsertMap, readonly } from "../utils";
import type { KubeObjectHandlerRegistration, KubeObjectHandlers } from "./handler";
import { staticKubeObjectContextMenuHandlers } from "./static-handlers";
const kubeObjectHandlersInjectable = getInjectable({
id: "kube-object-handlers",
instantiate: (di) => {
const extensions = di.inject(rendererExtensionsInjectable);
return computed(() => {
const res = new Map<string, Map<string, Partial<KubeObjectHandlers>[]>>();
const addAllHandlers = (registrations: KubeObjectHandlerRegistration[]) => {
for (const { apiVersions, kind, ...handlers } of registrations) {
for (const apiVersion of apiVersions) {
const byApiVersion = getOrInsertMap(res, apiVersion);
const byKind = getOrInsert(byApiVersion, kind, []);
byKind.push(handlers);
}
}
};
extensions.get()
.map(ext => ext.kubeObjectHandlers)
.forEach(addAllHandlers);
addAllHandlers(staticKubeObjectContextMenuHandlers);
return readonly(res);
});
},
});
export default kubeObjectHandlersInjectable;

22
src/renderer/kube-object/static-handlers.ts Normal file
View File

@ -0,0 +1,22 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { KubeObjectHandlerRegistration } from "./handler";
import { StatefulSetScaleDialog } from "../components/+workloads-statefulsets/statefulset-scale-dialog";
import type { StatefulSet } from "../../common/k8s-api/endpoints";
export const staticKubeObjectContextMenuHandlers: KubeObjectHandlerRegistration[] = [
{
kind: "StatefulSet",
apiVersions: ["apps/v1"],
onContextMenuOpen: (ctx) => {
ctx.menuItems.push({
icon: "open_with",
title: "Scale",
onClick: (obj: StatefulSet) => StatefulSetScaleDialog.open(obj),
});
},
},
];

3
src/renderer/navigation/helpers.ts
View File

@ -11,6 +11,9 @@ import { navigation } from "./history";
import type { PageParamInit } from "./page-param";
import { PageParam } from "./page-param";
/**
* @deprecated use `di.inject(navigateInjectable)` instead
*/
export function navigate(location: LocationDescriptor) {
const currentLocation = createPath(navigation.location);

16
src/renderer/navigation/navigate.injectable.ts Normal file
View File

@ -0,0 +1,16 @@
/**
* 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 { LocationDescriptor } from "history";
import { navigate } from "./helpers";
export type Navigate = (desc: LocationDescriptor) => void;
const navigateInjectable = getInjectable({
id: "navigate",
instantiate: (): Navigate => (desc) => navigate(desc),
});
export default navigateInjectable;

2
src/renderer/protocol-handler/bind-protocol-add-route-handlers/bind-protocol-add-route-handlers.injectable.ts
View File

@ -3,7 +3,7 @@
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { getInjectable } from "@ogre-tools/injectable";
import attemptInstallByInfoInjectable from "../../components/+extensions/attempt-install-by-info/attempt-install-by-info.injectable";
import attemptInstallByInfoInjectable from "../../components/+extensions/attempt-install-by-info.injectable";
import { bindProtocolAddRouteHandlers } from "./bind-protocol-add-route-handlers";
import lensProtocolRouterRendererInjectable from "../lens-protocol-router-renderer/lens-protocol-router-renderer.injectable";
import navigateToCatalogInjectable from "../../../common/front-end-routing/routes/catalog/navigate-to-catalog.injectable";

4
src/renderer/protocol-handler/bind-protocol-add-route-handlers/bind-protocol-add-route-handlers.tsx
View File

@ -13,13 +13,13 @@ import {
LensProtocolRouter,
} from "../../../common/protocol-handler";
import { Notifications } from "../../components/notifications";
import type { ExtensionInfo } from "../../components/+extensions/attempt-install-by-info/attempt-install-by-info";
import type { NavigateToCatalog } from "../../../common/front-end-routing/routes/catalog/navigate-to-catalog.injectable";
import type { NavigateToEntitySettings } from "../../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
import type { NavigateToClusterView } from "../../../common/front-end-routing/routes/cluster-view/navigate-to-cluster-view.injectable";
import type { AttemptInstallByInfo } from "../../components/+extensions/attempt-install-by-info.injectable";
interface Dependencies {
attemptInstallByInfo: (extensionInfo: ExtensionInfo) => Promise<void>;
attemptInstallByInfo: AttemptInstallByInfo;
lensProtocolRouterRenderer: LensProtocolRouterRenderer;
navigateToCatalog: NavigateToCatalog;
navigateToAddCluster: () => void;