@finos/legend-application 10.0.15 → 10.1.1

package/src/components/shared/TabManager.tsx

@@ -0,0 +1,285 @@
+/**
+ * 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 {
+  ChevronDownIcon,
+  clsx,
+  ContextMenu,
+  DragPreviewLayer,
+  DropdownMenu,
+  MenuContent,
+  MenuContentItem,
+  PanelEntryDropZonePlaceholder,
+  TimesIcon,
+  useDragPreviewLayer,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { useRef, useCallback } from 'react';
+import { type DropTargetMonitor, useDrop, useDrag } from 'react-dnd';
+import type {
+  TabManagerState,
+  TabState,
+} from '../../stores/shared/TabManagerState.js';
+
+type TabDragSource = {
+  tab: TabState;
+};
+
+const horizontalToVerticalScroll: React.WheelEventHandler = (event) => {
+  // if scrolling is more horizontal than vertical, there's nothing much to do, the OS should handle it just fine
+  // else, intercept
+  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) {
+    return;
+  }
+  event.stopPropagation();
+  let deltaX = event.deltaX;
+  // NOTE: only convert horizontal to vertical scroll when the scroll causes more horizontal than vertical displacement
+  // let the direction of `deltaY` be the direction of the scroll, i.e.
+  // - if we scroll upward, that translate to a left scroll
+  // - if we scroll downward, that translates to a right scroll
+  if (event.deltaY === 0) {
+    deltaX = event.deltaY;
+  } else if (event.deltaY < 0) {
+    deltaX = -Math.abs(event.deltaY);
+  } else {
+    deltaX = Math.abs(event.deltaY);
+  }
+  event.currentTarget.scrollBy(deltaX, 0);
+};
+
+const TabContextMenu = observer(
+  (props: { tabState: TabState; managerTabState: TabManagerState }) => {
+    const { tabState, managerTabState } = props;
+    const close = (): void => managerTabState.closeTab(tabState);
+    const closeOthers = (): void => managerTabState.closeAllOtherTabs(tabState);
+    const closeAll = (): void => managerTabState.closeAllTabs();
+
+    return (
+      <MenuContent>
+        <MenuContentItem onClick={close}>Close</MenuContentItem>
+        <MenuContentItem
+          disabled={managerTabState.tabs.length < 2}
+          onClick={closeOthers}
+        >
+          Close Others
+        </MenuContentItem>
+        <MenuContentItem onClick={closeAll}>Close All</MenuContentItem>
+      </MenuContent>
+    );
+  },
+);
+
+const Tab = observer(
+  (props: {
+    tabState: TabState;
+    tabManagerState: TabManagerState;
+    tabRenderer?: ((editorState: TabState) => React.ReactNode) | undefined;
+  }) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const { tabManagerState, tabState, tabRenderer } = props;
+
+    // Drag and Drop
+    const handleHover = useCallback(
+      (item: TabDragSource, monitor: DropTargetMonitor): void => {
+        const draggingTab = item.tab;
+        const hoveredTab = tabState;
+
+        const dragIndex = tabManagerState.tabs.findIndex(
+          (e) => e === draggingTab,
+        );
+        const hoverIndex = tabManagerState.tabs.findIndex(
+          (e) => e === hoveredTab,
+        );
+
+        const hoverBoundingReact = ref.current?.getBoundingClientRect();
+        const distanceThreshold =
+          ((hoverBoundingReact?.left ?? 0) - (hoverBoundingReact?.right ?? 0)) /
+          2;
+        const dragDistance =
+          (monitor.getClientOffset()?.x ?? 0) -
+          (hoverBoundingReact?.right ?? 0);
+        if (dragIndex < hoverIndex && dragDistance < distanceThreshold) {
+          return;
+        }
+        if (dragIndex > hoverIndex && dragDistance > distanceThreshold) {
+          return;
+        }
+
+        tabManagerState.swapTabs(draggingTab, hoveredTab);
+      },
+      [tabManagerState, tabState],
+    );
+
+    const closeTabOnMiddleClick =
+      (currTab: TabState): React.MouseEventHandler =>
+      (event): void => {
+        if (event.nativeEvent.button === 1) {
+          tabManagerState.closeTab(currTab);
+        }
+      };
+
+    const [{ isBeingDraggedEditorPanel }, dropConnector] = useDrop<
+      TabDragSource,
+      void,
+      { isBeingDraggedEditorPanel: TabState | undefined }
+    >(
+      () => ({
+        accept: [tabManagerState.dndType],
+        hover: (item, monitor) => handleHover(item, monitor),
+        collect: (
+          monitor,
+        ): {
+          isBeingDraggedEditorPanel: TabState | undefined;
+        } => ({
+          isBeingDraggedEditorPanel: monitor.getItem<TabDragSource | null>()
+            ?.tab,
+        }),
+      }),
+      [handleHover],
+    );
+    const isBeingDragged = tabState === isBeingDraggedEditorPanel;
+
+    const [, dragConnector, dragPreviewConnector] = useDrag<TabDragSource>(
+      () => ({
+        type: tabManagerState.dndType,
+        item: () => ({
+          tab: tabState,
+        }),
+      }),
+      [tabState, tabManagerState],
+    );
+    dragConnector(dropConnector(ref));
+    useDragPreviewLayer(dragPreviewConnector);
+
+    return (
+      <div
+        ref={ref}
+        className={clsx('tab-manager__tab', {
+          'tab-manager__tab--active': tabState === tabManagerState.currentTab,
+          'tab-manager__tab--dragged': isBeingDragged,
+        })}
+        onMouseUp={closeTabOnMiddleClick(tabState)}
+      >
+        <PanelEntryDropZonePlaceholder
+          showPlaceholder={false}
+          className="tab-manager__tab__dnd__placeholder"
+        >
+          <ContextMenu
+            content={
+              <TabContextMenu
+                tabState={tabState}
+                managerTabState={tabManagerState}
+              />
+            }
+            className="tab-manager__tab__content"
+          >
+            <button
+              className="tab-manager__tab__label"
+              tabIndex={-1}
+              onClick={() => tabManagerState.openTab(tabState)}
+              title={tabState.description}
+            >
+              {tabRenderer?.(tabState) ?? tabState.label}
+            </button>
+            <button
+              className="tab-manager__tab__close-btn"
+              onClick={() => tabManagerState.closeTab(tabState)}
+              tabIndex={-1}
+              title="Close"
+            >
+              <TimesIcon />
+            </button>
+          </ContextMenu>
+        </PanelEntryDropZonePlaceholder>
+      </div>
+    );
+  },
+);
+
+const TabMenu = observer((props: { managerTabState: TabManagerState }) => {
+  const { managerTabState } = props;
+  return (
+    <DropdownMenu
+      className="tab-manager__menu__toggler"
+      title="Show All Tabs"
+      content={
+        <MenuContent className="tab-manager__menu">
+          {managerTabState.tabs.map((tabState) => (
+            <MenuContentItem
+              key={tabState.uuid}
+              className="tab-manager__menu__item"
+              onClick={() => managerTabState.openTab(tabState)}
+            >
+              <div className="tab-manager__menu__item__label">
+                {tabState.label}
+              </div>
+              <div
+                className="tab-manager__menu__item__close-btn"
+                onClick={(event) => {
+                  // NOTE: prevent default action of dropdown menu
+                  event.stopPropagation();
+                  managerTabState.closeTab(tabState);
+                }}
+                tabIndex={-1}
+                title="Close"
+              >
+                <TimesIcon />
+              </div>
+            </MenuContentItem>
+          ))}
+        </MenuContent>
+      }
+      menuProps={{
+        anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+        transformOrigin: { vertical: 'top', horizontal: 'right' },
+      }}
+    >
+      <ChevronDownIcon />
+    </DropdownMenu>
+  );
+});
+
+export const TabManager = observer(
+  (props: {
+    tabManagerState: TabManagerState;
+    tabRenderer?: ((editorState: TabState) => React.ReactNode) | undefined;
+  }) => {
+    const { tabManagerState, tabRenderer } = props;
+
+    return (
+      <div className="tab-manager">
+        <div
+          className="tab-manager__content"
+          onWheel={horizontalToVerticalScroll}
+        >
+          {tabManagerState.tabs.map((tab) => (
+            <Tab
+              key={tab.uuid}
+              tabState={tab}
+              tabManagerState={tabManagerState}
+              tabRenderer={tabRenderer}
+            />
+          ))}
+          <DragPreviewLayer
+            labelGetter={(item: TabDragSource): string => item.tab.label}
+            types={[tabManagerState.dndType]}
+          />
+        </div>
+        <TabMenu managerTabState={tabManagerState} />
+      </div>
+    );
+  },
+);

package/src/index.ts

@@ -25,9 +25,6 @@ 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`
-// once we think we can add virtual assistant support for all apps
-export * from './components/VirtualAssistant.js';
 
 export * from './stores/ApplicationStore.js';
 export * from './stores/ApplicationTelemetry.js';
@@ -53,8 +50,10 @@ export * from './stores/WebApplicationRouter.js';
 export * from './components/shared/DocumentationLink.js';
 export * from './components/shared/TextInputEditor.js';
 export * from './components/shared/PackageableElementOptionLabel.js';
+export * from './components/shared/TabManager.js';
 
 export * from './stores/shared/PackageableElementOption.js';
+export * from './stores/shared/TabManagerState.js';
 
 /**
  * @modularize

package/src/stores/CommandCenter.ts

@@ -25,6 +25,11 @@ export interface CommandRegistrar {
 }
 export type CommandConfigEntry = {
   title?: string;
+  /**
+   * NOTE: only support keyboard code instead of key
+   * See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
+   * See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
+   */
   defaultKeyboardShortcut?: string;
   when?: string;
 };
