@finos/legend-application 9.0.1 → 10.0.0

package/src/stores/KeyboardShortcutsService.ts

@@ -0,0 +1,142 @@
+/**
+ * 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 { addUniqueEntry, LogEvent } from '@finos/legend-shared';
+import { action, makeObservable, observable } from 'mobx';
+import { APPLICATION_EVENT } from './ApplicationEvent.js';
+import type { GenericLegendApplicationStore } from './ApplicationStore.js';
+
+/**
+ * List of keyboard named key
+ * See https://www.w3.org/TR/uievents-key/#named-key-attribute-values
+ * See https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
+ */
+export enum KEYBOARD_NAMED_KEY {
+  TAB = 'Tab',
+
+  CAPSLOCK = 'CapsLock',
+
+  SHIFT = 'Shift',
+  META = 'Meta',
+  ALT = 'Alt',
+  CTRL = 'Control',
+
+  SPACE = 'Space',
+
+  ESC = 'Escape',
+
+  LEFT = 'ArrowLeft',
+  RIGHT = 'ArrowRight',
+  UP = 'ArrowUp',
+  DOWN = 'ArrowDown',
+
+  ENTER = 'Enter',
+  DELETE = 'Delete',
+  BACKSPACE = 'Backspace',
+}
+
+export class KeyboardShortcutsService {
+  readonly applicationStore: GenericLegendApplicationStore;
+  readonly keyMap = new Map<string, string[]>();
+  /**
+   * NOTE: we want to leave the value of the map as optional because we want
+   * to use this map to quickly construct the key-binding view: some commands
+   * don't already have a hotkey
+   */
+  readonly commandKeyMap = new Map<string, string | undefined>();
+  isHotkeysBlocked = false;
+
+  constructor(applicationStore: GenericLegendApplicationStore) {
+    makeObservable(this, {
+      keyMap: observable,
+      commandKeyMap: observable,
+      isHotkeysBlocked: observable,
+      updateHotkey: action,
+      blockGlobalHotkeys: action,
+      unblockGlobalHotkeys: action,
+    });
+
+    this.applicationStore = applicationStore;
+    const commandsWithMultipleKeyBindings: string[] = [];
+    this.applicationStore.pluginManager
+      .getApplicationPlugins()
+      .flatMap((plugin) => plugin.getExtraKeyedCommandConfigEntries?.() ?? [])
+      .forEach((entry) => {
+        if (
+          entry.content.defaultKeyboardShortcut &&
+          this.commandKeyMap.get(entry.key)
+        ) {
+          addUniqueEntry(commandsWithMultipleKeyBindings, entry.key);
+        }
+        this.updateHotkey(entry.key, entry.content.defaultKeyboardShortcut);
+      });
+
+    if (commandsWithMultipleKeyBindings.length) {
+      this.applicationStore.log.warn(
+        LogEvent.create(
+          APPLICATION_EVENT.APPLICATION_KEYBOARD_SHORTCUTS_CONFIGURATION_CHECK_FAILURE,
+        ),
+        `Found multiple key bindings in configuration for commands:\n${commandsWithMultipleKeyBindings
+          .map((key) => `- ${key}`)
+          .join('\n')}`,
+      );
+    }
+  }
+
+  blockGlobalHotkeys(): void {
+    this.isHotkeysBlocked = true;
+  }
+
+  unblockGlobalHotkeys(): void {
+    this.isHotkeysBlocked = false;
+  }
+
+  updateHotkey(commandKey: string, keyCombination: string | undefined): void {
+    const currentKeyCombination = this.commandKeyMap.get(commandKey);
+    this.commandKeyMap.set(commandKey, keyCombination);
+    // remove old key map
+    if (currentKeyCombination) {
+      this.keyMap.set(
+        currentKeyCombination,
+        (this.keyMap.get(currentKeyCombination) ?? []).filter(
+          (key) => key === commandKey,
+        ),
+      );
+    }
+    // add new key map
+    if (keyCombination) {
+      this.keyMap.set(keyCombination, [
+        ...(this.keyMap.get(keyCombination) ?? []).filter(
+          (key) => key !== commandKey,
+        ),
+        commandKey,
+      ]);
+    }
+  }
+
+  dispatch(keyCombination: string): void {
+    if (this.isHotkeysBlocked) {
+      return;
+    }
+    const mappedCommandKeys = this.keyMap.get(keyCombination) ?? [];
+    for (const commandKey of mappedCommandKeys) {
+      // find the first command that works then escape
+      if (this.applicationStore.commandCenter.runCommand(commandKey)) {
+        return;
+      }
+    }
+  }
+}

