@finos/legend-application-repl 0.0.36 → 0.0.38

package/src/components/dataCube/grid/DataCubeGrid.tsx

@@ -15,7 +15,6 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { LicenseManager } from '@ag-grid-enterprise/core';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
 import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
@@ -26,7 +25,6 @@ import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';
 import { AgGridReact } from '@ag-grid-community/react';
 import { CsvExportModule } from '@ag-grid-community/csv-export';
 import { ExcelExportModule } from '@ag-grid-enterprise/excel-export';
-import { useEffect } from 'react';
 import { useREPLStore } from '../../REPLStoreProvider.js';
 import { DataCubeIcon, Switch, cn, Global, css } from '@finos/legend-art';
 import {
@@ -37,7 +35,7 @@ import {
   generateFontUnderlineUtilityClassName,
   generateTextAlignUtilityClassName,
   generateTextColorUtilityClassName,
-  INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME,
+  INTERNAL__GridClientUtilityCssClassName,
 } from '../../../stores/dataCube/grid/DataCubeGridClientEngine.js';
 import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
 import {
@@ -62,7 +60,7 @@ import { generateBaseGridOptions } from '../../../stores/dataCube/grid/DataCubeG
 const __INTERNAL__original_console_error = console.error; // eslint-disable-line no-console
 // eslint-disable-next-line no-console
 console.error = (message?: unknown, ...agrs: unknown[]): void => {
-  console.log(`%c ${message}`, 'color: silver'); // eslint-disable-line no-console
+  console.debug(`%c ${message}`, 'color: silver'); // eslint-disable-line no-console
 };
 
 function textColorStyle(
@@ -79,7 +77,7 @@ function textColorStyle(
   )
     .map(
       (color) =>
-        `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateTextColorUtilityClassName(color, key)}{color:${color};}`,
+        `.${INTERNAL__GridClientUtilityCssClassName.ROOT} .${generateTextColorUtilityClassName(color, key)}{color:${color};}`,
     )
     .join('\n')}`;
 }
@@ -98,21 +96,21 @@ function backgroundColorStyle(
   )
     .map(
       (color) =>
-        `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateBackgroundColorUtilityClassName(color, key)}{background-color:${color};}`,
+        `.${INTERNAL__GridClientUtilityCssClassName.ROOT} .${generateBackgroundColorUtilityClassName(color, key)}{background-color:${color};}`,
     )
     .join('\n')};`;
 }
 
 export const DataCubeGridStyleController = observer(() => {
-  const replStore = useREPLStore();
-  const dataCube = replStore.dataCube;
+  const repl = useREPLStore();
+  const dataCube = repl.dataCube;
   const grid = dataCube.grid;
   const configuration = grid.queryConfiguration;
 
   return (
     <Global
       styles={css`
-        .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} {
+        .${INTERNAL__GridClientUtilityCssClassName.ROOT} {
           --ag-odd-row-background-color: ${grid.queryConfiguration
             .alternateRowsStandardMode && !grid.queryConfiguration.alternateRows
             ? DEFAULT_ROW_HIGHLIGHT_BACKGROUND_COLOR
@@ -127,8 +125,8 @@ export const DataCubeGridStyleController = observer(() => {
             ? grid.queryConfiguration.gridLineColor
             : 'transparent'};
         }
-        .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT}
-          .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.HIGHLIGHT_ROW} {
+        .${INTERNAL__GridClientUtilityCssClassName.ROOT}
+          .${INTERNAL__GridClientUtilityCssClassName.HIGHLIGHT_ROW} {
           background-color: ${grid.queryConfiguration.alternateRows
             ? grid.queryConfiguration.alternateRowsColor
             : DEFAULT_ROW_BACKGROUND_COLOR};
@@ -140,7 +138,7 @@ export const DataCubeGridStyleController = observer(() => {
         ]
           .map(
             (fontFamily) =>
-              `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateFontFamilyUtilityClassName(fontFamily)}{font-family:${fontFamily},sans-serif;}`,
+              `.${INTERNAL__GridClientUtilityCssClassName.ROOT} .${generateFontFamilyUtilityClassName(fontFamily)}{font-family:${fontFamily},sans-serif;}`,
           )
           .join('\n')}
         ${[
@@ -150,7 +148,7 @@ export const DataCubeGridStyleController = observer(() => {
         ]
           .map(
             (fontFamily) =>
-              `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateFontFamilyUtilityClassName(fontFamily)}{font-family:${fontFamily},serif;}`,
+              `.${INTERNAL__GridClientUtilityCssClassName.ROOT} .${generateFontFamilyUtilityClassName(fontFamily)}{font-family:${fontFamily},serif;}`,
           )
           .join('\n')}
         ${[
@@ -160,10 +158,10 @@ export const DataCubeGridStyleController = observer(() => {
         ]
           .map(
             (fontFamily) =>
-              `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateFontFamilyUtilityClassName(fontFamily)}{font-family:${fontFamily},monospace;}`,
+              `.${INTERNAL__GridClientUtilityCssClassName.ROOT} .${generateFontFamilyUtilityClassName(fontFamily)}{font-family:${fontFamily},monospace;}`,
           )
           .join('\n')}
-          .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.FONT_BOLD} {
+          .${INTERNAL__GridClientUtilityCssClassName.FONT_BOLD} {
           font-weight: 700;
         }
         ${[
@@ -172,11 +170,11 @@ export const DataCubeGridStyleController = observer(() => {
         ]
           .map(
             (fontSize) =>
-              `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateFontSizeUtilityClassName(fontSize)}{font-size:${fontSize}px;}`,
+              `.${INTERNAL__GridClientUtilityCssClassName.ROOT} .${generateFontSizeUtilityClassName(fontSize)}{font-size:${fontSize}px;}`,
           )
           .join('\n')}
-        .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT}
-          .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.FONT_ITALIC} {
+        .${INTERNAL__GridClientUtilityCssClassName.ROOT}
+          .${INTERNAL__GridClientUtilityCssClassName.FONT_ITALIC} {
           font-style: italic;
         }
         ${[
@@ -188,10 +186,10 @@ export const DataCubeGridStyleController = observer(() => {
         ]
           .map(
             (variant) =>
-              `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateFontUnderlineUtilityClassName(variant)}{text-decoration:underline ${variant};}`,
+              `.${INTERNAL__GridClientUtilityCssClassName.ROOT} .${generateFontUnderlineUtilityClassName(variant)}{text-decoration:underline ${variant};}`,
           )
           .join('\n')}
-        .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.FONT_STRIKETHROUGH} {
+        .${INTERNAL__GridClientUtilityCssClassName.ROOT} .${INTERNAL__GridClientUtilityCssClassName.FONT_STRIKETHROUGH} {
           text-decoration: line-through;
         }
         ${[
@@ -201,7 +199,7 @@ export const DataCubeGridStyleController = observer(() => {
         ]
           .map(
             (fontCase) =>
-              `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateFontCaseUtilityClassName(fontCase)}{text-transform:${fontCase};}`,
+              `.${INTERNAL__GridClientUtilityCssClassName.ROOT} .${generateFontCaseUtilityClassName(fontCase)}{text-transform:${fontCase};}`,
           )
           .join('\n')}
         ${[
@@ -211,7 +209,7 @@ export const DataCubeGridStyleController = observer(() => {
         ]
           .map(
             (alignment) =>
-              `.${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT} .${generateTextAlignUtilityClassName(alignment)}{text-align:${alignment};}`,
+              `.${INTERNAL__GridClientUtilityCssClassName.ROOT} .${generateTextAlignUtilityClassName(alignment)}{text-align:${alignment};}`,
           )
           .join('\n')};
         ${backgroundColorStyle('normal', configuration)}
@@ -222,12 +220,12 @@ export const DataCubeGridStyleController = observer(() => {
         ${textColorStyle('zero', configuration)}
         ${textColorStyle('negative', configuration)}
         ${textColorStyle('error', configuration)}
-        .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT}
-          .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.BLUR} {
+        .${INTERNAL__GridClientUtilityCssClassName.ROOT}
+          .${INTERNAL__GridClientUtilityCssClassName.BLUR} {
           filter: blur(3px);
         }
-        .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.ROOT}
-          .${INTERNAL__GRID_CLIENT_UTILITY_CSS_CLASS_NAME.BLUR}:hover {
+        .${INTERNAL__GridClientUtilityCssClassName.ROOT}
+          .${INTERNAL__GridClientUtilityCssClassName.BLUR}:hover {
           filter: none;
         }
       `}
