@finos/legend-application 9.0.1 → 10.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-application",
-  "version": "9.0.1",
+  "version": "10.0.1",
   "description": "Legend application core",
   "keywords": [
     "legend",
@@ -43,34 +43,34 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-art": "4.0.1",
-    "@finos/legend-graph": "18.0.1",
-    "@finos/legend-shared": "6.1.4",
+    "@finos/legend-art": "4.1.0",
+    "@finos/legend-graph": "19.1.0",
+    "@finos/legend-shared": "6.1.5",
     "@types/css-font-loading-module": "0.0.7",
     "@types/react": "18.0.21",
     "@types/react-dom": "18.0.6",
     "@types/react-router-dom": "5.3.3",
-    "date-fns": "2.29.3",
     "history": "5.3.0",
     "mobx": "6.6.2",
     "mobx-react-lite": "3.4.0",
-    "monaco-editor": "0.34.0",
+    "monaco-editor": "0.34.1",
     "react": "18.2.0",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.2.0",
     "react-draggable": "4.4.5",
+    "react-hotkeys": "2.0.0",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
-    "serializr": "2.0.5",
+    "serializr": "3.0.1",
     "sql-formatter": "11.0.2"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.20",
-    "@jest/globals": "29.1.2",
+    "@finos/legend-dev-utils": "2.0.21",
+    "@jest/globals": "29.2.1",
     "cross-env": "7.0.3",
     "eslint": "8.25.0",
-    "jest": "29.1.2",
+    "jest": "29.2.1",
     "npm-run-all": "4.1.5",
     "rimraf": "3.0.2",
     "sass": "1.55.0",

package/src/application/LegendApplication.tsx

@@ -16,6 +16,7 @@
 
 import { configure as configureMobx } from 'mobx';
 import { editor as monacoEditorAPI } from 'monaco-editor';
+import { configure as configureReactHotkeys } from 'react-hotkeys';
 import { MONOSPACED_FONT_FAMILY } from '../const.js';
 import type {
   LegendApplicationConfig,
@@ -131,6 +132,13 @@ export const setupLegendApplicationUILibrary = async (
     enforceActions: 'observed',
   });
 
+  configureReactHotkeys({
+    // By default, `react-hotkeys` will avoid capturing keys from input tags like <input>, <textarea>, <select>
+    // We want to listen to hotkey from every where in the app so we disable that
+    // See https://github.com/greena13/react-hotkeys#ignoring-events
+    ignoreTags: [],
+  });
+
   configureComponents();
 };
 

package/src/components/ActionAlert.tsx

