@finos/legend-application-studio 15.1.0 → 16.0.0

package/src/components/editor/Editor.tsx

@@ -16,8 +16,6 @@
 
 import { Fragment, useState, useEffect, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useResizeDetector } from 'react-resize-detector';
 import type { Location } from 'history';
 import {
@@ -56,6 +54,7 @@ import {
 import { WorkspaceType } from '@finos/legend-server-sdlc';
 import { WorkspaceSyncConflictResolver } from './side-bar/WorkspaceSyncConflictResolver.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../stores/LegendStudioApplicationNavigationContext.js';
+import { EmbeddedQueryBuilder } from '../EmbeddedQueryBuilder.js';
 
 export const Editor = withEditorStore(
   observer(() => {
@@ -232,86 +231,85 @@ export const Editor = withEditorStore(
     );
 
     return (
-      <DndProvider backend={HTML5Backend}>
-        <div className="app__page">
-          <div className="editor">
-            {promptComponent}
-            <GlobalHotKeys
-              keyMap={hotkeyMapping}
-              handlers={hotkeyHandlers}
-              allowChanges={true}
-            >
-              <div className="editor__body">
-                <ActivityBar />
-                <Backdrop className="backdrop" open={editorStore.backdrop} />
-                <div ref={ref} className="editor__content-container">
-                  <div className="editor__content">
-                    <ResizablePanelGroup orientation="vertical">
-                      <ResizablePanel
-                        {...getControlledResizablePanelProps(
-                          editorStore.sideBarDisplayState.size === 0,
-                          {
-                            onStopResize: resizeSideBar,
-                            size: editorStore.sideBarDisplayState.size,
-                          },
-                        )}
-                        direction={1}
-                      >
-                        <SideBar />
-                      </ResizablePanel>
-                      <ResizablePanelSplitter />
-                      <ResizablePanel minSize={300}>
-                        <ResizablePanelGroup orientation="horizontal">
-                          <ResizablePanel
-                            {...getControlledResizablePanelProps(
-                              editorStore.auxPanelDisplayState.isMaximized,
-                            )}
-                          >
-                            {(isResolvingConflicts || editable) &&
-                              editorStore.isInFormMode && <EditPanel />}
-                            {editable && editorStore.isInGrammarTextMode && (
-                              <GrammarTextEditor />
-                            )}
-                            {!editable && <EditPanelSplashScreen />}
-                          </ResizablePanel>
-                          <ResizablePanelSplitter>
-                            <ResizablePanelSplitterLine
-                              color={
-                                editorStore.auxPanelDisplayState.isMaximized
-                                  ? 'transparent'
-                                  : 'var(--color-dark-grey-250)'
-                              }
-                            />
-                          </ResizablePanelSplitter>
-                          <ResizablePanel
-                            {...getControlledResizablePanelProps(
-                              editorStore.auxPanelDisplayState.size === 0,
-                              {
-                                onStopResize: resizeAuxPanel,
-                                size: editorStore.auxPanelDisplayState.size,
-                              },
-                            )}
-                            direction={-1}
-                          >
-                            <AuxiliaryPanel />
-                          </ResizablePanel>
-                        </ResizablePanelGroup>
-                      </ResizablePanel>
-                    </ResizablePanelGroup>
-                  </div>
+      <div className="app__page">
+        <div className="editor">
+          {promptComponent}
+          <GlobalHotKeys
+            keyMap={hotkeyMapping}
+            handlers={hotkeyHandlers}
+            allowChanges={true}
+          >
+            <div className="editor__body">
+              <ActivityBar />
+              <Backdrop className="backdrop" open={editorStore.backdrop} />
+              <div ref={ref} className="editor__content-container">
+                <div className="editor__content">
+                  <ResizablePanelGroup orientation="vertical">
+                    <ResizablePanel
+                      {...getControlledResizablePanelProps(
+                        editorStore.sideBarDisplayState.size === 0,
+                        {
+                          onStopResize: resizeSideBar,
+                          size: editorStore.sideBarDisplayState.size,
+                        },
+                      )}
+                      direction={1}
+                    >
+                      <SideBar />
+                    </ResizablePanel>
+                    <ResizablePanelSplitter />
+                    <ResizablePanel minSize={300}>
+                      <ResizablePanelGroup orientation="horizontal">
+                        <ResizablePanel
+                          {...getControlledResizablePanelProps(
+                            editorStore.auxPanelDisplayState.isMaximized,
+                          )}
+                        >
+                          {(isResolvingConflicts || editable) &&
+                            editorStore.isInFormMode && <EditPanel />}
+                          {editable && editorStore.isInGrammarTextMode && (
+                            <GrammarTextEditor />
+                          )}
+                          {!editable && <EditPanelSplashScreen />}
+                        </ResizablePanel>
+                        <ResizablePanelSplitter>
+                          <ResizablePanelSplitterLine
+                            color={
+                              editorStore.auxPanelDisplayState.isMaximized
+                                ? 'transparent'
+                                : 'var(--color-dark-grey-250)'
+                            }
+                          />
+                        </ResizablePanelSplitter>
+                        <ResizablePanel
+                          {...getControlledResizablePanelProps(
+                            editorStore.auxPanelDisplayState.size === 0,
+                            {
+                              onStopResize: resizeAuxPanel,
+                              size: editorStore.auxPanelDisplayState.size,
+                            },
+                          )}
+                          direction={-1}
+                        >
+                          <AuxiliaryPanel />
+                        </ResizablePanel>
+                      </ResizablePanelGroup>
+                    </ResizablePanel>
+                  </ResizablePanelGroup>
                 </div>
               </div>
-              {extraEditorExtensionComponents}
-              <StatusBar actionsDisabled={!editable} />
-              {editable && <ProjectSearchCommand />}
-              {editorStore.localChangesState.workspaceSyncState
-                .workspaceSyncConflictResolutionState.showModal && (
-                <WorkspaceSyncConflictResolver />
-              )}
-            </GlobalHotKeys>
-          </div>
+            </div>
+            <StatusBar actionsDisabled={!editable} />
+            {editable && <ProjectSearchCommand />}
+            {editorStore.localChangesState.workspaceSyncState
+              .workspaceSyncConflictResolutionState.showModal && (
+              <WorkspaceSyncConflictResolver />
+            )}
+            <EmbeddedQueryBuilder />
+            {extraEditorExtensionComponents}
+          </GlobalHotKeys>
         </div>
-      </DndProvider>
+      </div>
     );
   }),
 );

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

@@ -79,6 +79,7 @@ import {
   type PackageableElementOption,
   useApplicationNavigationContext,
   useApplicationStore,
+  buildElementOption,
 } from '@finos/legend-application';
 import { StudioLambdaEditor } from '../../shared/StudioLambdaEditor.js';
 import { getElementIcon } from '../../shared/ElementIconUtils.js';
@@ -143,7 +144,10 @@ const ParameterBasicEditor = observer(
       rawVariableExpression_setName(parameter, event.target.value);
     // Type
     const [isEditingType, setIsEditingType] = useState(false);
-    const typeOptions = editorStore.classPropertyGenericTypeOptions;
+    const typeOptions =
+      editorStore.graphManagerState.usableClassPropertyTypes.map(
+        buildElementOption,
+      );
     const paramType = parameter.type.value;
     const typeName = getFunctionParameterType(paramType);
     const filterOption = createFilter({
@@ -392,7 +396,10 @@ const ReturnTypeEditor = observer(
     const editorStore = useEditorStore();
     // Type
     const [isEditingType, setIsEditingType] = useState(false);
-    const typeOptions = editorStore.classPropertyGenericTypeOptions;
+    const typeOptions =
+      editorStore.graphManagerState.usableClassPropertyTypes.map(
+        buildElementOption,
+      );
     const typeName = getFunctionParameterType(returnType.value);
     const filterOption = createFilter({
       ignoreCase: true,

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

@@ -98,9 +98,12 @@ import {
   MAPPING_WITH_M2M_CLASS_MAPPING_SNIPPET,
   MAPPING_WITH_ENUMERATION_MAPPING_SNIPPET,
   MAPPING_WITH_RELATIONAL_CLASS_MAPPING_SNIPPET,
+  POST_PROCESSOR_RELATIONAL_DATABASE_CONNECTION_SNIPPET,
+  createConnectionSnippetWithPostProcessorSuggestionSnippet,
 } from '../../../stores/LegendStudioCodeSnippets.js';
 import type { DSLData_LegendStudioApplicationPlugin_Extension } from '../../../stores/DSLData_LegendStudioApplicationPlugin_Extension.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../stores/LegendStudioApplicationNavigationContext.js';
+import type { StoreRelational_LegendStudioApplicationPlugin_Extension } from '../../../stores/StoreRelational_LegendStudioApplicationPlugin_Extension.js';
 
 const getSectionParserNameFromLineText = (
   lineText: string,
@@ -523,6 +526,14 @@ const getParserElementSnippetSuggestions = (
       ];
     }
     case PURE_PARSER.CONNECTION: {
+      const embeddedPostProcessorSnippetSuggestions = editorStore.pluginManager
+        .getApplicationPlugins()
+        .flatMap(
+          (plugin) =>
+            (
+              plugin as StoreRelational_LegendStudioApplicationPlugin_Extension
+            ).getExtraPostProcessorSnippetSuggestions?.() ?? [],
+        );
       return [
         {
           text: PURE_CONNECTION_NAME.JSON_MODEL_CONNECTION,
@@ -544,7 +555,18 @@ const getParserElementSnippetSuggestions = (
           description: 'relational database connection',
           insertText: RELATIONAL_DATABASE_CONNECTION_SNIPPET,
         },
-        // TODO: extension mehcanism for connection and relational database connection
+        {
+          text: PURE_CONNECTION_NAME.RELATIONAL_DATABASE_CONNECTION,
+          description: 'relational database connection with post-processor',
+          insertText: POST_PROCESSOR_RELATIONAL_DATABASE_CONNECTION_SNIPPET,
+        },
+        ...embeddedPostProcessorSnippetSuggestions.map((suggestion) => ({
+          text: PURE_CONNECTION_NAME.RELATIONAL_DATABASE_CONNECTION,
+          description: suggestion.description,
+          insertText: createConnectionSnippetWithPostProcessorSuggestionSnippet(
+            suggestion.text,
+          ),
+        })),
       ];
     }
     case PURE_PARSER.RUNTIME: {
@@ -822,7 +844,7 @@ export const GrammarTextEditor = observer(() => {
       (plugin) =>
         (
           plugin as DSL_LegendStudioApplicationPlugin_Extension
-        ).getExtraPureGrammarTextEditorDnDTypes?.() ?? [],
+        ).getExtraPureGrammarTextEditorDragElementTypes?.() ?? [],
     );
   const handleDrop = useCallback(
     (item: ElementDragSource): void => {

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

@@ -73,7 +73,7 @@ export const UnsupportedElementEditor = observer(() => {
         </div>
         <div className="panel__content unsupported-element-editor__content">
           <UnsupportedEditorPanel
-            text={`Can't display this element in form-mode`}
+            text="Can't display this element in form-mode"
             isReadOnly={isReadOnly}
           />
         </div>

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

@@ -33,7 +33,10 @@ import {
   modelConnection_setClass,
   modelConnection_setUrl,
 } from '../../../../stores/graphModifier/DSLMapping_GraphModifierHelper.js';
-import { useApplicationNavigationContext } from '@finos/legend-application';
+import {
+  buildElementOption,
+  useApplicationNavigationContext,
+} from '@finos/legend-application';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
 
 const ModelConnectionEditor = observer(
@@ -46,7 +49,8 @@ const ModelConnectionEditor = observer(
     const connection = connectionValueState.connection;
     const editorStore = useEditorStore();
     // classOptions
-    const classOptions = editorStore.classOptions;
+    const classOptions =
+      editorStore.graphManagerState.usableClasses.map(buildElementOption);
     const sourceClass = connection.class.value;
     const onSourceClassChange = (val: { label: string; value: Class }): void =>
       modelConnection_setClass(connection, val.value);

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

@@ -51,7 +51,7 @@ import {
 import {
   generateColumnTypeLabel,
   renderColumnTypeIcon,
-} from '../../../../stores/editor-state/element-editor-state/mapping/relational/DatabaseEditorHelper.js';
+} from './DatabaseEditorHelper.js';
 import { flowResult } from 'mobx';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';