add support for SQL playground (#2270)

* minor cleanups around INTERNAL__rawDependencyEntities

* sql panel: add basic wiring

* BREAKING: remove execution input collectors and send full graph data

* function editor: support running query

* add icon to editor tab header

* database builder: restyle and cleanup code

* db builder: minor styling improvements

* sql playground: add basic support

* sql playground: improve with keyboard support

* TEMP: attempt to add auto-suggestion to SQL playground (but failed)

* bump dependencies

* fix tests

* bump dependencies

.changeset/fast-horses-provide.md

@@ -0,0 +1,18 @@
+---
+'@finos/legend-application-pure-ide-deployment': patch
+'@finos/legend-application-taxonomy-deployment': patch
+'@finos/legend-application-studio-deployment': patch
+'@finos/legend-application-query-deployment': patch
+'@finos/legend-application-studio-bootstrap': patch
+'@finos/legend-extension-dsl-data-space': patch
+'@finos/legend-extension-dsl-service': patch
+'@finos/legend-application-studio': patch
+'@finos/legend-application-query': patch
+'@finos/legend-dev-utils': patch
+'@finos/eslint-plugin-legend-studio': patch
+'@finos/legend-shared': patch
+'@finos/babel-preset-legend-studio': patch
+'@finos/legend-graph': patch
+'@finos/legend-lego': patch
+'@finos/legend-art': patch
+---

.changeset/loud-pets-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@finos/legend-graph': major
+---
+
+**BREAKING CHANGE:** Remove `PureProtocolProcessorPlugin.V1_getExtraExecutionInputCollectors()` and simplified the mechanism where we collect graph data for execution input: now we just send the full graph and do no filtering.

.changeset/metal-peaches-roll.md

@@ -0,0 +1,7 @@
+---
+'@finos/legend-application-studio-bootstrap': patch
+'@finos/legend-extension-dsl-data-space': patch
+'@finos/legend-application-studio': patch
+'@finos/legend-shared': patch
+'@finos/legend-graph': patch
+---

.changeset/orange-crabs-dream.md

@@ -0,0 +1,18 @@
+---
+'@finos/legend-application-pure-ide-deployment': patch
+'@finos/legend-application-taxonomy-deployment': patch
+'@finos/legend-application-studio-deployment': patch
+'@finos/legend-application-query-deployment': patch
+'@finos/legend-application-studio-bootstrap': patch
+'@finos/legend-extension-dsl-data-space': patch
+'@finos/legend-extension-dsl-service': patch
+'@finos/legend-application-studio': patch
+'@finos/legend-application-query': patch
+'@finos/legend-dev-utils': patch
+'@finos/eslint-plugin-legend-studio': patch
+'@finos/legend-shared': patch
+'@finos/babel-preset-legend-studio': patch
+'@finos/legend-graph': patch
+'@finos/legend-lego': patch
+'@finos/legend-art': patch
+---

fixtures/legend-mock-server/package.json

@@ -26,7 +26,7 @@
     "start": "node lib/index.js"
   },
   "dependencies": {
-    "@fastify/cors": "8.2.1",
+    "@fastify/cors": "8.3.0",
     "fastify": "4.17.0"
   },
   "devDependencies": {

package.json

@@ -89,13 +89,13 @@
   "devDependencies": {
     "@actions/core": "1.10.0",
     "@actions/github": "5.1.1",
-    "@babel/core": "7.21.8",
+    "@babel/core": "7.22.1",
     "@changesets/cli": "2.26.1",
     "@finos/babel-preset-legend-studio": "workspace:*",
     "@finos/eslint-plugin-legend-studio": "workspace:*",
     "@finos/legend-dev-utils": "workspace:*",
     "@finos/stylelint-config-legend-studio": "workspace:*",
-    "@types/node": "20.2.3",
+    "@types/node": "20.2.4",
     "chalk": "5.2.0",
     "cross-env": "7.0.3",
     "envinfo": "7.8.1",

packages/babel-preset/package.json

@@ -31,10 +31,10 @@
   },
   "dependencies": {
     "@babel/helper-plugin-utils": "7.21.5",
-    "@babel/preset-env": "7.21.5",
-    "@babel/preset-react": "7.18.6",
+    "@babel/preset-env": "7.22.1",
+    "@babel/preset-react": "7.22.0",
     "@babel/preset-typescript": "7.21.5",
-    "@babel/runtime": "7.21.5",
+    "@babel/runtime": "7.22.0",
     "react-refresh": "0.14.0"
   },
   "devDependencies": {

packages/eslint-plugin/package.json

@@ -30,7 +30,7 @@
     "publish:snapshot": "node ../../scripts/release/publishDevSnapshot.js"
   },
   "dependencies": {
-    "@babel/core": "7.21.8",
+    "@babel/core": "7.22.1",
     "@babel/eslint-parser": "7.21.8",
     "@typescript-eslint/eslint-plugin": "5.59.7",
     "@typescript-eslint/parser": "5.59.7",

packages/legend-application-pure-ide-deployment/package.json

@@ -51,7 +51,7 @@
     "npm-run-all": "4.1.5",
     "rimraf": "5.0.1",
     "typescript": "5.0.4",
-    "webpack": "5.84.0",
+    "webpack": "5.84.1",
     "webpack-bundle-analyzer": "4.8.0",
     "webpack-cli": "5.1.1",
     "webpack-dev-server": "4.15.0"

packages/legend-application-query-deployment/package.json

@@ -44,7 +44,7 @@
     "npm-run-all": "4.1.5",
     "rimraf": "5.0.1",
     "typescript": "5.0.4",
-    "webpack": "5.84.0",
+    "webpack": "5.84.1",
     "webpack-bundle-analyzer": "4.8.0",
     "webpack-cli": "5.1.1",
     "webpack-dev-server": "4.15.0"

packages/legend-application-query/src/components/QueryEditor.tsx

@@ -164,7 +164,7 @@ const CreateQueryDialog = observer(() => {
         <ModalFooter>
           <ModalFooterButton
             text="Create Query"
-            title={'Create new query'}
+            title="Create new query"
             disabled={Boolean(
               createQueryState.editorStore.isPerformingBlockingAction ||
                 isExistingQueryName,

packages/legend-application-studio-bootstrap/scripts/setup.js

@@ -83,6 +83,7 @@ export const setup = (outputDir) => {
         core: {
           TEMPORARY__enableMappingTestableEditor: false,
           TEMPORARY__enableFunctionActivatorSupport: false,
+          TEMPORARY__enableRawSQLExecutor: false,
         },
       },
       undefined,

packages/legend-application-studio-deployment/package.json

@@ -44,7 +44,7 @@
     "npm-run-all": "4.1.5",
     "rimraf": "5.0.1",
     "typescript": "5.0.4",
-    "webpack": "5.84.0",
+    "webpack": "5.84.1",
     "webpack-bundle-analyzer": "4.8.0",
     "webpack-cli": "5.1.1",
     "webpack-dev-server": "4.15.0"

packages/legend-application-studio/package.json

@@ -67,7 +67,7 @@
     "react-dnd": "16.0.1",
     "react-dom": "18.2.0",
     "serializr": "3.0.2",
-    "yaml": "2.3.0"
+    "yaml": "2.3.1"
   },
   "devDependencies": {
     "@finos/legend-dev-utils": "workspace:*",

packages/legend-application-studio/src/__lib__/LegendStudioApplicationNavigationContext.ts

@@ -57,4 +57,6 @@ export enum LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY {
   SERVICE_EDITOR_TEST = 'studio.editor.service-editor.test',
 
   DATA_ELEMENT_EDITOR = 'studio.editor.data-element-editor',
+
+  SQL_PLAYGROUND = 'studio.editor.panel-group.sql-playground',
 }

packages/legend-application-studio/style/components/editor/panel-group/_dev-tool.scss → packages/legend-application-studio/src/__lib__/STO_Relational_LegendStudioCommand.ts

@@ -14,16 +14,17 @@
  * limitations under the License.
  */
 
-@use 'mixins' as *;
+import type { CommandConfigData } from '@finos/legend-application';
 
-.console-panel {
-  height: 100%;
-  width: 100%;
-  padding: 1.5rem 1rem;
-
-  &__content {
-    @include flexHSpaceBetween;
-
-    padding: 0 1rem;
-  }
+export enum STO_RELATIONAL_LEGEND_STUDIO_COMMAND_KEY {
+  SQL_PLAYGROUND_EXECUTE = 'editor.panel-group.sql-playground.execute',
 }
+
+export const STO_RELATIONAL_LEGEND_STUDIO_COMMAND_CONFIG: CommandConfigData = {
+  [STO_RELATIONAL_LEGEND_STUDIO_COMMAND_KEY.SQL_PLAYGROUND_EXECUTE]: {
+    title: 'Execute SQL (SQL Playground)',
+    defaultKeyboardShortcut: 'Control+Enter',
+    additionalKeyboardShortcuts: ['Meta+Enter'],
+    when: 'When SQL playground is active',
+  },
+};

packages/legend-application-studio/src/application/LegendStudioApplicationConfig.ts

@@ -74,6 +74,12 @@ class LegendStudioApplicationCoreOptions {
    */
   TEMPORARY__enableFunctionActivatorSupport = false;
 
+  /**
+   * This flag can be removed when the support for raw SQL execution is official
+   * See https://github.com/finos/legend-engine/pull/1841
+   */
+  TEMPORARY__enableRawSQLExecutor = false;
+
   /**
    * Indicates whether we should render the new mapping testable editor or the deprecated legacy editor.
    * This flag will be removed once the editor for testable editor is agreed on.
@@ -98,6 +104,7 @@ class LegendStudioApplicationCoreOptions {
       projectCreationGroupIdSuggestion: optional(primitive()),
       TEMPORARY__preserveSectionIndex: optional(primitive()),
       TEMPORARY__enableFunctionActivatorSupport: optional(primitive()),
+      TEMPORARY__enableRawSQLExecutor: optional(primitive()),
       TEMPORARY__enableMappingTestableEditor: optional(primitive()),
       TEMPORARY__serviceRegistrationConfig: list(
         object(ServiceRegistrationEnvironmentConfig),

packages/legend-application-studio/src/components/ElementIconUtils.tsx

@@ -45,10 +45,19 @@ import {
 } from '@finos/legend-art';
 import { PACKAGEABLE_ELEMENT_TYPE } from '../stores/editor/utils/ModelClassifierUtils.js';
 
+/**
+ * NOTE: eventually we would like to remove this function and just a generic mechanism to
+ * get element icon given the metamodel, we can also simplify the plugins a lot.
+ * Technically, the only time we need to check icon for a type classifier is when we create
+ * a new element
+ */
 export const getElementTypeIcon = (
-  editorStore: EditorStore,
   type: string | undefined,
-  element?: PackageableElement | undefined,
+  editorStore: EditorStore,
+  options?: {
+    element?: PackageableElement | undefined;
+    returnEmptyForUnknown?: boolean | undefined;
+  },
 ): React.ReactNode => {
   switch (type) {
     case PACKAGEABLE_ELEMENT_TYPE.PRIMITIVE:
@@ -98,7 +107,7 @@ export const getElementTypeIcon = (
               ).getExtraElementIconGetters?.() ?? [],
           );
         for (const iconGetter of extraElementIconGetters) {
-          const elementIcon = iconGetter(type, element);
+          const elementIcon = iconGetter(type, options?.element);
           if (elementIcon) {
             return elementIcon;
           }
@@ -107,24 +116,30 @@ export const getElementTypeIcon = (
       // NOTE: this is temporary until we properly refactor this function to check element instead of
       // the type classifier value, but to be fair, this is not a bad way to do it since this acts
       // as a catch all block, we can check for `abstract` element here
-      if (element instanceof FunctionActivator) {
+      if (options?.element instanceof FunctionActivator) {
         return <LaunchIcon />;
       }
-      return <PURE_UnknownElementTypeIcon />;
+      return options?.returnEmptyForUnknown ? null : (
+        <PURE_UnknownElementTypeIcon />
+      );
     }
   }
 };
 
 export const getElementIcon = (
-  editorStore: EditorStore,
   element: PackageableElement | undefined,
+  editorStore: EditorStore,
+  options?: { returnEmptyForUnknown?: boolean | undefined },
 ): React.ReactNode =>
   getElementTypeIcon(
-    editorStore,
     element
       ? returnUndefOnError(() =>
           editorStore.graphState.getPackageableElementType(element),
         )
       : undefined,
-    element,
+    editorStore,
+    {
+      element,
+      returnEmptyForUnknown: options?.returnEmptyForUnknown,
+    },
   );

packages/legend-application-studio/src/components/editor/command-center/ProjectSearchCommand.tsx

@@ -117,15 +117,15 @@ export const ProjectSearchCommand = observer(() => {
                     className="project-search-command__option"
                     onClick={changeType(type)}
                   >
-                    {getElementTypeIcon(editorStore, type)}
+                    {getElementTypeIcon(type, editorStore)}
                   </MenuContentItem>
                 ))}
               </MenuContent>
             }
           >
             <div className="project-search-command__type__label">
               {elementType ? (
-                getElementTypeIcon(editorStore, elementType)
+                getElementTypeIcon(elementType, editorStore)
               ) : (
                 <MoreHorizontalIcon />
               )}

packages/legend-application-studio/src/components/editor/editor-group/EditorGroup.tsx

@@ -24,6 +24,7 @@ import {
   PlusIcon,
   ArrowsAltHIcon,
   useResizeDetector,
+  GenericTextFileIcon,
 } from '@finos/legend-art';
 import { MappingEditor } from './mapping-editor/MappingEditor.js';
 import { UMLEditor } from './uml-editor/UMLEditor.js';
@@ -75,6 +76,7 @@ import { ElementXTGenerationEditor } from './element-generation-editor/ElementXT
 import { TabManager, type TabState } from '@finos/legend-lego/application';
 import { INTERNAL__UnknownFunctionActivatorEdtiorState } from '../../../stores/editor/editor-state/element-editor-state/INTERNAL__UnknownFunctionActivatorEditorState.js';
 import { INTERNAL__UnknownFunctionActivatorEdtior } from './INTERNAL__UnknownFunctionActivatorEdtior.js';
+import { getElementIcon } from '../../ElementIconUtils.js';
 
 export const ViewerEditorGroupSplashScreen: React.FC = () => {
   const commandListWidth = 300;
@@ -322,6 +324,15 @@ export const EditorGroup = observer(() => {
     if (editorState instanceof EntityDiffViewState) {
       return (
         <div className="diff-tab">
+          <div className="diff-tab__element-icon">
+            {editorState.element ? (
+              getElementIcon(editorState.element, editorStore, {
+                returnEmptyForUnknown: true,
+              }) ?? <GenericTextFileIcon />
+            ) : (
+              <GenericTextFileIcon />
+            )}
+          </div>
           <div className="diff-tab__element-name">{editorState.label}</div>
           <div className="diff-tab__text">
             ({getPrettyLabelForRevision(editorState.fromRevision)}
@@ -337,14 +348,43 @@ export const EditorGroup = observer(() => {
     } else if (editorState instanceof EntityChangeConflictEditorState) {
       return (
         <div className="diff-tab">
+          <div className="diff-tab__element-icon">
+            <GenericTextFileIcon />
+          </div>
           <div className="diff-tab__element-name">{editorState.label}</div>
           <div className="diff-tab__text">
             {editorState.isReadOnly ? '(Merge Preview)' : '(Merged)'}
           </div>
         </div>
       );
     }
-    return editorState.label;
+
+    return (
+      <div className="editor-group__header__tab">
+        <div className="editor-group__header__tab__icon">
+          {editorState instanceof ElementEditorState ? (
+            getElementIcon(editorState.element, editorStore, {
+              returnEmptyForUnknown: true,
+            }) ?? <GenericTextFileIcon />
+          ) : (
+            <GenericTextFileIcon />
+          )}
+        </div>
+        <div className="editor-group__header__tab__label">
+          {editorState.label}
+        </div>
+        {editorState instanceof ElementEditorState &&
+          editorStore.tabManagerState.tabs.filter(
+            (tab) =>
+              tab instanceof ElementEditorState &&
+              tab.label === editorState.label,
+          ).length > 1 && (
+            <div className="editor-group__header__tab__path">
+              {editorState.element.path}
+            </div>
+          )}
+      </div>
+    );
   };
 
   if (!currentTabState) {