@finos/legend-lego 0.1.4 → 0.1.5

package/src/application/TabManagerState.ts

@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  assertNonNullable,
+  assertTrue,
+  swapEntry,
+  uuid,
+} from '@finos/legend-shared';
+import { action, makeObservable, observable } from 'mobx';
+
+export abstract class TabState {
+  readonly uuid = uuid();
+
+  abstract get label(): string;
+
+  get description(): string | undefined {
+    return undefined;
+  }
+
+  match(tab: TabState): boolean {
+    return this === tab;
+  }
+
+  onOpen(): void {
+    // do nothing
+  }
+
+  onClose(): void {
+    // do nothing
+  }
+}
+
+export abstract class TabManagerState {
+  currentTab?: TabState | undefined;
+  tabs: TabState[] = [];
+
+  constructor() {
+    makeObservable(this, {
+      currentTab: observable,
+      tabs: observable,
+      setCurrentTab: action,
+      closeTab: action,
+      closeAllTabs: action,
+      closeAllOtherTabs: action,
+      openTab: action,
+      swapTabs: action,
+    });
+  }
+
+  setCurrentTab(val: TabState | undefined): void {
+    this.currentTab = val;
+  }
+
+  closeAllOtherTabs(tab: TabState): void {
+    assertNonNullable(
+      this.tabs.find((e) => e === tab),
+      'Specified tab should be currently opened',
+    );
+    this.setCurrentTab(tab);
+    this.tabs = [tab];
+  }
+
+  closeAllTabs(): void {
+    this.setCurrentTab(undefined);
+    this.tabs = [];
+  }
+
+  swapTabs(tab1: TabState, tab2: TabState): void {
+    swapEntry(this.tabs, tab1, tab2);
+  }
+
+  /**
+   * The unique drag and drop type
+   * See https://react-dnd.github.io/react-dnd/docs/overview#items-and-types
+   */
+  abstract get dndType(): string;
+
+  openTab(tab: TabState): void {
+    const existingTab = this.tabs.find((t) => t.match(tab));
+    if (!existingTab) {
+      if (this.currentTab) {
+        const currIndex = this.tabs.findIndex((e) => e === this.currentTab);
+        this.tabs.splice(currIndex + 1, 0, tab);
+      } else {
+        this.tabs.push(tab);
+      }
+    }
+    this.setCurrentTab(tab);
+
+    tab.onOpen();
+  }
+
+  closeTab(tab: TabState): void {
+    const tabIndex = this.tabs.findIndex((t) => t.match(tab));
+    assertTrue(tabIndex !== -1, `Can't close a tab which is not opened`);
+    this.tabs.splice(tabIndex, 1);
+    if (this.currentTab === tab) {
+      if (this.tabs.length) {
+        const openIndex = tabIndex - 1;
+        this.setCurrentTab(
+          openIndex >= 0 ? this.tabs[openIndex] : this.tabs[0],
+        );
+      } else {
+        this.setCurrentTab(undefined);
+      }
+    }
+
+    tab.onClose();
+  }
+}

package/src/application/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './DocumentationLink.js';
+
+export * from './TabManager.js';
+export * from './TabManagerState.js';
+
+export * from './FuzzySearchAdvancedConfigMenu.js';

package/src/code-editor/CodeDiffView.tsx

