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

Merge branch 'master' into turn-on-strict

Browse Source
This commit is contained in:
Sebastian Malton 2022-05-04 16:25:21 -04:00
commit d972ca2aa5
49 changed files with 1172 additions and 745 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -293,11 +293,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

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

4
src/common/utils/type-narrowing.ts
View File

@ -133,6 +133,10 @@ export function bindPredicate<FnArgs extends any[], T>(fn: (arg1: unknown, ...ar
return (arg1: unknown): arg1 is T => fn(arg1, ...boundArgs);
}
export function hasDefiniteField<Field extends keyof T, T>(field: Field): (val: T) => val is T & { [f in Field]-?: NonNullable<T[Field]> } {
return (val): val is T & { [f in Field]-?: NonNullable<T[Field]> } => val[field] != null;
}
export function isErrnoException(error: unknown): error is NodeJS.ErrnoException {
return isObject(error)
&& hasOptionalTypedProperty(error, "code", isString)

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

@ -18,13 +18,14 @@ 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 { fromPairs, map, matches, toPairs } from "lodash/fp";
import { pipeline } from "@ogre-tools/fp";
import { getExtensionRoutePath } from "../renderer/routes/for-extension";
import type { LensRendererExtensionDependencies } from "./lens-extension-set-dependencies";
import type { KubeObjectHandlerRegistration } from "../renderer/kube-object/handler";
export class LensRendererExtension extends LensExtension<LensRendererExtensionDependencies> {
globalPages: registries.PageRegistration[] = [];
@ -44,6 +45,7 @@ export class LensRendererExtension extends LensExtension<LensRendererExtensionDe
topBarItems: TopBarRegistration[] = [];
additionalCategoryColumns: AdditionalCategoryColumnRegistration[] = [];
customCategoryViews: CustomCategoryViewRegistration[] = [];
kubeObjectHandlers: KubeObjectHandlerRegistration[] = [];
async navigate(pageId?: string, params: object = {}) {
const routes = this[lensExtensionDependencies].routes.get();

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

@ -15,6 +15,10 @@ import sendCommandInjectable from "../../renderer/components/dock/terminal/send-
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 { podStore } from "../../renderer/components/+workloads-pods/legacy-store";
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";
@ -41,6 +45,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";
@ -48,7 +62,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;

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

@ -4,81 +4,61 @@
*/
import React from "react";
import { cssNames } from "../../utils";
import { cssNames, hasDefiniteField } from "../../utils";
import type { MenuActionsProps } from "../menu/menu-actions";
import { MenuActions } from "../menu/menu-actions";
import type { CatalogEntity, CatalogEntityContextMenu } from "../../api/catalog-entity";
import { observer } from "mobx-react";
import { 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 type { OnContextMenuOpen } from "../../../common/catalog/on-context-menu-open.injectable";
import { withInjectables } from "@ogre-tools/injectable-react";
import onContextMenuOpenInjectable from "../../../common/catalog/on-context-menu-open.injectable";
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<Entity extends CatalogEntity> extends MenuActionsProps {
entity: Entity;
}
interface Dependencies {
normalizeMenuItem: NormalizeCatalogEntityContextMenu;
navigate: Navigate;
onContextMenuOpen: OnContextMenuOpen;
}
@observer
class NonInjectedCatalogEntityDrawerMenu<Entity extends CatalogEntity> extends React.Component<Dependencies & CatalogEntityDrawerMenuProps<Entity>> {
class NonInjectedCatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Component<CatalogEntityDrawerMenuProps<T> & Dependencies> {
private readonly menuItems = observable.array<CatalogEntityContextMenu>();
componentDidMount() {
this.props.onContextMenuOpen(this.props.entity, {
menuItems: this.menuItems,
navigate: (url) => navigate(url),
navigate: this.props.navigate,
});
}
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: Entity): React.ReactChild[] {
getMenuItems(entity: T): React.ReactChild[] {
if (!entity) {
return [];
}
const items: React.ReactChild[] = [];
for (const menuItem of this.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.menuItems
.map(this.props.normalizeMenuItem)
.filter(hasDefiniteField("icon"))
.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
@ -129,5 +109,7 @@ export const CatalogEntityDrawerMenu = withInjectables<Dependencies, CatalogEnti
getProps: (di, props) => ({
...props,
onContextMenuOpen: di.inject(onContextMenuOpenInjectable),
normalizeMenuItem: di.inject(normalizeCatalogEntityContextMenuInjectable),
navigate: di.inject(navigateInjectable),
}),
}) as <Entity extends CatalogEntity>(props: CatalogEntityDrawerMenuProps<Entity>) => JSX.Element;

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

@ -11,10 +11,8 @@ 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 } from "../../api/catalog-entity";
import { ConfirmDialog } from "../confirm-dialog";
import type { CatalogCategory, CatalogCategoryRegistry, CatalogEntity } from "../../../common/catalog";
import { CatalogAddButton } from "./catalog-add-button";
import { Notifications } from "../notifications";
@ -46,6 +44,10 @@ import type { HotbarStore } from "../../../common/hotbars/store";
import type { OnContextMenuOpen } from "../../../common/catalog/on-context-menu-open.injectable";
import catalogCategoryRegistryInjectable from "../../../common/catalog/category-registry.injectable";
import onContextMenuOpenInjectable from "../../../common/catalog/on-context-menu-open.injectable";
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: StorageLayer<string | null>;
@ -61,6 +63,8 @@ interface Dependencies {
hotbarStore: HotbarStore;
catalogCategoryRegistry: CatalogCategoryRegistry;
onContextMenuOpen: OnContextMenuOpen;
navigate: Navigate;
normalizeMenuItem: NormalizeCatalogEntityContextMenu;
}
@observer
@ -160,23 +164,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 this.props.catalogCategoryRegistry.items;
}
@ -206,7 +193,7 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
this.menuItems.clear();
this.props.onContextMenuOpen(entity, {
menuItems: this.menuItems,
navigate: (url) => navigate(url),
navigate: this.props.navigate,
});
};
@ -219,11 +206,13 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
View Details
</MenuItem>
{
this.menuItems.map((menuItem, index) => (
<MenuItem key={index} onClick={() => this.onMenuItemClick(menuItem)}>
{menuItem.title}
</MenuItem>
))
this.menuItems
.map(this.props.normalizeMenuItem)
.map((menuItem, index) => (
<MenuItem key={index} onClick={menuItem.onClick}>
{menuItem.title}
</MenuItem>
))
}
<HotbarToggleMenuItem
key="hotbar-toggle"
@ -358,8 +347,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),
@ -370,5 +360,7 @@ export const Catalog = withInjectables<Dependencies>( NonInjectedCatalog, {
hotbarStore: di.inject(hotbarStoreInjectable),
catalogCategoryRegistry: di.inject(catalogCategoryRegistryInjectable),
onContextMenuOpen: di.inject(onContextMenuOpenInjectable),
navigate: di.inject(navigateInjectable),
normalizeMenuItem: di.inject(normalizeCatalogEntityContextMenuInjectable),
}),
});

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

@ -0,0 +1,152 @@
/**
* 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 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";
import { reduce } from "lodash";
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);
const latestVersion = reduce(versions, (prev, curr) => prev.compareMain(curr) === -1 ? curr : prev);
if (!latestVersion) {
console.error("No versions supplied for that extension", { name });
Notifications.error(`No versions found for ${name}`);
return disposer();
}
finalVersion = latestVersion.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();
}
}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
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;

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

@ -1,124 +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);
const latestVersion = lodash.reduce(versions, (prev, curr) => prev.compareMain(curr) === -1 ? curr : prev);
if (!latestVersion) {
console.error("No versions supplied for that extension", { name });
Notifications.error(`No versions found for ${name}`);
return disposer();
}
version = latestVersion.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();
}
}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
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);
};

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

@ -0,0 +1,56 @@
/**
* 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;

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

@ -1,37 +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";
import { AsyncInputValidationError } from "../../input/input_validators";

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

@ -12,7 +12,6 @@ import React from "react";
import type { ClusterRoleBinding } 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 { clusterRoleBindingStore } from "./legacy-store";
import { hashSubject } 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([], hashSubject);
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: () => clusterRoleBindingStore.removeSubjects(clusterRoleBinding, selectedSubjects),
labelOk: `Remove`,
message: (
@ -127,3 +133,10 @@ export class ClusterRoleBindingDetails extends React.Component<ClusterRoleBindin
);
}
}
export const ClusterRoleBindingDetails = withInjectables<Dependencies, ClusterRoleBindingDetailsProps>(NonInjectedClusterRoleBindingDetails, {
getProps: (di, props) => ({
...props,
openConfirmDialog: di.inject(openConfirmDialogInjectable),
}),
});

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

@ -11,7 +11,6 @@ import React from "react";
import type { RoleBinding } 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,13 +19,20 @@ import { RoleBindingDialog } from "./dialog";
import { roleBindingStore } from "./legacy-store";
import { ObservableHashSet } from "../../../../common/utils/hash-set";
import { hashSubject } 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> {
selectedSubjects = new ObservableHashSet([], hashSubject);
class NonInjectedRoleBindingDetails extends React.Component<RoleBindingDetailsProps & Dependencies> {
private readonly selectedSubjects = new ObservableHashSet([], hashSubject);
async componentDidMount() {
disposeOnUnmount(this, [
@ -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: () => roleBindingStore.removeSubjects(roleBinding, selectedSubjects.toJSON()),
labelOk: `Remove`,
message: (
@ -122,3 +128,10 @@ export class RoleBindingDetails extends React.Component<RoleBindingDetailsProps>
);
}
}
export const RoleBindingDetails = withInjectables<Dependencies, RoleBindingDetailsProps>(NonInjectedRoleBindingDetails, {
getProps: (di, props) => ({
...props,
openConfirmDialog: di.inject(openConfirmDialogInjectable),
}),
});

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

@ -9,80 +9,95 @@ 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>
</MenuItem>
{object.isSuspend()
? (
<MenuItem
onClick={() => ConfirmDialog.open({
ok: async () => {
try {
await cronJobApi.resume({ namespace: object.getNs(), name: object.getName() });
} catch (err) {
Notifications.checkedError(err, "Unknown error occured while resuming CronJob");
}
},
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={() => ConfirmDialog.open({
ok: async () => {
try {
await cronJobApi.suspend({ namespace: object.getNs(), name: object.getName() });
} catch (err) {
Notifications.checkedError(err, "Unknown error occured while suspending CronJob");
}
},
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>
)
}
</>
);
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.checkedError(err, "Unknown error occured while resuming CronJob");
}
},
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.checkedError(err, "Unknown error occured while suspending CronJob");
}
},
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),
}),
});

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

@ -7,18 +7,20 @@ import type { KubeObjectMenuProps } from "../kube-object-menu";
import type { Deployment, DeploymentApi } from "../../../common/k8s-api/endpoints";
import { MenuItem } from "../menu";
import { Icon } from "../icon";
import { ConfirmDialog } from "../confirm-dialog";
import { Notifications } from "../notifications";
import type { OpenDeploymentScaleDialog } from "./scale/open.injectable";
import { withInjectables } from "@ogre-tools/injectable-react";
import deploymentApiInjectable from "../../../common/k8s-api/endpoints/deployment.api.injectable";
import openDeploymentScaleDialogInjectable from "./scale/open.injectable";
import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable";
import openConfirmDialogInjectable from "../confirm-dialog/open.injectable";
export interface DeploymentMenuProps extends KubeObjectMenuProps<Deployment> {}
interface Dependencies {
openDeploymentScaleDialog: OpenDeploymentScaleDialog;
deploymentApi: DeploymentApi;
openConfirmDialog: OpenConfirmDialog;
}
const NonInjectedDeploymentMenu = ({
@ -26,6 +28,7 @@ const NonInjectedDeploymentMenu = ({
object,
openDeploymentScaleDialog,
toolbar,
openConfirmDialog,
}: Dependencies & DeploymentMenuProps) => (
<>
<MenuItem onClick={() => openDeploymentScaleDialog(object)}>
@ -37,7 +40,7 @@ const NonInjectedDeploymentMenu = ({
<span className="title">Scale</span>
</MenuItem>
<MenuItem
onClick={() => ConfirmDialog.open({
onClick={() => openConfirmDialog({
ok: async () =>
{
try {
@ -74,5 +77,6 @@ export const DeploymentMenu = withInjectables<Dependencies, DeploymentMenuProps>
...props,
deploymentApi: di.inject(deploymentApiInjectable),
openDeploymentScaleDialog: di.inject(openDeploymentScaleDialogInjectable),
openConfirmDialog: di.inject(openConfirmDialogInjectable),
}),
});

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

@ -1,42 +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 { Icon } from "../icon";
import type { OpenStatefulSetScaleDialog } from "./scale/open-dialog.injectable";
import { withInjectables } from "@ogre-tools/injectable-react";
import openStatefulSetScaleDialogInjectable from "./scale/open-dialog.injectable";
export interface StatefulSetMenuProps extends KubeObjectMenuProps<StatefulSet> {}
interface Dependencies {
openStatefulSetScaleDialog: OpenStatefulSetScaleDialog;
}
const NonInjectedStatefulSetMenu = ({
object,
toolbar,
openStatefulSetScaleDialog,
}: Dependencies & StatefulSetMenuProps) => (
<>
<MenuItem onClick={() => openStatefulSetScaleDialog(object)}>
<Icon
material="open_with"
tooltip="Scale"
interactive={toolbar}
/>
<span className="title">Scale</span>
</MenuItem>
</>
);
export const StatefulSetMenu = withInjectables<Dependencies, StatefulSetMenuProps>(NonInjectedStatefulSetMenu, {
getProps: (di, props) => ({
...props,
openStatefulSetScaleDialog: di.inject(openStatefulSetScaleDialogInjectable),
}),
});

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;
@ -47,15 +47,24 @@ class DefaultedAnimate extends React.Component<AnimateProps & typeof DefaultedAn
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() {

57
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,6 +37,10 @@ export interface ConfirmDialogBooleanParams {
cancelButtonProps?: Partial<ButtonProps>;
}
interface Dependencies {
state: IObservableValue<ConfirmDialogParams | undefined>;
}
const defaultParams = {
ok: noop,
cancel: noop,
@ -42,41 +49,18 @@ const defaultParams = {
icon: <Icon big material="warning"/>,
};
const dialogState = observable.box<ConfirmDialogParams | undefined>();
@observer
export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
class NonInjectedConfirmDialog extends React.Component<ConfirmDialogProps & Dependencies> {
@observable isSaving = false;
constructor(props: ConfirmDialogProps & typeof defaultParams) {
constructor(props: ConfirmDialogProps & Dependencies) {
super(props);
makeObservable(this);
}
static open(params: ConfirmDialogParams) {
dialogState.set(params);
}
static confirm(params: ConfirmDialogBooleanParams): Promise<boolean> {
return new Promise(resolve => {
ConfirmDialog.open({
ok: () => resolve(true),
cancel: () => resolve(false),
...params,
});
});
}
static defaultParams = {
ok: noop,
cancel: noop,
labelOk: "Ok",
labelCancel: "Cancel",
icon: <Icon big material="warning"/>,
};
@computed
get params() {
return Object.assign({}, ConfirmDialog.defaultParams, dialogState.get());
return Object.assign({}, defaultParams, this.props.state.get() ?? {} as ConfirmDialogParams);
}
ok = async () => {
@ -100,7 +84,7 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
);
} finally {
this.isSaving = false;
dialogState.set(undefined);
this.props.state.set(undefined);
}
};
@ -128,18 +112,18 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
);
} finally {
this.isSaving = false;
dialogState.set(undefined);
this.props.state.set(undefined);
}
};
render() {
const { className, ...dialogProps } = this.props;
const { state, className, ...dialogProps } = this.props;
const isOpen = Boolean(state.get());
const {
icon, labelOk, labelCancel, message,
okButtonProps = {},
cancelButtonProps = {},
} = this.params;
const isOpen = Boolean(dialogState.get());
return (
<Dialog
@ -151,7 +135,7 @@ export class ConfirmDialog extends React.Component<ConfirmDialogProps> {
{...(isOpen ? { "data-testid": "confirmation-dialog" } : {})}
>
<div className="confirm-content">
{icon}
{icon}
{" "}
{message}
</div>
@ -178,3 +162,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

@ -208,7 +208,7 @@ class NonInjectedDrawer extends React.Component<DrawerProps & Dependencies & typ
)}
</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);
@ -88,13 +83,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),
}),
});

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

@ -7,19 +7,22 @@ import React from "react";
import { observer } from "mobx-react";
import { Select } from "../select";
import hotbarStoreInjectable from "../../../common/hotbars/store.injectable";
import { ConfirmDialog } from "../confirm-dialog";
import { withInjectables } from "@ogre-tools/injectable-react";
import commandOverlayInjectable from "../command-palette/command-overlay.injectable";
import type { HotbarStore } from "../../../common/hotbars/store";
import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable";
import openConfirmDialogInjectable from "../confirm-dialog/open.injectable";
interface Dependencies {
closeCommandOverlay: () => void;
openConfirmDialog: OpenConfirmDialog;
hotbarStore: HotbarStore;
}
const NonInjectedHotbarRemoveCommand = observer(({
closeCommandOverlay,
hotbarStore,
openConfirmDialog,
}: Dependencies) => (
<Select
menuPortalTarget={null}
@ -29,8 +32,7 @@ const NonInjectedHotbarRemoveCommand = observer(({
}
closeCommandOverlay();
// TODO: make confirm dialog injectable
ConfirmDialog.open({
openConfirmDialog({
okButtonProps: {
label: "Remove Hotbar",
primary: false,
@ -68,8 +70,9 @@ const NonInjectedHotbarRemoveCommand = observer(({
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

@ -14,22 +14,69 @@ import { withTooltip } from "../tooltip";
import isNumber from "lodash/isNumber";
import { decode } from "../../../common/utils/base64";
export interface IconProps extends React.HTMLAttributes<any> {
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>, BaseIconProps {}
export function isSvg(content: string): boolean {
// data-url for raw svg-icon
return String(content).includes("svg+xml");

9
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";
@ -30,6 +29,8 @@ import type { ItemListStore } from "./list-layout";
import { withInjectables } from "@ogre-tools/injectable-react";
import themeStoreInjectable from "../../themes/store.injectable";
import pageFiltersStoreInjectable from "./page-filters/store.injectable";
import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable";
import openConfirmDialogInjectable from "../confirm-dialog/open.injectable";
export interface ItemListLayoutContentProps<Item extends ItemObject, PreLoadStores extends boolean> {
getFilters: () => Filter[];
@ -69,6 +70,7 @@ export interface ItemListLayoutContentProps<Item extends ItemObject, PreLoadStor
interface Dependencies {
themeStore: ThemeStore;
pageFiltersStore: PageFiltersStore;
openConfirmDialog: OpenConfirmDialog;
}
@observer
@ -161,7 +163,7 @@ class NonInjectedItemListLayoutContent<
}
removeItemsDialog(selectedItems: Item[]) {
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) : {};
@ -203,7 +205,7 @@ class NonInjectedItemListLayoutContent<
? removeSelectedItems.bind(store)
: noop;
ConfirmDialog.open({
openConfirmDialog({
ok: onConfirm,
labelOk: "Remove",
message,
@ -372,5 +374,6 @@ export const ItemListLayoutContent = withInjectables<Dependencies, ItemListLayou
...props,
themeStore: di.inject(themeStoreInjectable),
pageFiltersStore: di.inject(pageFiltersStoreInjectable),
openConfirmDialog: di.inject(openConfirmDialogInjectable),
}),
}) as <Item extends ItemObject, PreLoadStores extends boolean>(props: ItemListLayoutContentProps<Item, PreLoadStores>) => 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,19 +96,19 @@ exports[`kube-object-menu given kube object when removing kube object renders 1`
</span>
</i>
<div>
<p>
Remove some-kind
<b>
some-namespace/some-name
</b>
from
<b>
Some name
</b>
?
</p>
</div>
<p>
Remove
some-kind
<b>
some-namespace/some-name
</b>
from
<b>
Some name
</b>
?
</p>
</div>
<div
class="confirm-buttons"
@ -140,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
@ -173,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"
@ -194,19 +189,19 @@ exports[`kube-object-menu given kube object with namespace when removing kube ob
</span>
</i>
<div>
<p>
Remove some-kind
<b>
some-namespace/some-name
</b>
from
<b>
Some name
</b>
?
</p>
</div>
<p>
Remove
some-kind
<b>
some-namespace/some-name
</b>
from
<b>
Some name
</b>
?
</p>
</div>
<div
class="confirm-buttons"
@ -235,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
@ -268,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"
@ -289,19 +282,19 @@ exports[`kube-object-menu given kube object without namespace when removing kube
</span>
</i>
<div>
<p>
Remove some-kind
<b>
some-name
</b>
from
<b>
Some name
</b>
?
</p>
</div>
<p>
Remove
some-kind
<b>
some-name
</b>
from
<b>
Some name
</b>
?
</p>
</div>
<div
class="confirm-buttons"
@ -329,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>

2
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[];

19
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,12 +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 type { KubeObjectMenuRegistration } from "./kube-object-menu-registration";
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 = [
{
@ -38,11 +36,4 @@ export const staticKubeObjectMenuItems = [
MenuItem: ReplicaSetMenu,
},
},
{
kind: "StatefulSet",
apiVersions: ["apps/v1"],
components: {
MenuItem: StatefulSetMenu,
},
},
] as KubeObjectMenuRegistration[];
];

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";
@ -20,7 +20,7 @@ import type { Cluster } from "../../../common/cluster/cluster";
import type { ApiManager } from "../../../common/k8s-api/api-manager";
import apiManagerInjectable from "../../../common/k8s-api/api-manager/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";
@ -33,6 +33,8 @@ jest.mock("../tooltip/withTooltip", () => ({
withTooltip: (target: any) => target,
}));
// TODO: make `animated={false}` not required to make tests deterministic
class SomeTestExtension extends LensRendererExtension {
constructor(
kubeObjectMenuItems: KubeObjectMenuRegistration[],
@ -143,7 +145,7 @@ describe("kube-object-menu", () => {
({ baseElement } = render(
<div>
<ConfirmDialog />
<ConfirmDialog animated={false} />
<KubeObjectMenu
object={objectStub}
@ -163,23 +165,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);
});
@ -188,14 +185,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);
@ -257,7 +255,7 @@ describe("kube-object-menu", () => {
({ baseElement } = render(
<div>
<ConfirmDialog />
<ConfirmDialog animated={false} />
<KubeObjectMenu
object={objectStub}
@ -268,8 +266,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);

189
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";
@ -17,6 +17,16 @@ import kubeObjectMenuItemsInjectable from "./dependencies/kube-object-menu-items
import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
import type { HideDetails } from "../kube-detail-params/hide-details.injectable";
import hideDetailsInjectable from "../kube-detail-params/hide-details.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;
@ -30,51 +40,17 @@ interface Dependencies {
clusterName: string | undefined;
hideDetails: HideDetails;
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?.selfLink) 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(object: KubeObject) {
this.props.hideDetails();
this.props.createEditResourceTab(object);
}
async remove(object: KubeObject) {
const { hideDetails, removeAction = this.store?.remove } = this.props;
hideDetails();
await removeAction?.(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 (
@ -88,10 +64,8 @@ class NonInjectedKubeObjectMenu<TKubeObject extends KubeObject, Props extends Ku
);
}
getMenuItems(object: KubeObject, toolbar: boolean): React.ReactChild[] {
if (!object) {
return [];
}
private renderMenuItems() {
const { object, toolbar } = this.props;
return this.props.kubeObjectMenuItems.map((MenuItem, index) => (
<MenuItem
@ -102,25 +76,123 @@ 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, object, ...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={(object && isEditable) ? (() => update(object)) : undefined}
removeAction={(object && isRemovable) ? (() => remove(object)) : undefined}
removeConfirmationMessage={renderRemoveMessage}
onOpen={object ? () => this.emitOnContextMenuOpen(object) : undefined}
{...menuProps}
>
{this.getMenuItems(object, this.props.toolbar ?? false)}
{this.renderMenuItems()}
{object && this.renderContextMenuItems(object)}
</MenuActions>
);
}
}
const InjectedKubeObjectMenu = withInjectables<Dependencies, KubeObjectMenuProps<KubeObject>>(NonInjectedKubeObjectMenu, {
export const KubeObjectMenu = withInjectables<Dependencies, KubeObjectMenuProps<KubeObject>>(NonInjectedKubeObjectMenu, {
getProps: (di, props) => ({
...props,
clusterName: di.inject(clusterNameInjectable),
@ -130,9 +202,8 @@ const InjectedKubeObjectMenu = withInjectables<Dependencies, KubeObjectMenuProps
kubeObjectMenuItems: di.inject(kubeObjectMenuItemsInjectable, {
kubeObject: props.object,
}),
onContextMenuOpen: di.inject(onKubeObjectContextMenuOpenInjectable),
navigate: di.inject(navigateInjectable),
withConfirmation: di.inject(withConfirmationInjectable),
}),
});
export function KubeObjectMenu<T extends KubeObject>(props: KubeObjectMenuProps<T>) {
return <InjectedKubeObjectMenu {...props} />;
}
}) 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;

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

@ -7,13 +7,11 @@ 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/hotbars/store.injectable";
@ -21,67 +19,45 @@ import type { HotbarStore } from "../../../common/hotbars/store";
import { observer } from "mobx-react";
import type { OnContextMenuOpen } from "../../../common/catalog/on-context-menu-open.injectable";
import onContextMenuOpenInjectable from "../../../common/catalog/on-context-menu-open.injectable";
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>
);
export interface SidebarClusterProps {
clusterEntity: CatalogEntity;
}
interface Dependencies {
navigate: Navigate;
normalizeMenuItem: NormalizeCatalogEntityContextMenu;
hotbarStore: HotbarStore;
onContextMenuOpen: OnContextMenuOpen;
}
interface SidebarClusterProps {
clusterEntity: CatalogEntity | undefined;
}
const NonInjectedSidebarCluster = observer(({
clusterEntity,
hotbarStore,
onContextMenuOpen,
navigate,
normalizeMenuItem,
}: Dependencies & SidebarClusterProps) => {
const [opened, setOpened] = useState(false);
const [menuItems] = useState(observable.array<CatalogEntityContextMenu>());
const [opened, setOpened] = useState(false );
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 = () => {
@ -93,8 +69,17 @@ const NonInjectedSidebarCluster = observer(({
? () => hotbarStore.removeFromHotbar(clusterEntity.getId())
: () => hotbarStore.addToHotbar(clusterEntity);
contextMenu.menuItems = [{ title, onClick }];
onContextMenuOpen(clusterEntity, contextMenu);
menuItems.replace([{ title, onClick }]);
onContextMenuOpen(clusterEntity, {
menuItems,
navigate: (url, forceMainFrame = true) => {
if (forceMainFrame) {
broadcastMessage(IpcRendererNavigationEvents.NAVIGATE_IN_APP, url);
} else {
navigate(url);
}
},
});
toggle();
};
@ -146,11 +131,13 @@ const NonInjectedSidebarCluster = observer(({
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>
@ -162,5 +149,7 @@ export const SidebarCluster = withInjectables<Dependencies, SidebarClusterProps>
...props,
hotbarStore: di.inject(hotbarStoreInjectable),
onContextMenuOpen: di.inject(onContextMenuOpenInjectable),
navigate: di.inject(navigateInjectable),
normalizeMenuItem: di.inject(normalizeCatalogEntityContextMenuInjectable),
}),
});

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

@ -6,10 +6,9 @@
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";
@ -17,24 +16,38 @@ import { Menu, MenuItem } from "./menu";
import uniqueId from "lodash/uniqueId";
import isString from "lodash/isString";
import type { TooltipDecoratorProps } from "../tooltip";
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 & TooltipDecoratorProps) | React.ReactNode;
/**
* @deprecated Provide your own remove `<MenuItem>` as part of the `children` passed to this component
*/
removeConfirmationMessage?: React.ReactNode | (() => React.ReactNode);
/**
* @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;
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_");
@ -46,22 +59,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>,
});
}
@ -84,10 +109,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
}
@ -102,10 +123,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 (
@ -117,10 +134,14 @@ export class MenuActions extends React.Component<MenuActionsProps> {
isOpen={this.isOpen}
open={this.toggle}
close={this.toggle}
className={menuClassName}
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}
>
@ -150,3 +171,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> {
@ -311,7 +313,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, {
@ -333,28 +335,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;
}
}

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

@ -0,0 +1,49 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { getInjectionToken } from "@ogre-tools/injectable";
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>;
export const staticKubeObjectHandlerInjectionToken = getInjectionToken<KubeObjectHandlerRegistration>({
id: "static-kube-object-handler-token",
});

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

@ -0,0 +1,42 @@
/**
* 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 { staticKubeObjectHandlerInjectionToken } from "./handler";
const kubeObjectHandlersInjectable = getInjectable({
id: "kube-object-handlers",
instantiate: (di) => {
const extensions = di.inject(rendererExtensionsInjectable);
const staticKubeObjectContextMenuHandlers = di.injectMany(staticKubeObjectHandlerInjectionToken);
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;

30
src/renderer/kube-object/handlers/stateful-set.injectable.ts Normal file
View File

@ -0,0 +1,30 @@
/**
* 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 { StatefulSet } from "../../../common/k8s-api/endpoints";
import openStatefulSetScaleDialogInjectable from "../../components/+workloads-statefulsets/scale/open-dialog.injectable";
import { staticKubeObjectHandlerInjectionToken } from "../handler";
const statefulSetKubeObjectHandlerInjectable = getInjectable({
id: "stateful-set-kube-object-handler",
instantiate: (di) => {
const openStatefulSetScaleDialog = di.inject(openStatefulSetScaleDialogInjectable);
return {
kind: "StatefulSet",
apiVersions: ["apps/v1"],
onContextMenuOpen: (ctx) => {
ctx.menuItems.push({
icon: "open_with",
title: "Scale",
onClick: (obj) => openStatefulSetScaleDialog(obj as StatefulSet),
});
},
};
},
injectionToken: staticKubeObjectHandlerInjectionToken,
});
export default statefulSetKubeObjectHandlerInjectable;

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";

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

@ -13,16 +13,15 @@ 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 assert from "assert";
import type { AttemptInstallByInfo } from "../../components/+extensions/attempt-install-by-info.injectable";
// TODO: make it so that the handlers are type safe and we don't need to do the asserts
interface Dependencies {
attemptInstallByInfo: (extensionInfo: ExtensionInfo) => Promise<void>;
attemptInstallByInfo: AttemptInstallByInfo;
lensProtocolRouterRenderer: LensProtocolRouterRenderer;
navigateToCatalog: NavigateToCatalog;
navigateToAddCluster: () => void;