@finos/legend-application-studio 17.0.0 → 18.0.1

package/src/components/editor/edit-panel/service-editor/ServiceExecutionEditor.tsx

@@ -55,6 +55,8 @@ import {
   ArrowsJoinIcon,
   ArrowsSplitIcon,
   PanelDropZone,
+  Panel,
+  PanelContent,
 } from '@finos/legend-art';
 import { ServiceExecutionQueryEditor } from '../../../editor/edit-panel/service-editor/ServiceExecutionQueryEditor.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
@@ -247,7 +249,7 @@ const PureExecutionContextConfigurationEditor = observer(
     );
 
     return (
-      <div className="panel__content">
+      <PanelContent>
         <PanelDropZone
           dropTargetConnector={dropMappingOrRuntimeRef}
           isDragOver={isMappingOrRuntimeDragOver && !isReadOnly}
@@ -318,7 +320,7 @@ const PureExecutionContextConfigurationEditor = observer(
             </div>
           </div>
         </PanelDropZone>
-      </div>
+      </PanelContent>
     );
   },
 );
@@ -439,7 +441,7 @@ const PureSingleExecutionEditor = observer(
 
     return (
       <div className="service-execution-editor__execution">
-        <div className="panel">
+        <Panel>
           <div className="panel__content service-editor__content">
             <PureExecutionContextConfigurationEditor
               pureExecutionState={singleExecutionState}
@@ -448,7 +450,7 @@ const PureSingleExecutionEditor = observer(
               }
             />
           </div>
-        </div>
+        </Panel>
       </div>
     );
   },
@@ -816,7 +818,7 @@ const ServicePureExecutionEditor = observer(
           </ResizablePanelSplitter>
           <ResizablePanel minSize={56}>
             <div className="service-execution-editor__content">
-              <div className="panel">
+              <Panel>
                 <div className="panel__header">
                   <div className="panel__header__title">
                     <div className="panel__header__title__label service-editor__execution__label--test">
@@ -859,7 +861,7 @@ const ServicePureExecutionEditor = observer(
                     />
                   )}
                 </div>
-              </div>
+              </Panel>
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>

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

@@ -51,7 +51,7 @@ import {
   useApplicationStore,
 } from '@finos/legend-application';
 import { prettyCONSTName } from '@finos/legend-shared';
