@finos/legend-application-studio 18.1.0 → 19.1.0

package/src/components/editor/StatusBar.tsx

@@ -31,31 +31,30 @@ import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
 import { ACTIVITY_MODE } from '../../stores/EditorConfig.js';
 import {
   generateSetupRoute,
-  type EditorPathParams,
-  type GroupEditorPathParams,
+  type WorkspaceEditorPathParams,
 } from '../../stores/LegendStudioRouter.js';
 import { flowResult } from 'mobx';
 import { useEditorStore } from './EditorStoreProvider.js';
 import { WorkspaceType } from '@finos/legend-server-sdlc';
 import { useLegendStudioApplicationStore } from '../LegendStudioBaseStoreProvider.js';
 import { useParams } from '@finos/legend-application';
+import { guaranteeNonNullable } from '@finos/legend-shared';
 
 export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
   const { actionsDisabled } = props;
-  const params = useParams<EditorPathParams | GroupEditorPathParams>();
+  const params = useParams<WorkspaceEditorPathParams>();
   const editorStore = useEditorStore();
   const applicationStore = useLegendStudioApplicationStore();
   const isInConflictResolutionMode = editorStore.isInConflictResolutionMode;
   // SDLC
   const projectId = params.projectId;
-  const workspaceType = (params as { groupWorkspaceId: string | undefined })
-    .groupWorkspaceId
+  const workspaceType = params.groupWorkspaceId
     ? WorkspaceType.GROUP
     : WorkspaceType.USER;
