diff --git a/src/common/base-store.ts b/src/common/base-store.ts index 5261c604d6..b2ba812b0a 100644 --- a/src/common/base-store.ts +++ b/src/common/base-store.ts @@ -2,7 +2,7 @@ import path from "path" import Config from "conf" import { Options as ConfOptions } from "conf/dist/source/types" import { app, ipcMain, IpcMainEvent, ipcRenderer, IpcRendererEvent, remote } from "electron" -import { action, observable, reaction, runInAction, toJS, when } from "mobx"; +import { action, IReactionOptions, observable, reaction, runInAction, toJS, when } from "mobx"; import Singleton from "./utils/singleton"; import { getAppVersion } from "./utils/app-version"; import logger from "../main/logger"; @@ -12,6 +12,7 @@ import isEqual from "lodash/isEqual"; export interface BaseStoreParams extends ConfOptions { autoLoad?: boolean; syncEnabled?: boolean; + syncOptions?: IReactionOptions; } export class BaseStore extends Singleton { @@ -20,7 +21,7 @@ export class BaseStore extends Singleton { whenLoaded = when(() => this.isLoaded); @observable isLoaded = false; - @observable protected data: T; + @observable data = {} as T; protected constructor(protected params: BaseStoreParams) { super(); @@ -36,8 +37,12 @@ export class BaseStore extends Singleton { return path.basename(this.storeConfig.path); } + get path() { + return this.storeConfig.path; + } + get syncChannel() { - return `store-sync:${this.name}` + return `STORE-SYNC:${this.path}` } protected async init() { @@ -56,19 +61,19 @@ export class BaseStore extends Singleton { ...confOptions, projectName: "lens", projectVersion: getAppVersion(), - cwd: this.storePath(), + cwd: this.cwd(), }); - logger.info(`[STORE]: LOADED from ${this.storeConfig.path}`); + logger.info(`[STORE]: LOADED from ${this.path}`); this.fromStore(this.storeConfig.store); this.isLoaded = true; } - protected storePath() { + protected cwd() { return (app || remote.app).getPath("userData") } protected async saveToFile(model: T) { - logger.info(`[STORE]: SAVING ${this.name}`); + logger.info(`[STORE]: SAVING ${this.path}`); // todo: update when fixed https://github.com/sindresorhus/conf/issues/114 Object.entries(model).forEach(([key, value]) => { this.storeConfig.set(key, value); @@ -77,7 +82,7 @@ export class BaseStore extends Singleton { enableSync() { this.syncDisposers.push( - reaction(() => this.toJSON(), model => this.onModelChange(model)), + reaction(() => this.toJSON(), model => this.onModelChange(model), this.params.syncOptions), ); if (ipcMain) { const callback = (event: IpcMainEvent, model: T) => { @@ -169,6 +174,7 @@ export class BaseStore extends Singleton { @action protected fromStore(data: T) { + if (!data) return; this.data = data; } diff --git a/src/extensions/core-api/cluster-feature.ts b/src/extensions/core-api/cluster-feature.ts index f06eba1436..9f2d3b8a40 100644 --- a/src/extensions/core-api/cluster-feature.ts +++ b/src/extensions/core-api/cluster-feature.ts @@ -1 +1,2 @@ -export { ClusterFeature as Feature, ClusterFeatureStatus as FeatureStatus } from "../cluster-feature" +export { ClusterFeature as Feature } from "../cluster-feature" +export type { ClusterFeatureStatus as FeatureStatus } from "../cluster-feature" diff --git a/src/extensions/core-api/stores.ts b/src/extensions/core-api/stores.ts index d39314f762..d44536769f 100644 --- a/src/extensions/core-api/stores.ts +++ b/src/extensions/core-api/stores.ts @@ -1,4 +1,6 @@ export { ExtensionStore } from "../extension-store" -export { clusterStore, ClusterModel } from "../../common/cluster-store" -export { Cluster } from "../../main/cluster" -export { workspaceStore, Workspace, WorkspaceModel } from "../../common/workspace-store" +export { clusterStore } from "../../common/cluster-store" +export type { ClusterModel } from "../../common/cluster-store" +export { Cluster } from "../../main/cluster" +export { workspaceStore, Workspace } from "../../common/workspace-store" +export type { WorkspaceModel } from "../../common/workspace-store" diff --git a/src/extensions/extension-loader.ts b/src/extensions/extension-loader.ts index 5495438555..64c4270439 100644 --- a/src/extensions/extension-loader.ts +++ b/src/extensions/extension-loader.ts @@ -1,20 +1,13 @@ -import type { ExtensionId, ExtensionManifest, ExtensionModel, LensExtension } from "./lens-extension" +import type { LensExtension, LensExtensionConstructor, LensExtensionId } from "./lens-extension" import type { LensMainExtension } from "./lens-main-extension" import type { LensRendererExtension } from "./lens-renderer-extension" +import type { InstalledExtension } from "./extension-manager"; import path from "path" import { broadcastIpc } from "../common/ipc" -import { observable, reaction, toJS, } from "mobx" +import { computed, observable, reaction, when } from "mobx" import logger from "../main/logger" import { app, ipcRenderer, remote } from "electron" -import { - appPreferenceRegistry, clusterFeatureRegistry, clusterPageRegistry, globalPageRegistry, - kubeObjectDetailRegistry, kubeObjectMenuRegistry, menuRegistry, statusBarRegistry -} from "./registries"; - -export interface InstalledExtension extends ExtensionModel { - manifestPath: string; - manifest: ExtensionManifest; -} +import * as registries from "./registries"; // lazy load so that we get correct userData export function extensionPackagesRoot() { @@ -22,69 +15,82 @@ export function extensionPackagesRoot() { } export class ExtensionLoader { - @observable extensions = observable.map([], { deep: false }); - @observable instances = observable.map([], { deep: false }) + @observable isLoaded = false; + protected extensions = observable.map([], { deep: false }); + protected instances = observable.map([], { deep: false }) constructor() { if (ipcRenderer) { ipcRenderer.on("extensions:loaded", (event, extensions: InstalledExtension[]) => { + this.isLoaded = true; extensions.forEach((ext) => { - if (!this.getById(ext.manifestPath)) { + if (!this.extensions.has(ext.manifestPath)) { this.extensions.set(ext.manifestPath, ext) } }) - }) + }); } } + @computed get userExtensions(): LensExtension[] { + return [...this.instances.values()].filter(ext => !ext.isBundled) + } + + async init() { + const { extensionManager } = await import("./extension-manager"); + const installedExtensions = await extensionManager.load(); + this.extensions.replace(installedExtensions); + this.isLoaded = true; + this.loadOnMain(); + } + loadOnMain() { logger.info('[EXTENSIONS-LOADER]: load on main') - this.autoloadExtensions((extension: LensMainExtension) => { - extension.registerTo(menuRegistry, extension.appMenus) - }) + this.autoInitExtensions((extension: LensMainExtension) => [ + registries.menuRegistry.add(...extension.appMenus) + ]); } loadOnClusterManagerRenderer() { logger.info('[EXTENSIONS-LOADER]: load on main renderer (cluster manager)') - this.autoloadExtensions((extension: LensRendererExtension) => { - extension.registerTo(globalPageRegistry, extension.globalPages) - extension.registerTo(appPreferenceRegistry, extension.appPreferences) - extension.registerTo(clusterFeatureRegistry, extension.clusterFeatures) - extension.registerTo(statusBarRegistry, extension.statusBarItems) - }) + this.autoInitExtensions((extension: LensRendererExtension) => [ + registries.globalPageRegistry.add(...extension.globalPages), + registries.appPreferenceRegistry.add(...extension.appPreferences), + registries.clusterFeatureRegistry.add(...extension.clusterFeatures), + registries.statusBarRegistry.add(...extension.statusBarItems), + ]); } loadOnClusterRenderer() { logger.info('[EXTENSIONS-LOADER]: load on cluster renderer (dashboard)') - this.autoloadExtensions((extension: LensRendererExtension) => { - extension.registerTo(clusterPageRegistry, extension.clusterPages) - extension.registerTo(kubeObjectMenuRegistry, extension.kubeObjectMenuItems) - extension.registerTo(kubeObjectDetailRegistry, extension.kubeObjectDetailItems) - }) + this.autoInitExtensions((extension: LensRendererExtension) => [ + registries.clusterPageRegistry.add(...extension.clusterPages), + registries.kubeObjectMenuRegistry.add(...extension.kubeObjectMenuItems), + registries.kubeObjectDetailRegistry.add(...extension.kubeObjectDetailItems), + ]); } - protected autoloadExtensions(callback: (instance: LensExtension) => void) { + protected autoInitExtensions(register: (ext: LensExtension) => Function[]) { return reaction(() => this.extensions.toJS(), (installedExtensions) => { - for(const [id, ext] of installedExtensions) { - let instance = this.instances.get(ext.id) + for (const [id, ext] of installedExtensions) { + let instance = this.instances.get(ext.manifestPath) if (!instance) { const extensionModule = this.requireExtension(ext) if (!extensionModule) { continue } - const LensExtensionClass = extensionModule.default; - instance = new LensExtensionClass({ ...ext.manifest, manifestPath: ext.manifestPath, id: ext.manifestPath }, ext.manifest); try { - instance.enable() - callback(instance) - } finally { - this.instances.set(ext.id, instance) + const LensExtensionClass: LensExtensionConstructor = extensionModule.default; + instance = new LensExtensionClass(ext); + instance.whenEnabled(() => register(instance)); + this.instances.set(ext.manifestPath, instance); + } catch (err) { + logger.error(`[EXTENSIONS-LOADER]: init extension instance error`, { ext, err }) } } } }, { fireImmediately: true, - delay: 0, }) } @@ -105,37 +111,17 @@ export class ExtensionLoader { } } - getById(id: ExtensionId): InstalledExtension { - return this.extensions.get(id); - } - - async removeById(id: ExtensionId) { - const extension = this.getById(id); - if (extension) { - const instance = this.instances.get(extension.id) - if (instance) { - await instance.disable() - } - this.extensions.delete(id); - } - } - - broadcastExtensions(frameId?: number) { + async broadcastExtensions(frameId?: number) { + await when(() => this.isLoaded); broadcastIpc({ channel: "extensions:loaded", frameId: frameId, frameOnly: !!frameId, - args: [this.toJSON().extensions], - }) - } - - toJSON() { - return toJS({ - extensions: Array.from(this.extensions).map(([id, instance]) => instance), - }, { - recurseEverything: true, + args: [ + Array.from(this.extensions.toJS().values()) + ], }) } } -export const extensionLoader = new ExtensionLoader() +export const extensionLoader = new ExtensionLoader(); diff --git a/src/extensions/extension-manager.ts b/src/extensions/extension-manager.ts index 332b0e5691..1d37707596 100644 --- a/src/extensions/extension-manager.ts +++ b/src/extensions/extension-manager.ts @@ -1,12 +1,18 @@ -import type { ExtensionManifest } from "./lens-extension" +import type { LensExtensionId, LensExtensionManifest } from "./lens-extension" import path from "path" import os from "os" import fs from "fs-extra" +import child_process from "child_process"; import logger from "../main/logger" -import { extensionPackagesRoot, InstalledExtension } from "./extension-loader" -import * as child_process from 'child_process'; +import { extensionPackagesRoot } from "./extension-loader" import { getBundledExtensions } from "../common/utils/app-version" +export interface InstalledExtension { + manifest: LensExtensionManifest; + manifestPath: string; + isBundled?: boolean; // defined in package.json +} + type Dependencies = { [name: string]: string; } @@ -51,7 +57,7 @@ export class ExtensionManager { return path.join(this.extensionPackagesRoot, "package.json") } - async load() { + async load(): Promise> { logger.info("[EXTENSION-MANAGER] loading extensions from " + this.extensionPackagesRoot) if (fs.existsSync(path.join(this.extensionPackagesRoot, "package-lock.json"))) { await fs.remove(path.join(this.extensionPackagesRoot, "package-lock.json")) @@ -71,8 +77,8 @@ export class ExtensionManager { return await this.loadExtensions(); } - async getExtensionByManifest(manifestPath: string): Promise { - let manifestJson: ExtensionManifest; + protected async getByManifest(manifestPath: string): Promise { + let manifestJson: LensExtensionManifest; try { fs.accessSync(manifestPath, fs.constants.F_OK); // check manifest file for existence manifestJson = __non_webpack_require__(manifestPath) @@ -80,11 +86,8 @@ export class ExtensionManager { logger.info("[EXTENSION-MANAGER] installed extension " + manifestJson.name) return { - id: manifestJson.name, - version: manifestJson.version, - name: manifestJson.name, manifestPath: path.join(this.nodeModulesPath, manifestJson.name, "package.json"), - manifest: manifestJson + manifest: manifestJson, } } catch (err) { logger.error(`[EXTENSION-MANAGER]: can't install extension at ${manifestPath}: ${err}`, { manifestJson }); @@ -109,10 +112,10 @@ export class ExtensionManager { async loadExtensions() { const bundledExtensions = await this.loadBundledExtensions() const localExtensions = await this.loadFromFolder(this.localFolderPath) - await fs.writeFile(path.join(this.packageJsonPath), JSON.stringify(this.packagesJson, null, 2), {mode: 0o600}) + await fs.writeFile(path.join(this.packageJsonPath), JSON.stringify(this.packagesJson, null, 2), { mode: 0o600 }) await this.installPackages() const extensions = bundledExtensions.concat(localExtensions) - return new Map(extensions.map(ext => [ext.id, ext])); + return new Map(extensions.map(ext => [ext.manifestPath, ext])); } async loadBundledExtensions() { @@ -126,8 +129,9 @@ export class ExtensionManager { } const absPath = path.resolve(folderPath, fileName); const manifestPath = path.resolve(absPath, "package.json"); - const ext = await this.getExtensionByManifest(manifestPath).catch(() => null) + const ext = await this.getByManifest(manifestPath).catch(() => null) if (ext) { + ext.isBundled = true; extensions.push(ext) } } @@ -152,7 +156,7 @@ export class ExtensionManager { continue } const manifestPath = path.resolve(absPath, "package.json"); - const ext = await this.getExtensionByManifest(manifestPath).catch(() => null) + const ext = await this.getByManifest(manifestPath).catch(() => null) if (ext) { extensions.push(ext) } diff --git a/src/extensions/extension-store.ts b/src/extensions/extension-store.ts index 5331420cd6..d5372eceff 100644 --- a/src/extensions/extension-store.ts +++ b/src/extensions/extension-store.ts @@ -15,7 +15,7 @@ export class ExtensionStore extends BaseStore { await super.load() } - protected storePath() { - return path.join(super.storePath(), "extension-store", this.extension.name) + protected cwd() { + return path.join(super.cwd(), "extension-store", this.extension.name) } } diff --git a/src/extensions/lens-extension.ts b/src/extensions/lens-extension.ts index 0921dc066a..246edfe110 100644 --- a/src/extensions/lens-extension.ts +++ b/src/extensions/lens-extension.ts @@ -1,75 +1,111 @@ -import { readJsonSync } from "fs-extra"; -import { action, observable, toJS } from "mobx"; +import type { InstalledExtension } from "./extension-manager"; +import { action, reaction } from "mobx"; import logger from "../main/logger"; -import { BaseRegistry } from "./registries/base-registry"; +import { ExtensionStore } from "./extension-store"; -export type ExtensionId = string | ExtensionPackageJsonPath; -export type ExtensionPackageJsonPath = string; -export type ExtensionVersion = string | number; +export type LensExtensionId = string; // path to manifest (package.json) +export type LensExtensionConstructor = new (...args: ConstructorParameters) => LensExtension; -export interface ExtensionModel { - id: ExtensionId; - version: ExtensionVersion; +export interface LensExtensionManifest { name: string; - manifestPath: string; + version: string; description?: string; - enabled?: boolean; - updateUrl?: string; + main?: string; // path to %ext/dist/main.js + renderer?: string; // path to %ext/dist/renderer.js } -export interface ExtensionManifest extends ExtensionModel { - main?: string; - renderer?: string; - description?: string; // todo: add more fields similar to package.json + some extra +export interface LensExtensionStoreModel { + isEnabled: boolean; } -export class LensExtension implements ExtensionModel { - public id: ExtensionId; - public updateUrl: string; - protected disposers: (() => void)[] = []; +export class LensExtension = any> { + protected store: S; + readonly manifest: LensExtensionManifest; + readonly manifestPath: string; + readonly isBundled: boolean; - @observable name = ""; - @observable description = ""; - @observable version: ExtensionVersion = "0.0.0"; - @observable manifest: ExtensionManifest; - @observable manifestPath: string; - @observable isEnabled = false; + constructor({ manifest, manifestPath, isBundled }: InstalledExtension) { + this.manifest = manifest + this.manifestPath = manifestPath + this.isBundled = !!isBundled + this.init(); + } - constructor(model: ExtensionModel, manifest: ExtensionManifest) { - this.importModel(model, manifest); + protected async init(store: S = createBaseStore().getInstance()) { + this.store = store; + await this.store.loadExtension(this); + reaction(() => this.store.data.isEnabled, (isEnabled = true) => { + this.toggle(isEnabled); // handle activation & deactivation + }, { + fireImmediately: true + }); + } + + get isEnabled() { + return !!this.store.data.isEnabled; + } + + get id(): LensExtensionId { + return this.manifestPath; + } + + get name() { + return this.manifest.name + } + + get version() { + return this.manifest.version + } + + get description() { + return this.manifest.description } @action - async importModel({ enabled, manifestPath, ...model }: ExtensionModel, manifest?: ExtensionManifest) { - try { - this.manifest = manifest || await readJsonSync(manifestPath, { throws: true }) - this.manifestPath = manifestPath; - Object.assign(this, model); - } catch (err) { - logger.error(`[EXTENSION]: cannot read manifest at ${manifestPath}`, { ...model, err: String(err) }) - this.disable(); - } - } - - async migrate(appVersion: string) { - // mock - } - async enable() { - this.isEnabled = true; - logger.info(`[EXTENSION]: enabled ${this.name}@${this.version}`); + if (this.isEnabled) return; + this.store.data.isEnabled = true; this.onActivate(); + logger.info(`[EXTENSION]: enabled ${this.name}@${this.version}`); } + @action async disable() { + if (!this.isEnabled) return; + this.store.data.isEnabled = false; this.onDeactivate(); - this.isEnabled = false; - this.disposers.forEach(cleanUp => cleanUp()); - this.disposers.length = 0; logger.info(`[EXTENSION]: disabled ${this.name}@${this.version}`); } - // todo: add more hooks + toggle(enable?: boolean) { + if (typeof enable === "boolean") { + enable ? this.enable() : this.disable() + } else { + this.isEnabled ? this.disable() : this.enable() + } + } + + async whenEnabled(handlers: () => Function[]) { + const disposers: Function[] = []; + const unregisterHandlers = () => { + disposers.forEach(unregister => unregister()) + disposers.length = 0; + } + const cancelReaction = reaction(() => this.isEnabled, isEnabled => { + if (isEnabled) { + disposers.push(...handlers()); + } else { + unregisterHandlers(); + } + }, { + fireImmediately: true + }) + return () => { + unregisterHandlers(); + cancelReaction(); + } + } + protected onActivate() { // mock } @@ -77,37 +113,14 @@ export class LensExtension implements ExtensionModel { protected onDeactivate() { // mock } +} - registerTo(registry: BaseRegistry, items: T[] = []) { - const disposers = items.map(item => registry.add(item)); - this.disposers.push(...disposers); - return () => { - this.disposers = this.disposers.filter(disposer => !disposers.includes(disposer)) - }; - } - - getMeta() { - return toJS({ - id: this.id, - manifest: this.manifest, - manifestPath: this.manifestPath, - enabled: this.isEnabled - }, { - recurseEverything: true - }) - } - - toJSON(): ExtensionModel { - return toJS({ - id: this.id, - name: this.name, - version: this.version, - description: this.description, - manifestPath: this.manifestPath, - enabled: this.isEnabled, - updateUrl: this.updateUrl, - }, { - recurseEverything: true, - }) +function createBaseStore() { + return class extends ExtensionStore { + constructor() { + super({ + configName: "state" + }); + } } } diff --git a/src/extensions/registries/base-registry.ts b/src/extensions/registries/base-registry.ts index 01613a59eb..ff23e36cad 100644 --- a/src/extensions/registries/base-registry.ts +++ b/src/extensions/registries/base-registry.ts @@ -1,5 +1,5 @@ // Base class for extensions-api registries -import { observable } from "mobx"; +import { action, observable } from "mobx"; export class BaseRegistry { protected items = observable([], { deep: false }); @@ -8,10 +8,16 @@ export class BaseRegistry { return this.items.toJS(); } - add(item: T) { - this.items.push(item); - return () => { + @action + add(...items: T[]) { + this.items.push(...items); + return () => this.remove(...items); + } + + @action + remove(...items: T[]) { + items.forEach(item => { this.items.remove(item); // works because of {deep: false}; - } + }) } } diff --git a/src/main/index.ts b/src/main/index.ts index ff7e050dd2..762c166bc4 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -15,13 +15,12 @@ import { shellSync } from "./shell-sync" import { getFreePort } from "./port" import { mangleProxyEnv } from "./proxy-env" import { registerFileProtocol } from "../common/register-protocol"; +import logger from "./logger" import { clusterStore } from "../common/cluster-store" import { userStore } from "../common/user-store"; import { workspaceStore } from "../common/workspace-store"; import { appEventBus } from "../common/event-bus" -import { extensionManager } from "../extensions/extension-manager"; import { extensionLoader } from "../extensions/extension-loader"; -import logger from "./logger" const workingDir = path.join(app.getPath("appData"), appName); let proxyPort: number; @@ -48,7 +47,7 @@ app.on("ready", async () => { registerFileProtocol("static", __static); - // preload isomorphic stores + // preload await Promise.all([ userStore.load(), clusterStore.load(), @@ -76,12 +75,8 @@ app.on("ready", async () => { app.exit(); } - windowManager = new WindowManager(proxyPort); - - LensExtensionsApi.windowManager = windowManager; // expose to extensions - extensionLoader.loadOnMain() - extensionLoader.extensions.replace(await extensionManager.load()) - extensionLoader.broadcastExtensions() + LensExtensionsApi.windowManager = windowManager = new WindowManager(proxyPort); + extensionLoader.init(); // call after windowManager to see splash earlier setTimeout(() => { appEventBus.emit({ name: "app", action: "start" }) diff --git a/src/main/menu.ts b/src/main/menu.ts index 4d018345e5..037378537d 100644 --- a/src/main/menu.ts +++ b/src/main/menu.ts @@ -6,6 +6,7 @@ import { addClusterURL } from "../renderer/components/+add-cluster/add-cluster.r import { preferencesURL } from "../renderer/components/+preferences/preferences.route"; import { whatsNewURL } from "../renderer/components/+whats-new/whats-new.route"; import { clusterSettingsURL } from "../renderer/components/+cluster-settings/cluster-settings.route"; +import { extensionsURL } from "../renderer/components/+extensions/extensions.route"; import { menuRegistry } from "../extensions/registries/menu-registry"; import logger from "./logger"; @@ -70,6 +71,13 @@ export function buildMenu(windowManager: WindowManager) { navigate(preferencesURL()) } }, + { + label: 'Extensions', + accelerator: 'CmdOrCtrl+Shift+E', + click() { + navigate(extensionsURL()) + } + }, { type: 'separator' }, { role: 'services' }, { type: 'separator' }, diff --git a/src/renderer/components/+extensions/extensions.route.ts b/src/renderer/components/+extensions/extensions.route.ts new file mode 100644 index 0000000000..78c5579901 --- /dev/null +++ b/src/renderer/components/+extensions/extensions.route.ts @@ -0,0 +1,8 @@ +import { RouteProps } from "react-router"; +import { buildURL } from "../../../common/utils/buildUrl"; + +export const extensionsRoute: RouteProps = { + path: "/extensions" +} + +export const extensionsURL = buildURL(extensionsRoute.path) diff --git a/src/renderer/components/+extensions/extensions.scss b/src/renderer/components/+extensions/extensions.scss new file mode 100644 index 0000000000..8e9256c201 --- /dev/null +++ b/src/renderer/components/+extensions/extensions.scss @@ -0,0 +1,35 @@ +.Extensions { + --width: 100%; + --max-width: auto; + + .extension { + --flex-gap: $padding / 3; + padding: $padding $padding * 2; + background: $colorVague; + border-radius: $radius; + } + + .extensions-path { + word-break: break-all; + } + + .WizardLayout { + padding: 0; + + .info-col { + flex: 0.6; + align-self: flex-start; + } + } + + .SearchInput { + margin-top: $margin / 2; + margin-bottom: $margin * 2; + max-width: none; + + > label { + padding: $padding $padding * 2; + border-radius: $radius; + } + } +} \ No newline at end of file diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx new file mode 100644 index 0000000000..7dc5f55726 --- /dev/null +++ b/src/renderer/components/+extensions/extensions.tsx @@ -0,0 +1,112 @@ +import "./extensions.scss"; +import { shell } from "electron"; +import React from "react"; +import { computed, observable } from "mobx"; +import { observer } from "mobx-react"; +import { t, Trans } from "@lingui/macro"; +import { _i18n } from "../../i18n"; +import { Button } from "../button"; +import { WizardLayout } from "../layout/wizard-layout"; +import { Input } from "../input"; +import { Icon } from "../icon"; +import { PageLayout } from "../layout/page-layout"; +import { extensionLoader } from "../../../extensions/extension-loader"; +import { extensionManager } from "../../../extensions/extension-manager"; + +@observer +export class Extensions extends React.Component { + @observable search = "" + + @computed get extensions() { + const searchText = this.search.toLowerCase(); + return extensionLoader.userExtensions.filter(({ name, description }) => { + return [ + name.toLowerCase().includes(searchText), + description.toLowerCase().includes(searchText), + ].some(v => v) + }) + } + + get extensionsPath() { + return extensionManager.localFolderPath; + } + + renderInfo() { + return ( +
+

Lens Extension API

+
+ The Extensions API in Lens allows users to customize and enhance the Lens experience by creating their own menus or page content that is extended from the existing pages. Many of the core + features of Lens are built as extensions and use the same Extension API. +
+
+ Extensions loaded from: +
+ {this.extensionsPath} + shell.openPath(this.extensionsPath)} + /> +
+
+
+ Check out documentation to learn more +
+
+ ) + } + + renderExtensions() { + const { extensions, extensionsPath, search } = this; + if (!extensions.length) { + return ( +
+ {search && No search results found} + {!search &&

There are no extensions in {extensionsPath}

} +
+ ) + } + return extensions.map(ext => { + const { id, name, description, isEnabled } = ext; + return ( +
+
+
+ Name: {name} +
+
+ Description: {description} +
+
+ {!isEnabled && ( + + )} + {isEnabled && ( + + )} +
+ ) + }) + } + + render() { + return ( + Extensions}> + + this.search = value} + /> +
+ {this.renderExtensions()} +
+ + + ); + } +} \ No newline at end of file diff --git a/src/renderer/components/+extensions/index.ts b/src/renderer/components/+extensions/index.ts new file mode 100644 index 0000000000..8946a5f6fe --- /dev/null +++ b/src/renderer/components/+extensions/index.ts @@ -0,0 +1,2 @@ +export * from "./extensions.route" +export * from "./extensions" diff --git a/src/renderer/components/cluster-manager/cluster-manager.tsx b/src/renderer/components/cluster-manager/cluster-manager.tsx index 785fe56e27..4a42a0419d 100644 --- a/src/renderer/components/cluster-manager/cluster-manager.tsx +++ b/src/renderer/components/cluster-manager/cluster-manager.tsx @@ -16,6 +16,7 @@ import { clusterViewRoute, clusterViewURL } from "./cluster-view.route"; import { clusterStore } from "../../../common/cluster-store"; import { hasLoadedView, initView, lensViews, refreshViews } from "./lens-views"; import { globalPageRegistry } from "../../../extensions/registries/page-registry"; +import { Extensions, extensionsRoute } from "../+extensions"; import { getMatchedClusterId } from "../../navigation"; @observer @@ -63,6 +64,7 @@ export class ClusterManager extends React.Component { + diff --git a/src/renderer/components/layout/page-layout.scss b/src/renderer/components/layout/page-layout.scss index 53268f948f..0ae6f54139 100644 --- a/src/renderer/components/layout/page-layout.scss +++ b/src/renderer/components/layout/page-layout.scss @@ -1,5 +1,8 @@ .PageLayout { $spacing: $padding * 2; + --width: 60%; + --max-width: 1000px; + --min-width: 570px; position: relative; height: 100%; @@ -26,12 +29,15 @@ > .content-wrapper { @include custom-scrollbar-themed; padding: $spacing * 2; + display: flex; + flex-direction: column; > .content { + flex: 1; margin: 0 auto; - width: 60%; - min-width: 570px; - max-width: 1000px; + width: var(--width); + min-width: var(--min-width); + max-width: var(--max-width); } } diff --git a/src/renderer/components/tooltip/tooltip.tsx b/src/renderer/components/tooltip/tooltip.tsx index 393651001f..409d5f2bd7 100644 --- a/src/renderer/components/tooltip/tooltip.tsx +++ b/src/renderer/components/tooltip/tooltip.tsx @@ -167,7 +167,6 @@ export class Tooltip extends React.Component { top = topCenter; break; case "top_right": - default: left = targetBounds.right - tooltipBounds.width; top = topCenter; break;