@finos/legend-application-studio 28.18.68 → 28.18.70

package/src/components/editor/editor-group/project-configuration-editor/ProjectDependencyEditor.tsx

@@ -821,8 +821,7 @@ const ProjectVersionDependencyEditor = observer(
     // version
     const version = projectDependency.versionId;
     const versionOptions = versions
-      .slice()
-      .sort((v1, v2) => compareSemVerVersions(v2, v1))
+      .toSorted((v1, v2) => compareSemVerVersions(v2, v1))
       .map((v) => {
         if (v === MASTER_SNAPSHOT_ALIAS) {
           return { value: v, label: SNAPSHOT_VERSION_ALIAS };

package/src/components/editor/editor-group/service-editor/ServiceExecutionEditor.tsx

@@ -236,7 +236,7 @@ const PureExecutionContextConfigurationEditor = observer(
       },
       [isReadOnly, mapping, executionContextState, pureExecutionState],
     );
-    const [{ isMappingOrRuntimeDragOver }, dropMappingOrRuntimeRef] = useDrop<
+    const [{ isMappingOrRuntimeDragOver }, dropConnector] = useDrop<
       ElementDragSource,
       void,
       { isMappingOrRuntimeDragOver: boolean }
@@ -262,7 +262,7 @@ const PureExecutionContextConfigurationEditor = observer(
     return (
       <PanelContent>
         <PanelDropZone
-          dropTargetConnector={dropMappingOrRuntimeRef}
+          dropTargetConnector={dropConnector}
           isDragOver={isMappingOrRuntimeDragOver && !isReadOnly}
         >
           <div className="service-execution-editor__configuration__items">

package/src/components/editor/editor-group/service-editor/ServiceExecutionQueryEditor.tsx

@@ -212,7 +212,6 @@ export const ServiceExecutionQueryEditor = observer(
           }),
         );
         executionState.setOpeningQueryEditor(false);
-        return;
       });
 
     const importQuery = (): void =>

package/src/components/editor/editor-group/uml-editor/AssociationEditor.tsx

@@ -451,7 +451,7 @@ export const AssociationEditor = observer(
       },
       [association, isReadOnly],
     );
-    const [{ isTaggedValueDragOver }, dropTaggedValueRef] = useDrop<
+    const [{ isTaggedValueDragOver }, taggedValueDropConnector] = useDrop<
       ElementDragSource,
       void,
       { isTaggedValueDragOver: boolean }
@@ -478,7 +478,7 @@ export const AssociationEditor = observer(
       },
       [association, isReadOnly],
     );
-    const [{ isStereotypeDragOver }, dropStereotypeRef] = useDrop<
+    const [{ isStereotypeDragOver }, stereotypeDropConnector] = useDrop<
       ElementDragSource,
       void,
       { isStereotypeDragOver: boolean }
