@finos/legend-application-studio 18.1.0 → 19.1.0

package/src/components/editor/edit-panel/service-editor/testable/ServiceTestsEditor.tsx

@@ -159,7 +159,6 @@ export const NewParameterModal = observer(
     };
     const options = setupState.newParamOptions;
     const closeModal = (): void => setupState.setShowNewParameterModal(false);
-    const handleSubmit = (): void => setupState.addParameterValue();
     const onChange = (val: { label: string; value: string } | null): void => {
       if (val === null) {
         setupState.setNewParameterValueName('');
@@ -175,7 +174,10 @@ export const NewParameterModal = observer(
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
         <form
-          onSubmit={handleSubmit}
+          onSubmit={(event) => {
+            event.preventDefault();
+            setupState.addParameterValue();
+          }}
           className="modal modal--dark search-modal"
         >
           <div className="modal__title">New Test Parameter Value </div>

package/src/components/editor/edit-panel/testable/TestAssertionEditor.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { EDITOR_LANGUAGE } from '@finos/legend-application';
+import { EDITOR_LANGUAGE, TextInputEditor } from '@finos/legend-application';
 import {
   clsx,
   CompareIcon,
@@ -43,7 +43,6 @@ import {
 import { externalFormatData_setData } from '../../../../stores/shared/modifier/DSL_Data_GraphModifierHelper.js';
 import { TESTABLE_RESULT } from '../../../../stores/sidebar-state/testable/GlobalTestRunnerState.js';
 import { JsonDiffView } from '../../../shared/DiffView.js';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
 
 const EqualToJsonAsssertionEditor = observer(
@@ -80,7 +79,7 @@ const EqualToJsonAsssertionEditor = observer(
         </div>
         <div className="equal-to-json-editor__content panel__content">
           <div className="equal-to-json-editor__content__data">
-            <StudioTextInputEditor
+            <TextInputEditor
               inputValue={assertion.expected.data}
               language={EDITOR_LANGUAGE.JSON}
               updateInput={(val: string): void => {

package/src/components/editor/edit-panel/uml-editor/AssociationEditor.tsx

@@ -35,7 +35,7 @@ import {
   ResizablePanelGroup,
   ResizablePanelSplitterLine,
   BlankPanelContent,
-  getControlledResizablePanelProps,
+  getCollapsiblePanelGroupProps,
   InputWithInlineValidation,
   LockIcon,
   PlusIcon,
@@ -440,13 +440,22 @@ export const AssociationEditor = observer(
       LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.ASSOCIATION_EDITOR,
     );
 
+    // layout
+    const propertyEditorCollapsiblePanelGroupProps =
+      getCollapsiblePanelGroupProps(!selectedProperty, {
+        size: 250,
+      });
+
     return (
       <div
         data-testid={LEGEND_STUDIO_TEST_ID.ASSOCIATION_EDITOR}
         className="uml-element-editor association-editor"
       >
         <ResizablePanelGroup orientation="horizontal">
-          <ResizablePanel minSize={56}>
+          <ResizablePanel
+            {...propertyEditorCollapsiblePanelGroupProps.remainingPanel}
+            minSize={56}
+          >
             <Panel>
               <div className="panel__header">
                 <div className="panel__header__title">
@@ -561,9 +570,7 @@ export const AssociationEditor = observer(
             <ResizablePanelSplitterLine color="var(--color-light-grey-200)" />
           </ResizablePanelSplitter>
           <ResizablePanel
-            {...getControlledResizablePanelProps(!selectedProperty, {
-              size: 250,
-            })}
+            {...propertyEditorCollapsiblePanelGroupProps.collapsiblePanel}
             direction={-1}
           >
             {selectedProperty ? (

package/src/components/editor/edit-panel/uml-editor/ClassEditor.tsx

@@ -31,7 +31,7 @@ import {
   ResizablePanelSplitter,
   ResizablePanelSplitterLine,
   BlankPanelContent,
-  getControlledResizablePanelProps,
+  getCollapsiblePanelGroupProps,
   InputWithInlineValidation,
   LockIcon,
   PlusIcon,
@@ -93,7 +93,6 @@ import {
   getAllClassDerivedProperties,
   isElementReadOnly,
 } from '@finos/legend-graph';
-import { StudioLambdaEditor } from '../../../shared/StudioLambdaEditor.js';
 import {
   ApplicationNavigationContextData,
   buildElementOption,
@@ -134,6 +133,7 @@ import {
   getClassPropertyType,
 } from '../../../../stores/shared/ModelClassifierUtils.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
+import { LambdaEditor } from '@finos/legend-query-builder';
 
 type ClassPropertyDragSource = {
   property: Property;
@@ -811,7 +811,7 @@ const DerivedPropertyBasicEditor = observer(
                 </button>
               )}
             </div>
-            <StudioLambdaEditor
+            <LambdaEditor
               disabled={
                 editorState.classState
                   .isConvertingDerivedPropertyLambdaObjects ||
@@ -821,7 +821,7 @@ const DerivedPropertyBasicEditor = observer(
               lambdaEditorState={dpState}
               forceBackdrop={hasParserError}
               expectedType={propertyType}
-              onEditorFocusEventHandler={onLambdaEditorFocus}
+              onEditorFocus={onLambdaEditorFocus}
             />
           </div>
         </PanelEntryDropZonePlaceholder>
@@ -971,7 +971,7 @@ const ConstraintEditor = observer(
                 </button>
               )}
             </div>
-            <StudioLambdaEditor
+            <LambdaEditor
               disabled={
                 editorState.classState.isConvertingConstraintLambdaObjects ||
                 isReadOnly ||
@@ -982,7 +982,7 @@ const ConstraintEditor = observer(
               expectedType={editorStore.graphManagerState.graph.getPrimitiveType(
                 PRIMITIVE_TYPE.BOOLEAN,
               )}
-              onEditorFocusEventHandler={onLambdaEditorFocus}
+              onEditorFocus={onLambdaEditorFocus}
             />
           </div>
         </PanelEntryDropZonePlaceholder>
@@ -1688,13 +1688,22 @@ export const ClassFormEditor = observer(
       );
     }, [applicationStore, classState]);
 
+    // layout
+    const propertyEditorCollapsiblePanelGroupProps =
+      getCollapsiblePanelGroupProps(!editorState.selectedProperty, {
+        size: 250,
+      });
+
     return (
       <div
         data-testid={LEGEND_STUDIO_TEST_ID.CLASS_FORM_EDITOR}
         className="uml-element-editor class-form-editor"
       >
         <ResizablePanelGroup orientation="horizontal">
-          <ResizablePanel minSize={56}>
+          <ResizablePanel
+            {...propertyEditorCollapsiblePanelGroupProps.remainingPanel}
+            minSize={56}
+          >
             <Panel>
               <div className="panel__header">
                 <div className="panel__header__title">
@@ -1804,10 +1813,7 @@ export const ClassFormEditor = observer(
             <ResizablePanelSplitterLine color="var(--color-light-grey-200)" />
           </ResizablePanelSplitter>
           <ResizablePanel
-            {...getControlledResizablePanelProps(
-              !editorState.selectedProperty,
-              { size: 250 },
-            )}
+            {...propertyEditorCollapsiblePanelGroupProps.collapsiblePanel}
             direction={-1}
           >
             {editorState.selectedProperty ? (

package/src/components/editor/edit-panel/uml-editor/EnumerationEditor.tsx

@@ -30,7 +30,7 @@ import { prettyCONSTName } from '@finos/legend-shared';
 import {
   BlankPanelContent,
   clsx,
-  getControlledResizablePanelProps,
+  getCollapsiblePanelGroupProps,
   InputWithInlineValidation,
   ResizablePanel,
   ResizablePanelGroup,
@@ -541,13 +541,24 @@ export const EnumerationEditor = observer(
       LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.ENUMERATION_EDITOR,
     );
 
+    // layout
+    const enumEditorCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+      !selectedEnum,
+      {
+        size: 250,
+      },
+    );
+
     return (
       <div
         data-testid={LEGEND_STUDIO_TEST_ID.ENUMERATION_EDITOR}
         className="uml-element-editor enumeration-editor"
       >
         <ResizablePanelGroup orientation="horizontal">
-          <ResizablePanel minSize={56}>
+          <ResizablePanel
+            {...enumEditorCollapsiblePanelGroupProps.remainingPanel}
+            minSize={56}
+          >
             <Panel>
               <div className="panel__header">
                 <div className="panel__header__title">
@@ -674,9 +685,7 @@ export const EnumerationEditor = observer(
             <ResizablePanelSplitterLine color="var(--color-light-grey-200)" />
           </ResizablePanelSplitter>
           <ResizablePanel
-            {...getControlledResizablePanelProps(!selectedEnum, {
-              size: 250,
-            })}
+            {...enumEditorCollapsiblePanelGroupProps.collapsiblePanel}
             direction={-1}
           >
             {selectedEnum ? (

package/src/components/editor/side-bar/CreateNewElementModal.tsx

@@ -464,10 +464,6 @@ export const CreateNewElementModal = observer(() => {
     newElementState.setName('');
     elementNameInputRef.current?.focus();
   };
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
-    event.preventDefault();
-    save();
-  };
 
   if (!newElementState.showModal) {
     return null;
@@ -484,7 +480,10 @@ export const CreateNewElementModal = observer(() => {
     >
       <form
         data-testid={LEGEND_STUDIO_TEST_ID.NEW_ELEMENT_MODAL}
-        onSubmit={handleSubmit}
+        onSubmit={(event) => {
+          event.preventDefault();
+          save();
+        }}
         className="modal modal--dark search-modal"
       >
         <div className="modal__title">

package/src/components/editor/side-bar/Explorer.tsx

@@ -54,7 +54,10 @@ import { useDrag } from 'react-dnd';
 import { ElementDragSource } from '../../../stores/shared/DnDUtils.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
 import { ACTIVITY_MODE } from '../../../stores/EditorConfig.js';
-import { getTreeChildNodes } from '../../../stores/shared/PackageTreeUtils.js';
+import {
+  generatePackageableElementTreeNodeDataLabel,
+  getTreeChildNodes,
+} from '../../../stores/shared/PackageTreeUtils.js';
 import type { PackageTreeNodeData } from '../../../stores/shared/TreeUtils.js';
 import {
   type GenerationTreeNodeData,
@@ -75,7 +78,11 @@ import {
   isSystemElement,
   isDependencyElement,
   isElementReadOnly,
+  ConcreteFunctionDefinition,
   Class,
+  isMainGraphElement,
+  getFunctionSignature,
+  getFunctionNameWithPath,
 } from '@finos/legend-graph';
 import { useApplicationStore } from '@finos/legend-application';
 import { PACKAGEABLE_ELEMENT_TYPE } from '../../../stores/shared/ModelClassifierUtils.js';
@@ -87,7 +94,11 @@ const ElementRenamer = observer(() => {
   const applicationStore = useApplicationStore();
   const explorerTreeState = editorStore.explorerTreeState;
   const element = explorerTreeState.elementToRename;
-  const [path, setPath] = useState(element?.path ?? '');
+  const [path, setPath] = useState(
+    (element instanceof ConcreteFunctionDefinition
+      ? getFunctionNameWithPath(element)
+      : element?.path) ?? '',
+  );
   const pathInputRef = useRef<HTMLInputElement>(null);
   const changePath: React.ChangeEventHandler<HTMLInputElement> = (
     event,
@@ -98,8 +109,16 @@ const ElementRenamer = observer(() => {
     element instanceof Package || path.includes(ELEMENT_PATH_DELIMITER);
   const isValidElementPath =
     (element instanceof Package && isValidPath(path)) || isValidFullPath(path);
-  const existingElement =
-    editorStore.graphManagerState.graph.getNullableElement(path, true);
+  let existingElement = editorStore.graphManagerState.graph.getNullableElement(
+    path,
+    true,
+  );
+  existingElement =
+    existingElement instanceof Package
+      ? isMainGraphElement(existingElement)
+        ? existingElement
+        : undefined
+      : existingElement;
   const isElementUnique = !existingElement || existingElement === element;
   const elementRenameValidationErrorMessage = !isElementPathNonEmpty
     ? `Element path cannot be empty`
@@ -120,9 +139,14 @@ const ElementRenamer = observer(() => {
     event.preventDefault();
     if (element && canRenameElement) {
       explorerTreeState.setElementToRename(undefined);
-      flowResult(editorStore.renameElement(element, path)).catch(
-        applicationStore.alertUnhandledError,
-      );
+      flowResult(
+        editorStore.renameElement(
+          element,
+          element instanceof ConcreteFunctionDefinition
+            ? path + getFunctionSignature(element)
+            : path,
+        ),
+      ).catch(applicationStore.alertUnhandledError);
     }
   };
 
@@ -131,7 +155,11 @@ const ElementRenamer = observer(() => {
 
   useEffect(() => {
     if (element) {
-      setPath(element.path);
+      setPath(
+        element instanceof ConcreteFunctionDefinition
+          ? getFunctionNameWithPath(element)
+          : element.path,
+      );
     }
   }, [element]);
 
@@ -449,7 +477,10 @@ const PackageTreeNodeContainer = observer(
             tabIndex={-1}
             title={node.packageableElement.path}
           >
-            {node.label}
+            {generatePackageableElementTreeNodeDataLabel(
+              node.packageableElement,
+              node,
+            )}
           </button>
         </div>
       </ContextMenu>
@@ -713,36 +744,26 @@ const ProjectExplorerActionPanel = observer((props: { disabled: boolean }) => {
           <FileImportIcon />
         </button>
       )}
-      <DropdownMenu
-        disabled={
-          disabled ||
-          isInGrammarMode ||
-          (selectedTreeNode &&
-            isElementReadOnly(selectedTreeNode.packageableElement))
-        }
-        content={<ExplorerDropdownMenu />}
-        menuProps={{
-          anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
-          transformOrigin: { vertical: 'top', horizontal: 'left' },
-          elevation: 7,
-        }}
-      >
-        {!editorStore.isInViewerMode && (
-          <button
-            disabled={
-              disabled ||
-              isInGrammarMode ||
-              (selectedTreeNode &&
-                isElementReadOnly(selectedTreeNode.packageableElement))
-            }
-            className="panel__header__action"
-            tabIndex={-1}
-            title="New Element... (Ctrl + Shift + N)"
-          >
-            <PlusIcon />
-          </button>
-        )}
-      </DropdownMenu>
+      {!editorStore.isInViewerMode && (
+        <DropdownMenu
+          className="panel__header__action"
+          title="New Element... (Ctrl + Shift + N)"
+          disabled={
+            disabled ||
+            isInGrammarMode ||
+            (selectedTreeNode &&
+              isElementReadOnly(selectedTreeNode.packageableElement))
+          }
+          content={<ExplorerDropdownMenu />}
+          menuProps={{
+            anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+            transformOrigin: { vertical: 'top', horizontal: 'left' },
+            elevation: 7,
+          }}
+        >
+          <PlusIcon />
+        </DropdownMenu>
+      )}
       <button
         className="panel__header__action"
         disabled={disabled}

package/src/components/editor/side-bar/WorkflowManager.tsx

@@ -37,12 +37,12 @@ import {
   BanIcon,
   PanelContent,
 } from '@finos/legend-art';
-import { formatDistanceToNow } from 'date-fns';
 import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
 import { flowResult } from 'mobx';
 import { WorkflowJobStatus, WorkflowStatus } from '@finos/legend-server-sdlc';
 import {
   EDITOR_LANGUAGE,
+  TextInputEditor,
   useApplicationStore,
 } from '@finos/legend-application';
 import {
@@ -54,11 +54,11 @@ import {
   WorkflowTreeNodeData,
 } from '../../../stores/sidebar-state/WorkflowManagerState.js';
 import {
+  formatDistanceToNow,
   guaranteeNonNullable,
   guaranteeType,
   isNonNullable,
 } from '@finos/legend-shared';
-import { StudioTextInputEditor } from '../../shared/StudioTextInputEditor.js';
 
 const getWorkflowStatusIcon = (
   workflowStatus: WorkflowStatus,
@@ -231,7 +231,7 @@ const WorkflowJobLogsViewer = observer(
             </div>
           </div>
           <div className="modal__body">
-            <StudioTextInputEditor
+            <TextInputEditor
               inputValue={logs}
               isReadOnly={true}
               language={EDITOR_LANGUAGE.TEXT}

package/src/components/editor/side-bar/WorkspaceReview.tsx

@@ -30,18 +30,14 @@ import {
   PanelContent,
 } from '@finos/legend-art';
 import { ACTIVITY_MODE } from '../../../stores/EditorConfig.js';
-import { formatDistanceToNow } from 'date-fns';
 import { generateReviewRoute } from '../../../stores/LegendStudioRouter.js';
 import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
 import { flowResult } from 'mobx';
 import type { EntityDiff } from '@finos/legend-server-sdlc';
 import { entityDiffSorter } from '../../../stores/EditorSDLCState.js';
 import { useEditorStore } from '../EditorStoreProvider.js';
-import {
-  ActionAlertType,
-  ActionAlertActionType,
-} from '@finos/legend-application';
 import { useLegendStudioApplicationStore } from '../../LegendStudioBaseStoreProvider.js';
+import { formatDistanceToNow } from '@finos/legend-shared';
 
 export const WorkspaceReviewDiffs = observer(() => {
   const editorStore = useEditorStore();
@@ -134,38 +130,12 @@ export const WorkspaceReview = observer(() => {
   };
   const commitReview = (): void => {
     if (workspaceReview && !isDispatchingAction) {
-      const commit = (): void => {
+      editorStore.localChangesState.alertUnsavedChanges((): void => {
         workspaceReviewState.setReviewTitle('');
         flowResult(
           workspaceReviewState.commitWorkspaceReview(workspaceReview),
         ).catch(applicationStore.alertUnhandledError);
-      };
-      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 commit review',
-              type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-              handler: (): void => {
-                commit();
-              },
-            },
-            {
-              label: 'Abort',
-              type: ActionAlertActionType.PROCEED,
-              default: true,
-            },
-          ],
-        });
-      } else {
-        commit();
-      }
+      });
     }
   };
   const createReview = (): void => {
@@ -239,8 +209,8 @@ export const WorkspaceReview = observer(() => {
             <>
               <form
                 className="workspace-review__title"
-                onSubmit={(e): void => {
-                  e.preventDefault();
+                onSubmit={(event) => {
+                  event.preventDefault();
                 }}
               >
                 <div className="workspace-review__title__content">

package/src/components/editor/side-bar/WorkspaceUpdater.tsx

@@ -41,10 +41,6 @@ import type {
 } from '@finos/legend-server-sdlc';
 import { entityDiffSorter } from '../../../stores/EditorSDLCState.js';
 import { useEditorStore } from '../EditorStoreProvider.js';
-import {
-  ActionAlertType,
-  ActionAlertActionType,
-} from '@finos/legend-application';
 import { useLegendStudioApplicationStore } from '../../LegendStudioBaseStoreProvider.js';
 
 export const WorkspaceUpdater = observer(() => {
@@ -55,36 +51,11 @@ export const WorkspaceUpdater = observer(() => {
   const workspaceUpdaterState = editorStore.workspaceUpdaterState;
   // Actions
   const updateWorkspace = (): 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 update workspace',
-            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-            handler: (): void => {
-              flowResult(workspaceUpdaterState.updateWorkspace()).catch(
-                applicationStore.alertUnhandledError,
-              );
-            },
-          },
-          {
-            label: 'Abort',
-            type: ActionAlertActionType.PROCEED,
-            default: true,
-          },
-        ],
-      });
-    } else {
+    editorStore.localChangesState.alertUnsavedChanges((): void => {
       flowResult(workspaceUpdaterState.updateWorkspace()).catch(
         applicationStore.alertUnhandledError,
       );
-    }
+    });
   };
   const refreshWorkspaceUpdater = applicationStore.guardUnhandledError(() =>
     flowResult(workspaceUpdaterState.refreshWorkspaceUpdater()),

package/src/components/editor/side-bar/testable/GlobalTestRunner.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { EDITOR_LANGUAGE } from '@finos/legend-application';
+import { EDITOR_LANGUAGE, TextInputEditor } from '@finos/legend-application';
 import {
   type TreeData,
   type TreeNodeContainerProps,
@@ -62,7 +62,6 @@ import {
 import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
 import { TextDiffView } from '../../../shared/DiffView.js';
 import { getElementTypeIcon } from '../../../shared/ElementIconUtils.js';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 
 export const getTestableResultIcon = (
@@ -169,7 +168,7 @@ const TestFailViewer = observer(
           </div>
           <div className="modal__body">
             {failure instanceof TestError && (
-              <StudioTextInputEditor
+              <TextInputEditor
                 inputValue={failure.error}
                 isReadOnly={true}
                 language={EDITOR_LANGUAGE.TEXT}
@@ -185,7 +184,7 @@ const TestFailViewer = observer(
             )}
             {failure instanceof AssertFail &&
               !(failure instanceof EqualToJsonAssertFail) && (
-                <StudioTextInputEditor
+                <TextInputEditor
                   inputValue={failure.message ?? ''}
                   isReadOnly={true}
                   language={EDITOR_LANGUAGE.TEXT}