@@ -40,10 +45,13 @@ export const collectKeyedCommandConfigEntriesFromConfig = (
     key: entry[0],
     content: entry[1],
   }));
+export type CommandArguments = {
+  event?: Event;
+};
 export type Command = {
   key: string;
   trigger?: () => boolean;
-  action?: () => void;
+  action?: (args?: CommandArguments) => void;
 };
 
 export class CommandCenter {
@@ -78,10 +86,10 @@ export class CommandCenter {
     this.commandRegistry.delete(commandKey);
   }
 
-  runCommand(commandKey: string): boolean {
+  runCommand(commandKey: string, args?: CommandArguments): boolean {
     const command = this.commandRegistry.get(commandKey);
     if (command && (!command.trigger || command.trigger())) {
-      command.action?.();
+      command.action?.(args);
       return true;
     }
     return false;

package/src/stores/DocumentationService.ts

@@ -48,6 +48,11 @@ export type DocumentationRegistryEntry = {
    * See https://cors-anywhere.herokuapp.com/
    */
   simple?: boolean | undefined;
+  /**
+   * Optional list of wildcard patterns to be matched against documentation entries' keys to
+   * narrow the scope of inclusion
+   */
+  includes?: string[];
 };
 
 export type DocumentationRegistryData = {

package/src/stores/KeyboardShortcutsService.ts

@@ -21,6 +21,11 @@ import type { GenericLegendApplicationStore } from './ApplicationStore.js';
 
 export class KeyboardShortcutsService {
   readonly applicationStore: GenericLegendApplicationStore;
+  /**
+   * NOTE: with this design, the relationship between command and key is many-to-one
+   * We can have multiple commands being mapped to the same key combination, not the other
+   * way around
+   */
   readonly keyMap = new Map<string, string[]>();
   /**
    * NOTE: we want to leave the value of the map as optional because we want

package/src/stores/PureLanguageSupport.ts

@@ -362,6 +362,11 @@ export const setupPureLanguageService = (
   // Override `monaco-editor` native hotkeys
   // See https://github.com/microsoft/monaco-editor/issues/102#issuecomment-1282897640
   monacoEditorAPI.addKeybindingRules([
+    {
+      // disable cursor move (core command)
+      keybinding: KeyMod.WinCtrl | KeyCode.KeyB,
+      command: null,
+    },
     {
       // disable cursor move (core command)
       keybinding: KeyMod.WinCtrl | KeyCode.KeyO,

package/src/stores/shared/TabManagerState.ts

@@ -0,0 +1,77 @@
+/**
+ * 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, 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;
+  }
+}
+
+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;
+
+  abstract openTab(tab: TabState): void;
+  abstract closeTab(tab: TabState): void;
+}

package/tsconfig.json

@@ -48,6 +48,7 @@
     "./src/stores/WebApplicationNavigator.ts",
     "./src/stores/WebApplicationRouter.ts",
     "./src/stores/shared/PackageableElementOption.ts",
+    "./src/stores/shared/TabManagerState.ts",
     "./src/stores/shared/TextSearchAdvancedConfigState.ts",
     "./src/application/LegendApplication.tsx",
     "./src/application/LegendApplicationPluginManager.tsx",
@@ -66,6 +67,7 @@
     "./src/components/execution-plan-viewer/SQLExecutionNodeViewer.tsx",
     "./src/components/shared/DocumentationLink.tsx",
     "./src/components/shared/PackageableElementOptionLabel.tsx",
+    "./src/components/shared/TabManager.tsx",
     "./src/components/shared/TextInputEditor.tsx",
     "./src/components/shared/TextSearchAdvancedConfigMenu.tsx"
   ],