mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
monaco editor implemented right
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman
parent
b41f923931
commit
92766e71e4
@ -221,6 +221,7 @@
|
||||
"moment": "^2.29.1",
|
||||
"moment-timezone": "^0.5.33",
|
||||
"monaco-editor": "^0.26.1",
|
||||
"monaco-editor-webpack-plugin": "^4.2.0",
|
||||
"node-fetch": "^2.6.1",
|
||||
"node-pty": "^0.10.1",
|
||||
"npm": "^6.14.15",
|
||||
|
||||
@ -24,7 +24,7 @@ import path from "path";
|
||||
import os from "os";
|
||||
import { ThemeStore } from "../../renderer/theme.store";
|
||||
import { ObservableToggleSet } from "../utils";
|
||||
import type {monaco} from "react-monaco-editor";
|
||||
import type * as monaco from "monaco-editor";
|
||||
import merge from "lodash/merge";
|
||||
|
||||
export interface KubeconfigSyncEntry extends KubeconfigSyncValue {
|
||||
@ -34,9 +34,9 @@ export interface KubeconfigSyncEntry extends KubeconfigSyncValue {
|
||||
export interface KubeconfigSyncValue { }
|
||||
|
||||
export interface EditorConfiguration {
|
||||
miniMap?: monaco.editor.IEditorMinimapOptions;
|
||||
lineNumbers?: monaco.editor.LineNumbersType;
|
||||
tabSize?: number;
|
||||
miniMap: monaco.editor.IEditorMinimapOptions;
|
||||
lineNumbers: monaco.editor.LineNumbersType;
|
||||
tabSize: number;
|
||||
}
|
||||
|
||||
export const defaultEditorConfig: EditorConfiguration = {
|
||||
|
||||
@ -21,18 +21,16 @@
|
||||
|
||||
import { app } from "electron";
|
||||
import semver from "semver";
|
||||
import { action, computed, observable, reaction, makeObservable } from "mobx";
|
||||
import { action, computed, makeObservable, observable, reaction } from "mobx";
|
||||
import { BaseStore } from "../base-store";
|
||||
import migrations from "../../migrations/user-store";
|
||||
import migrations, { fileNameMigration } from "../../migrations/user-store";
|
||||
import { getAppVersion } from "../utils/app-version";
|
||||
import { kubeConfigDefaultPath } from "../kube-helpers";
|
||||
import { appEventBus } from "../event-bus";
|
||||
import path from "path";
|
||||
import { fileNameMigration } from "../../migrations/user-store";
|
||||
import { ObservableToggleSet, toJS } from "../../renderer/utils";
|
||||
import { DESCRIPTORS, KubeconfigSyncValue, UserPreferencesModel, EditorConfiguration } from "./preferences-helpers";
|
||||
import { defaultEditorConfig, DESCRIPTORS, EditorConfiguration, KubeconfigSyncValue, UserPreferencesModel } from "./preferences-helpers";
|
||||
import logger from "../../main/logger";
|
||||
import type { monaco } from "react-monaco-editor";
|
||||
import { getPath } from "../utils/getPath";
|
||||
|
||||
export interface UserStoreModel {
|
||||
@ -86,7 +84,7 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
|
||||
/**
|
||||
* Monaco editor configs
|
||||
*/
|
||||
@observable editorConfiguration:EditorConfiguration = {tabSize: null, miniMap: null, lineNumbers: null};
|
||||
@observable editorConfiguration: EditorConfiguration = defaultEditorConfig;
|
||||
|
||||
/**
|
||||
* The set of file/folder paths to be synced
|
||||
@ -119,28 +117,6 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
|
||||
});
|
||||
}
|
||||
|
||||
// Returns monaco editor options for selected editor type (the place, where a particular instance of the editor is mounted)
|
||||
getEditorOptions(): monaco.editor.IStandaloneEditorConstructionOptions {
|
||||
return {
|
||||
automaticLayout: true,
|
||||
tabSize: this.editorConfiguration.tabSize,
|
||||
minimap: this.editorConfiguration.miniMap,
|
||||
lineNumbers: this.editorConfiguration.lineNumbers
|
||||
};
|
||||
}
|
||||
|
||||
setEditorLineNumbers(lineNumbers: monaco.editor.LineNumbersType) {
|
||||
this.editorConfiguration.lineNumbers = lineNumbers;
|
||||
}
|
||||
|
||||
setEditorTabSize(tabSize: number) {
|
||||
this.editorConfiguration.tabSize = tabSize;
|
||||
}
|
||||
|
||||
enableEditorMinimap(miniMap: boolean ) {
|
||||
this.editorConfiguration.miniMap.enabled = miniMap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if a column (by ID) for a table (by ID) is configured to be hidden
|
||||
* @param tableId The ID of the table to be checked against
|
||||
|
||||
@ -28,7 +28,6 @@ import * as ReactRouter from "react-router";
|
||||
import * as ReactRouterDom from "react-router-dom";
|
||||
import * as LensExtensionsCommonApi from "../extensions/common-api";
|
||||
import * as LensExtensionsRendererApi from "../extensions/renderer-api";
|
||||
import { monaco } from "react-monaco-editor";
|
||||
import { render, unmountComponentAtNode } from "react-dom";
|
||||
import { delay } from "../common/utils";
|
||||
import { isMac, isDevelopment } from "../common/vars";
|
||||
@ -50,7 +49,6 @@ import { FilesystemProvisionerStore } from "../main/extension-filesystem";
|
||||
import { ThemeStore } from "./theme.store";
|
||||
import { SentryInit } from "../common/sentry";
|
||||
import { TerminalStore } from "./components/dock/terminal.store";
|
||||
import cloudsMidnight from "./monaco-themes/Clouds Midnight.json";
|
||||
|
||||
configurePackages();
|
||||
|
||||
@ -104,12 +102,6 @@ export async function bootstrap(App: AppComponent) {
|
||||
ExtensionsStore.createInstance();
|
||||
FilesystemProvisionerStore.createInstance();
|
||||
|
||||
// define Monaco Editor themes
|
||||
const { base, ...params } = cloudsMidnight;
|
||||
const baseTheme = base as monaco.editor.BuiltinTheme;
|
||||
|
||||
monaco.editor.defineTheme("clouds-midnight", {base: baseTheme, ...params});
|
||||
|
||||
// ThemeStore depends on: UserStore
|
||||
ThemeStore.createInstance();
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ import "./add-cluster.scss";
|
||||
import type { KubeConfig } from "@kubernetes/client-node";
|
||||
import fse from "fs-extra";
|
||||
import { debounce } from "lodash";
|
||||
import { action, computed, observable, makeObservable } from "mobx";
|
||||
import { action, computed, makeObservable, observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import path from "path";
|
||||
import React from "react";
|
||||
@ -34,13 +34,11 @@ import { appEventBus } from "../../../common/event-bus";
|
||||
import { loadConfigFromString, splitConfig } from "../../../common/kube-helpers";
|
||||
import { docsUrl } from "../../../common/vars";
|
||||
import { navigate } from "../../navigation";
|
||||
import { getCustomKubeConfigPath, cssNames, iter } from "../../utils";
|
||||
import { getCustomKubeConfigPath, iter } from "../../utils";
|
||||
import { Button } from "../button";
|
||||
import { Notifications } from "../notifications";
|
||||
import { SettingLayout } from "../layout/setting-layout";
|
||||
import MonacoEditor from "react-monaco-editor";
|
||||
import { ThemeStore } from "../../theme.store";
|
||||
import { UserStore } from "../../../common/user-store";
|
||||
import { MonacoEditor } from "../monaco-editor";
|
||||
|
||||
interface Option {
|
||||
config: KubeConfig;
|
||||
@ -85,7 +83,7 @@ export class AddCluster extends React.Component {
|
||||
const { config, error } = loadConfigFromString(this.customConfig.trim() || "{}");
|
||||
|
||||
this.kubeContexts.replace(getContexts(config));
|
||||
|
||||
|
||||
if (error) {
|
||||
this.errors.push(error.toString());
|
||||
}
|
||||
@ -124,12 +122,8 @@ export class AddCluster extends React.Component {
|
||||
</p>
|
||||
<div className="flex column">
|
||||
<MonacoEditor
|
||||
options={{...UserStore.getInstance().getEditorOptions()}}
|
||||
className={cssNames("MonacoEditor")}
|
||||
theme={ThemeStore.getInstance().activeTheme.monacoTheme}
|
||||
language="yaml"
|
||||
value={this.customConfig}
|
||||
onChange={value => {
|
||||
onChange={(value: string) => {
|
||||
this.customConfig = value;
|
||||
this.errors.length = 0;
|
||||
this.refreshContexts();
|
||||
|
||||
@ -24,7 +24,7 @@ import "./release-details.scss";
|
||||
import React, { Component } from "react";
|
||||
import groupBy from "lodash/groupBy";
|
||||
import isEqual from "lodash/isEqual";
|
||||
import { observable, reaction, makeObservable } from "mobx";
|
||||
import { makeObservable, observable, reaction } from "mobx";
|
||||
import { Link } from "react-router-dom";
|
||||
import kebabCase from "lodash/kebabCase";
|
||||
import { getRelease, getReleaseValues, HelmRelease, IReleaseDetails } from "../../../common/k8s-api/endpoints/helm-releases.api";
|
||||
@ -46,8 +46,7 @@ import { secretsStore } from "../+config-secrets/secrets.store";
|
||||
import { Secret } from "../../../common/k8s-api/endpoints";
|
||||
import { getDetailsUrl } from "../kube-detail-params";
|
||||
import { Checkbox } from "../checkbox";
|
||||
import MonacoEditor from "react-monaco-editor";
|
||||
import { UserStore } from "../../../common/user-store";
|
||||
import { MonacoEditor } from "../monaco-editor";
|
||||
|
||||
interface Props {
|
||||
release: HelmRelease;
|
||||
@ -160,14 +159,12 @@ export class ReleaseDetails extends Component<Props> {
|
||||
disabled={valuesLoading}
|
||||
/>
|
||||
<MonacoEditor
|
||||
language="yaml"
|
||||
className={cssNames({ loading: valuesLoading })}
|
||||
readOnly={valuesLoading || this.showOnlyUserSuppliedValues}
|
||||
value={values}
|
||||
onChange={text => this.values = text}
|
||||
theme={ThemeStore.getInstance().activeTheme.monacoTheme}
|
||||
className={cssNames("MonacoEditor", {loading: valuesLoading})}
|
||||
options={{readOnly: valuesLoading || this.showOnlyUserSuppliedValues, ...UserStore.getInstance().getEditorOptions()}}
|
||||
>
|
||||
{valuesLoading && <Spinner center />}
|
||||
{valuesLoading && <Spinner center/>}
|
||||
</MonacoEditor>
|
||||
<Button
|
||||
primary
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.validation {
|
||||
.MonacoEditor {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
@ -25,16 +25,13 @@ import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { observer } from "mobx-react";
|
||||
import type { CustomResourceDefinition } from "../../../common/k8s-api/endpoints/crd.api";
|
||||
import { cssNames } from "../../utils";
|
||||
import { ThemeStore } from "../../theme.store";
|
||||
import { Badge } from "../badge";
|
||||
import { DrawerItem, DrawerTitle } from "../drawer";
|
||||
import type { KubeObjectDetailsProps } from "../kube-object-details";
|
||||
import { Table, TableCell, TableHead, TableRow } from "../table";
|
||||
import { Input } from "../input";
|
||||
import { KubeObjectMeta } from "../kube-object-meta";
|
||||
import MonacoEditor from "react-monaco-editor";
|
||||
import { UserStore } from "../../../common/user-store";
|
||||
import { MonacoEditor } from "../monaco-editor";
|
||||
|
||||
interface Props extends KubeObjectDetailsProps<CustomResourceDefinition> {
|
||||
}
|
||||
@ -146,13 +143,7 @@ export class CRDDetails extends React.Component<Props> {
|
||||
{validation &&
|
||||
<>
|
||||
<DrawerTitle title="Validation"/>
|
||||
<MonacoEditor
|
||||
options={{readOnly: true, ...UserStore.getInstance().getEditorOptions()}}
|
||||
className={cssNames("MonacoEditor", "validation")}
|
||||
theme={ThemeStore.getInstance().activeTheme.monacoTheme}
|
||||
language="yaml"
|
||||
value={validation}
|
||||
/>
|
||||
<MonacoEditor readOnly value={validation}/>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -25,7 +25,7 @@ import { FormSwitch, Switcher } from "../switch";
|
||||
import { SubTitle } from "../layout/sub-title";
|
||||
import { Input } from "../input";
|
||||
import { isNumber } from "../input/input_validators";
|
||||
import { Select, SelectOption } from "../select";
|
||||
import { Select } from "../select";
|
||||
|
||||
enum EditorLineNumbersStyles {
|
||||
on = "On",
|
||||
@ -35,6 +35,7 @@ enum EditorLineNumbersStyles {
|
||||
}
|
||||
|
||||
export const Editor = observer(() => {
|
||||
const editorConfiguration = UserStore.getInstance().editorConfiguration;
|
||||
|
||||
return (
|
||||
<section id="editor">
|
||||
@ -43,8 +44,8 @@ export const Editor = observer(() => {
|
||||
<FormSwitch
|
||||
control={
|
||||
<Switcher
|
||||
checked={UserStore.getInstance().editorConfiguration.miniMap.enabled}
|
||||
onChange={v => UserStore.getInstance().enableEditorMinimap(v.target.checked)}
|
||||
checked={editorConfiguration.miniMap.enabled}
|
||||
onChange={(evt, checked: boolean) => editorConfiguration.miniMap.enabled = checked}
|
||||
name="minimap"
|
||||
/>
|
||||
}
|
||||
@ -54,9 +55,9 @@ export const Editor = observer(() => {
|
||||
<section>
|
||||
<SubTitle title="Line numbers"/>
|
||||
<Select
|
||||
options={Object.entries(EditorLineNumbersStyles).map(entry => ({label: entry[1], value: entry[0]}))}
|
||||
value={UserStore.getInstance().editorConfiguration?.lineNumbers}
|
||||
onChange={({ value }: SelectOption) => UserStore.getInstance().setEditorLineNumbers(value)}
|
||||
options={Object.entries(EditorLineNumbersStyles).map(([value, label]) => ({ label, value }))}
|
||||
value={editorConfiguration.lineNumbers}
|
||||
onChange={({ value }) => editorConfiguration.lineNumbers = value}
|
||||
themeName="lens"
|
||||
/>
|
||||
</section>
|
||||
@ -66,9 +67,10 @@ export const Editor = observer(() => {
|
||||
theme="round-black"
|
||||
min={1}
|
||||
max={10}
|
||||
type="number"
|
||||
validators={[isNumber]}
|
||||
value={UserStore.getInstance().editorConfiguration.tabSize?.toString()}
|
||||
onChange={(value) => {(Number(value) || value=="") && UserStore.getInstance().setEditorTabSize(Number(value));}}
|
||||
value={editorConfiguration.tabSize.toString()}
|
||||
onChange={value => editorConfiguration.tabSize = Number(value)}
|
||||
/>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@ -22,12 +22,9 @@
|
||||
import "./pod-details-affinities.scss";
|
||||
import React from "react";
|
||||
import jsYaml from "js-yaml";
|
||||
import { DrawerParamToggler, DrawerItem } from "../drawer";
|
||||
import type { Pod, Deployment, DaemonSet, StatefulSet, ReplicaSet, Job } from "../../../common/k8s-api/endpoints";
|
||||
import MonacoEditor from "react-monaco-editor";
|
||||
import { cssNames } from "../../utils";
|
||||
import { ThemeStore } from "../../theme.store";
|
||||
import { UserStore } from "../../../common/user-store";
|
||||
import { DrawerItem, DrawerParamToggler } from "../drawer";
|
||||
import type { DaemonSet, Deployment, Job, Pod, ReplicaSet, StatefulSet } from "../../../common/k8s-api/endpoints";
|
||||
import { MonacoEditor } from "../monaco-editor";
|
||||
|
||||
interface Props {
|
||||
workload: Pod | Deployment | DaemonSet | StatefulSet | ReplicaSet | Job;
|
||||
@ -45,13 +42,7 @@ export class PodDetailsAffinities extends React.Component<Props> {
|
||||
<DrawerItem name="Affinities" className="PodDetailsAffinities">
|
||||
<DrawerParamToggler label={affinitiesNum}>
|
||||
<div className="ace-container">
|
||||
<MonacoEditor
|
||||
options={{readOnly: true, ...UserStore.getInstance().getEditorOptions()}}
|
||||
className={cssNames("MonacoEditor")}
|
||||
theme={ThemeStore.getInstance().activeTheme.monacoTheme}
|
||||
language="yaml"
|
||||
value={jsYaml.dump(affinities)}
|
||||
/>
|
||||
<MonacoEditor readOnly value={jsYaml.dump(affinities)}/>
|
||||
</div>
|
||||
</DrawerParamToggler>
|
||||
</DrawerItem>
|
||||
|
||||
@ -24,19 +24,18 @@ import "./create-resource.scss";
|
||||
import React from "react";
|
||||
import path from "path";
|
||||
import fs from "fs-extra";
|
||||
import {Select, GroupSelectOption, SelectOption} from "../select";
|
||||
import { GroupSelectOption, Select, SelectOption } from "../select";
|
||||
import jsYaml from "js-yaml";
|
||||
import { observable, makeObservable } from "mobx";
|
||||
import { makeObservable, observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import { cssNames } from "../../utils";
|
||||
import { createResourceStore } from "./create-resource.store";
|
||||
import type { DockTab } from "./dock.store";
|
||||
import { EditorPanel } from "./editor-panel";
|
||||
import { MonacoEditor } from "../monaco-editor";
|
||||
import { InfoPanel } from "./info-panel";
|
||||
import { resourceApplierApi } from "../../../common/k8s-api/endpoints/resource-applier.api";
|
||||
import type { JsonApiErrorParsed } from "../../../common/k8s-api/json-api";
|
||||
import { Notifications } from "../notifications";
|
||||
import { monacoModelsManager } from "./monaco-model-manager";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
@ -45,9 +44,9 @@ interface Props {
|
||||
|
||||
@observer
|
||||
export class CreateResource extends React.Component<Props> {
|
||||
@observable currentTemplates:Map<string,SelectOption> = new Map();
|
||||
@observable currentTemplates: Map<string, SelectOption> = new Map();
|
||||
@observable error = "";
|
||||
@observable templates:GroupSelectOption<SelectOption>[] = [];
|
||||
@observable templates: GroupSelectOption<SelectOption>[] = [];
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
@ -59,15 +58,15 @@ export class CreateResource extends React.Component<Props> {
|
||||
createResourceStore.watchUserTemplates(() => createResourceStore.getMergedTemplates().then(v => this.updateGroupSelectOptions(v)));
|
||||
}
|
||||
|
||||
updateGroupSelectOptions(templates :Record<string, string[]>) {
|
||||
updateGroupSelectOptions(templates: Record<string, string[]>) {
|
||||
this.templates = Object.entries(templates)
|
||||
.map(([name, grouping]) => this.convertToGroup(name, grouping));
|
||||
}
|
||||
|
||||
convertToGroup(group:string, items:string[]):GroupSelectOption {
|
||||
const options = items.map(v => ({label: path.parse(v).name, value: v}));
|
||||
convertToGroup(group: string, items: string[]): GroupSelectOption {
|
||||
const options = items.map(v => ({ label: path.parse(v).name, value: v }));
|
||||
|
||||
return {label: group, options};
|
||||
return { label: group, options };
|
||||
}
|
||||
|
||||
get tabId() {
|
||||
@ -82,16 +81,19 @@ export class CreateResource extends React.Component<Props> {
|
||||
return this.currentTemplates.get(this.tabId) ?? null;
|
||||
}
|
||||
|
||||
onChange = (value: string, error?: string) => {
|
||||
onChange = (value: string) => {
|
||||
createResourceStore.setData(this.tabId, value);
|
||||
};
|
||||
|
||||
onError = (error: string) => {
|
||||
this.error = error;
|
||||
};
|
||||
|
||||
onSelectTemplate = (item: SelectOption) => {
|
||||
this.currentTemplates.set(this.tabId, item);
|
||||
fs.readFile(item.value,"utf8").then(v => {
|
||||
createResourceStore.setData(this.tabId,v);
|
||||
monacoModelsManager.getModel(this.tabId).setValue(v ?? "");
|
||||
|
||||
fs.readFile(item.value, "utf8").then(value => {
|
||||
createResourceStore.setData(this.tabId, value);
|
||||
});
|
||||
};
|
||||
|
||||
@ -130,26 +132,25 @@ export class CreateResource extends React.Component<Props> {
|
||||
return successMessage;
|
||||
};
|
||||
|
||||
renderControls(){
|
||||
renderControls() {
|
||||
return (
|
||||
<div className="flex gaps align-center">
|
||||
<Select
|
||||
autoConvertOptions = {false}
|
||||
autoConvertOptions={false}
|
||||
className="TemplateSelect"
|
||||
placeholder="Select Template ..."
|
||||
options={this.templates}
|
||||
menuPlacement="top"
|
||||
themeName="outlined"
|
||||
onChange={v => this.onSelectTemplate(v)}
|
||||
value = {this.currentTemplate}
|
||||
value={this.currentTemplate}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const { tabId, data, error, create, onChange } = this;
|
||||
const { tabId, data, error, create } = this;
|
||||
const { className } = this.props;
|
||||
|
||||
return (
|
||||
@ -162,10 +163,11 @@ export class CreateResource extends React.Component<Props> {
|
||||
submitLabel="Create"
|
||||
showNotifications={false}
|
||||
/>
|
||||
<EditorPanel
|
||||
tabId={tabId}
|
||||
<MonacoEditor
|
||||
id={tabId}
|
||||
value={data}
|
||||
onChange={onChange}
|
||||
onChange={this.onChange}
|
||||
onError={this.onError}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -23,7 +23,6 @@ import * as uuid from "uuid";
|
||||
import { action, computed, IReactionOptions, makeObservable, observable, reaction } from "mobx";
|
||||
import { autoBind, createStorage } from "../../utils";
|
||||
import throttle from "lodash/throttle";
|
||||
import {monacoModelsManager} from "./monaco-model-manager";
|
||||
|
||||
export type TabId = string;
|
||||
|
||||
@ -158,12 +157,6 @@ export class DockStore implements DockStorageState {
|
||||
private init() {
|
||||
// adjust terminal height if window size changes
|
||||
window.addEventListener("resize", throttle(this.adjustHeight, 250));
|
||||
// create monaco models
|
||||
this.whenReady.then(() => {this.tabs.forEach(tab => {
|
||||
if (this.usesMonacoEditor(tab)) {
|
||||
monacoModelsManager.addModel(tab.id);
|
||||
}
|
||||
});});
|
||||
}
|
||||
|
||||
get maxHeight() {
|
||||
@ -193,13 +186,6 @@ export class DockStore implements DockStorageState {
|
||||
return this.tabs.length > 0;
|
||||
}
|
||||
|
||||
usesMonacoEditor(tab: DockTab): boolean {
|
||||
return [TabKind.CREATE_RESOURCE,
|
||||
TabKind.EDIT_RESOURCE,
|
||||
TabKind.INSTALL_CHART,
|
||||
TabKind.UPGRADE_CHART].includes(tab.kind);
|
||||
}
|
||||
|
||||
@action
|
||||
open(fullSize?: boolean) {
|
||||
this.isOpen = true;
|
||||
@ -274,11 +260,6 @@ export class DockStore implements DockStorageState {
|
||||
title
|
||||
};
|
||||
|
||||
// add monaco model
|
||||
if (this.usesMonacoEditor(tab)) {
|
||||
monacoModelsManager.addModel(id);
|
||||
}
|
||||
|
||||
this.tabs.push(tab);
|
||||
this.selectTab(tab.id);
|
||||
this.open();
|
||||
@ -294,11 +275,6 @@ export class DockStore implements DockStorageState {
|
||||
return;
|
||||
}
|
||||
|
||||
// remove monaco model
|
||||
if (this.usesMonacoEditor(tab)) {
|
||||
monacoModelsManager.removeModel(tabId);
|
||||
}
|
||||
|
||||
this.tabs = this.tabs.filter(tab => tab.id !== tabId);
|
||||
|
||||
if (this.selectedTabId === tab.id) {
|
||||
|
||||
@ -26,7 +26,6 @@ import { dockStore, DockTab, DockTabCreateSpecific, TabId, TabKind } from "./doc
|
||||
import type { KubeObject } from "../../../common/k8s-api/kube-object";
|
||||
import { apiManager } from "../../../common/k8s-api/api-manager";
|
||||
import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
|
||||
import {monacoModelsManager} from "./monaco-model-manager";
|
||||
|
||||
export interface EditingResource {
|
||||
resource: string; // resource path, e.g. /api/v1/namespaces/default
|
||||
@ -62,7 +61,6 @@ export class EditResourceStore extends DockTabStore<EditingResource> {
|
||||
// preload resource for editing
|
||||
if (!obj && !store.isLoaded && !store.isLoading && isActiveTab) {
|
||||
store.loadFromPath(resource).catch(noop);
|
||||
monacoModelsManager.getModel(tabId).setValue(resource);
|
||||
}
|
||||
// auto-close tab when resource removed from store
|
||||
else if (!obj && store.isLoaded) {
|
||||
|
||||
@ -30,7 +30,7 @@ import { cssNames } from "../../utils";
|
||||
import { editResourceStore } from "./edit-resource.store";
|
||||
import { InfoPanel } from "./info-panel";
|
||||
import { Badge } from "../badge";
|
||||
import { EditorPanel } from "./editor-panel";
|
||||
import { MonacoEditor } from "../monaco-editor";
|
||||
import { Spinner } from "../spinner";
|
||||
import type { KubeObject } from "../../../common/k8s-api/kube-object";
|
||||
|
||||
@ -86,11 +86,14 @@ export class EditResource extends React.Component<Props> {
|
||||
});
|
||||
}
|
||||
|
||||
onChange = (draft: string, error?: string) => {
|
||||
this.error = error;
|
||||
onChange = (draft: string) => {
|
||||
this.saveDraft(draft);
|
||||
};
|
||||
|
||||
onError = (error: string) => {
|
||||
this.error = error;
|
||||
};
|
||||
|
||||
save = async () => {
|
||||
if (this.error) {
|
||||
return null;
|
||||
@ -110,7 +113,7 @@ export class EditResource extends React.Component<Props> {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { tabId, error, onChange, save, draft, isReadyForEditing, resource } = this;
|
||||
const { tabId, error, draft, isReadyForEditing, resource } = this;
|
||||
|
||||
if (!isReadyForEditing) {
|
||||
return <Spinner center/>;
|
||||
@ -121,7 +124,7 @@ export class EditResource extends React.Component<Props> {
|
||||
<InfoPanel
|
||||
tabId={tabId}
|
||||
error={error}
|
||||
submit={save}
|
||||
submit={this.save}
|
||||
submitLabel="Save"
|
||||
submittingMessage="Applying.."
|
||||
controls={(
|
||||
@ -132,10 +135,11 @@ export class EditResource extends React.Component<Props> {
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<EditorPanel
|
||||
tabId={tabId}
|
||||
<MonacoEditor
|
||||
id={tabId}
|
||||
value={draft}
|
||||
onChange={onChange}
|
||||
onChange={this.onChange}
|
||||
onError={this.onError}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,111 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2021 OpenLens Authors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
* this software and associated documentation files (the "Software"), to deal in
|
||||
* the Software without restriction, including without limitation the rights to
|
||||
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
* the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
* subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
import MonacoEditor, {monaco} from "react-monaco-editor";
|
||||
import React from "react";
|
||||
import jsYaml from "js-yaml";
|
||||
import { observable, makeObservable } from "mobx";
|
||||
import { disposeOnUnmount, observer } from "mobx-react";
|
||||
import { dockStore, TabId } from "./dock.store";
|
||||
import { monacoModelsManager } from "./monaco-model-manager";
|
||||
import { ThemeStore } from "../../theme.store";
|
||||
import { UserStore } from "../../../common/user-store";
|
||||
|
||||
import "monaco-editor";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
tabId: TabId;
|
||||
value?: string;
|
||||
onChange(value: string, error?: string): void;
|
||||
}
|
||||
|
||||
|
||||
@observer
|
||||
export class EditorPanel extends React.Component<Props> {
|
||||
model: monaco.editor.ITextModel;
|
||||
public editor: monaco.editor.IStandaloneCodeEditor;
|
||||
@observable yamlError = "";
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
makeObservable(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// validate and run callback with optional error
|
||||
this.onChange(this.props.value || "");
|
||||
|
||||
disposeOnUnmount(this, [
|
||||
dockStore.onTabChange(this.onTabChange, { delay: 250 }),
|
||||
dockStore.onResize(this.onResize, { delay: 250 }),
|
||||
]);
|
||||
}
|
||||
|
||||
editorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
|
||||
this.editor = editor;
|
||||
const model = monacoModelsManager.getModel(this.props.tabId);
|
||||
|
||||
model.setValue(this.props.value ?? "");
|
||||
this.editor.setModel(model);
|
||||
};
|
||||
|
||||
validate(value: string) {
|
||||
try {
|
||||
jsYaml.safeLoadAll(value);
|
||||
this.yamlError = "";
|
||||
} catch (err) {
|
||||
this.yamlError = err.toString();
|
||||
}
|
||||
}
|
||||
|
||||
onTabChange = () => {
|
||||
this.editor.focus();
|
||||
const model = monacoModelsManager.getModel(this.props.tabId);
|
||||
|
||||
model.setValue(this.props.value ?? "");
|
||||
this.editor.setModel(model);
|
||||
};
|
||||
|
||||
onResize = () => {
|
||||
this.editor.focus();
|
||||
};
|
||||
|
||||
onChange = (value: string) => {
|
||||
this.validate(value);
|
||||
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(value, this.yamlError);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MonacoEditor
|
||||
options={{model: null, ...UserStore.getInstance().getEditorOptions()}}
|
||||
theme={ThemeStore.getInstance().activeTheme.monacoTheme}
|
||||
language = "yaml"
|
||||
onChange = {this.onChange}
|
||||
editorDidMount={this.editorDidMount}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -25,7 +25,6 @@ import { DockTabStore } from "./dock-tab.store";
|
||||
import { getChartDetails, getChartValues, HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.api";
|
||||
import type { IReleaseUpdateDetails } from "../../../common/k8s-api/endpoints/helm-releases.api";
|
||||
import { Notifications } from "../notifications";
|
||||
import { monacoModelsManager } from "./monaco-model-manager";
|
||||
|
||||
export interface IChartInstallData {
|
||||
name: string;
|
||||
@ -91,15 +90,10 @@ export class InstallChartStore extends DockTabStore<IChartInstallData> {
|
||||
|
||||
if (values) {
|
||||
this.setData(tabId, { ...data, values });
|
||||
monacoModelsManager.getModel(tabId).setValue(values);
|
||||
} else if (attempt < 4) {
|
||||
return this.loadValues(tabId, attempt + 1);
|
||||
}
|
||||
}
|
||||
|
||||
setData(tabId: TabId, data: IChartInstallData){
|
||||
super.setData(tabId, data);
|
||||
}
|
||||
}
|
||||
|
||||
export const installChartStore = new InstallChartStore();
|
||||
|
||||
@ -22,13 +22,13 @@
|
||||
import "./install-chart.scss";
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { observable, makeObservable } from "mobx";
|
||||
import { makeObservable, observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import { dockStore, DockTab } from "./dock.store";
|
||||
import { InfoPanel } from "./info-panel";
|
||||
import { Badge } from "../badge";
|
||||
import { NamespaceSelect } from "../+namespaces/namespace-select";
|
||||
import { boundMethod, prevDefault } from "../../utils";
|
||||
import { prevDefault } from "../../utils";
|
||||
import { IChartInstallData, installChartStore } from "./install-chart.store";
|
||||
import { Spinner } from "../spinner";
|
||||
import { Icon } from "../icon";
|
||||
@ -37,7 +37,7 @@ import { releaseStore } from "../+apps-releases/release.store";
|
||||
import { LogsDialog } from "../dialog/logs-dialog";
|
||||
import { Select, SelectOption } from "../select";
|
||||
import { Input } from "../input";
|
||||
import { EditorPanel } from "./editor-panel";
|
||||
import { MonacoEditor } from "../monaco-editor";
|
||||
import { navigate } from "../../navigation";
|
||||
import { releaseURL } from "../../../common/routes";
|
||||
|
||||
@ -75,8 +75,7 @@ export class InstallChart extends Component<Props> {
|
||||
return installChartStore.details.getData(this.tabId);
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
viewRelease() {
|
||||
viewRelease = () => {
|
||||
const { release } = this.releaseDetails;
|
||||
|
||||
navigate(releaseURL({
|
||||
@ -86,38 +85,32 @@ export class InstallChart extends Component<Props> {
|
||||
}
|
||||
}));
|
||||
dockStore.closeTab(this.tabId);
|
||||
}
|
||||
};
|
||||
|
||||
@boundMethod
|
||||
save(data: Partial<IChartInstallData>) {
|
||||
save = (data: Partial<IChartInstallData>) => {
|
||||
const chart = { ...this.chartData, ...data };
|
||||
|
||||
installChartStore.setData(this.tabId, chart);
|
||||
}
|
||||
};
|
||||
|
||||
@boundMethod
|
||||
onVersionChange(option: SelectOption) {
|
||||
onVersionChange = (option: SelectOption) => {
|
||||
const version = option.value;
|
||||
|
||||
this.save({ version, values: "" });
|
||||
installChartStore.loadValues(this.tabId);
|
||||
}
|
||||
};
|
||||
|
||||
@boundMethod
|
||||
onValuesChange(values: string, error?: string) {
|
||||
this.error = error;
|
||||
onValuesChange = (values: string) => {
|
||||
this.save({ values });
|
||||
}
|
||||
};
|
||||
|
||||
@boundMethod
|
||||
onNamespaceChange(opt: SelectOption) {
|
||||
onNamespaceChange = (opt: SelectOption) => {
|
||||
this.save({ namespace: opt.value });
|
||||
}
|
||||
};
|
||||
|
||||
@boundMethod
|
||||
onReleaseNameChange(name: string) {
|
||||
onReleaseNameChange = (name: string) => {
|
||||
this.save({ releaseName: name });
|
||||
}
|
||||
};
|
||||
|
||||
install = async () => {
|
||||
const { repo, name, version, namespace, values, releaseName } = this.chartData;
|
||||
@ -138,14 +131,14 @@ export class InstallChart extends Component<Props> {
|
||||
const { tabId, chartData, values, versions, install } = this;
|
||||
|
||||
if (chartData?.values === undefined || !versions) {
|
||||
return <Spinner center />;
|
||||
return <Spinner center/>;
|
||||
}
|
||||
|
||||
if (this.releaseDetails) {
|
||||
return (
|
||||
<div className="InstallChartDone flex column gaps align-center justify-center">
|
||||
<p>
|
||||
<Icon material="check" big sticker />
|
||||
<Icon material="check" big sticker/>
|
||||
</p>
|
||||
<p>Installation complete!</p>
|
||||
<div className="flex gaps align-center">
|
||||
@ -174,7 +167,7 @@ export class InstallChart extends Component<Props> {
|
||||
const panelControls = (
|
||||
<div className="install-controls flex gaps align-center">
|
||||
<span>Chart</span>
|
||||
<Badge label={`${repo}/${name}`} title="Repo/Name" />
|
||||
<Badge label={`${repo}/${name}`} title="Repo/Name"/>
|
||||
<span>Version</span>
|
||||
<Select
|
||||
className="chart-version"
|
||||
@ -213,10 +206,11 @@ export class InstallChart extends Component<Props> {
|
||||
submittingMessage="Installing..."
|
||||
showSubmitClose={false}
|
||||
/>
|
||||
<EditorPanel
|
||||
tabId={tabId}
|
||||
<MonacoEditor
|
||||
id={tabId}
|
||||
value={values}
|
||||
onChange={this.onValuesChange}
|
||||
onError={error => this.error = error}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -19,13 +19,12 @@
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
import { action, autorun, computed, IReactionDisposer, reaction, makeObservable } from "mobx";
|
||||
import { action, autorun, computed, IReactionDisposer, makeObservable, reaction } from "mobx";
|
||||
import { dockStore, DockTab, DockTabCreateSpecific, TabId, TabKind } from "./dock.store";
|
||||
import { DockTabStore } from "./dock-tab.store";
|
||||
import { getReleaseValues, HelmRelease } from "../../../common/k8s-api/endpoints/helm-releases.api";
|
||||
import { releaseStore } from "../+apps-releases/release.store";
|
||||
import { iter } from "../../utils";
|
||||
import { monacoModelsManager } from "./monaco-model-manager";
|
||||
|
||||
export interface IChartUpgradeData {
|
||||
releaseName: string;
|
||||
@ -37,7 +36,8 @@ export class UpgradeChartStore extends DockTabStore<IChartUpgradeData> {
|
||||
|
||||
values = new DockTabStore<string>();
|
||||
|
||||
@computed private get releaseNameReverseLookup(): Map<string, string> {
|
||||
@computed
|
||||
private get releaseNameReverseLookup(): Map<string, string> {
|
||||
return new Map(iter.map(this.data, ([id, { releaseName }]) => [releaseName, id]));
|
||||
}
|
||||
|
||||
@ -119,7 +119,6 @@ export class UpgradeChartStore extends DockTabStore<IChartUpgradeData> {
|
||||
const values = await getReleaseValues(releaseName, releaseNamespace, true);
|
||||
|
||||
this.values.setData(tabId, values);
|
||||
monacoModelsManager.getModel(tabId).setValue(values);
|
||||
}
|
||||
|
||||
getTabByRelease(releaseName: string): DockTab {
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
import "./upgrade-chart.scss";
|
||||
|
||||
import React from "react";
|
||||
import { observable, reaction, makeObservable } from "mobx";
|
||||
import { makeObservable, observable, reaction } from "mobx";
|
||||
import { disposeOnUnmount, observer } from "mobx-react";
|
||||
import { cssNames } from "../../utils";
|
||||
import type { DockTab } from "./dock.store";
|
||||
@ -31,7 +31,7 @@ import { upgradeChartStore } from "./upgrade-chart.store";
|
||||
import { Spinner } from "../spinner";
|
||||
import { releaseStore } from "../+apps-releases/release.store";
|
||||
import { Badge } from "../badge";
|
||||
import { EditorPanel } from "./editor-panel";
|
||||
import { MonacoEditor } from "../monaco-editor";
|
||||
import { helmChartStore, IChartVersion } from "../+apps-helm-charts/helm-chart.store";
|
||||
import type { HelmRelease } from "../../../common/k8s-api/endpoints/helm-releases.api";
|
||||
import { Select, SelectOption } from "../select";
|
||||
@ -86,8 +86,11 @@ export class UpgradeChart extends React.Component<Props> {
|
||||
this.version = this.versions[0];
|
||||
}
|
||||
|
||||
onChange = (value: string, error?: string) => {
|
||||
onChange = (value: string) => {
|
||||
upgradeChartStore.values.setData(this.tabId, value);
|
||||
};
|
||||
|
||||
onError = (error: string) => {
|
||||
this.error = error;
|
||||
};
|
||||
|
||||
@ -118,7 +121,7 @@ export class UpgradeChart extends React.Component<Props> {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { tabId, release, value, error, onChange, upgrade, versions, version } = this;
|
||||
const { tabId, release, value, error, versions, version } = this;
|
||||
const { className } = this.props;
|
||||
|
||||
if (!release || upgradeChartStore.isLoading() || !version) {
|
||||
@ -148,15 +151,16 @@ export class UpgradeChart extends React.Component<Props> {
|
||||
<InfoPanel
|
||||
tabId={tabId}
|
||||
error={error}
|
||||
submit={upgrade}
|
||||
submit={this.upgrade}
|
||||
submitLabel="Upgrade"
|
||||
submittingMessage="Updating.."
|
||||
controls={controlsAndInfo}
|
||||
/>
|
||||
<EditorPanel
|
||||
tabId={tabId}
|
||||
<MonacoEditor
|
||||
id={tabId}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
onChange={this.onChange}
|
||||
onError={this.onError}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
import "./kubeconfig-dialog.scss";
|
||||
|
||||
import React from "react";
|
||||
import { observable, makeObservable } from "mobx";
|
||||
import { makeObservable, observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import jsYaml from "js-yaml";
|
||||
import type { ServiceAccount } from "../../../common/k8s-api/endpoints";
|
||||
@ -33,9 +33,7 @@ import { Icon } from "../icon";
|
||||
import { Notifications } from "../notifications";
|
||||
import { Wizard, WizardStep } from "../wizard";
|
||||
import { apiBase } from "../../api";
|
||||
import MonacoEditor from "react-monaco-editor";
|
||||
import { ThemeStore } from "../../theme.store";
|
||||
import { UserStore } from "../../../common/user-store";
|
||||
import { MonacoEditor } from "../monaco-editor";
|
||||
|
||||
interface IKubeconfigDialogData {
|
||||
title?: React.ReactNode;
|
||||
@ -129,13 +127,7 @@ export class KubeConfigDialog extends React.Component<Props> {
|
||||
>
|
||||
<Wizard header={header}>
|
||||
<WizardStep customButtons={buttons} prev={this.close}>
|
||||
<MonacoEditor
|
||||
language="yaml"
|
||||
value={yamlConfig}
|
||||
theme={ThemeStore.getInstance().activeTheme.monacoTheme}
|
||||
className={cssNames( "MonacoEditor")}
|
||||
options={{readOnly: true, ...UserStore.getInstance().getEditorOptions()}}
|
||||
/>
|
||||
<MonacoEditor readOnly={true} value={yamlConfig}/>
|
||||
<textarea
|
||||
className="config-copy"
|
||||
readOnly defaultValue={yamlConfig}
|
||||
|
||||
@ -18,44 +18,5 @@
|
||||
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
import {monaco} from "react-monaco-editor";
|
||||
|
||||
export type TabId = string;
|
||||
|
||||
interface ModelEntry {
|
||||
id?: TabId;
|
||||
modelUri?: monaco.Uri;
|
||||
lang?: string;
|
||||
}
|
||||
|
||||
export interface ModelsState {
|
||||
models: ModelEntry[];
|
||||
}
|
||||
|
||||
export class MonacoModelsManager implements ModelsState {
|
||||
models: ModelEntry[] = [];
|
||||
|
||||
addModel(tabId: string, { value = "", lang = "yaml" } = {}) {
|
||||
const uri = this.getUri(tabId);
|
||||
const model = monaco.editor.createModel(value, lang, uri);
|
||||
|
||||
if(!uri) this.models = this.models.concat({ id: tabId, modelUri: model.uri, lang});
|
||||
}
|
||||
|
||||
getModel(tabId: string): monaco.editor.ITextModel {
|
||||
return monaco.editor.getModel(this.getUri(tabId));
|
||||
}
|
||||
|
||||
getUri(tabId: string): monaco.Uri {
|
||||
return this.models.find(model => model.id == tabId)?.modelUri;
|
||||
}
|
||||
|
||||
removeModel(tabId: string) {
|
||||
const uri = this.getUri(tabId);
|
||||
|
||||
this.models = this.models.filter(v => v.id != tabId);
|
||||
monaco.editor.getModel(uri)?.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
export const monacoModelsManager = new MonacoModelsManager();
|
||||
export * from "./monaco-editor";
|
||||
131
src/renderer/components/monaco-editor/monaco-editor.tsx
Normal file
131
src/renderer/components/monaco-editor/monaco-editor.tsx
Normal file
@ -0,0 +1,131 @@
|
||||
/**
|
||||
* Copyright (c) 2021 OpenLens Authors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
* this software and associated documentation files (the "Software"), to deal in
|
||||
* the Software without restriction, including without limitation the rights to
|
||||
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
* the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
* subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { computed, makeObservable, toJS } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import * as monaco from "monaco-editor";
|
||||
import ReactMonacoEditor, { EditorDidMount, MonacoEditorProps } from "react-monaco-editor";
|
||||
import { ThemeStore } from "../../theme.store";
|
||||
import { UserStore } from "../../../common/user-store";
|
||||
import { cssNames } from "../../utils";
|
||||
|
||||
interface Props extends MonacoEditorProps {
|
||||
id?: string; // associate editor's model.uri with some ID (e.g. DockStore.TabId)
|
||||
className?: string;
|
||||
autoFocus?: boolean;
|
||||
readOnly?: boolean;
|
||||
theme?: "vs" /* default, light theme */ | "vs-dark" | "hc-black" | string;
|
||||
language?: "yaml" | "json"; // configure bundled list of languages in via MonacoWebpackPlugin({languages: []})
|
||||
onError?(error: string): void; // TODO: validation or some another occurred error
|
||||
}
|
||||
|
||||
export const defaultEditorProps: Partial<Props> = {
|
||||
language: "yaml",
|
||||
get theme(): string {
|
||||
// theme for monaco-editor defined in `src/renderer/themes/lens-*.json`
|
||||
return ThemeStore.getInstance().activeTheme.monacoTheme;
|
||||
}
|
||||
};
|
||||
|
||||
@observer
|
||||
export class MonacoEditor extends React.Component<Props> {
|
||||
static defaultProps = defaultEditorProps as object;
|
||||
|
||||
public editor: monaco.editor.IStandaloneCodeEditor = null;
|
||||
public staticId = `editor-id#${Math.round(1e7 * Math.random())}`;
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
makeObservable(this);
|
||||
}
|
||||
|
||||
@computed get model(): monaco.editor.ITextModel {
|
||||
const { language, value, id = this.staticId } = this.props;
|
||||
|
||||
const model = this.getModelById(id);
|
||||
|
||||
if (model) {
|
||||
return model; // return existing model so far that matching current ID
|
||||
}
|
||||
|
||||
return monaco.editor.createModel(value, language, this.createUri(id));
|
||||
}
|
||||
|
||||
editorDidMount: EditorDidMount = (editor, monaco) => {
|
||||
this.editor = editor;
|
||||
|
||||
if (this.props.autoFocus) {
|
||||
this.editor.focus();
|
||||
}
|
||||
this.props.editorDidMount?.(editor, monaco);
|
||||
};
|
||||
|
||||
componentWillUnmount() {
|
||||
// console.log("[MONACO] UNMOUNTING", this.model);
|
||||
this.model?.dispose();
|
||||
}
|
||||
|
||||
createUri(id: string): monaco.Uri {
|
||||
return monaco.Uri.file(`/editor/${id}`);
|
||||
}
|
||||
|
||||
getModelById(id: string) {
|
||||
const uri = this.createUri(id);
|
||||
|
||||
return monaco.editor.getModels().find(model => String(model.uri) == String(uri));
|
||||
}
|
||||
|
||||
focus() {
|
||||
this.editor.focus();
|
||||
}
|
||||
|
||||
setValue(value: string) {
|
||||
this.editor.setValue(value);
|
||||
}
|
||||
|
||||
getValue(opts?: { preserveBOM: boolean; lineEnding: string; }) {
|
||||
return this.editor.getValue(opts);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { autoFocus, readOnly, className, options = {}, ...reactMonacoEditorProps } = this.props;
|
||||
const globalOptions = toJS(UserStore.getInstance().editorConfiguration);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<ReactMonacoEditor
|
||||
{...reactMonacoEditorProps}
|
||||
className={cssNames("MonacoEditor", className)}
|
||||
editorDidMount={this.editorDidMount}
|
||||
options={{
|
||||
automaticLayout: true,
|
||||
autoDetectHighContrast: true,
|
||||
model: this.model,
|
||||
readOnly,
|
||||
...globalOptions,
|
||||
...options,
|
||||
}}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,127 +0,0 @@
|
||||
{
|
||||
"base": "vs-dark",
|
||||
"inherit": true,
|
||||
"rules": [
|
||||
{
|
||||
"background": "191919",
|
||||
"token": ""
|
||||
},
|
||||
{
|
||||
"foreground": "3c403b",
|
||||
"token": "comment"
|
||||
},
|
||||
{
|
||||
"foreground": "5d90cd",
|
||||
"token": "string"
|
||||
},
|
||||
{
|
||||
"foreground": "46a609",
|
||||
"token": "constant.numeric"
|
||||
},
|
||||
{
|
||||
"foreground": "39946a",
|
||||
"token": "constant.language"
|
||||
},
|
||||
{
|
||||
"foreground": "927c5d",
|
||||
"token": "keyword"
|
||||
},
|
||||
{
|
||||
"foreground": "927c5d",
|
||||
"token": "support.constant.property-value"
|
||||
},
|
||||
{
|
||||
"foreground": "927c5d",
|
||||
"token": "constant.other.color"
|
||||
},
|
||||
{
|
||||
"foreground": "366f1a",
|
||||
"token": "keyword.other.unit"
|
||||
},
|
||||
{
|
||||
"foreground": "a46763",
|
||||
"token": "entity.other.attribute-name.html"
|
||||
},
|
||||
{
|
||||
"foreground": "4b4b4b",
|
||||
"token": "keyword.operator"
|
||||
},
|
||||
{
|
||||
"foreground": "e92e2e",
|
||||
"token": "storage"
|
||||
},
|
||||
{
|
||||
"foreground": "858585",
|
||||
"token": "entity.other.inherited-class"
|
||||
},
|
||||
{
|
||||
"foreground": "606060",
|
||||
"token": "entity.name.tag"
|
||||
},
|
||||
{
|
||||
"foreground": "a165ac",
|
||||
"token": "constant.character.entity"
|
||||
},
|
||||
{
|
||||
"foreground": "a165ac",
|
||||
"token": "support.class.js"
|
||||
},
|
||||
{
|
||||
"foreground": "606060",
|
||||
"token": "entity.other.attribute-name"
|
||||
},
|
||||
{
|
||||
"foreground": "e92e2e",
|
||||
"token": "meta.selector.css"
|
||||
},
|
||||
{
|
||||
"foreground": "e92e2e",
|
||||
"token": "entity.name.tag.css"
|
||||
},
|
||||
{
|
||||
"foreground": "e92e2e",
|
||||
"token": "entity.other.attribute-name.id.css"
|
||||
},
|
||||
{
|
||||
"foreground": "e92e2e",
|
||||
"token": "entity.other.attribute-name.class.css"
|
||||
},
|
||||
{
|
||||
"foreground": "616161",
|
||||
"token": "meta.property-name.css"
|
||||
},
|
||||
{
|
||||
"foreground": "e92e2e",
|
||||
"token": "support.function"
|
||||
},
|
||||
{
|
||||
"foreground": "ffffff",
|
||||
"background": "e92e2e",
|
||||
"token": "invalid"
|
||||
},
|
||||
{
|
||||
"foreground": "e92e2e",
|
||||
"token": "punctuation.section.embedded"
|
||||
},
|
||||
{
|
||||
"foreground": "606060",
|
||||
"token": "punctuation.definition.tag"
|
||||
},
|
||||
{
|
||||
"foreground": "a165ac",
|
||||
"token": "constant.other.color.rgb-value.css"
|
||||
},
|
||||
{
|
||||
"foreground": "a165ac",
|
||||
"token": "support.constant.property-value.css"
|
||||
}
|
||||
],
|
||||
"colors": {
|
||||
"editor.foreground": "#929292",
|
||||
"editor.background": "#191919",
|
||||
"editor.selectionBackground": "#000000",
|
||||
"editor.lineHighlightBackground": "#D7D7D708",
|
||||
"editorCursor.foreground": "#7DA5DC",
|
||||
"editorWhitespace.foreground": "#BFBFBF"
|
||||
}
|
||||
}
|
||||
@ -19,7 +19,7 @@
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
import { computed, observable, reaction, makeObservable } from "mobx";
|
||||
import { computed, makeObservable, observable, reaction } from "mobx";
|
||||
import { autoBind, iter, Singleton } from "./utils";
|
||||
import { UserStore } from "../common/user-store";
|
||||
import logger from "../main/logger";
|
||||
@ -29,18 +29,8 @@ import type { SelectOption } from "./components/select";
|
||||
|
||||
export type ThemeId = string;
|
||||
|
||||
export enum MonacoTheme {
|
||||
DARK = "clouds-midnight",
|
||||
LIGHT = "vs"
|
||||
}
|
||||
|
||||
export enum ThemeType {
|
||||
DARK = "dark",
|
||||
LIGHT = "light",
|
||||
}
|
||||
|
||||
export interface Theme {
|
||||
type: ThemeType;
|
||||
type: "dark" | "light" | string;
|
||||
name: string;
|
||||
colors: Record<string, string>;
|
||||
description: string;
|
||||
@ -57,10 +47,10 @@ export class ThemeStore extends Singleton {
|
||||
protected styles: HTMLStyleElement;
|
||||
|
||||
// bundled themes from `themes/${themeId}.json`
|
||||
private allThemes = observable.map<string, Theme>([
|
||||
["lens-dark", { ...darkTheme, type: ThemeType.DARK, monacoTheme: MonacoTheme.DARK }],
|
||||
["lens-light", { ...lightTheme, type: ThemeType.LIGHT, monacoTheme: MonacoTheme.LIGHT }],
|
||||
]);
|
||||
private allThemes = observable.map<string, Theme>({
|
||||
"lens-dark": darkTheme,
|
||||
"lens-light": lightTheme,
|
||||
});
|
||||
|
||||
@computed get themes(): ThemeItems[] {
|
||||
return Array.from(iter.map(this.allThemes, ([id, theme]) => ({ id, ...theme })));
|
||||
@ -118,6 +108,6 @@ export class ThemeStore extends Singleton {
|
||||
// Adding universal theme flag which can be used in component styles
|
||||
const body = document.querySelector("body");
|
||||
|
||||
body.classList.toggle("theme-light", theme.type === ThemeType.LIGHT);
|
||||
body.classList.toggle("theme-light", theme.type === "light");
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
"type": "dark",
|
||||
"description": "Original Lens dark theme",
|
||||
"author": "Mirantis",
|
||||
"monacoTheme": "clouds-midnight",
|
||||
"monacoTheme": "vs-dark",
|
||||
"colors": {
|
||||
"blue": "#3d90ce",
|
||||
"magenta": "#c93dce",
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
import * as vars from "./src/common/vars";
|
||||
import { appName, buildDir, htmlTemplate, isDevelopment, isProduction, publicPath, rendererDir, sassCommonVars, webpackDevServerPort } from "./src/common/vars";
|
||||
import path from "path";
|
||||
import webpack from "webpack";
|
||||
@ -27,7 +28,7 @@ import MiniCssExtractPlugin from "mini-css-extract-plugin";
|
||||
import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
|
||||
import ProgressBarPlugin from "progress-bar-webpack-plugin";
|
||||
import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
|
||||
import * as vars from "./src/common/vars";
|
||||
import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
|
||||
import getTSLoader from "./src/common/getTSLoader";
|
||||
|
||||
export default [
|
||||
@ -149,6 +150,11 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
|
||||
new ProgressBarPlugin(),
|
||||
new ForkTsCheckerPlugin(),
|
||||
|
||||
new MonacoWebpackPlugin({
|
||||
// available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
|
||||
languages: ["json", "yaml"],
|
||||
}),
|
||||
|
||||
// todo: fix remain warnings about circular dependencies
|
||||
// new CircularDependencyPlugin({
|
||||
// cwd: __dirname,
|
||||
|
||||
@ -9768,6 +9768,13 @@ moment-timezone@^0.5.33:
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
|
||||
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
|
||||
|
||||
monaco-editor-webpack-plugin@^4.2.0:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-4.2.0.tgz#2be76cde9cca7bd8c3418503625990f86886927b"
|
||||
integrity sha512-/P3sFiEgBl+Y50he4mbknMhbLJVop5gBUZiPS86SuHUDOOnQiQ5rL1jU5lwt1XKAwMEkhwZbUwqaHxTPkb1Utw==
|
||||
dependencies:
|
||||
loader-utils "^2.0.0"
|
||||
|
||||
monaco-editor@^0.26.1:
|
||||
version "0.26.1"
|
||||
resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.26.1.tgz#62bb5f658bc95379f8abb64b147632bd1c019d73"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user