@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect, useState, useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import { editor as monacoEditorAPI } from 'monaco-editor';
+import {
+  DEFAULT_TAB_SIZE,
+  useApplicationStore,
+} from '@finos/legend-application';
+import { useResizeDetector } from '@finos/legend-art';
+import {
+  isString,
+  stringifyLosslessJSON,
+  tryToFormatJSONString,
+  tryToFormatLosslessJSONString,
+} from '@finos/legend-shared';
+import {
+  disposeDiffCodeEditor,
+  getBaseCodeEditorOptions,
+} from './CodeEditorUtils.js';
+import { CODE_EDITOR_LANGUAGE, CODE_EDITOR_THEME } from './CodeEditorConfig.js';
+
+export const CodeDiffView = observer(
+  (props: {
+    language: CODE_EDITOR_LANGUAGE;
+    from?: string | undefined;
+    to?: string | undefined;
+  }) => {
+    const { from, to, language } = props;
+    const applicationStore = useApplicationStore();
+    const [editor, setEditor] =
+      useState<monacoEditorAPI.IStandaloneDiffEditor>();
+    const editorRef = useRef<HTMLDivElement>(null);
+    const originalText = from ?? '';
+    const modifiedText = to ?? '';
+
+    const { ref, width, height } = useResizeDetector<HTMLDivElement>();
+
+    useEffect(() => {
+      if (width !== undefined && height !== undefined) {
+        editor?.layout({ width, height });
+      }
+    }, [editor, width, height]);
+
+    useEffect(() => {
+      if (!editor && editorRef.current) {
+        const element = editorRef.current;
+        const _editor = monacoEditorAPI.createDiffEditor(element, {
+          ...getBaseCodeEditorOptions(),
+          theme: CODE_EDITOR_THEME.LEGEND,
+          readOnly: true,
+        });
+        setEditor(_editor);
+      }
+    }, [applicationStore, editor]);
+
+    if (editor) {
+      const originalModel = monacoEditorAPI.createModel(originalText, language);
+      const modifiedModel = monacoEditorAPI.createModel(modifiedText, language);
+      editor.setModel({
+        original: originalModel,
+        modified: modifiedModel,
+      });
+    }
+
+    // dispose editor
+    useEffect(
+      () => (): void => {
+        if (editor) {
+          disposeDiffCodeEditor(editor);
+        }
+      },
+      [editor],
+    );
+
+    return (
+      <div ref={ref} className="code-editor__container">
+        <div className="code-editor__body" ref={editorRef} />
+      </div>
+    );
+  },
+);
+
+const formatJSONLikeValue = (value: unknown, lossless: boolean): string =>
+  value
+    ? isString(value)
+      ? lossless
+        ? tryToFormatLosslessJSONString(value)
+        : tryToFormatJSONString(value)
+      : lossless
+      ? stringifyLosslessJSON(value, undefined, DEFAULT_TAB_SIZE)
+      : JSON.stringify(value, undefined, DEFAULT_TAB_SIZE)
+    : '';
+
+export const JSONDiffView = observer(
+  (props: {
+    from?: unknown;
+    to?: unknown;
+    /**
+     * Use lossless algorithm while parsing/stringifying JSON-like value
+     */
+    lossless?: boolean;
+  }) => {
+    const { from, to, lossless } = props;
+
+    return (
+      <CodeDiffView
+        language={CODE_EDITOR_LANGUAGE.JSON}
+        from={formatJSONLikeValue(from, Boolean(lossless))}
+        to={formatJSONLikeValue(to, Boolean(lossless))}
+      />
+    );
+  },
+);

package/src/code-editor/CodeEditor.tsx

@@ -25,11 +25,13 @@ import {
 } from './CodeEditorUtils.js';
 import { useResizeDetector } from '@finos/legend-art';
 import {
-  type CODE_EDITOR_LANGUAGE,
-  CODE_EDITOR_THEME,
-  TAB_SIZE,
+  DEFAULT_TAB_SIZE,
   useApplicationStore,
 } from '@finos/legend-application';
+import {
+  CODE_EDITOR_THEME,
+  type CODE_EDITOR_LANGUAGE,
+} from './CodeEditorConfig.js';
 
 export const CodeEditor: React.FC<{
   inputValue: string;
@@ -137,9 +139,10 @@ export const CodeEditor: React.FC<{
       ...(extraEditorOptions ?? {}),
     });
     const model = editor.getModel();
-    model?.updateOptions({ tabSize: TAB_SIZE });
+    model?.updateOptions({ tabSize: DEFAULT_TAB_SIZE });
   }
 