-import type { DSLData_LegendStudioApplicationPlugin_Extension } from '../../../../../stores/DSLData_LegendStudioApplicationPlugin_Extension.js';
+import type { DSL_Data_LegendStudioApplicationPlugin_Extension } from '../../../../../stores/DSL_Data_LegendStudioApplicationPlugin_Extension.js';
 import { useEditorStore } from '../../../EditorStoreProvider.js';
 
 export const ConnectionTestDataEditor = observer(
@@ -283,7 +283,7 @@ export const NewConnectionDataModal = observer(
       .flatMap(
         (plugin) =>
           (
-            plugin as DSLData_LegendStudioApplicationPlugin_Extension
+            plugin as DSL_Data_LegendStudioApplicationPlugin_Extension
           ).getExtraEmbeddedDataTypeOptions?.() ?? [],
       );
     const embeddedOptions = [

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

@@ -19,6 +19,7 @@ import {
   clsx,
   CompareIcon,
   Dialog,
+  PanelContent,
   PanelLoadingIndicator,
   RefreshIcon,
   WrenchIcon,
@@ -39,7 +40,7 @@ import {
   type TestAssertionEditorState,
   type TestAssertionState,
 } from '../../../../stores/editor-state/element-editor-state/testable/TestAssertionState.js';
-import { externalFormatData_setData } from '../../../../stores/graphModifier/DSLData_GraphModifierHelper.js';
+import { externalFormatData_setData } from '../../../../stores/graphModifier/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';
@@ -243,7 +244,7 @@ const TestAssertionResultViewer = observer(
           </div>
           <div className="panel__header__actions"></div>
         </div>
-        <div className="testable-test-assertion-result__content panel__content">
+        <PanelContent className="testable-test-assertion-result__content">
           <div
             className={clsx('testable-test-assertion-result__summary', {
               'testable-test-assertion-result__summary--fail':
@@ -262,7 +263,7 @@ const TestAssertionResultViewer = observer(
               </div>
             )}
 
-            {!(assertionResult === TESTABLE_RESULT.IN_PROGRESS) && (
+            {assertionResult !== TESTABLE_RESULT.IN_PROGRESS && (
               <>
                 <div className="testable-test-assertion-result__summary-info">
                   Id: {testAssertionEditorState.assertion.id}
@@ -275,7 +276,7 @@ const TestAssertionResultViewer = observer(
             )}
           </div>
           <div></div>
-        </div>
+        </PanelContent>
       </>
     );
   },

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

@@ -42,6 +42,7 @@ import {
   ArrowCircleRightIcon,
   LongArrowRightIcon,
   PanelDropZone,
+  Panel,
 } from '@finos/legend-art';
 import { getElementIcon } from '../../../shared/ElementIconUtils.js';
 import { prettyCONSTName, guaranteeType } from '@finos/legend-shared';
@@ -63,7 +64,6 @@ import {
   type TaggedValue,
   MULTIPLICITY_INFINITE,
   Profile,
-  Multiplicity,
   Class,
   PrimitiveType,
   Unit,
@@ -165,7 +165,10 @@ const AssociationPropertyBasicEditor = observer(
           ? upper
           : parseInt(upper, 10);
       if (!isNaN(lBound) && (uBound === undefined || !isNaN(uBound))) {
-        property_setMultiplicity(property, new Multiplicity(lBound, uBound));
+        property_setMultiplicity(
+          property,
+          editorStore.graphManagerState.graph.getMultiplicity(lBound, uBound),
+        );
       }
     };
     const changeLowerBound: React.ChangeEventHandler<HTMLInputElement> = (
@@ -444,7 +447,7 @@ export const AssociationEditor = observer(
       >
         <ResizablePanelGroup orientation="horizontal">
           <ResizablePanel minSize={56}>
-            <div className="panel">
+            <Panel>
               <div className="panel__header">
                 <div className="panel__header__title">
                   {isReadOnly && (
@@ -552,7 +555,7 @@ export const AssociationEditor = observer(
                   </PanelDropZone>
                 )}
               </div>
-            </div>
+            </Panel>
           </ResizablePanel>
           <ResizablePanelSplitter>
             <ResizablePanelSplitterLine color="var(--color-light-grey-200)" />

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

@@ -45,6 +45,7 @@ import {
   DragPreviewLayer,
   useDragPreviewLayer,
   PanelDropZone,
+  Panel,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
 import { PropertyEditor } from './PropertyEditor.js';
@@ -73,7 +74,6 @@ import {
   Class,
   GenericType,
   Profile,
-  Multiplicity,
   Type,
   PrimitiveType,
   Unit,
@@ -207,7 +207,10 @@ const PropertyBasicEditor = observer(
           ? upper
           : parseInt(upper, 10);
       if (!isNaN(lBound) && (uBound === undefined || !isNaN(uBound))) {
-        property_setMultiplicity(property, new Multiplicity(lBound, uBound));
+        property_setMultiplicity(
+          property,
+          editorStore.graphManagerState.graph.getMultiplicity(lBound, uBound),
+        );
       }
     };
     const changeLowerBound: React.ChangeEventHandler<HTMLInputElement> = (
@@ -537,7 +540,7 @@ const DerivedPropertyBasicEditor = observer(
       if (!isNaN(lBound) && (uBound === undefined || !isNaN(uBound))) {
         property_setMultiplicity(
           derivedProperty,
-          new Multiplicity(lBound, uBound),
+          editorStore.graphManagerState.graph.getMultiplicity(lBound, uBound),
         );
       }
     };
@@ -1692,7 +1695,7 @@ export const ClassFormEditor = observer(
       >
         <ResizablePanelGroup orientation="horizontal">
           <ResizablePanel minSize={56}>
-            <div className="panel">
+            <Panel>
               <div className="panel__header">
                 <div className="panel__header__title">
                   {isReadOnly && (
@@ -1795,7 +1798,7 @@ export const ClassFormEditor = observer(
                   />
                 )}
               </div>
-            </div>
+            </Panel>
           </ResizablePanel>
           <ResizablePanelSplitter>
             <ResizablePanelSplitterLine color="var(--color-light-grey-200)" />

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

@@ -33,7 +33,7 @@ import type { EmbeddedQueryBuilderState } from '../../../../stores/EmbeddedQuery
 import {
   service_initNewService,
   service_setExecution,
-} from '../../../../stores/graphModifier/DSLService_GraphModifierHelper.js';
+} from '../../../../stores/graphModifier/DSL_Service_GraphModifierHelper.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import { NewServiceModal } from '../service-editor/NewServiceModal.js';
 

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

@@ -47,6 +47,8 @@ import {
   DragPreviewLayer,
   useDragPreviewLayer,
   PanelDropZone,
+  Panel,
+  PanelContent,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
 import {
@@ -345,7 +347,7 @@ const EnumEditor = observer(
               </button>
             </div>
           </div>
-          <div className="panel__content">
+          <PanelContent>
             {selectedTab === UML_EDITOR_TAB.TAGGED_VALUES && (
               <PanelDropZone
                 isDragOver={isTaggedValueDragOver && !isReadOnly}
@@ -384,7 +386,7 @@ const EnumEditor = observer(
                 </div>
               </PanelDropZone>
             )}
-          </div>
+          </PanelContent>
         </div>
       </div>
     );
@@ -546,7 +548,7 @@ export const EnumerationEditor = observer(
       >
         <ResizablePanelGroup orientation="horizontal">
           <ResizablePanel minSize={56}>
-            <div className="panel">
+            <Panel>
               <div className="panel__header">
                 <div className="panel__header__title">
                   <div className="panel__header__title__label">enumeration</div>
@@ -605,7 +607,7 @@ export const EnumerationEditor = observer(
                   </button>
                 </div>
               </div>
-              <div className="panel__content">
+              <PanelContent>
                 {selectedTab === UML_EDITOR_TAB.ENUM_VALUES && (
                   <div className="panel__content__lists">
                     <DragPreviewLayer
@@ -665,8 +667,8 @@ export const EnumerationEditor = observer(
                     </div>
                   </PanelDropZone>
                 )}
-              </div>
-            </div>
+              </PanelContent>
+            </Panel>
           </ResizablePanel>
           <ResizablePanelSplitter>
             <ResizablePanelSplitterLine color="var(--color-light-grey-200)" />

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

@@ -30,6 +30,8 @@ import {
   PanelEntryDropZonePlaceholder,
   DragPreviewLayer,
   useDragPreviewLayer,
+  Panel,
+  PanelContent,
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
@@ -293,7 +295,7 @@ export const ProfileEditor = observer((props: { profile: Profile }) => {
 
   return (
     <div className="uml-element-editor profile-editor">
-      <div className="panel">
+      <Panel>
         <div className="panel__header">
           <div className="panel__header__title">
             {isReadOnly && (
@@ -334,7 +336,7 @@ export const ProfileEditor = observer((props: { profile: Profile }) => {
             </button>
           </div>
         </div>
-        <div className="panel__content">
+        <PanelContent>
           {selectedTab === UML_EDITOR_TAB.TAGS && (
             <div className="panel__content__lists">
               <DragPreviewLayer
@@ -375,8 +377,8 @@ export const ProfileEditor = observer((props: { profile: Profile }) => {
               ))}
             </div>
           )}
-        </div>
-      </div>
+        </PanelContent>
+      </Panel>
     </div>
   );
 });

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

@@ -25,6 +25,7 @@ import {
 import {
   clsx,
   LockIcon,
+  PanelContent,
   PanelDropZone,
   PlusIcon,
   TimesIcon,
@@ -215,7 +216,7 @@ export const PropertyEditor = observer(
               </button>
             </div>
           </div>
-          <div className="panel__content">
+          <PanelContent>
             {selectedTab === UML_EDITOR_TAB.TAGGED_VALUES && (
               <PanelDropZone
                 isDragOver={isTaggedValueDragOver && !isReadOnly}
@@ -254,7 +255,7 @@ export const PropertyEditor = observer(
                 </div>
               </PanelDropZone>
             )}
-          </div>
+          </PanelContent>
         </div>
       </div>
     );

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

@@ -47,7 +47,7 @@ import {
   type PackageableElementOption,
 } from '@finos/legend-application';
 import type { EmbeddedDataTypeOption } from '../../../stores/editor-state/element-editor-state/data/DataEditorState.js';
-import type { DSLData_LegendStudioApplicationPlugin_Extension } from '../../../stores/DSLData_LegendStudioApplicationPlugin_Extension.js';
+import type { DSL_Data_LegendStudioApplicationPlugin_Extension } from '../../../stores/DSL_Data_LegendStudioApplicationPlugin_Extension.js';
 import { PACKAGEABLE_ELEMENT_TYPE } from '../../../stores/shared/ModelClassifierUtils.js';
 import { EmbeddedDataType } from '../../../stores/editor-state/ExternalFormatState.js';
 
@@ -128,7 +128,7 @@ const NewDataElementDriverEditor = observer(() => {
     .flatMap(
       (plugin) =>
         (
-          plugin as DSLData_LegendStudioApplicationPlugin_Extension
+          plugin as DSL_Data_LegendStudioApplicationPlugin_Extension
         ).getExtraEmbeddedDataTypeOptions?.() ?? [],
     );
   let options: EmbeddedDataTypeOption[] = Object.values(EmbeddedDataType)

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

@@ -30,6 +30,7 @@ import {
   ResizablePanelSplitter,
   ResizablePanelSplitterLine,
   CloudUploadIcon,
+  PanelContent,
 } from '@finos/legend-art';
 import { EntityDiffViewState } from '../../../stores/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
 import { EntityDiffSideBarItem } from '../../editor/edit-panel/diff-editor/EntityDiffView.js';
@@ -314,7 +315,7 @@ export const LocalChanges = observer(() => {
                   {changes.length}
                 </div>
               </div>
-              <div className="panel__content">
+              <PanelContent>
                 {changes
                   .slice()
                   .sort(entityDiffSorter)
@@ -326,7 +327,7 @@ export const LocalChanges = observer(() => {
                       openDiff={openChange(diff)}
                     />
                   ))}
-              </div>
+              </PanelContent>
             </div>
           </ResizablePanel>
           <ResizablePanelSplitter>
@@ -350,7 +351,7 @@ export const LocalChanges = observer(() => {
                   {updateState.incomingRevisions.length}
                 </div>
               </div>
-              <div className="panel__content">
+              <PanelContent>
                 {updateState.incomingRevisions.map((revision) => (
                   <div key={revision.id} className="side-bar__panel__item">
                     <div className="local-changes__revision">
@@ -363,7 +364,7 @@ export const LocalChanges = observer(() => {
                     </div>
                   </div>
                 ))}
-              </div>
+              </PanelContent>
             </div>
           </ResizablePanel>
 
@@ -396,7 +397,7 @@ export const LocalChanges = observer(() => {
                   {workspacePullChanges.length}
                 </div>
               </div>
-              <div className="panel__content">
+              <PanelContent>
                 {conflicts
                   .slice()
                   .sort((a, b) => a.entityName.localeCompare(b.entityName))
@@ -423,7 +424,7 @@ export const LocalChanges = observer(() => {
                       openDiff={openWorkspacePullChange(diff)}
                     />
                   ))}
-              </div>
+              </PanelContent>
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>

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

@@ -32,6 +32,7 @@ import {
   UserIcon,
   ExternalLinkIcon,
   Dialog,
+  PanelContent,
 } from '@finos/legend-art';
 import { PROJECT_OVERVIEW_ACTIVITY_MODE } from '../../../stores/sidebar-state/ProjectOverviewState.js';
 import {
@@ -381,7 +382,7 @@ const ReleaseEditor = observer(() => {
                   </div>
                 </div>
               </div>
-              <div className="panel__content">
+              <PanelContent>
                 {latestProjectVersion && (
                   <div className="project-overview__release__info__current-version">
                     <Link
@@ -411,7 +412,7 @@ const ReleaseEditor = observer(() => {
                     </span>
                   </div>
                 )}
-              </div>
+              </PanelContent>
             </div>
             <div className="panel project-overview__release__info__reviews">
               <div className="panel__header">
@@ -435,7 +436,7 @@ const ReleaseEditor = observer(() => {
                   {commitedReviews.length}
                 </div>
               </div>
-              <div className="panel__content">
+              <PanelContent>
                 {commitedReviews.map((review) => (
                   <Link
                     key={review.id}
@@ -455,7 +456,7 @@ const ReleaseEditor = observer(() => {
                     </div>
                   </Link>
                 ))}
-              </div>
+              </PanelContent>
             </div>
           </div>
         )}

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

@@ -35,6 +35,7 @@ import {
   CheckCircleIcon,
   PauseCircleIcon,
   BanIcon,
+  PanelContent,
 } from '@finos/legend-art';
 import { formatDistanceToNow } from 'date-fns';
 import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
@@ -520,7 +521,7 @@ export const WorkflowManager = observer(
                 {workflowManagerState.workflowStates.length}
               </div>
             </div>
-            <div className="panel__content">{renderWorkflowContent()}</div>
+            <PanelContent>{renderWorkflowContent()}</PanelContent>
           </div>
         </div>
       </div>

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

@@ -28,6 +28,7 @@ import {
   TimesIcon,
   PlusIcon,
   ExternalLinkSquareIcon,
+  PanelContent,
 } from '@finos/legend-art';
 import { ACTIVITY_MODE } from '../../../stores/EditorConfig.js';
 import { formatDistanceToNow } from 'date-fns';
@@ -78,7 +79,7 @@ export const WorkspaceReviewDiffs = observer(() => {
           {changes.length}
         </div>
       </div>
-      <div className="panel__content">
+      <PanelContent>
         {changes
           .slice()
           .sort(entityDiffSorter)
@@ -90,7 +91,7 @@ export const WorkspaceReviewDiffs = observer(() => {
               openDiff={openChange(diff)}
             />
           ))}
-      </div>
+      </PanelContent>
     </div>
   );
 });

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

@@ -26,6 +26,7 @@ import {
   InfoCircleIcon,
   TimesIcon,
   Dialog,
+  PanelContent,
 } from '@finos/legend-art';
 import type {
   EntityChangeConflict,
@@ -137,7 +138,7 @@ export const WorkspaceSyncConflictResolver = observer(() => {
                           {changes.length + conflicts.length}
                         </div>
                       </div>
-                      <div className="panel__content">
+                      <PanelContent>
                         {!hadResolvedAllConflicts && (
                           <>
                             {conflicts
@@ -182,7 +183,7 @@ export const WorkspaceSyncConflictResolver = observer(() => {
                                 openDiff={openChange(diff)}
                               />
                             ))}
-                      </div>
+                      </PanelContent>
                     </div>
                   </ResizablePanelGroup>
                 </div>
@@ -229,7 +230,7 @@ export const WorkspaceSyncConflictResolver = observer(() => {
                     ))}
                   </div>
                 </div>
-                <div className="panel__content">
+                <PanelContent>
                   {updateConflictState.currentDiffEditorState instanceof
                     EntityChangeConflictEditorState && (
                     <EntityChangeConflictEditor
@@ -246,7 +247,7 @@ export const WorkspaceSyncConflictResolver = observer(() => {
                       }
                     />
                   )}
-                </div>
+                </PanelContent>
               </div>
             </ResizablePanel>
           </ResizablePanelGroup>

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

@@ -24,6 +24,7 @@ import {
   TimesIcon,
   InfoCircleIcon,
   BanIcon,
+  PanelContent,
 } from '@finos/legend-art';
 import { EntityChangeConflictSideBarItem } from '../edit-panel/diff-editor/EntityChangeConflictEditor.js';
 import { EntityChangeConflictEditorState } from '../../../stores/editor-state/entity-diff-editor-state/EntityChangeConflictEditorState.js';
@@ -156,7 +157,7 @@ export const WorkspaceUpdateConflictResolver = observer(() => {
                   : conflicts.length)}
             </div>
           </div>
-          <div className="panel__content">
+          <PanelContent>
             {!conflictResolutionState.hasResolvedAllConflicts && (
               <>
                 {conflicts
@@ -198,7 +199,7 @@ export const WorkspaceUpdateConflictResolver = observer(() => {
                     openDiff={openChange(diff)}
                   />
                 ))}
-          </div>
+          </PanelContent>
         </div>
       </div>
     </div>

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

@@ -28,6 +28,7 @@ import {
   CloudDownloadIcon,
   RefreshIcon,
   InfoCircleIcon,
+  PanelContent,
 } from '@finos/legend-art';
 import { Link } from 'react-router-dom';
 import { EntityChangeConflictSideBarItem } from '../../editor/edit-panel/diff-editor/EntityChangeConflictEditor.js';
@@ -193,7 +194,7 @@ export const WorkspaceUpdater = observer(() => {
                   {changes.length}
                 </div>
               </div>
-              <div className="panel__content">
+              <PanelContent>
                 {conflicts
                   .slice()
                   .sort((a, b) => a.entityName.localeCompare(b.entityName))
@@ -220,7 +221,7 @@ export const WorkspaceUpdater = observer(() => {
                       openDiff={openChange(diff)}
                     />
                   ))}
-              </div>
+              </PanelContent>
             </div>
           </ResizablePanel>
           <ResizablePanelSplitter>
@@ -249,7 +250,7 @@ export const WorkspaceUpdater = observer(() => {
                   {commitedReviews.length}
                 </div>
               </div>
-              <div className="panel__content">
+              <PanelContent>
                 {commitedReviews.map((review) => (
                   <Link
                     key={review.id}
@@ -269,7 +270,7 @@ export const WorkspaceUpdater = observer(() => {
                     </div>
                   </Link>
                 ))}
-              </div>
+              </PanelContent>
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>