package/src/stores/LegendApplicationPlugin.ts

@@ -16,6 +16,7 @@
 
 import { AbstractPlugin } from '@finos/legend-shared';
 import type { LegendApplicationPluginManager } from '../application/LegendApplicationPluginManager.js';
+import type { KeyedCommandConfigEntry } from './CommandCenter.js';
 import type {
   ContextualDocumentationEntry,
   DocumentationRegistryEntry,
@@ -52,6 +53,11 @@ export abstract class LegendApplicationPlugin extends AbstractPlugin {
    */
   getExtraApplicationPageEntries?(): ApplicationPageEntry[];
 
+  /**
+   * Get the list of keyed command config entries to be registered with command center.
+   */
+  getExtraKeyedCommandConfigEntries?(): KeyedCommandConfigEntry[];
+
   /**
    * Get the list of documentation registry entries from which the application can fetch
    * documentation config data and load the documentation registry

package/src/stores/PureLanguageSupport.ts

@@ -24,6 +24,7 @@ import {
 } from '@finos/legend-graph';
 import {
   editor as monacoEditorAPI,
+  KeyCode,
   languages as monacoLanguagesAPI,
 } from 'monaco-editor';
 import { EDITOR_LANGUAGE, EDITOR_THEME } from '../const.js';
@@ -357,6 +358,15 @@ export const setupPureLanguageService = (
 ): void => {
   // register Pure language in `monaco-editor`
   monacoEditorAPI.defineTheme(EDITOR_THEME.LEGEND, theme);
+  // Override `monaco-editor` native hotkeys
+  // See https://github.com/microsoft/monaco-editor/issues/102#issuecomment-1282897640
+  monacoEditorAPI.addKeybindingRules([
+    {
+      // disable show error command
+      keybinding: KeyCode.F8,
+      command: null,
+    },
+  ]);
   monacoLanguagesAPI.register({ id: EDITOR_LANGUAGE.PURE });
   monacoLanguagesAPI.setLanguageConfiguration(
     EDITOR_LANGUAGE.PURE,

package/src/stores/WebApplicationNavigator.ts

@@ -38,56 +38,67 @@ type Address = string;
  */
 interface ApplicationNavigator {
   /**
-   * Navigate to the specified location
+   * Reload the application using the same address
    */
-  goToLocation(location: Location): void;
+  reload(): void;
 
   /**
-   * Navigate to the specified location and reload the application
+   * Navigate to the specified location
+   *
+   * NOTE: this will reload the application
+   * so application states will not be preserved
+   * after navigation
    */
-  reloadToLocation(
+  goToLocation(
     location: Location,
     options?: { ignoreBlocking?: boolean | undefined },
   ): void;
 
-  /**
-   * Reload the application using the same address
-   */
-  reload(): void;
-
   /**
    * Visit the specified address
-   *
-   * NOTE: unless specified, the visit will be done in a new window
    */
-  visitAddress(
+  goToAddress(
     address: Address,
-    options?: {
-      useSameWindow?: boolean | undefined;
-    },
+    options?: { ignoreBlocking?: boolean | undefined },
   ): void;
 
+  /**
+   * Visit the specified address in a new window
+   */
+  visitAddress(address: Address): void;
+
+  /**
+   * Update the current location
+   *
+   * NOTE: any navigation actions: reload, go to address, go to location, etc.
+   * explicitly updates the current location, this action will just update the
+   * location without doing any navigation
+   */
+  updateCurrentLocation(location: Location): void;
   getCurrentAddress(): Address;
   getCurrentLocation(): Location;
   generateAddress(location: Location): Address;
 
   /**
-   * Disable platform native navigation feature
-   *
-   * e.g. in web browser, we will block back/forward buttons
+   * Block all kinds of navigation, including going to another location,
+   * changing address, and native platform navigation (e.g. in web browser, we will
+   * block back/forward buttons), etc.
    */
-  blockPlatformNavigation(blockCheckers: (() => boolean)[]): void;
-  unblockPlatformNavigation(): void;
-  get isPlatformNavigationBlocked(): boolean;
+  blockNavigation(
+    blockCheckers: (() => boolean)[],
+    onBlock?: ((onProceed: () => void) => void) | undefined,
+  ): void;
+  unblockNavigation(): void;
+  get isNavigationBlocked(): boolean;
 }
 
 export class WebApplicationNavigator implements ApplicationNavigator {
   private readonly historyAPI: History;
-  private _isPlatformNavigationBlocked = false;
-  private _forceBypassPlatformNavigationBlocking = false;
+  private _isNavigationBlocked = false;
+  private _forceBypassNavigationBlocking = false;
   private _blockCheckers: (() => boolean)[] = [];
   private _beforeUnloadListener = (event: BeforeUnloadEvent): void => {
-    if (this._forceBypassPlatformNavigationBlocking) {
+    if (this._forceBypassNavigationBlocking) {
       return;
     }
     if (this._blockCheckers.some((checker) => checker())) {
@@ -97,18 +108,15 @@ export class WebApplicationNavigator implements ApplicationNavigator {
     }
   };
 
-  notifier?: ((message: string) => void) | undefined;
+  onBlock?: ((onProceed: () => void) => void) | undefined;
 
   constructor(historyApiClient: History) {
-    makeObservable<WebApplicationNavigator, '_isPlatformNavigationBlocked'>(
-      this,
-      {
-        _isPlatformNavigationBlocked: observable,
-        isPlatformNavigationBlocked: computed,
-        blockPlatformNavigation: action,
-        unblockPlatformNavigation: action,
-      },
-    );
+    makeObservable<WebApplicationNavigator, '_isNavigationBlocked'>(this, {
+      _isNavigationBlocked: observable,
+      isNavigationBlocked: computed,
+      blockNavigation: action,
+      unblockNavigation: action,
+    });
 
     this.historyAPI = historyApiClient;
   }
@@ -120,47 +128,74 @@ export class WebApplicationNavigator implements ApplicationNavigator {
     );
   }
 
-  goToLocation(location: Location): void {
-    this.historyAPI.push(location);
-  }
-
-  reloadToLocation(
+  goToLocation(
     location: Location,
     options?: { ignoreBlocking?: boolean | undefined },
   ): void {
     if (options?.ignoreBlocking) {
-      this._forceBypassPlatformNavigationBlocking = true;
+      this._forceBypassNavigationBlocking = true;
+    }
+    const onProceed = (): void => {
+      this._forceBypassNavigationBlocking = true; // make sure to not trigger `BeforeUnloadEvent`
+      this.window.location.href = this.generateAddress(location);
+    };
+    if (
+      !this._forceBypassNavigationBlocking &&
+      this._blockCheckers.some((checker) => checker())
+    ) {
+      this.onBlock?.(onProceed);
+    } else {
+      onProceed();
     }
-    // if (
-    //   this._isPlatformNavigationBlocked &&
-    //   !this._forceBypassPlatformNavigationBlocking
-    // ) {
-    //   this.notifier
-    //   return;
-    // }
-    this.window.location.href = this.generateAddress(location);
   }
 
   reload(options?: { ignoreBlocking?: boolean | undefined }): void {
     if (options?.ignoreBlocking) {
-      this._forceBypassPlatformNavigationBlocking = true;
+      this._forceBypassNavigationBlocking = true;
+    }
+    const onProceed = (): void => {
+      this._forceBypassNavigationBlocking = true; // make sure to not trigger `BeforeUnloadEvent`
+      this.window.location.reload();
+    };
+    if (
+      !this._forceBypassNavigationBlocking &&
+      this._blockCheckers.some((checker) => checker())
+    ) {
+      this.onBlock?.(onProceed);
+    } else {
+      onProceed();
     }
-    this.window.location.reload();
   }
 
-  visitAddress(
+  goToAddress(
     address: Address,
-    options?: {
-      useSameWindow?: boolean | undefined;
-    },
+    options?: { ignoreBlocking?: boolean | undefined },
   ): void {
-    if (options?.useSameWindow) {
+    if (options?.ignoreBlocking) {
+      this._forceBypassNavigationBlocking = true;
+    }
+    const onProceed = (): void => {
+      this._forceBypassNavigationBlocking = true; // make sure to not trigger `BeforeUnloadEvent`
       this.window.location.href = address;
+    };
+    if (
+      !this._forceBypassNavigationBlocking &&
+      this._blockCheckers.some((checker) => checker())
+    ) {
+      this.onBlock?.(onProceed);
     } else {
-      this.window.open(address, '_blank');
+      onProceed();
     }
   }
 
+  visitAddress(address: Address): void {
+    this.window.open(address, '_blank');
+  }
+
+  updateCurrentLocation(location: Location): void {
+    this.historyAPI.push(location);
+  }
+
   getCurrentAddress(): Address {
     return this.window.location.href;
   }
@@ -176,8 +211,12 @@ export class WebApplicationNavigator implements ApplicationNavigator {
     );
   }
 
-  blockPlatformNavigation(blockCheckers: (() => boolean)[]): void {
-    this._isPlatformNavigationBlocked = true;
+  blockNavigation(
+    blockCheckers: (() => boolean)[],
+    onBlock?: ((onProceed: () => void) => void) | undefined,
+  ): void {
+    this._isNavigationBlocked = true;
+    this.onBlock = onBlock;
 
     // Here we attempt to cancel the effect of the back button
     // See https://medium.com/codex/angular-guards-disabling-browsers-back-button-for-specific-url-fdf05d9fe155#4f13
@@ -196,14 +235,15 @@ export class WebApplicationNavigator implements ApplicationNavigator {
     this.window.addEventListener('beforeunload', this._beforeUnloadListener);
   }
 
-  unblockPlatformNavigation(): void {
-    this._isPlatformNavigationBlocked = false;
+  unblockNavigation(): void {
+    this._isNavigationBlocked = false;
+    this.onBlock = undefined;
     this.window.onpopstate = null;
     this._blockCheckers = [];
     this.window.removeEventListener('beforeunload', this._beforeUnloadListener);
   }
 
-  get isPlatformNavigationBlocked(): boolean {
-    return this._isPlatformNavigationBlocked;
+  get isNavigationBlocked(): boolean {
+    return this._isNavigationBlocked;
   }
 }

package/src/stores/WebApplicationRouter.ts

@@ -21,6 +21,7 @@ export {
   Switch,
   Redirect,
   useParams,
+  matchPath,
   generatePath,
   MemoryRouter,
 } from 'react-router';

package/tsconfig.json

@@ -37,9 +37,11 @@
     "./src/stores/ApplicationStoreTestUtils.ts",
     "./src/stores/ApplicationTelemetry.ts",
     "./src/stores/AssistantService.ts",
+    "./src/stores/CommandCenter.ts",
     "./src/stores/DocumentationService.ts",
     "./src/stores/EventService.ts",
     "./src/stores/ExecutionPlanState.ts",
+    "./src/stores/KeyboardShortcutsService.ts",
     "./src/stores/LegendApplicationDocumentation.ts",
     "./src/stores/LegendApplicationPlugin.ts",
     "./src/stores/PureLanguageSupport.ts",
@@ -50,7 +52,6 @@
     "./src/application/LegendApplication.tsx",
     "./src/application/LegendApplicationPluginManager.tsx",
     "./src/components/ActionAlert.tsx",
-    "./src/components/ApplicationNavigationContextServiceUtils.tsx",
     "./src/components/ApplicationStoreProvider.tsx",
     "./src/components/ApplicationStoreProviderTestUtils.tsx",
     "./src/components/BlockingAlert.tsx",
@@ -59,6 +60,8 @@
     "./src/components/VirtualAssistant.tsx",
     "./src/components/WebApplicationNavigatorProvider.tsx",
     "./src/components/WebApplicationNavigatorProviderTestUtils.tsx",
+    "./src/components/useApplicationNavigationContext.tsx",
+    "./src/components/useCommands.tsx",
     "./src/components/execution-plan-viewer/ExecutionPlanViewer.tsx",
     "./src/components/execution-plan-viewer/SQLExecutionNodeViewer.tsx",
     "./src/components/shared/DocumentationLink.tsx",

package/lib/components/ApplicationNavigationContextServiceUtils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ApplicationNavigationContextServiceUtils.d.ts","sourceRoot":"","sources":["../../src/components/ApplicationNavigationContextServiceUtils.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAMH;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,+BAA+B,UAAW,MAAM,KAAG,IAQ/D,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0CAA0C,UAC9C,MAAM,aACF,OAAO,KACjB,IAeF,CAAC"}

package/lib/components/ApplicationNavigationContextServiceUtils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ApplicationNavigationContextServiceUtils.js","sourceRoot":"","sources":["../../src/components/ApplicationNavigationContextServiceUtils.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,gCAAgC,EAAE,MAAM,kDAAkD,CAAC;AACpG,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAEpE;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,KAAa,EAAQ,EAAE;IACrE,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,gCAAgC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/D,gBAAgB,CAAC,wBAAwB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACxD,OAAO,GAAG,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC,CAAC;AAChC,CAAC,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,0CAA0C,GAAG,CACxD,KAAa,EACb,SAAkB,EACZ,EAAE;IACR,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,gCAAgC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/D,IAAI,SAAS,EAAE;YACb,gBAAgB,CAAC,wBAAwB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACzD;aAAM;YACL,gBAAgB,CAAC,wBAAwB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;SACxD;QACD,sEAAsE;QACtE,oFAAoF;QACpF,kBAAkB;QAClB,OAAO,GAAG,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;AAC3C,CAAC,CAAC"}