@@ -48,10 +48,6 @@ const ActionAlertContent = observer((props: { info: ActionAlertInfo }) => {
     actions.find((action) => action.default)?.handler?.();
     handleClose();
   };
-  const onSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
-    event.preventDefault();
-    handleSubmit();
-  };
 
   return (
     <Dialog
@@ -62,7 +58,10 @@ const ActionAlertContent = observer((props: { info: ActionAlertInfo }) => {
       }}
     >
       <form
-        onSubmit={onSubmit}
+        onSubmit={(event) => {
+          event.preventDefault();
+          handleSubmit();
+        }}
         className={`modal search-modal modal--dark blocking-alert blocking-alert--${(
           type ?? ActionAlertType.STANDARD
         ).toLowerCase()}`}

package/src/components/LegendApplicationComponentFrameworkProvider.tsx

@@ -14,27 +14,112 @@
  * limitations under the License.
  */
 
-import { Backdrop, LegendStyleProvider } from '@finos/legend-art';
+import { Backdrop, LegendStyleProvider, Portal } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { type KeyMap, GlobalHotKeys } from 'react-hotkeys';
 import { ActionAlert } from './ActionAlert.js';
 import { useApplicationStore } from './ApplicationStoreProvider.js';
 import { BlockingAlert } from './BlockingAlert.js';
 import { NotificationManager } from './NotificationManager.js';
 
+const APP_CONTAINER_ID = 'app.container';
+const APP_BACKDROP_CONTAINER_ID = 'app.backdrop-container';
+
+const buildReactHotkeysConfiguration = (
+  commandKeyMap: Map<string, string | undefined>,
+  handlerCreator: (
+    keyCombination: string,
+  ) => (keyEvent?: KeyboardEvent) => void,
+): [KeyMap, { [key: string]: (keyEvent?: KeyboardEvent) => void }] => {
+  const keyMap: Record<PropertyKey, string[]> = {};
+  commandKeyMap.forEach((keyCombination, commandKey) => {
+    if (keyCombination) {
+      keyMap[commandKey] = [keyCombination];
+    }
+  });
+  const handlers: Record<PropertyKey, (keyEvent?: KeyboardEvent) => void> = {};
+  commandKeyMap.forEach((keyCombination, commandKey) => {
+    if (keyCombination) {
+      handlers[commandKey] = handlerCreator(keyCombination);
+    }
+  });
+  return [keyMap, handlers];
+};
+
+export const forceDispatchKeyboardEvent = (event: KeyboardEvent): void => {
+  document
+    .getElementById(APP_CONTAINER_ID)
+    ?.dispatchEvent(new KeyboardEvent(event.type, event));
+};
+
+/**
+ * Potential location to mount backdrop on
+ *
+ * NOTE: we usually want the backdrop container to be the first child of its immediate parent
+ * so that it properly lies under the content that we pick to show on top of the backdrop
+ */
+export const BackdropContainer: React.FC<{ elementID: string }> = (props) => (
+  <div className="backdrop__container" id={props.elementID} />
+);
+
 export const LegendApplicationComponentFrameworkProvider = observer(
   (props: { children: React.ReactNode }) => {
     const { children } = props;
     const applicationStore = useApplicationStore();
+    const backdropContainer = applicationStore.backdropContainerElementID
+      ? document.getElementById(applicationStore.backdropContainerElementID) ??
+        document.getElementById(APP_BACKDROP_CONTAINER_ID)
+      : document.getElementById(APP_BACKDROP_CONTAINER_ID);
+
+    const [keyMap, hotkeyHandlerMap] = buildReactHotkeysConfiguration(
+      applicationStore.keyboardShortcutsService.commandKeyMap,
+      (keyCombination: string) => (event?: KeyboardEvent) => {
+        // NOTE: Though tempting since it's a good way to simplify and potentially avoid conflicts,
+        // we should not call `preventDefault()` because if we have any hotkey which is too short, such as `r`, `a`
+        // we risk blocking some very common interaction, i.e. user typing, or even constructing longer
+        // key combinations
+        applicationStore.keyboardShortcutsService.dispatch(keyCombination);
+      },
+    );
 
     return (
       <LegendStyleProvider>
         <BlockingAlert />
         <ActionAlert />
         <NotificationManager />
-        <Backdrop className="backdrop" open={applicationStore.showBackdrop} />
-        <DndProvider backend={HTML5Backend}>{children}</DndProvider>
+        {applicationStore.showBackdrop && (
+          // We use <Portal> here to insert backdrop into different parts of the app
+          // as backdrop relies heavily on z-index mechanism so its location in the DOM
+          // really matters.
+          // For example, the default location of the backdrop works fine for most cases
+          // but if we want to use the backdrop for elements within modal dialogs, we would
+          // need to mount the backdrop at a different location
+          <Portal container={backdropContainer}>
+            <Backdrop
+              className="backdrop"
+              open={applicationStore.showBackdrop}
+            />
+          </Portal>
+        )}
+        <DndProvider backend={HTML5Backend}>
+          <GlobalHotKeys
+            keyMap={keyMap}
+            handlers={hotkeyHandlerMap}
+            allowChanges={true}
+          >
+            <div
+              className="app__container"
+              // NOTE: this `id` is used to quickly identify this DOM node so we could manually
+              // dispatch keyboard event here in order to be captured by our global hotkeys matchers
+              id={APP_CONTAINER_ID}
+            >
+              <BackdropContainer elementID={APP_BACKDROP_CONTAINER_ID} />
+              {children}
+            </div>
+          </GlobalHotKeys>
+        </DndProvider>
       </LegendStyleProvider>
     );
   },

package/src/components/VirtualAssistant.tsx

@@ -42,10 +42,10 @@ import {
   ContentType,
   debounce,
   downloadFileUsingDataURI,
+  formatDate,
   isString,
   uuid,
 } from '@finos/legend-shared';
-import { format } from 'date-fns';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { TAB_SIZE } from '../const.js';
@@ -284,7 +284,7 @@ const VirtualAssistantSearchPanel = observer(() => {
 
   const downloadDocRegistry = (): void => {
     downloadFileUsingDataURI(
-      `documentation-registry_${format(
+      `documentation-registry_${formatDate(
         new Date(Date.now()),
         DATE_TIME_FORMAT,
       )}.json`,
@@ -298,7 +298,7 @@ const VirtualAssistantSearchPanel = observer(() => {
   };
   const downloadContextualDocIndex = (): void => {
     downloadFileUsingDataURI(
-      `documentation-registry_${format(
+      `documentation-registry_${formatDate(
         new Date(Date.now()),
         DATE_TIME_FORMAT,
       )}.json`,

package/src/components/execution-plan-viewer/ExecutionPlanViewer.tsx

@@ -330,7 +330,8 @@ const ExecutionPlanViewPanel = observer(
                 </button>
               </div>
               <DropdownMenu
-                className="execution-plan-viewer__panel__view-mode"
+                className="execution-plan-viewer__panel__view-mode__type"
+                title="View as..."
                 content={
                   <MenuContent className="execution-plan-viewer__panel__view-mode__options execution-plan-viewer__panel__view-mode__options--with-group">
                     <div className="execution-plan-viewer__panel__view-mode__option__group execution-plan-viewer__panel__view-mode__option__group--native">
@@ -358,14 +359,9 @@ const ExecutionPlanViewPanel = observer(
                   transformOrigin: { vertical: 'top', horizontal: 'right' },
                 }}
               >
-                <button
-                  className="execution-plan-viewer__panel__view-mode__type"
-                  title="View as..."
-                >
-                  <div className="execution-plan-viewer__panel__view-mode__type__label">
-                    {executionPlanState.viewMode}
-                  </div>
-                </button>
+                <div className="execution-plan-viewer__panel__view-mode__type__label">
+                  {executionPlanState.viewMode}
+                </div>
               </DropdownMenu>
             </div>
             <div className="panel__content execution-plan-viewer__panel__content">

package/src/components/shared/TextInputEditor.tsx

@@ -22,7 +22,6 @@ import {
 } from 'monaco-editor';
 import {
   disposeEditor,
-  disableEditorHotKeys,
   baseTextEditorSettings,
   resetLineNumberGutterWidth,
   getEditorValue,
@@ -31,10 +30,14 @@ import {
 } from '@finos/legend-art';
 import { type EDITOR_LANGUAGE, EDITOR_THEME, TAB_SIZE } from '../../const.js';
 import { useApplicationStore } from '../ApplicationStoreProvider.js';
+import { forceDispatchKeyboardEvent } from '../LegendApplicationComponentFrameworkProvider.js';
 
-export type TextInputEditorOnKeyDownEventHandler = {
-  matcher: (event: IKeyboardEvent) => boolean;
-  action: (event: IKeyboardEvent) => void;
+/**
+ * NOTE: `monaco-editor` does not bubble `keydown` event in natural order, we will
+ * have to manually do this in order to take advantage of application keyboard shortcuts service
+ */
+export const createPassThroughOnKeyHandler = () => (event: IKeyboardEvent) => {
+  forceDispatchKeyboardEvent(event.browserEvent);
 };
 
 export const TextInputEditor: React.FC<{
@@ -47,7 +50,6 @@ export const TextInputEditor: React.FC<{
     | (monacoEditorAPI.IEditorOptions & monacoEditorAPI.IGlobalEditorOptions)
     | undefined;
   updateInput?: ((val: string) => void) | undefined;
-  onKeyDownEventHandlers?: TextInputEditorOnKeyDownEventHandler[] | undefined;
 }> = (props) => {
   const {
     inputValue,
@@ -57,13 +59,11 @@ export const TextInputEditor: React.FC<{
     showMiniMap,
     hideGutter,
     extraEditorOptions,
-    onKeyDownEventHandlers,
   } = props;
   const applicationStore = useApplicationStore();
   const [editor, setEditor] = useState<
     monacoEditorAPI.IStandaloneCodeEditor | undefined
   >();
-  const onKeyDownEventDisposer = useRef<IDisposable | undefined>(undefined);
   const onDidChangeModelContentEventDisposer = useRef<IDisposable | undefined>(
     undefined,
   );
@@ -97,7 +97,13 @@ export const TextInputEditor: React.FC<{
         formatOnType: true,
         formatOnPaste: true,
       });
-      disableEditorHotKeys(_editor);
+      // NOTE: if we ever set any hotkey explicitly, we would like to use the disposer partern instead
+      // else, we could risk triggering these hotkeys command multiple times
+      // e.g.
+      // const onKeyDownEventDisposer = useRef<IDisposable | undefined>(undefined);
+      // onKeyDownEventDisposer.current?.dispose();
+      // onKeyDownEventDisposer.current = editor.onKeyDown(() => ...)
+      _editor.onKeyDown(() => createPassThroughOnKeyHandler());
       setEditor(_editor);
     }
   }, [applicationStore, editor]);
@@ -124,19 +130,6 @@ export const TextInputEditor: React.FC<{
         }
       });
 
-    // dispose to avoid trigger hotkeys multiple times
-    // for a more extensive note on this, see `LambdaEditor`
-    onKeyDownEventDisposer.current?.dispose();
-    onKeyDownEventDisposer.current = editor.onKeyDown((event) => {
-      onKeyDownEventHandlers?.forEach((handler) => {
-        if (handler.matcher(event)) {
-          event.preventDefault();
-          event.stopPropagation();
-          handler.action(event);
-        }
-      });
-    });
-
     // Set the text value and editor options
     const currentValue = getEditorValue(editor);
     if (currentValue !== value) {

package/src/components/useCommands.tsx

@@ -0,0 +1,25 @@
+/**
+ * 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 } from 'react';
+import type { CommandRegistrar } from '../stores/CommandCenter.js';
+
+export const useCommands = (registrar: CommandRegistrar): void => {
+  useEffect(() => {
+    registrar.registerCommands();
+    return () => registrar.deregisterCommands();
+  }, [registrar]);
+};

package/src/index.ts

@@ -21,7 +21,8 @@ export * from './application/LegendApplication.js';
 export * from './components/ApplicationStoreProvider.js';
 export * from './components/WebApplicationNavigatorProvider.js';
 export * from './components/LegendApplicationComponentFrameworkProvider.js';
-export * from './components/ApplicationNavigationContextServiceUtils.js';
+export * from './components/useApplicationNavigationContext.js';
+export * from './components/useCommands.js';
 export * from './components/ApplicationStoreProviderTestUtils.js';
 export * from './components/WebApplicationNavigatorProviderTestUtils.js';
 // TODO: consider moving this to `LegendApplicationComponentFrameworkProvider`
@@ -34,6 +35,7 @@ export * from './stores/ApplicationEvent.js';
 export * from './application/LegendApplicationConfig.js';
 export { WebApplicationNavigator } from './stores/WebApplicationNavigator.js';
 export * from './stores/DocumentationService.js';
+export * from './stores/CommandCenter.js';
 export * from './stores/EventService.js';
 export * from './stores/AssistantService.js';
 export * from './stores/ApplicationNavigationContextService.js';

package/src/stores/ApplicationEvent.ts

@@ -24,8 +24,11 @@ export enum APPLICATION_EVENT {
   APPLICATION_DOCUMENTATION_FETCH_FAILURE = 'application.fetch.documentation.failure',
   APPLICATION_DOCUMENTATION_LOAD_SKIPPED = 'application.load.documentation.skipped',
   APPLICATION_DOCUMENTATION_REQUIREMENT_CHECK_FAILURE = 'application.load.documentation.requirement-check.failure',
+  APPLICATION_KEYBOARD_SHORTCUTS_CONFIGURATION_CHECK_FAILURE = 'application.load.keyboard-shortcuts.configuration-check.failure',
   APPLICATION_CONTEXTUAL_DOCUMENTATION_LOAD_SKIPPED = 'application.load.contextual-documentation.skipped',
 
+  APPLICATION_COMMAND_CENTER_REGISTRATION_FAILURE = 'application.command-center.registration.failure',
+
   APPLICATION_LOADED = 'application.load.success',
   APPLICATION_LOAD_FAILURE = 'application.load.failure',
 

package/src/stores/ApplicationStore.ts

@@ -35,6 +35,8 @@ import { AssistantService } from './AssistantService.js';
 import { EventService } from './EventService.js';
 import { ApplicationNavigationContextService } from './ApplicationNavigationContextService.js';
 import type { LegendApplicationPlugin } from './LegendApplicationPlugin.js';
+import { CommandCenter } from './CommandCenter.js';
+import { KeyboardShortcutsService } from './KeyboardShortcutsService.js';
 
 export enum ActionAlertType {
   STANDARD = 'STANDARD',
@@ -136,7 +138,15 @@ export class ApplicationStore<
   telemetryService = new TelemetryService();
   tracerService = new TracerService();
 
-  // misc
+  // control and interactions
+  commandCenter: CommandCenter;
+  keyboardShortcutsService: KeyboardShortcutsService;
+
+  // TODO: config
+  // See https://github.com/finos/legend-studio/issues/407
+
+  // backdrop
+  backdropContainerElementID?: string | undefined;
   showBackdrop = false;
 
   // theme
@@ -153,7 +163,9 @@ export class ApplicationStore<
       blockingAlertInfo: observable,
       actionAlertInfo: observable,
       TEMPORARY__isLightThemeEnabled: observable,
+      backdropContainerElementID: observable,
       showBackdrop: observable,
+      setBackdropContainerElementID: action,
       setShowBackdrop: action,
       setBlockingAlert: action,
       setActionAlertInfo: action,
@@ -180,6 +192,8 @@ export class ApplicationStore<
     this.telemetryService.registerPlugins(
       pluginManager.getTelemetryServicePlugins(),
     );
+    this.commandCenter = new CommandCenter(this);
+    this.keyboardShortcutsService = new KeyboardShortcutsService(this);
     this.tracerService.registerPlugins(pluginManager.getTracerServicePlugins());
     this.eventService.registerEventNotifierPlugins(
       pluginManager.getEventNotifierPlugins(),
@@ -190,11 +204,25 @@ export class ApplicationStore<
     this.TEMPORARY__isLightThemeEnabled = val;
   }
 
+  /**
+   * Change the ID used to find the base element to mount the backdrop on.
+   * This is useful when we want to use backdrop with embedded application which
+   * requires its own backdrop usage.
+   */
+  setBackdropContainerElementID(val: string | undefined): void {
+    this.backdropContainerElementID = val;
+  }
+
   setShowBackdrop(val: boolean): void {
     this.showBackdrop = val;
   }
 
   setBlockingAlert(alertInfo: BlockingAlertInfo | undefined): void {
+    if (alertInfo) {
+      this.keyboardShortcutsService.blockGlobalHotkeys();
+    } else {
+      this.keyboardShortcutsService.unblockGlobalHotkeys();
+    }
     this.blockingAlertInfo = alertInfo;
   }
 
@@ -204,6 +232,11 @@ export class ApplicationStore<
         'Action alert is stacked: new alert is invoked while another one is being displayed',
       );
     }
+    if (alertInfo) {
+      this.keyboardShortcutsService.blockGlobalHotkeys();
+    } else {
+      this.keyboardShortcutsService.unblockGlobalHotkeys();
+    }
     this.actionAlertInfo = alertInfo;
   }
 

package/src/stores/CommandCenter.ts

@@ -0,0 +1,89 @@
+/**
+ * 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 { LogEvent } from '@finos/legend-shared';
+import { action, makeObservable, observable } from 'mobx';
+import { APPLICATION_EVENT } from './ApplicationEvent.js';
+import type { GenericLegendApplicationStore } from './ApplicationStore.js';
+
+export interface CommandRegistrar {
+  registerCommands(): void;
+  deregisterCommands(): void;
+}
+export type CommandConfigEntry = {
+  title?: string;
+  defaultKeyboardShortcut?: string;
+  when?: string;
+};
+export type KeyedCommandConfigEntry = {
+  key: string;
+  content: CommandConfigEntry;
+};
+export type CommandConfigData = Record<string, CommandConfigEntry>;
+export const collectKeyedCommandConfigEntriesFromConfig = (
+  rawEntries: Record<string, CommandConfigEntry>,
+): KeyedCommandConfigEntry[] =>
+  Object.entries(rawEntries).map((entry) => ({
+    key: entry[0],
+    content: entry[1],
+  }));
+export type Command = {
+  key: string;
+  trigger?: () => boolean;
+  action?: () => void;
+};
+
+export class CommandCenter {
+  readonly applicationStore: GenericLegendApplicationStore;
+  readonly commandRegistry = new Map<string, Command>();
+
+  constructor(applicationStore: GenericLegendApplicationStore) {
+    makeObservable(this, {
+      commandRegistry: observable,
+      registerCommand: action,
+      deregisterCommand: action,
+    });
+
+    this.applicationStore = applicationStore;
+  }
+
+  registerCommand(command: Command): void {
+    const commandKey = command.key;
+    if (this.commandRegistry.has(commandKey)) {
+      this.applicationStore.log.warn(
+        LogEvent.create(
+          APPLICATION_EVENT.APPLICATION_COMMAND_CENTER_REGISTRATION_FAILURE,
+        ),
+        `Can't register command: command is already registered`,
+      );
+      return;
+    }
+    this.commandRegistry.set(commandKey, command);
+  }
+
+  deregisterCommand(commandKey: string): void {
+    this.commandRegistry.delete(commandKey);
+  }
+
+  runCommand(commandKey: string): boolean {
+    const command = this.commandRegistry.get(commandKey);
+    if (command && (!command.trigger || command.trigger())) {
+      command.action?.();
+      return true;
+    }
+    return false;
+  }
+}

package/src/stores/DocumentationService.ts

@@ -122,10 +122,10 @@ export const collectContextualDocumnetationEntries = (
   }));
 
 export class DocumentationService {
-  url?: string | undefined;
+  readonly url?: string | undefined;
 
-  private docRegistry = new Map<string, DocumentationEntry>();
-  private contextualDocIndex = new Map<string, DocumentationEntry>();
+  private readonly docRegistry = new Map<string, DocumentationEntry>();
+  private readonly contextualDocIndex = new Map<string, DocumentationEntry>();
 
   constructor(applicationStore: GenericLegendApplicationStore) {
     // set the main documenation site url