@@ -585,7 +585,7 @@ export const AssociationEditor = observer(
                 {selectedTab === UML_EDITOR_TAB.TAGGED_VALUES && (
                   <PanelDropZone
                     isDragOver={isTaggedValueDragOver && !isReadOnly}
-                    dropTargetConnector={dropTaggedValueRef}
+                    dropTargetConnector={taggedValueDropConnector}
                   >
                     <PanelContentLists>
                       <TaggedValueDragPreviewLayer />
@@ -604,7 +604,7 @@ export const AssociationEditor = observer(
                 {selectedTab === UML_EDITOR_TAB.STEREOTYPES && (
                   <PanelDropZone
                     isDragOver={isStereotypeDragOver && !isReadOnly}
-                    dropTargetConnector={dropStereotypeRef}
+                    dropTargetConnector={stereotypeDropConnector}
                   >
                     <PanelContentLists>
                       <StereotypeDragPreviewLayer />

package/src/components/editor/editor-group/uml-editor/ClassEditor.tsx

@@ -1195,7 +1195,7 @@ const PropertiesEditor = observer(
       },
       [_class, isReadOnly],
     );
-    const [{ isPropertyDragOver }, dropPropertyRef] = useDrop<
+    const [{ isPropertyDragOver }, dropConnector] = useDrop<
       ElementDragSource,
       void,
       { isPropertyDragOver: boolean }
@@ -1220,7 +1220,7 @@ const PropertiesEditor = observer(
     return (
       <PanelDropZone
         isDragOver={isPropertyDragOver && !isReadOnly}
-        dropTargetConnector={dropPropertyRef}
+        dropTargetConnector={dropConnector}
       >
         <PanelContentLists>
           <DragPreviewLayer
@@ -1278,7 +1278,7 @@ const DerviedPropertiesEditor = observer(
       },
       [_class, classState, isReadOnly],
     );
-    const [{ isDerivedPropertyDragOver }, dropDerivedPropertyRef] = useDrop<
+    const [{ isDerivedPropertyDragOver }, dropConnector] = useDrop<
       ElementDragSource,
       void,
       { isDerivedPropertyDragOver: boolean }
@@ -1303,7 +1303,7 @@ const DerviedPropertiesEditor = observer(
     return (
       <PanelDropZone
         isDragOver={isDerivedPropertyDragOver && !isReadOnly}
-        dropTargetConnector={dropDerivedPropertyRef}
+        dropTargetConnector={dropConnector}
       >
         <PanelContentLists>
           <DragPreviewLayer
@@ -1420,7 +1420,7 @@ const SupertypesEditor = observer(
       },
       [_class, isReadOnly],
     );
-    const [{ isSuperTypeDragOver }, dropSuperTypeRef] = useDrop<
+    const [{ isSuperTypeDragOver }, dropConnector] = useDrop<
       ElementDragSource,
       void,
       { isSuperTypeDragOver: boolean }
@@ -1445,7 +1445,7 @@ const SupertypesEditor = observer(
     return (
       <PanelDropZone
         isDragOver={isSuperTypeDragOver && !isReadOnly}
-        dropTargetConnector={dropSuperTypeRef}
+        dropTargetConnector={dropConnector}
       >
         <PanelContentLists>
           <DragPreviewLayer
@@ -1490,7 +1490,7 @@ const TaggedValuesEditor = observer(
       },
       [_class, isReadOnly],
     );
-    const [{ isTaggedValueDragOver }, dropTaggedValueRef] = useDrop<
+    const [{ isTaggedValueDragOver }, dropConnector] = useDrop<
       ElementDragSource,
       void,
       { isTaggedValueDragOver: boolean }
@@ -1508,7 +1508,7 @@ const TaggedValuesEditor = observer(
     return (
       <PanelDropZone
         isDragOver={isTaggedValueDragOver && !isReadOnly}
-        dropTargetConnector={dropTaggedValueRef}
+        dropTargetConnector={dropConnector}
       >
         <PanelContentLists>
           <TaggedValueDragPreviewLayer />
@@ -1550,7 +1550,7 @@ const StereotypesEditor = observer(
       },
       [_class, isReadOnly],
     );
-    const [{ isStereotypeDragOver }, dropStereotypeRef] = useDrop<
+    const [{ isStereotypeDragOver }, dropConnector] = useDrop<
       ElementDragSource,
       void,
       { isStereotypeDragOver: boolean }
@@ -1568,7 +1568,7 @@ const StereotypesEditor = observer(
     return (
       <PanelDropZone
         isDragOver={isStereotypeDragOver && !isReadOnly}
-        dropTargetConnector={dropStereotypeRef}
+        dropTargetConnector={dropConnector}
       >
         <PanelContentLists>
           <StereotypeDragPreviewLayer />

package/src/components/editor/editor-group/uml-editor/EnumerationEditor.tsx

@@ -266,7 +266,7 @@ const EnumEditor = observer(
       },
       [_enum, isReadOnly],
     );
-    const [{ isTaggedValueDragOver }, dropTaggedValueRef] = useDrop<
+    const [{ isTaggedValueDragOver }, taggedValueDropConnector] = useDrop<
       ElementDragSource,
       void,
       { isTaggedValueDragOver: boolean }
@@ -293,7 +293,7 @@ const EnumEditor = observer(
       },
       [_enum, isReadOnly],
     );
-    const [{ isStereotypeDragOver }, dropStereotypeRef] = useDrop<
+    const [{ isStereotypeDragOver }, stereotypeDropConnector] = useDrop<
       ElementDragSource,
       void,
       { isStereotypeDragOver: boolean }
@@ -358,7 +358,7 @@ const EnumEditor = observer(
             {selectedTab === UML_EDITOR_TAB.TAGGED_VALUES && (
               <PanelDropZone
                 isDragOver={isTaggedValueDragOver && !isReadOnly}
-                dropTargetConnector={dropTaggedValueRef}
+                dropTargetConnector={taggedValueDropConnector}
               >
                 <PanelContentLists>
                   <TaggedValueDragPreviewLayer />
@@ -377,7 +377,7 @@ const EnumEditor = observer(
             {selectedTab === UML_EDITOR_TAB.STEREOTYPES && (
               <PanelDropZone
                 isDragOver={isStereotypeDragOver && !isReadOnly}
-                dropTargetConnector={dropStereotypeRef}
+                dropTargetConnector={stereotypeDropConnector}
               >
                 <PanelContentLists>
                   <StereotypeDragPreviewLayer />
@@ -487,7 +487,7 @@ export const EnumerationEditor = observer(
       },
       [enumeration, isReadOnly],
     );
-    const [{ isTaggedValueDragOver }, dropTaggedValueRef] = useDrop<
+    const [{ isTaggedValueDragOver }, taggedValueDropConnector] = useDrop<
       ElementDragSource,
       void,
       { isTaggedValueDragOver: boolean }
@@ -514,7 +514,7 @@ export const EnumerationEditor = observer(
       },
       [enumeration, isReadOnly],
     );
-    const [{ isStereotypeDragOver }, dropStereotypeRef] = useDrop<
+    const [{ isStereotypeDragOver }, stereotypeDropConnector] = useDrop<
       ElementDragSource,
       void,
       { isStereotypeDragOver: boolean }
@@ -651,7 +651,7 @@ export const EnumerationEditor = observer(
                 {selectedTab === UML_EDITOR_TAB.TAGGED_VALUES && (
                   <PanelDropZone
                     isDragOver={isTaggedValueDragOver && !isReadOnly}
-                    dropTargetConnector={dropTaggedValueRef}
+                    dropTargetConnector={taggedValueDropConnector}
                   >
                     <PanelContentLists>
                       <TaggedValueDragPreviewLayer />
@@ -670,7 +670,7 @@ export const EnumerationEditor = observer(
                 {selectedTab === UML_EDITOR_TAB.STEREOTYPES && (
                   <PanelDropZone
                     isDragOver={isStereotypeDragOver && !isReadOnly}
-                    dropTargetConnector={dropStereotypeRef}
+                    dropTargetConnector={stereotypeDropConnector}
                   >
                     <PanelContentLists>
                       <StereotypeDragPreviewLayer />

package/src/components/editor/editor-group/uml-editor/PropertyEditor.tsx

@@ -148,7 +148,7 @@ export const PropertyEditor = observer(
       },
       [isReadOnly, property],
     );
-    const [{ isTaggedValueDragOver }, dropTaggedValueRef] = useDrop<
+    const [{ isTaggedValueDragOver }, taggedValueDropConnector] = useDrop<
       ElementDragSource,
       void,
       { isTaggedValueDragOver: boolean }
@@ -175,7 +175,7 @@ export const PropertyEditor = observer(
       },
       [isReadOnly, property],
     );
-    const [{ isStereotypeDragOver }, dropStereotypeRef] = useDrop<
+    const [{ isStereotypeDragOver }, stereotypeDropConnector] = useDrop<
       ElementDragSource,
       void,
       { isStereotypeDragOver: boolean }
@@ -279,7 +279,7 @@ export const PropertyEditor = observer(
             {selectedTab === UML_EDITOR_TAB.TAGGED_VALUES && (
               <PanelDropZone
                 isDragOver={isTaggedValueDragOver && !isReadOnly}
-                dropTargetConnector={dropTaggedValueRef}
+                dropTargetConnector={taggedValueDropConnector}
               >
                 <PanelContentLists>
                   <TaggedValueDragPreviewLayer />
@@ -298,7 +298,7 @@ export const PropertyEditor = observer(
             {selectedTab === UML_EDITOR_TAB.STEREOTYPES && (
               <PanelDropZone
                 isDragOver={isStereotypeDragOver && !isReadOnly}
-                dropTargetConnector={dropStereotypeRef}
+                dropTargetConnector={stereotypeDropConnector}
               >
                 <PanelContentLists>
                   <StereotypeDragPreviewLayer />

package/src/components/editor/panel-group/SQLPlaygroundPanel.tsx

@@ -70,6 +70,7 @@ import {
   DataGrid,
   type DataGridCellRendererParams,
   type DataGridColumnDefinition,
+  type DataGridDefaultMenuItem,
   type DataGridGetContextMenuItemsParams,
   type DataGridMenuItemDef,
 } from '@finos/legend-lego/data-grid';
@@ -102,8 +103,9 @@ type DatabaseNodeDragType = { text: string };
 const SQLPlaygroundDatabaseSchemaExplorerTreeNodeContainer = observer(
   (props: DatabaseSchemaExplorerTreeNodeContainerProps) => {
     const { node } = props;
+    const ref = useRef(null);
 
-    const [, nodeDragRef] = useDrag<DatabaseNodeDragType>(
+    const [, dragConnector] = useDrag<DatabaseNodeDragType>(
       () => ({
         type: DATABASE_NODE_DND_TYPE,
         item: {
@@ -115,10 +117,9 @@ const SQLPlaygroundDatabaseSchemaExplorerTreeNodeContainer = observer(
       }),
       [node],
     );
+    dragConnector(ref);
 
-    return (
-      <DatabaseSchemaExplorerTreeNodeContainer {...props} ref={nodeDragRef} />
-    );
+    return <DatabaseSchemaExplorerTreeNodeContainer {...props} ref={ref} />;
   },
 );
 
@@ -490,7 +491,7 @@ const PlayGroundSQLExecutionResultGrid = observer(
           params: DataGridGetContextMenuItemsParams<{
             [key: string]: string;
           }>,
-        ): (string | DataGridMenuItemDef)[] => [
+        ): (DataGridDefaultMenuItem | DataGridMenuItemDef)[] => [
           'copy',
           'copyWithHeaders',
           {
@@ -528,9 +529,7 @@ const PlayGroundSQLExecutionResultGrid = observer(
             suppressClipboardPaste={false}
             suppressContextMenu={false}
             columnDefs={colDefs}
-            getContextMenuItems={(params): (string | DataGridMenuItemDef)[] =>
-              getContextMenuItems(params)
-            }
+            getContextMenuItems={(params) => getContextMenuItems(params)}
           />
         </div>
       );

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

@@ -218,8 +218,7 @@ const NewPureModelConnectionDriverEditor = observer(
     const _class = newConnectionValueDriver.class;
     const classOptions = editorStore.graphManagerState.usableClasses
       .map(buildElementOption)
-      .slice()
-      .sort(compareLabelFn);
+      .toSorted(compareLabelFn);
     const selectedClassOption = _class
       ? { label: _class.path, value: _class }
       : null;
@@ -324,8 +323,7 @@ const NewConnectionDriverEditor = observer(() => {
   storeOptions = storeOptions.concat(
     editorStore.graphManagerState.usableStores
       .map(buildElementOption)
-      .slice()
-      .sort(compareLabelFn),
+      .toSorted(compareLabelFn),
   );
   const selectedStoreOption = {
     label: store.path,

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

@@ -957,13 +957,16 @@ const PackageTreeNodeContainer = observer(
     const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
       useState(false);
     const { disableContextMenu, isContextImmutable } = innerProps;
-    const [, dragRef] = useDrag(
+    const [, dragConnector] = useDrag(
       () => ({
         type: node.dndType,
         item: new ElementDragSource(node),
       }),
       [node],
     );
+    const ref = useRef<HTMLDivElement>(null);
+    dragConnector(ref);
+
     const isPackage = node.packageableElement instanceof Package;
     const expandIcon = !isPackage ? (
       <div />
@@ -1023,7 +1026,7 @@ const PackageTreeNodeContainer = observer(
                 node.isSelected,
             },
           )}
-          ref={dragRef}
+          ref={ref}
           onClick={selectNode}
           style={{
             paddingLeft: `${level * (stepPaddingInRem ?? 1)}rem`,

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

@@ -328,17 +328,14 @@ export const LocalChanges = observer(() => {
                 </div>
               </div>
               <PanelContent>
-                {changes
-                  .slice()
-                  .sort(entityDiffSorter)
-                  .map((diff) => (
-                    <EntityDiffSideBarItem
-                      key={diff.key}
-                      diff={diff}
-                      isSelected={isSelectedDiff(diff)}
-                      openDiff={openChange(diff)}
-                    />
-                  ))}
+                {changes.toSorted(entityDiffSorter).map((diff) => (
+                  <EntityDiffSideBarItem
+                    key={diff.key}
+                    diff={diff}
+                    isSelected={isSelectedDiff(diff)}
+                    openDiff={openChange(diff)}
+                  />
+                ))}
               </PanelContent>
             </div>
           </ResizablePanel>
@@ -411,8 +408,7 @@ export const LocalChanges = observer(() => {
               </div>
               <PanelContent>
                 {conflicts
-                  .slice()
-                  .sort((a, b) => a.entityName.localeCompare(b.entityName))
+                  .toSorted((a, b) => a.entityName.localeCompare(b.entityName))
                   .map((conflict) => (
                     <EntityChangeConflictSideBarItem
                       key={`conflict-${conflict.entityPath}`}
@@ -426,8 +422,7 @@ export const LocalChanges = observer(() => {
                     <div className="diff-panel__item-section-separator" />
                   )}
                 {changesWithoutConflicts
-                  .slice()
-                  .sort(entityDiffSorter)
+                  .toSorted(entityDiffSorter)
                   .map((diff) => (
                     <EntityDiffSideBarItem
                       key={diff.key}

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

@@ -79,17 +79,14 @@ export const WorkspaceReviewDiffs = observer(() => {
         </div>
       </div>
       <PanelContent>
-        {changes
-          .slice()
-          .sort(entityDiffSorter)
-          .map((diff) => (
-            <EntityDiffSideBarItem
-              key={diff.key}
-              diff={diff}
-              isSelected={isSelectedDiff(diff)}
-              openDiff={openChange(diff)}
-            />
-          ))}
+        {changes.toSorted(entityDiffSorter).map((diff) => (
+          <EntityDiffSideBarItem
+            key={diff.key}
+            diff={diff}
+            isSelected={isSelectedDiff(diff)}
+            openDiff={openChange(diff)}
+          />
+        ))}
       </PanelContent>
     </div>
   );

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

@@ -150,8 +150,7 @@ export const WorkspaceSyncConflictResolver = observer(() => {
                         {!hadResolvedAllConflicts && (
                           <>
                             {conflicts
-                              .slice()
-                              .sort((a, b) =>
+                              .toSorted((a, b) =>
                                 a.entityName.localeCompare(b.entityName),
                               )
                               .map((conflict) => (
@@ -166,23 +165,19 @@ export const WorkspaceSyncConflictResolver = observer(() => {
                               Boolean(changes.length) && (
                                 <div className="diff-panel__item-section-separator" />
                               )}
-                            {changes
-                              .slice()
-                              .sort(entityDiffSorter)
-                              .map((diff) => (
-                                <EntityDiffSideBarItem
-                                  key={diff.key}
-                                  diff={diff}
-                                  isSelected={isSelectedDiff(diff)}
-                                  openDiff={openChange(diff)}
-                                />
-                              ))}
+                            {changes.toSorted(entityDiffSorter).map((diff) => (
+                              <EntityDiffSideBarItem
+                                key={diff.key}
+                                diff={diff}
+                                isSelected={isSelectedDiff(diff)}
+                                openDiff={openChange(diff)}
+                              />
+                            ))}
                           </>
                         )}
                         {hadResolvedAllConflicts &&
                           changes
-                            .slice()
-                            .sort(entityDiffSorter)
+                            .toSorted(entityDiffSorter)
                             .map((diff) => (
                               <EntityDiffSideBarItem
                                 key={diff.key}

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

@@ -161,8 +161,7 @@ export const WorkspaceUpdateConflictResolver = observer(() => {
             {!conflictResolutionState.hasResolvedAllConflicts && (
               <>
                 {conflicts
-                  .slice()
-                  .sort((a, b) => a.entityName.localeCompare(b.entityName))
+                  .toSorted((a, b) => a.entityName.localeCompare(b.entityName))
                   .map((conflict) => (
                     <EntityChangeConflictSideBarItem
                       key={`conflict-${conflict.entityPath}`}
@@ -174,23 +173,19 @@ export const WorkspaceUpdateConflictResolver = observer(() => {
                 {Boolean(conflicts.length) && Boolean(changes.length) && (
                   <div className="diff-panel__item-section-separator" />
                 )}
-                {changes
-                  .slice()
-                  .sort(entityDiffSorter)
-                  .map((diff) => (
-                    <EntityDiffSideBarItem
-                      key={diff.key}
-                      diff={diff}
-                      isSelected={isSelectedDiff(diff)}
-                      openDiff={openChange(diff)}
-                    />
-                  ))}
+                {changes.toSorted(entityDiffSorter).map((diff) => (
+                  <EntityDiffSideBarItem
+                    key={diff.key}
+                    diff={diff}
+                    isSelected={isSelectedDiff(diff)}
+                    openDiff={openChange(diff)}
+                  />
+                ))}
               </>
             )}
             {conflictResolutionState.hasResolvedAllConflicts &&
               changes
-                .slice()
-                .sort(entityDiffSorter)
+                .toSorted(entityDiffSorter)
                 .map((diff) => (
                   <EntityDiffSideBarItem
                     key={diff.key}

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

@@ -165,8 +165,7 @@ export const WorkspaceUpdater = observer(() => {
               </div>
               <PanelContent>
                 {conflicts
-                  .slice()
-                  .sort((a, b) => a.entityName.localeCompare(b.entityName))
+                  .toSorted((a, b) => a.entityName.localeCompare(b.entityName))
                   .map((conflict) => (
                     <EntityChangeConflictSideBarItem
                       key={`conflict-${conflict.entityPath}`}
@@ -180,8 +179,7 @@ export const WorkspaceUpdater = observer(() => {
                     <div className="diff-panel__item-section-separator" />
                   )}
                 {changesWithoutConflicts
-                  .slice()
-                  .sort(entityDiffSorter)
+                  .toSorted(entityDiffSorter)
                   .map((diff) => (
                     <EntityDiffSideBarItem
                       key={diff.key}

package/src/components/editor/side-bar/end-to-end-workflow/EndToEndWorkflows.tsx

@@ -49,7 +49,7 @@ export const EndToEndWorkflow = observer(
     const { globalEndToEndWorkflowState } = props;
 
     const openWorkflow = (
-      event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+      event: React.MouseEvent<HTMLDivElement>,
       flow: string,
     ): void => {
       event.stopPropagation();

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

@@ -669,7 +669,7 @@ export const GlobalTestRunner = observer(
       .flatMap(
         (plugin) => plugin.getExtraTestRunnerViewConfigurations?.() ?? [],
       )
-      .filter((configuration) => configuration.renderer(editorStore));
+      .filter((configuration) => Boolean(configuration.renderer(editorStore)));
 
     const testRunnerTabs = (Object.values(TEST_RUNNER_TABS) as string[])
       .map((e) => ({

package/src/components/project-reviewer/ProjectReviewSideBar.tsx

@@ -277,17 +277,14 @@ export const ProjectReviewerSideBar = observer(() => {
               </div>
             </div>
             <PanelContent>
-              {changes
-                .slice()
-                .sort(entityDiffSorter)
-                .map((diff) => (
-                  <EntityDiffSideBarItem
-                    key={diff.key}
-                    diff={diff}
-                    isSelected={isSelectedDiff(diff)}
-                    openDiff={openChange(diff)}
-                  />
-                ))}
+              {changes.toSorted(entityDiffSorter).map((diff) => (
+                <EntityDiffSideBarItem
+                  key={diff.key}
+                  diff={diff}
+                  isSelected={isSelectedDiff(diff)}
+                  openDiff={openChange(diff)}
+                />
+              ))}
 
               {Boolean(reviewStore.reviewReport?.fromToProjectConfig) && (
                 <button

package/src/stores/editor/editor-state/GraphGenerationState.ts

@@ -103,8 +103,7 @@ export class DEPREACTED_GlobalFileGenerationState {
 
   get fileGenerationConfigurationOptions(): GenerationTypeOption[] {
     return this.fileGenerationConfigurations
-      .slice()
-      .sort((a, b): number => a.label.localeCompare(b.label))
+      .toSorted((a, b): number => a.label.localeCompare(b.label))
       .map((config) => ({
         label: config.label,
         value: config.key,

package/src/stores/editor/editor-state/element-editor-state/connection/DatabaseBuilderState.ts

@@ -463,8 +463,9 @@ export class DatabaseSchemaExplorerState {
       const rootIds: string[] = [];
       const nodes = new Map<string, DatabaseSchemaExplorerTreeNodeData>();
       database.schemas
-        .slice()
-        .sort((schemaA, schemaB) => schemaA.name.localeCompare(schemaB.name))
+        .toSorted((schemaA, schemaB) =>
+          schemaA.name.localeCompare(schemaB.name),
+        )
         .forEach((schema) => {
           const schemaId = schema.name;
           rootIds.push(schemaId);
@@ -523,8 +524,7 @@ export class DatabaseSchemaExplorerState {
       const childrenIds = schemaNode.childrenIds ?? [];
       schema.tables = tables;
       tables
-        .slice()
-        .sort((tableA, tableB) => tableA.name.localeCompare(tableB.name))
+        .toSorted((tableA, tableB) => tableA.name.localeCompare(tableB.name))
         .forEach((table) => {
           table.schema = schema;
           const tableId = `${schema.name}.${table.name}`;
@@ -598,8 +598,7 @@ export class DatabaseSchemaExplorerState {
         const childrenIds: string[] = [];
         const tableId = tableNode.id;
         columns
-          .slice()
-          .sort((colA, colB) => colA.name.localeCompare(colB.name))
+          .toSorted((colA, colB) => colA.name.localeCompare(colB.name))
           .forEach((column) => {
             const columnId = `${tableId}.${column.name}`;
             const columnNode = new DatabaseSchemaExplorerTreeColumnNodeData(

package/src/stores/editor/editor-state/entity-diff-editor-state/EntityChangeConflictEditorState.ts

@@ -286,9 +286,9 @@ export class EntityChangeConflictEditorState extends EntityDiffViewerState {
   }
 
   private get sortedMergedConflicts(): MergeConflict[] {
-    return this.mergeConflicts
-      .slice()
-      .sort((a, b) => a.startHeader - b.startHeader);
+    return this.mergeConflicts.toSorted(
+      (a, b) => a.startHeader - b.startHeader,
+    );
   }
 
   get canUseTheirs(): boolean {