+  // dispose editor
   useEffect(
     () => (): void => {
       if (editor) {
@@ -147,7 +150,7 @@ export const CodeEditor: React.FC<{
       }
     },
     [editor],
-  ); // dispose editor
+  );
 
   return (
     <div ref={ref} className="code-editor__container">

package/src/code-editor/CodeEditorConfig.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export enum CODE_EDITOR_THEME {
+  LEGEND = 'legend',
+  TEMPORARY__VSCODE_LIGHT = 'vs',
+}
+
+export enum CODE_EDITOR_LANGUAGE {
+  TEXT = 'plaintext',
+  PURE = 'pure',
+  JSON = 'json',
+  JAVA = 'java',
+  MARKDOWN = 'markdown',
+  SQL = 'sql',
+  XML = 'xml',
+  YAML = 'yaml',
+  GRAPHQL = 'graphql',
+}

package/src/code-editor/CodeEditorUtils.ts

@@ -14,7 +14,18 @@
  * limitations under the License.
  */
 
-import { editor as monacoEditorAPI, MarkerSeverity } from 'monaco-editor';
+import {
+  APPLICATION_EVENT,
+  DEFAULT_MONOSPACED_FONT_FAMILY,
+  type GenericLegendApplicationStore,
+} from '@finos/legend-application';
+import { LogEvent } from '@finos/legend-shared';
+import {
+  editor as monacoEditorAPI,
+  KeyCode,
+  KeyMod,
+  MarkerSeverity,
+} from 'monaco-editor';
 
 export type CodeEditorPosition = {
   lineNumber: number;
@@ -199,3 +210,67 @@ export const resetLineNumberGutterWidth = (
     ),
   });
 };
+
+export const configureCodeEditorComponent = async (
+  applicationStore: GenericLegendApplicationStore,
+): Promise<void> => {
+  /**
+   * Since we use a custom fonts for text-editor, we want to make sure the font is loaded before any text-editor is opened
+   * this is to ensure
+   */
+  const fontLoadFailureErrorMessage = `Monospaced font '${DEFAULT_MONOSPACED_FONT_FAMILY}' has not been loaded properly, code editor might not display properly`;
+  await Promise.all(
+    [400, 700].map((weight) =>
+      document.fonts.load(`${weight} 1em ${DEFAULT_MONOSPACED_FONT_FAMILY}`),
+    ),
+  )
+    .then(() => {
+      if (document.fonts.check(`1em ${DEFAULT_MONOSPACED_FONT_FAMILY}`)) {
+        monacoEditorAPI.remeasureFonts();
+      } else {
+        applicationStore.logService.error(
+          LogEvent.create(APPLICATION_EVENT.APPLICATION_SETUP__FAILURE),
+          fontLoadFailureErrorMessage,
+        );
+      }
+    })
+    .catch(() =>
+      applicationStore.logService.error(
+        LogEvent.create(APPLICATION_EVENT.APPLICATION_SETUP__FAILURE),
+        fontLoadFailureErrorMessage,
+      ),
+    );
+
+  // override native hotkeys supported by monaco-editor
+  // here we map these keys to a dummy command that would just dispatch the key combination
+  // to the application keyboard shortcut service, effectively bypassing the command associated
+  // with the native keybinding
+  const OVERRIDE_DEFAULT_KEYBINDING_COMMAND =
+    'legend.code-editor.override-default-keybinding';
+  monacoEditorAPI.registerCommand(
+    OVERRIDE_DEFAULT_KEYBINDING_COMMAND,
+    (accessor, ...args) => {
+      applicationStore.keyboardShortcutsService.dispatch(args[0]);
+    },
+  );
+  const hotkeyMapping: [number, string][] = [
+    [KeyCode.F1, 'F1'], // show command center
+    [KeyCode.F8, 'F8'], // show error
+    [KeyCode.F9, 'F9'], // toggle debugger breakpoint
+    [KeyMod.WinCtrl | KeyCode.KeyG, 'Control+KeyG'], // go-to line command
+    [KeyMod.WinCtrl | KeyCode.KeyB, 'Control+KeyB'], // cursor move (core command)
+    [KeyMod.WinCtrl | KeyCode.KeyO, 'Control+KeyO'], // cursor move (core command)
+    [KeyMod.WinCtrl | KeyCode.KeyD, 'Control+KeyD'], // cursor move (core command)
+    [KeyMod.WinCtrl | KeyCode.KeyP, 'Control+KeyP'], // cursor move (core command)
+    [KeyMod.Shift | KeyCode.F10, 'Shift+F10'], // show editor context menu
+    [KeyMod.WinCtrl | KeyCode.F2, 'Control+F2'], // change all instances
+    [KeyMod.WinCtrl | KeyCode.F12, 'Control+F12'], // go-to definition
+  ];
+  monacoEditorAPI.addKeybindingRules(
+    hotkeyMapping.map(([nativeCodeEditorKeyBinding, keyCombination]) => ({
+      keybinding: nativeCodeEditorKeyBinding,
+      command: OVERRIDE_DEFAULT_KEYBINDING_COMMAND,
+      commandArgs: keyCombination,
+    })),
+  );
+};