@@ -236,22 +234,28 @@ export const DataCubeGridStyleController = observer(() => {
 });
 
 const DataCubeGridScroller = observer(() => {
-  const replStore = useREPLStore();
-  const dataCube = replStore.dataCube;
+  const repl = useREPLStore();
+  const dataCube = repl.dataCube;
   const grid = dataCube.grid;
   const scrollHintText = grid.scrollHintText;
   const gridClientSideBarElement = document.querySelector(
     '.data-cube-grid .ag-side-bar',
   );
+  const gridVerticalScrollbar = document.querySelector(
+    '.data-cube-grid  .ag-body-vertical-scroll',
+  );
 
   return (
     <div
       className="absolute -top-9 flex items-center rounded-sm border border-neutral-300 bg-neutral-100 p-1 pr-2 text-neutral-500 shadow-sm"
       style={{
         right:
-          gridClientSideBarElement !== null
+          (gridClientSideBarElement !== null
             ? gridClientSideBarElement.getBoundingClientRect().width + 12
-            : 16,
+            : 16) +
+          (gridVerticalScrollbar !== null
+            ? gridVerticalScrollbar.getBoundingClientRect().width
+            : 0),
       }}
     >
       <DataCubeIcon.TableScroll className="text-lg" />
@@ -261,8 +265,8 @@ const DataCubeGridScroller = observer(() => {
 });
 
 const DataCubeGridStatusBar = observer(() => {
-  const replStore = useREPLStore();
-  const dataCube = replStore.dataCube;
+  const repl = useREPLStore();
+  const dataCube = repl.dataCube;
   const grid = dataCube.grid;
 
   return (
@@ -332,8 +336,8 @@ const DataCubeGridStatusBar = observer(() => {
 });
 
 const DataCubeGridClient = observer(() => {
-  const replStore = useREPLStore();
-  const dataCube = replStore.dataCube;
+  const repl = useREPLStore();
+  const dataCube = repl.dataCube;
   const grid = dataCube.grid;
 
   return (
@@ -370,22 +374,10 @@ const DataCubeGridClient = observer(() => {
   );
 });
 
-export const DataCubeGrid = observer(() => {
-  const replStore = useREPLStore();
-  const dataCube = replStore.dataCube;
-  const grid = dataCube.grid;
-
-  useEffect(() => {
-    if (grid.clientLicenseKey) {
-      LicenseManager.setLicenseKey(grid.clientLicenseKey);
-    }
-  }, [grid.clientLicenseKey]);
-
-  return (
-    <div className="flex-1">
-      <DataCubeGridStyleController />
-      <DataCubeGridClient />
-      <DataCubeGridStatusBar />
-    </div>
-  );
-});
+export const DataCubeGrid = observer(() => (
+  <div className="h-full w-full">
+    <DataCubeGridStyleController />
+    <DataCubeGridClient />
+    <DataCubeGridStatusBar />
+  </div>
+));

package/src/components/dataCube/grid/DataCubeGridShared.tsx

@@ -18,7 +18,7 @@ import {
   useGridMenuItem,
   type CustomMenuItemProps,
 } from '@ag-grid-community/react';
-import { WIP_Badge } from '../editor/DataCubeEditorShared.js';
+import { FormBadge_WIP } from '../../repl/Form.js';
 
 export function WIP_GridMenuItem({
   name,
@@ -34,7 +34,7 @@ export function WIP_GridMenuItem({
       <span className="ag-menu-option-part ag-menu-option-icon"></span>
       <span className="ag-menu-option-part ag-menu-option-text !inline-flex items-center">
         <span className="opacity-50">{name}</span>
-        <WIP_Badge />
+        <FormBadge_WIP />
       </span>
       <span className="ag-menu-option-part ag-menu-option-shortcut"></span>
       <span className="ag-menu-option-part ag-menu-option-popup-pointer select-none">

package/src/components/repl/Alert.tsx

@@ -0,0 +1,138 @@
+/**
+ * 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 {
+  ActionAlertType,
+  useApplicationStore,
+  type ActionAlertInfo,
+} from '@finos/legend-application';
+import { DataCubeIcon, Dialog } from '@finos/legend-art';
+import { noop } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+
+export function ErrorAlert(props: {
+  message: string;
+  text?: string | undefined;
+}) {
+  const { message, text } = props;
+  return (
+    <div className="h-full w-full overflow-auto p-4">
+      <div className="relative pl-2.5">
+        <DataCubeIcon.Error className="absolute -top-[1px] left-0 flex-shrink-0 stroke-[0.5px] text-2xl text-red-500" />
+        <pre className="ml-4 font-sans">{message}</pre>
+      </div>
+      <pre className="mt-1.5 font-sans text-neutral-500">{text}</pre>
+    </div>
+  );
+}
+
+const ActionAlertContent = observer((props: { info: ActionAlertInfo }) => {
+  const { info } = props;
+  const { title, message, prompt, type, onClose, onEnter, actions } = info;
+  const application = useApplicationStore();
+  const handleClose = (): void => {
+    onClose?.();
+    application.alertService.setActionAlertInfo(undefined);
+  };
+  const handleEnter = (): void => onEnter?.();
+  const handleSubmit = (): void => {
+    actions.find((action) => action.default)?.handler?.();
+    handleClose();
+  };
+
+  return (
+    <Dialog
+      open={Boolean(application.alertService.actionAlertInfo)}
+      onClose={noop} // disallow closing dialog by using Esc key or clicking on the backdrop
+      TransitionProps={{
+        onEnter: handleEnter,
+      }}
+      PaperProps={{
+        elevation: 0,
+      }}
+      slotProps={{
+        backdrop: {
+          classes: {
+            root: 'bg-black !opacity-25',
+          },
+        },
+      }}
+      classes={{
+        root: 'h-full w-full flex items-center justify-center',
+        paper: 'min-h-10 min-w-40 rounded-none shadow-md',
+      }}
+    >
+      <div className="h-full w-full border border-neutral-400 bg-neutral-200 shadow-xl">
+        <div className="flex h-6 w-full select-none items-center justify-between border-b border-b-neutral-300 bg-white">
+          <div className="px-2">{title ?? ''}</div>
+        </div>
+        <form
+          className="w-full overflow-auto p-4"
+          onSubmit={(event) => {
+            event.preventDefault();
+            handleSubmit();
+          }}
+        >
+          <div className="relative pl-2.5">
+            {type === ActionAlertType.STANDARD && (
+              <DataCubeIcon.Info className="absolute -top-[1px] left-0 flex-shrink-0 stroke-[0.5px] text-2xl text-sky-500" />
+            )}
+            {type === ActionAlertType.CAUTION && (
+              <DataCubeIcon.Warning className="absolute -top-[1px] left-0 flex-shrink-0 stroke-2 text-2xl text-amber-500" />
+            )}
+            {type === ActionAlertType.ERROR && (
+              <DataCubeIcon.Error className="absolute -top-[1px] left-0 flex-shrink-0 stroke-[0.5px] text-2xl text-red-500" />
+            )}
+            <pre className="ml-4 font-sans">{message}</pre>
+          </div>
+          <pre className="mt-1.5 font-sans text-neutral-500">{prompt}</pre>
+          {actions.map((action, idx) => {
+            // NOTE: need to prevent default for the submit button, otherwise, we would get the warning "Form submission canceled because the form is not connected"
+            // See https://stackoverflow.com/a/58234405
+            const handler: React.ReactEventHandler<HTMLButtonElement> = (
+              e,
+            ): void => {
+              e.preventDefault();
+              action.handler?.();
+              handleClose();
+            };
+            return (
+              <button
+                // eslint-disable-next-line react/no-array-index-key
+                key={idx}
+                type={action.default ? 'submit' : 'button'}
+                onClick={handler}
+                autoFocus={Boolean(action.default)}
+              >
+                {action.label}
+              </button>
+            );
+          })}
+        </form>
+      </div>
+    </Dialog>
+  );
+});
+
+export const ActionAlert = observer(() => {
+  const application = useApplicationStore();
+  const info = application.alertService.actionAlertInfo;
+
+  if (!info) {
+    return null;
+  }
+  return <ActionAlertContent info={info} />;
+});

package/src/components/repl/DocumentationPanel.tsx

@@ -0,0 +1,88 @@
+/**
+ * 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 {
+  shouldDisplayVirtualAssistantDocumentationEntry,
+  useApplicationStore,
+} from '@finos/legend-application';
+import { cn, DataCubeIcon, MarkdownTextViewer } from '@finos/legend-art';
+import { isString } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import { useREPLStore } from '../REPLStoreProvider.js';
+
+export const DocumentationPanelLink: React.FC<{
+  documentationKey: string;
+  title?: string | undefined;
+  className?: string | undefined;
+}> = ({ documentationKey, title, className }) => {
+  const application = useApplicationStore();
+  const repl = useREPLStore();
+  const documentationEntry =
+    application.documentationService.getDocEntry(documentationKey);
+  const openDocLink: React.MouseEventHandler<HTMLDivElement> = (
+    event,
+  ): void => {
+    event.preventDefault();
+    event.stopPropagation();
+    const entry =
+      application.documentationService.getDocEntry(documentationKey);
+    if (entry) {
+      if (shouldDisplayVirtualAssistantDocumentationEntry(entry)) {
+        application.assistantService.openDocumentationEntry(documentationKey);
+        repl.documentationDisplay.open();
+      } else if (entry.url) {
+        application.navigationService.navigator.visitAddress(entry.url);
+      }
+    }
+  };
+
+  if (
+    !documentationEntry ||
+    (!documentationEntry.url &&
+      !shouldDisplayVirtualAssistantDocumentationEntry(documentationEntry))
+  ) {
+    return null;
+  }
+  return (
+    <div
+      onClick={openDocLink}
+      title={title ?? 'Click to see documentation'}
+      className={cn('cursor-pointer text-xl text-sky-500', className)}
+    >
+      <DataCubeIcon.DocumentationHint />
+    </div>
+  );
+};
+
+export const DocumentationPanel = observer(() => {
+  const application = useApplicationStore();
+  const entry = application.assistantService.currentDocumentationEntry;
+
+  if (!entry) {
+    return null;
+  }
+  return (
+    <div className="h-full w-full overflow-auto bg-white p-4">
+      <div className="mb-3 text-2xl font-bold">{entry.title}</div>
+      {entry.content &&
+        (isString(entry.content) ? (
+          <div className="">{entry.content}</div>
+        ) : (
+          <MarkdownTextViewer value={entry.content} />
+        ))}
+    </div>
+  );
+});

package/src/components/{dataCube/editor/DataCubeEditorShared.tsx → repl/Form.tsx}

@@ -34,7 +34,7 @@ import {
 import { toNumber } from '@finos/legend-shared';
 import React, { forwardRef, useEffect, useState } from 'react';
 
-export function WIP_Badge() {
+export function FormBadge_WIP() {
   return (
     <div
       className="text-2xs ml-1 select-none rounded-md bg-sky-500 px-1 py-0.5 font-semibold text-white"
@@ -45,7 +45,7 @@ export function WIP_Badge() {
   );
 }
 
-export function Advanced_Badge() {
+export function FormBadge_Advanced() {
   return (
     <div
       className="text-2xs ml-1 select-none rounded-md bg-amber-500 px-1 py-0.5 font-semibold text-white"
@@ -56,7 +56,7 @@ export function Advanced_Badge() {
   );
 }
 
-export const DataCubeEditorNumberInput = forwardRef(
+export const FormNumberInput = forwardRef(
   function DataCubeEditorBaseNumberInput(
     props: React.InputHTMLAttributes<HTMLInputElement> & {
       min?: number | undefined;
@@ -146,7 +146,7 @@ export const DataCubeEditorNumberInput = forwardRef(
   },
 );
 
-export function DataCubeEditorTextInput(
+export function FormTextInput(
   props: React.InputHTMLAttributes<HTMLInputElement>,
 ) {
   const { className, ...otherProps } = props;
@@ -161,7 +161,7 @@ export function DataCubeEditorTextInput(
   );
 }
 
-export function DataCubeEditorCheckbox(
+export function FormCheckbox(
   props: CheckboxProps & {
     label?: React.ReactNode;
     onChange: () => void;
@@ -202,7 +202,7 @@ export function DataCubeEditorCheckbox(
   );
 }
 
-export function DataCubeEditorDropdownMenuTrigger(
+export function FormDropdownMenuTrigger(
   props: React.ButtonHTMLAttributes<HTMLButtonElement>,
 ) {
   const { children, className, ...otherProps } = props;
@@ -224,7 +224,7 @@ export function DataCubeEditorDropdownMenuTrigger(
   );
 }
 
-export function DataCubeEditorDropdownMenu(props: DropdownMenuProps) {
+export function FormDropdownMenu(props: DropdownMenuProps) {
   const { className, ...otherProps } = props;
   return (
     <DropdownMenu
@@ -242,7 +242,7 @@ export function DataCubeEditorDropdownMenu(props: DropdownMenuProps) {
   );
 }
 
-export function DataCubeEditorDropdownMenuItem(props: DropdownMenuItemProps) {
+export function FormDropdownMenuItem(props: DropdownMenuItemProps) {
   const { className, ...otherProps } = props;
   return (
     <DropdownMenuItem
@@ -255,11 +255,11 @@ export function DataCubeEditorDropdownMenuItem(props: DropdownMenuItemProps) {
   );
 }
 
-export function DataCubeEditorDropdownMenuItemSeparator() {
+export function FormDropdownMenuItemSeparator() {
   return <div className="my-0.5 h-[1px] w-full bg-neutral-200" />;
 }
 
-function DataCubeEditorColorPicker(props: {
+function FormColorPicker(props: {
   color: string;
   onChange: (value: string) => void;
   onClose: () => void;
@@ -430,7 +430,7 @@ function DataCubeEditorColorPicker(props: {
   );
 }
 
-export function DataCubeEditorColorPickerButton(props: {
+export function FormColorPickerButton(props: {
   color: string;
   onChange: (value: string) => void;
   className?: string | undefined;
@@ -471,7 +471,7 @@ export function DataCubeEditorColorPickerButton(props: {
           transformOrigin={{ vertical: 'center', horizontal: 'left' }}
           onClose={() => setAnchorEl(null)}
         >
-          <DataCubeEditorColorPicker
+          <FormColorPicker
             color={color}
             onChange={onChange}
             onClose={() => setAnchorEl(null)}