@finos/legend-application-repl 0.0.48 → 0.0.50

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

@@ -16,60 +16,62 @@
 
 import { DataCubeIcon } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
-import { useREPLStore } from '../../REPLStoreProvider.js';
 import { DataCubeEditorColumnsSelector } from './DataCubeEditorColumnsSelector.js';
 import { FormCheckbox } from '../../repl/Form.js';
 import { DataCubeEditorColumnsSelectorColumnsVisibility } from '../../../stores/dataCube/editor/DataCubeEditorColumnsSelectorState.js';
 import { useEffect } from 'react';
+import type { DataCubeState } from '../../../stores/dataCube/DataCubeState.js';
 
-export const DataCubeEditorColumnsPanel = observer(() => {
-  const repl = useREPLStore();
-  const panel = repl.dataCube.editor.columns;
+export const DataCubeEditorColumnsPanel = observer(
+  (props: { dataCube: DataCubeState }) => {
+    const { dataCube } = props;
+    const panel = dataCube.editor.columns;
 
-  useEffect(() => () => panel.propagateColumnSelectionChanges(), [panel]);
+    useEffect(() => () => panel.propagateColumnSelectionChanges(), [panel]);
 
-  return (
-    <div className="h-full w-full select-none p-2">
-      <div className="flex h-6 justify-between">
-        <div className="flex h-full">
-          <div className="flex h-6 items-center text-xl font-medium">
-            <DataCubeIcon.TableColumns />
+    return (
+      <div className="h-full w-full select-none p-2">
+        <div className="flex h-6 justify-between">
+          <div className="flex h-full">
+            <div className="flex h-6 items-center text-xl font-medium">
+              <DataCubeIcon.TableColumns />
+            </div>
+            <div className="ml-1 flex h-6 items-center text-xl font-medium">
+              Columns
+            </div>
           </div>
-          <div className="ml-1 flex h-6 items-center text-xl font-medium">
-            Columns
+          <div className="flex h-full items-center pr-2">
+            <FormCheckbox
+              label="Show hidden columns?"
+              checked={
+                panel.selector.columnsVisibility !==
+                DataCubeEditorColumnsSelectorColumnsVisibility.HIDDEN
+              }
+              onChange={() =>
+                panel.selector.setColumnsVisibility(
+                  panel.selector.columnsVisibility !==
+                    DataCubeEditorColumnsSelectorColumnsVisibility.HIDDEN
+                    ? DataCubeEditorColumnsSelectorColumnsVisibility.HIDDEN
+                    : DataCubeEditorColumnsSelectorColumnsVisibility.VISIBLE_WITH_WARNING,
+                )
+              }
+            />
           </div>
         </div>
-        <div className="flex h-full items-center pr-2">
-          <FormCheckbox
-            label="Show hidden columns?"
-            checked={
-              panel.selector.columnsVisibility !==
-              DataCubeEditorColumnsSelectorColumnsVisibility.HIDDEN
-            }
-            onChange={() =>
-              panel.selector.setColumnsVisibility(
-                panel.selector.columnsVisibility !==
-                  DataCubeEditorColumnsSelectorColumnsVisibility.HIDDEN
-                  ? DataCubeEditorColumnsSelectorColumnsVisibility.HIDDEN
-                  : DataCubeEditorColumnsSelectorColumnsVisibility.VISIBLE_WITH_WARNING,
-              )
-            }
+        <div className="flex h-[calc(100%_-_24px)] w-full">
+          <DataCubeEditorColumnsSelector
+            selector={panel.selector}
+            noColumnsSelectedRenderer={() => (
+              <div className="flex items-center border-[1.5px] border-red-400 p-2 font-semibold text-red-500">
+                <div>
+                  <DataCubeIcon.Warning className="mr-1 text-lg" />
+                </div>
+                No columns selected
+              </div>
+            )}
           />
         </div>
       </div>
-      <div className="flex h-[calc(100%_-_24px)] w-full">
-        <DataCubeEditorColumnsSelector
-          selector={panel.selector}
-          noColumnsSelectedRenderer={() => (
-            <div className="flex items-center border-[1.5px] border-red-400 p-2 font-semibold text-red-500">
-              <div>
-                <DataCubeIcon.Warning className="mr-1 text-lg" />
-              </div>
-              No columns selected
-            </div>
-          )}
-        />
-      </div>
-    </div>
-  );
-});
+    );
+  },
+);

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

@@ -48,7 +48,7 @@ function getBaseGridProps<
 >(): AgGridReactProps<T> {
   return {
     modules: [ClientSideRowModelModule],
-    className: 'ag-theme-balham',
+    className: 'ag-theme-quartz',
     animateRows: false,
     getRowId: (params) => params.data.name,
     editType: 'fullRow',

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

@@ -16,28 +16,30 @@
 
 import { DataCubeIcon } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
-import { useREPLStore } from '../../REPLStoreProvider.js';
 import { useEffect } from 'react';
 import { FormBadge_WIP } from '../../repl/Form.js';
+import type { DataCubeState } from '../../../stores/dataCube/DataCubeState.js';
 
-export const DataCubeEditorExtendedColumnsPanel = observer(() => {
-  const repl = useREPLStore();
-  const panel = repl.dataCube.editor.sorts;
+export const DataCubeEditorExtendedColumnsPanel = observer(
+  (props: { dataCube: DataCubeState }) => {
+    const { dataCube } = props;
+    const panel = dataCube.editor.sorts;
 
-  useEffect(() => {}, [panel]); // TODO: @akphi - remove this dummy useEffect
+    useEffect(() => {}, [panel]); // TODO: @akphi - remove this dummy useEffect
 
-  return (
-    <div className="h-full w-full select-none p-2">
-      <div className="flex h-6">
-        <div className="flex h-6 items-center text-xl font-medium">
-          <DataCubeIcon.TablePlus />
-        </div>
-        <div className="ml-1 flex h-6 items-center text-xl font-medium">
-          Extended Columns
-          <FormBadge_WIP />
+    return (
+      <div className="h-full w-full select-none p-2">
+        <div className="flex h-6">
+          <div className="flex h-6 items-center text-xl font-medium">
+            <DataCubeIcon.TablePlus />
+          </div>
+          <div className="ml-1 flex h-6 items-center text-xl font-medium">
+            Extended Columns
+            <FormBadge_WIP />
+          </div>
         </div>
+        <div className="flex h-[calc(100%_-_24px)] w-full"></div>
       </div>
-      <div className="flex h-[calc(100%_-_24px)] w-full"></div>
-    </div>
-  );
-});
+    );
+  },
+);