-  const workspaceId =
-    workspaceType === WorkspaceType.GROUP
-      ? (params as GroupEditorPathParams).groupWorkspaceId
-      : (params as EditorPathParams).workspaceId;
+  const workspaceId = guaranteeNonNullable(
+    params.groupWorkspaceId ?? params.workspaceId,
+    `Workspace/group workspace ID is not provided`,
+  );
   const currentProject = editorStore.sdlcState.currentProject;
   const goToWorkspaceUpdater = (): void =>
     editorStore.setActiveActivity(
@@ -155,8 +154,10 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
             title="Go back to workspace setup using the specified project"
             tabIndex={-1}
             onClick={(): void =>
-              applicationStore.navigator.goToLocation(
-                generateSetupRoute(projectId),
+              applicationStore.navigator.visitAddress(
+                applicationStore.navigator.generateAddress(
+                  generateSetupRoute(projectId),
+                ),
               )
             }
           >
@@ -168,8 +169,10 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
             title="Go back to workspace setup using the specified workspace"
             tabIndex={-1}
             onClick={(): void =>
-              applicationStore.navigator.goToLocation(
-                generateSetupRoute(projectId, workspaceId, workspaceType),
+              applicationStore.navigator.visitAddress(
+                applicationStore.navigator.generateAddress(
+                  generateSetupRoute(projectId, workspaceId, workspaceType),
+                ),
               )
             }
           >

package/src/components/editor/aux-panel/AuxiliaryPanel.tsx

@@ -57,7 +57,7 @@ export const AuxiliaryPanel = observer(() => {
       mode: AUX_PANEL_MODE.DEV_TOOL,
       name: 'DEVELOPER TOOLS',
       icon: undefined,
-      isVisible: editorStore.isDevToolEnabled,
+      isVisible: true,
     },
   };
 

package/src/components/editor/command-center/ProjectSearchCommand.tsx

@@ -98,6 +98,8 @@ export const ProjectSearchCommand = observer(() => {
       <div className="modal search-modal modal--dark">
         <div className="project-search-command">
           <DropdownMenu
+            className="project-search-command__type"
+            title="Choose Element Type..."
             content={
               <div className="project-search-command__options">
                 <div
@@ -118,22 +120,16 @@ export const ProjectSearchCommand = observer(() => {
               </div>
             }
           >
-            <button
-              className="project-search-command__type"
-              tabIndex={-1}
-              title="Choose Element Type..."
-            >
-              <div className="project-search-command__type__label">
-                {elementType ? (
-                  getElementTypeIcon(editorStore, elementType)
-                ) : (
-                  <MoreHorizontalIcon />
-                )}
-              </div>
-              <div className="project-search-command__type__selector">
-                <CaretDownIcon />
-              </div>
-            </button>
+            <div className="project-search-command__type__label">
+              {elementType ? (
+                getElementTypeIcon(editorStore, elementType)
+              ) : (
+                <MoreHorizontalIcon />
+              )}
+            </div>
+            <div className="project-search-command__type__selector">
+              <CaretDownIcon />
+            </div>
           </DropdownMenu>
           <CustomSelectorInput
             ref={selectorRef}

package/src/components/editor/edit-panel/EditPanel.tsx

@@ -440,7 +440,8 @@ export const EditPanel = observer(() => {
         <div className="edit-panel__header__actions">
           {currentEditorState instanceof ElementEditorState && (
             <DropdownMenu
-              className="edit-panel__view-mode"
+              className="edit-panel__view-mode__type"
+              title="View as..."
               content={
                 <MenuContent
                   data-testid={
@@ -503,23 +504,19 @@ export const EditPanel = observer(() => {
                 transformOrigin: { vertical: 'top', horizontal: 'right' },
               }}
             >
-              <button
-                className="edit-panel__view-mode__type"
-                title="View as..."
-              >
-                <div className="edit-panel__view-mode__type__label">
-                  {currentEditorState.generationViewMode
-                    ? editorStore.graphState.graphGenerationState.getFileGenerationConfiguration(
-                        currentEditorState.generationViewMode,
-                      ).label
-                    : currentEditorState.editMode}
-                </div>
-              </button>
+              <div className="edit-panel__view-mode__type__label">
+                {currentEditorState.generationViewMode
+                  ? editorStore.graphState.graphGenerationState.getFileGenerationConfiguration(
+                      currentEditorState.generationViewMode,
+                    ).label
+                  : currentEditorState.editMode}
+              </div>
             </DropdownMenu>
           )}
           {currentEditorState instanceof EntityDiffViewState && (
             <DropdownMenu
-              className="edit-panel__view-mode"
+              className="edit-panel__view-mode__type"
+              title="View as..."
               content={
                 <MenuContent
                   data-testid={
@@ -550,14 +547,9 @@ export const EditPanel = observer(() => {
                 transformOrigin: { vertical: 'top', horizontal: 'right' },
               }}
             >
-              <button
-                className="edit-panel__view-mode__type"
-                title="View as..."
-              >
-                <div className="edit-panel__view-mode__type__label">
-                  {currentEditorState.diffMode}
-                </div>
-              </button>
+              <div className="edit-panel__view-mode__type__label">
+                {currentEditorState.diffMode}
+              </div>
             </DropdownMenu>
           )}
         </div>

package/src/components/editor/edit-panel/FileGenerationViewer.tsx

@@ -29,7 +29,7 @@ import {
 } from '@finos/legend-art';
 import type { FileGenerationSpecification } from '@finos/legend-graph';
 import { useEditorStore } from '../EditorStoreProvider.js';
-import { StudioTextInputEditor } from '../../shared/StudioTextInputEditor.js';
+import { TextInputEditor } from '@finos/legend-application';
 
 export const FileGenerationViewer = observer(() => {
   const editorStore = useEditorStore();
@@ -90,16 +90,14 @@ export const FileGenerationViewer = observer(() => {
             </div>
           </div>
           <PanelContent>
-            {
-              <StudioTextInputEditor
-                inputValue={getTextContent(
-                  generatedFile.content,
-                  generatedFile.format,
-                )}
-                isReadOnly={true}
-                language={getEditorLanguageFromFormat(generatedFile.format)}
-              />
-            }
+            <TextInputEditor
+              inputValue={getTextContent(
+                generatedFile.content,
+                generatedFile.format,
+              )}
+              isReadOnly={true}
+              language={getEditorLanguageFromFormat(generatedFile.format)}
+            />
           </PanelContent>
         </div>
       </Panel>

package/src/components/editor/edit-panel/FunctionEditor.tsx

@@ -26,6 +26,7 @@ import {
   type ElementDragSource,
 } from '../../../stores/shared/DnDUtils.js';
 import {
+  assertErrorThrown,
   prettyCONSTName,
   UnsupportedOperationError,
 } from '@finos/legend-shared';
@@ -75,14 +76,19 @@ import {
   stub_TaggedValue,
   stub_Stereotype,
   stub_RawVariableExpression,
+  getFunctionNameWithPath,
+  getFunctionSignature,
 } from '@finos/legend-graph';
 import {
   type PackageableElementOption,
+  type ApplicationStore,
+  type LegendApplicationPlugin,
+  type LegendApplicationConfig,
+  type LegendApplicationPluginManager,
   useApplicationNavigationContext,
   useApplicationStore,
   buildElementOption,
 } from '@finos/legend-application';
-import { StudioLambdaEditor } from '../../shared/StudioLambdaEditor.js';
 import { getElementIcon } from '../../shared/ElementIconUtils.js';
 import {
   function_setReturnType,
@@ -101,6 +107,9 @@ import {
   rawVariableExpression_setType,
 } from '../../../stores/shared/modifier/RawValueSpecificationGraphModifierHelper.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
+import { LambdaEditor } from '@finos/legend-query-builder';
+import type { EditorStore } from '../../../stores/EditorStore.js';
+import { graph_renameElement } from '../../../stores/shared/modifier/GraphModifierHelper.js';
 
 enum FUNCTION_PARAMETER_TYPE {
   CLASS = 'CLASS',
@@ -130,6 +139,31 @@ type FunctionParameterDragSource = {
 
 const FUNCTION_PARAMETER_DND_TYPE = 'FUNCTION_PARAMETER';
 
+/**
+ * NOTE: every time we update the function signature (parameters, return value), we need to adjust the function path,
+ * therefore, we need to update the graph's function index.
+ */
+const updateFunctionName = (
+  editorStore: EditorStore,
+  applicationStore: ApplicationStore<
+    LegendApplicationConfig,
+    LegendApplicationPluginManager<LegendApplicationPlugin>
+  >,
+  func: ConcreteFunctionDefinition,
+): void => {
+  try {
+    graph_renameElement(
+      editorStore.graphManagerState.graph,
+      func,
+      `${getFunctionNameWithPath(func)}${getFunctionSignature(func)}`,
+      editorStore.changeDetectionState.observerContext,
+    );
+  } catch (error) {
+    assertErrorThrown(error);
+    applicationStore.notifyError(error);
+  }
+};
+
 const ParameterBasicEditor = observer(
   (props: {
     parameter: RawVariableExpression;
@@ -140,6 +174,7 @@ const ParameterBasicEditor = observer(
     const ref = useRef<HTMLDivElement>(null);
     const { parameter, _func, deleteParameter, isReadOnly } = props;
     const editorStore = useEditorStore();
+    const applicationStore = useApplicationStore();
     // Name
     const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) =>
       rawVariableExpression_setName(parameter, event.target.value);
@@ -159,7 +194,10 @@ const ParameterBasicEditor = observer(
     });
     const selectedType = { value: paramType, label: paramType.name };
     const changeType = (val: PackageableElementOption<Type>): void => {
-      rawVariableExpression_setType(parameter, val.value);
+      if (val.value !== parameter.type.value) {
+        rawVariableExpression_setType(parameter, val.value);
+        updateFunctionName(editorStore, applicationStore, _func);
+      }
       setIsEditingType(false);
     };
     const openElement = (): void => {
@@ -192,6 +230,7 @@ const ParameterBasicEditor = observer(
           parameter,
           editorStore.graphManagerState.graph.getMultiplicity(lBound, uBound),
         );
+        updateFunctionName(editorStore, applicationStore, _func);
       }
     };
     const changeLowerBound: React.ChangeEventHandler<HTMLInputElement> = (
@@ -395,6 +434,7 @@ const ReturnTypeEditor = observer(
     const { functionElement, isReadOnly } = props;
     const { returnType, returnMultiplicity } = functionElement;
     const editorStore = useEditorStore();
+    const applicationStore = useApplicationStore();
     // Type
     const [isEditingType, setIsEditingType] = useState(false);
     const typeOptions =
@@ -412,6 +452,7 @@ const ReturnTypeEditor = observer(
     const changeType = (val: PackageableElementOption<Type>): void => {
       function_setReturnType(functionElement, val.value);
       setIsEditingType(false);
+      updateFunctionName(editorStore, applicationStore, functionElement);
     };
 
     const openElement = (): void => {
@@ -446,6 +487,7 @@ const ReturnTypeEditor = observer(
           functionElement,
           editorStore.graphManagerState.graph.getMultiplicity(lBound, uBound),
         );
+        updateFunctionName(editorStore, applicationStore, functionElement);
       }
     };
     const changeLowerBound: React.ChangeEventHandler<HTMLInputElement> = (
@@ -580,6 +622,7 @@ export const FunctionMainEditor = observer(
     functionEditorState: FunctionEditorState;
   }) => {
     const editorStore = useEditorStore();
+    const applicationStore = useApplicationStore();
     const defaultType = editorStore.graphManagerState.graph.getPrimitiveType(
       PRIMITIVE_TYPE.STRING,
     );
@@ -591,11 +634,13 @@ export const FunctionMainEditor = observer(
         functionElement,
         stub_RawVariableExpression(defaultType),
       );
+      updateFunctionName(editorStore, applicationStore, functionElement);
     };
     const deleteParameter =
       (val: RawVariableExpression): (() => void) =>
       (): void => {
         function_deleteParameter(functionElement, val);
+        updateFunctionName(editorStore, applicationStore, functionElement);
       };
     const handleDropParameter = useCallback(
       (item: UMLEditorElementDropTarget): void => {
@@ -604,9 +649,10 @@ export const FunctionMainEditor = observer(
             functionElement,
             stub_RawVariableExpression(item.data.packageableElement),
           );
+          updateFunctionName(editorStore, applicationStore, functionElement);
         }
       },
-      [functionElement, isReadOnly],
+      [applicationStore, editorStore, functionElement, isReadOnly],
     );
     const [{ isParameterDragOver }, dropParameterRef] = useDrop<
       ElementDragSource,
@@ -685,7 +731,7 @@ export const FunctionMainEditor = observer(
               ),
             })}
           >
-            <StudioLambdaEditor
+            <LambdaEditor
               className="function-editor__element__lambda-editor"
               disabled={
                 lambdaEditorState.isConvertingFunctionBodyToString || isReadOnly
@@ -827,7 +873,7 @@ export const FunctionEditor = observer(() => {
             )}
             <div className="panel__header__title__label">function</div>
             <div className="panel__header__title__content">
-              {functionElement.name}
+              {functionElement.functionName}
             </div>
           </div>
         </div>

package/src/components/editor/edit-panel/GrammarTextEditor.tsx

@@ -20,7 +20,6 @@ import {
   type IDisposable,
   editor as monacoEditorAPI,
   languages as monacoLanguagesAPI,
-  KeyCode,
 } from 'monaco-editor';
 import {
   ContextMenu,
@@ -28,7 +27,6 @@ import {
   setErrorMarkers,
   disposeEditor,
   baseTextEditorSettings,
-  disableEditorHotKeys,
   resetLineNumberGutterWidth,
   clsx,
   WordWrapIcon,
@@ -46,6 +44,7 @@ import {
   useApplicationStore,
   type DocumentationEntry,
   useApplicationNavigationContext,
+  createPassThroughOnKeyHandler,
 } from '@finos/legend-application';
 import {
   type ElementDragSource,
@@ -817,22 +816,7 @@ export const GrammarTextEditor = observer(() => {
         // but if we do that on first load, the cursor will not jump to the current element
         // also, it's better to place that logic in an effect that watches for the regex string
       });
-      _editor.onKeyDown((event) => {
-        if (event.keyCode === KeyCode.F9) {
-          event.preventDefault();
-          event.stopPropagation();
-          flowResult(editorStore.graphState.globalCompileInTextMode()).catch(
-            applicationStore.alertUnhandledError,
-          );
-        } else if (event.keyCode === KeyCode.F8) {
-          event.preventDefault();
-          event.stopPropagation();
-          flowResult(editorStore.toggleTextMode()).catch(
-            applicationStore.alertUnhandledError,
-          );
-        }
-      });
-      disableEditorHotKeys(_editor);
+      _editor.onKeyDown(createPassThroughOnKeyHandler());
       _editor.focus(); // focus on the editor initially
       setEditor(_editor);
     }

package/src/components/editor/edit-panel/ModelImporter.tsx

@@ -39,13 +39,11 @@ import {
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import {
-  ActionAlertType,
-  ActionAlertActionType,
   useApplicationStore,
   EDITOR_LANGUAGE,
   useApplicationNavigationContext,
+  TextInputEditor,
 } from '@finos/legend-application';
-import { StudioTextInputEditor } from '../../shared/StudioTextInputEditor.js';
 import type { ModelImporterExtensionConfiguration } from '../../../stores/LegendStudioApplicationPlugin.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
 import { SCHEMA_SET_TAB_TYPE } from '../../../stores/editor-state/element-editor-state/external-format/DSL_ExternalFormat_SchemaSetEditorState.js';
@@ -151,36 +149,11 @@ export const ModelImporter = observer(() => {
   const label = modelImporterState.modelImportEditorState.label;
   const modelImportEditorState = modelImporterState.modelImportEditorState;
   const loadModel = (): void => {
-    if (editorStore.localChangesState.hasUnpushedChanges) {
-      editorStore.setActionAlertInfo({
-        message: 'You have unpushed changes',
-        prompt:
-          'This action will discard these changes and refresh the application',
-        type: ActionAlertType.CAUTION,
-        onEnter: (): void => editorStore.setBlockGlobalHotkeys(true),
-        onClose: (): void => editorStore.setBlockGlobalHotkeys(false),
-        actions: [
-          {
-            label: 'Proceed to load model',
-            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-            handler: (): void => {
-              modelImporterState.modelImportEditorState
-                .loadModel()
-                .catch(applicationStore.alertUnhandledError);
-            },
-          },
-          {
-            label: 'Abort',
-            type: ActionAlertActionType.PROCEED,
-            default: true,
-          },
-        ],
-      });
-    } else {
+    editorStore.localChangesState.alertUnsavedChanges((): void => {
       modelImporterState.modelImportEditorState
         .loadModel()
         .catch(applicationStore.alertUnhandledError);
-    }
+    });
   };
   useApplicationNavigationContext(
     LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.MODEL_LOADER,
@@ -216,7 +189,7 @@ export const ModelImporter = observer(() => {
         modelImportEditorState.setModelText(val);
       return (
         <div className="panel__content model-loader__editor">
-          <StudioTextInputEditor
+          <TextInputEditor
             language={
               modelImportEditorState.nativeType ===
               MODEL_IMPORT_NATIVE_INPUT_TYPE.PURE_GRAMMAR
@@ -246,6 +219,7 @@ export const ModelImporter = observer(() => {
       <div className="panel__header model-loader__header">
         <div className="model-loader__header__configs">
           <DropdownMenu
+            className="model-loader__header__configs__type"
             content={
               <MenuContent className="model-loader__header__configs__type__menu">
                 <div className="model-loader__header__configs__type-option__group model-loader__header__configs__type-option__group--native">
@@ -325,13 +299,11 @@ export const ModelImporter = observer(() => {
               transformOrigin: { vertical: 'top', horizontal: 'right' },
             }}
           >
-            <div className="model-loader__header__configs__type">
-              <div className="model-loader__header__configs__type__label">
-                {prettyCONSTName(label)}
-              </div>
-              <div className="model-loader__header__configs__type__icon">
-                <CaretDownIcon />
-              </div>
+            <div className="model-loader__header__configs__type__label">
+              {prettyCONSTName(label)}
+            </div>
+            <div className="model-loader__header__configs__type__icon">
+              <CaretDownIcon />
             </div>
           </DropdownMenu>
           {modelImportEditorState.allowHardReplace && (

package/src/components/editor/edit-panel/connection-editor/DatabaseBuilder.tsx

@@ -47,6 +47,7 @@ import {
 import { capitalize } from '@finos/legend-shared';
 import {
   EDITOR_LANGUAGE,
+  TextInputEditor,
   useApplicationStore,
 } from '@finos/legend-application';
 import {
@@ -54,7 +55,6 @@ import {
   renderColumnTypeIcon,
 } from './DatabaseEditorHelper.js';
 import { flowResult } from 'mobx';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 
 const getNodeIcon = (node: DatabaseBuilderTreeNodeData): React.ReactNode => {
   if (node instanceof SchemaDatabaseBuilderTreeNodeData) {
@@ -338,7 +338,7 @@ export const DatabaseBuilder = observer(
                     </div>
                   </div>
                   <PanelContent>
-                    <StudioTextInputEditor
+                    <TextInputEditor
                       language={EDITOR_LANGUAGE.PURE}
                       inputValue={databaseBuilderState.databaseGrammarCode}
                       isReadOnly={true}

package/src/components/editor/edit-panel/connection-editor/RelationalDatabaseConnectionEditor.tsx

@@ -29,7 +29,6 @@ import {
   CustomSelectorInput,
   ErrorIcon,
   PanelHeader,
-  PanelHeaderActionItem,
   PlusIcon,
   PanelFormTextEditor,
   ContextMenu,
@@ -46,6 +45,7 @@ import {
   PanelListSelectorItemLabel,
   PanelSection,
   PanelFormBooleanEditor,
+  PanelHeaderActions,
 } from '@finos/legend-art';
 import { capitalize, prettyCONSTName } from '@finos/legend-shared';
 
@@ -79,8 +79,8 @@ import {
   EDITOR_LANGUAGE,
   buildElementOption,
   type PackageableElementOption,
+  TextInputEditor,
 } from '@finos/legend-application';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 import { connection_setStore } from '../../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
 import {
   apiTokenAuthenticationStrategy_setApiToken,
@@ -153,7 +153,7 @@ const LocalH2DatasourceSpecificationEditor = observer(
           {capitalize('test data setup SQL')}
         </div>
         <div className="panel__content__form__section__text-editor">
-          <StudioTextInputEditor
+          <TextInputEditor
             inputValue={SQLValue}
             updateInput={(value: string | undefined): void =>
               localH2DatasourceSpecification_setTestDataSetupSqls(
@@ -1024,39 +1024,38 @@ const PostProcessorRelationalConnectionEditor = observer(
                 <ResizablePanel size={200} minSize={100}>
                   <Panel>
                     <PanelHeader title="post-processor">
-                      <DropdownMenu
-                        disabled={isReadOnly}
-                        content={postProcessorOptions.map(
-                          (postProcessorType) => (
-                            <MenuContentItem
-                              key={postProcessorType.value}
-                              onClick={addPostProcessor(
-                                postProcessorType.value,
-                              )}
-                            >
-                              New {postProcessorType.label} Post-Processor
-                            </MenuContentItem>
-                          ),
-                        )}
-                        menuProps={{
-                          anchorOrigin: {
-                            vertical: 'bottom',
-                            horizontal: 'right',
-                          },
-                          transformOrigin: {
-                            vertical: 'top',
-                            horizontal: 'right',
-                          },
-                          elevation: 7,
-                        }}
-                      >
-                        <PanelHeaderActionItem
+                      <PanelHeaderActions>
+                        <DropdownMenu
+                          title="Create post-processor"
+                          className="panel__header__action"
                           disabled={isReadOnly}
-                          title="Create Post-Processor"
+                          content={postProcessorOptions.map(
+                            (postProcessorType) => (
+                              <MenuContentItem
+                                key={postProcessorType.value}
+                                onClick={addPostProcessor(
+                                  postProcessorType.value,
+                                )}
+                              >
+                                New {postProcessorType.label} Post-Processor
+                              </MenuContentItem>
+                            ),
+                          )}
+                          menuProps={{
+                            anchorOrigin: {
+                              vertical: 'bottom',
+                              horizontal: 'right',
+                            },
+                            transformOrigin: {
+                              vertical: 'top',
+                              horizontal: 'right',
+                            },
+                            elevation: 7,
+                          }}
                         >
                           <PlusIcon />
-                        </PanelHeaderActionItem>
-                      </DropdownMenu>
+                        </DropdownMenu>
+                      </PanelHeaderActions>
                     </PanelHeader>
                     <PanelContent>
                       {postProcessors.map((postProcessor, idx) => (