@finos/legend-application-repl 0.0.36 → 0.0.38

package/src/components/dataCube/editor/DataCubeEditor.tsx

@@ -15,7 +15,7 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { DATA_CUBE_EDITOR_TAB } from '../../../stores/dataCube/editor/DataCubeEditorState.js';
+import { DataCubeEditorTab } from '../../../stores/dataCube/editor/DataCubeEditorState.js';
 import { useREPLStore } from '../../REPLStoreProvider.js';
 import { DataCubeEditorSortsPanel } from './DataCubeEditorSortsPanel.js';
 import { DataCubeEditorGeneralPropertiesPanel } from './DataCubeEditorGeneralPropertiesPanel.js';
@@ -26,105 +26,96 @@ import { DataCubeEditorFilterPanel } from './DataCubeEditorFilterPanel.js';
 import { DataCubeEditorExtendedColumnsPanel } from './DataCubeEditorExtendedColumnsPanel.js';
 import { DataCubeEditorCodePanel } from './DataCubeEditorCodePanel.js';
 import { DataCubeEditorColumnPropertiesPanel } from './DataCubeEditorColumnPropertiesPanel.js';
-import { REPLWindow } from '../../REPLWindow.js';
 import { cn } from '@finos/legend-art';
 
-export const DataCubeEditor = observer(
-  (props: { containerRef: React.RefObject<HTMLDivElement> }) => {
-    const { containerRef } = props;
-    const replStore = useREPLStore();
-    const editor = replStore.dataCube.editor;
-    const selectedTab = editor.currentTab;
-    const tabs = [
-      DATA_CUBE_EDITOR_TAB.GENERAL_PROPERTIES,
-      DATA_CUBE_EDITOR_TAB.COLUMN_PROPERTIES,
-      DATA_CUBE_EDITOR_TAB.FILTER,
-      DATA_CUBE_EDITOR_TAB.EXTENDED_COLUMNS,
-      DATA_CUBE_EDITOR_TAB.COLUMNS,
-      DATA_CUBE_EDITOR_TAB.VERTICAL_PIVOTS,
-      DATA_CUBE_EDITOR_TAB.HORIZONTAL_PIVOTS,
-      DATA_CUBE_EDITOR_TAB.SORTS,
-      DATA_CUBE_EDITOR_TAB.CODE,
-    ];
+export const DataCubeEditor = observer(() => {
+  const repl = useREPLStore();
+  const editor = repl.dataCube.editor;
+  const selectedTab = editor.currentTab;
+  const tabs = [
+    DataCubeEditorTab.GENERAL_PROPERTIES,
+    DataCubeEditorTab.COLUMN_PROPERTIES,
+    DataCubeEditorTab.FILTER,
+    DataCubeEditorTab.EXTENDED_COLUMNS,
+    DataCubeEditorTab.COLUMNS,
+    DataCubeEditorTab.VERTICAL_PIVOTS,
+    DataCubeEditorTab.HORIZONTAL_PIVOTS,
+    DataCubeEditorTab.SORTS,
+    DataCubeEditorTab.CODE,
+  ];
 
-    return (
-      <REPLWindow
-        containerRef={containerRef}
-        config={editor.window}
-        onClose={() => editor.closePanel()}
-      >
-        <div className="relative h-[calc(100%_-_40px)] flex-1 px-2 pt-8">
-          <div className="absolute top-0 flex h-9 w-[calc(100%_-_16px)] min-w-[400px] overflow-auto pt-2">
-            {tabs.map((tab) => (
-              <button
-                key={tab}
-                onClick={(): void => editor.setCurrentTab(tab)}
-                className={cn(
-                  'relative flex h-6 items-center justify-center whitespace-nowrap border border-b-0 border-l-0 border-neutral-300 px-2 first:border-l focus:z-10',
-                  {
-                    '-top-0.5 h-[27px] border-b-0 bg-white':
-                      tab === selectedTab,
-                  },
-                )}
-              >
-                {tab}
-              </button>
-            ))}
-          </div>
-          <div className="h-full w-full overflow-auto border border-neutral-300 bg-white">
-            {selectedTab === DATA_CUBE_EDITOR_TAB.GENERAL_PROPERTIES && (
-              <DataCubeEditorGeneralPropertiesPanel />
-            )}
-            {selectedTab === DATA_CUBE_EDITOR_TAB.COLUMN_PROPERTIES && (
-              <DataCubeEditorColumnPropertiesPanel />
-            )}
-            {selectedTab === DATA_CUBE_EDITOR_TAB.FILTER && (
-              <DataCubeEditorFilterPanel />
-            )}
-            {selectedTab === DATA_CUBE_EDITOR_TAB.EXTENDED_COLUMNS && (
-              <DataCubeEditorExtendedColumnsPanel />
-            )}
-            {selectedTab === DATA_CUBE_EDITOR_TAB.COLUMNS && (
-              <DataCubeEditorColumnsPanel />
-            )}
-            {selectedTab === DATA_CUBE_EDITOR_TAB.SORTS && (
-              <DataCubeEditorSortsPanel />
-            )}
-            {selectedTab === DATA_CUBE_EDITOR_TAB.VERTICAL_PIVOTS && (
-              <DataCubeEditorVerticalPivotsPanel />
-            )}
-            {selectedTab === DATA_CUBE_EDITOR_TAB.HORIZONTAL_PIVOTS && (
-              <DataCubeEditorHorizontalPivotsPanel />
-            )}
-            {selectedTab === DATA_CUBE_EDITOR_TAB.CODE && (
-              <DataCubeEditorCodePanel />
-            )}
-          </div>
+  return (
+    <>
+      <div className="relative h-[calc(100%_-_40px)] w-full px-2 pt-8">
+        <div className="absolute top-0 flex h-9 w-[calc(100%_-_16px)] min-w-[400px] overflow-auto pt-2">
+          {tabs.map((tab) => (
+            <button
+              key={tab}
+              onClick={(): void => editor.setCurrentTab(tab)}
+              className={cn(
+                'relative flex h-6 items-center justify-center whitespace-nowrap border border-b-0 border-l-0 border-neutral-300 px-2 first:border-l focus:z-10',
+                {
+                  '-top-0.5 h-[27px] border-b-0 bg-white': tab === selectedTab,
+                },
+              )}
+            >
+              {tab}
+            </button>
+          ))}
         </div>
-        <div className="flex h-10 items-center justify-end px-2">
-          <button
-            className="h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
-            onClick={(): void => {
-              editor.applyChanges();
-              editor.closePanel();
-            }}
-          >
-            OK
-          </button>
-          <button
-            className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
-            onClick={() => editor.closePanel()}
-          >
-            Cancel
-          </button>
-          <button
-            className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
-            onClick={() => editor.applyChanges()}
-          >
-            Apply
-          </button>
+        <div className="h-full w-full overflow-auto border border-neutral-300 bg-white">
+          {selectedTab === DataCubeEditorTab.GENERAL_PROPERTIES && (
+            <DataCubeEditorGeneralPropertiesPanel />
+          )}
+          {selectedTab === DataCubeEditorTab.COLUMN_PROPERTIES && (
+            <DataCubeEditorColumnPropertiesPanel />
+          )}
+          {selectedTab === DataCubeEditorTab.FILTER && (
+            <DataCubeEditorFilterPanel />
+          )}
+          {selectedTab === DataCubeEditorTab.EXTENDED_COLUMNS && (
+            <DataCubeEditorExtendedColumnsPanel />
+          )}
+          {selectedTab === DataCubeEditorTab.COLUMNS && (
+            <DataCubeEditorColumnsPanel />
+          )}
+          {selectedTab === DataCubeEditorTab.SORTS && (
+            <DataCubeEditorSortsPanel />
+          )}
+          {selectedTab === DataCubeEditorTab.VERTICAL_PIVOTS && (
+            <DataCubeEditorVerticalPivotsPanel />
+          )}
+          {selectedTab === DataCubeEditorTab.HORIZONTAL_PIVOTS && (
+            <DataCubeEditorHorizontalPivotsPanel />
+          )}
+          {selectedTab === DataCubeEditorTab.CODE && (
+            <DataCubeEditorCodePanel />
+          )}
         </div>
-      </REPLWindow>
-    );
-  },
-);
+      </div>
+      <div className="flex h-10 items-center justify-end px-2">
+        <button
+          className="h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+          onClick={(): void => {
+            editor.applyChanges();
+            editor.display.close();
+          }}
+        >
+          OK
+        </button>
+        <button
+          className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+          onClick={() => editor.display.close()}
+        >
+          Cancel
+        </button>
+        <button
+          className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+          onClick={() => editor.applyChanges()}
+        >
+          Apply
+        </button>
+      </div>
+    </>
+  );
+});

package/src/components/dataCube/editor/DataCubeEditorCodePanel.tsx

@@ -18,12 +18,12 @@ import { observer } from 'mobx-react-lite';
 import { DataCubeIcon } from '@finos/legend-art';
 import { useEffect } from 'react';
 import { useREPLStore } from '../../REPLStoreProvider.js';
-import { WIP_Badge } from './DataCubeEditorShared.js';
+import { FormBadge_WIP } from '../../repl/Form.js';
 
 // const DataCubeCodeEditor = observer(() => {
-//   const replStore = useREPLStore();
-//   const applicationStore = replStore.applicationStore;
-//   const dataCubeState = replStore.dataCubeState;
+//   const repl = userepl();
+//   const application = repl.application;
+//   const dataCubeState = repl.dataCubeState;
 //   const queryEditorState = dataCubeState.editor.codePanel.queryEditorState;
 //   const onDidChangeModelContentEventDisposer = useRef<IDisposable | undefined>(
 //     undefined,
@@ -42,10 +42,10 @@ import { WIP_Badge } from './DataCubeEditorShared.js';
 //     () =>
 //       debounce((): void => {
 //         flowResult(dataCubeState.editor.codePanel.parseQuery()).catch(
-//           replStore.applicationStore.logUnhandledError,
+//           repl.application.logUnhandledError,
 //         );
 //       }, 1000),
-//     [dataCubeState, replStore.applicationStore.logUnhandledError],
+//     [dataCubeState, repl.application.logUnhandledError],
 //   );
 
 //   if (editor) {
@@ -111,7 +111,7 @@ import { WIP_Badge } from './DataCubeEditorShared.js';
 //       const _editor = monacoEditorAPI.create(element, {
 //         ...getBaseCodeEditorOptions(),
 //         language: CODE_EDITOR_LANGUAGE.PURE,
-//         theme: applicationStore.layoutService
+//         theme: application.layoutService
 //           .TEMPORARY__isLightColorThemeEnabled
 //           ? CODE_EDITOR_THEME.BUILT_IN__VSCODE_LIGHT
 //           : CODE_EDITOR_THEME.DEFAULT_DARK,
@@ -119,7 +119,7 @@ import { WIP_Badge } from './DataCubeEditorShared.js';
 //       setEditor(_editor);
 //     }
 //   }, [
-//     applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled,
+//     application.layoutService.TEMPORARY__isLightColorThemeEnabled,
 //     editor,
 //   ]);
 
@@ -143,12 +143,12 @@ import { WIP_Badge } from './DataCubeEditorShared.js';
 // });
 
 export const DataCubeEditorCodePanel = observer(() => {
-  const replStore = useREPLStore();
-  const panel = replStore.dataCube.editor.sorts;
+  const repl = useREPLStore();
+  const panel = repl.dataCube.editor.sorts;
   // const executeLambda = (): void => {
   //   // TODO: @akphi
   //   // flowResult(dataCubeState.executeLambda()).catch(
-  //   //   editorStore.applicationStore.logUnhandledError,
+  //   //   editorStore.application.logUnhandledError,
   //   // );
   // };
 
@@ -162,7 +162,7 @@ export const DataCubeEditorCodePanel = observer(() => {
         </div>
         <div className="ml-1 flex h-6 items-center text-xl font-medium">
           Code
-          <WIP_Badge />
+          <FormBadge_WIP />
         </div>
       </div>
       <div className="flex h-[calc(100%_-_24px)] w-full"></div>