@finos/legend-application-studio 28.19.74 → 28.19.75

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

@@ -25,40 +25,21 @@ import {
   PURE_ConnectionIcon,
   BlankPanelPlaceholder,
   PanelDropZone,
-  ResizablePanelSplitterLine,
-  PlayIcon,
   PanelLoadingIndicator,
-  BlankPanelContent,
   PURE_DatabaseIcon,
   SyncIcon,
-  clsx,
-  CheckSquareIcon,
-  SquareIcon,
 } from '@finos/legend-art';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import {
   useApplicationStore,
-  useCommands,
   useConditionedApplicationNavigationContext,
 } from '@finos/legend-application';
 import { flowResult } from 'mobx';
-import {
-  CODE_EDITOR_LANGUAGE,
-  CODE_EDITOR_THEME,
-  getBaseCodeEditorOptions,
-} from '@finos/legend-code-editor';
-import {
-  editor as monacoEditorAPI,
-  languages as monacoLanguagesAPI,
-  type IDisposable,
-  type IPosition,
-} from 'monaco-editor';
 import {
   PackageableConnection,
   RelationalDatabaseConnection,
 } from '@finos/legend-graph';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../__lib__/LegendStudioApplicationNavigationContext.js';
-import { type SQLPlaygroundPanelState } from '../../../stores/editor/panel-group/SQLPlaygroundPanelState.js';
 import { useEditorStore } from '../EditorStoreProvider.js';
 import { PANEL_MODE } from '../../../stores/editor/EditorConfig.js';
 import { useDrag, useDrop } from 'react-dnd';
@@ -66,24 +47,6 @@ import {
   CORE_DND_TYPE,
   type ElementDragSource,
 } from '../../../stores/editor/utils/DnDUtils.js';
-import {
-  DataGrid,
-  type DataGridCellRendererParams,
-  type DataGridColumnDefinition,
-  type DataGridDefaultMenuItem,
-  type DataGridGetContextMenuItemsParams,
-  type DataGridMenuItemDef,
-} from '@finos/legend-lego/data-grid';
-import {
-  at,
-  isNonNullable,
-  isNumber,
-  isString,
-  isValidURL,
-  parseCSVString,
-  prettyDuration,
-  uniqBy,
-} from '@finos/legend-shared';
 import {
   DatabaseSchemaExplorer,
   DatabaseSchemaExplorerTreeNodeContainer,
@@ -94,6 +57,7 @@ import {
   buildRelationalDatabaseConnectionOption,
   type RelationalDatabaseConnectionOption,
 } from '../editor-group/connection-editor/RelationalDatabaseConnectionEditor.js';
+import { SQLPlaygroundEditorResultPanel } from '@finos/legend-lego/sql-playground';
 
 const DATABASE_NODE_DND_TYPE = 'DATABASE_NODE_DND_TYPE';
 type DatabaseNodeDragType = { text: string };
@@ -121,449 +85,11 @@ const SQLPlaygroundDatabaseSchemaExplorerTreeNodeContainer = observer(
   },
 );
 
-// List of most popular SQL keywords
-// See https://www.w3schools.com/sql/sql_ref_keywords.asp
-const SQL_KEYWORDS = [
-  'AND',
-  'AS',
-  'ASC',
-  'BETWEEN',
-  'DESC',
-  'DISTINCT',
-  'EXEC',
-  'EXISTS',
-  'FROM',
-  'FULL OUTER JOIN',
-  'GROUP BY',
-  'HAVING',
-  'IN',
-  'INNER JOIN',
-  'IS NULL',
-  'IS NOT NULL',
-  'JOIN',
-  'LEFT JOIN',
-  'LIKE',
-  'LIMIT',
-  'NOT',
-  'NOT NULL',
-  'OR',
-  'ORDER BY',
-  'OUTER JOIN',
-  'RIGHT JOIN',
-  'SELECT',
-  'SELECT DISTINCT',
-  'SELECT INTO',
-  'SELECT TOP',
-  'TOP',
-  'UNION',
-  'UNION ALL',
-  'UNIQUE',
-  'WHERE',
-];
-
-const getKeywordSuggestions = async (
-  position: IPosition,
-  model: monacoEditorAPI.ITextModel,
-): Promise<monacoLanguagesAPI.CompletionItem[]> =>
-  SQL_KEYWORDS.map(
-    (keyword) =>
-      ({
-        label: keyword,
-        kind: monacoLanguagesAPI.CompletionItemKind.Keyword,
-        insertTextRules:
-          monacoLanguagesAPI.CompletionItemInsertTextRule.InsertAsSnippet,
-        insertText: `${keyword} `,
-      }) as monacoLanguagesAPI.CompletionItem,
-  );
-
-const getDatabaseSchemaEntities = async (
-  position: IPosition,
-  model: monacoEditorAPI.ITextModel,
-  playgroundState: SQLPlaygroundPanelState,
-): Promise<monacoLanguagesAPI.CompletionItem[]> => {
-  if (playgroundState.schemaExplorerState?.treeData) {
-    return uniqBy(
-      Array.from(
-        playgroundState.schemaExplorerState.treeData.nodes.values(),
-      ).map(
-        (value) =>
-          ({
-            label: value.label,
-            kind: monacoLanguagesAPI.CompletionItemKind.Field,
-            insertTextRules:
-              monacoLanguagesAPI.CompletionItemInsertTextRule.InsertAsSnippet,
-            insertText: `${value.label} `,
-          }) as monacoLanguagesAPI.CompletionItem,
-      ),
-      (val) => val.label,
-    );
-  }
-  return [];
-};
-
-const PlaygroundSQLCodeEditor = observer(() => {
-  const editorStore = useEditorStore();
-  const playgroundState = editorStore.sqlPlaygroundState;
-  const applicationStore = useApplicationStore();
-  const codeEditorRef = useRef<HTMLDivElement>(null);
-  const [editor, setEditor] = useState<
-    monacoEditorAPI.IStandaloneCodeEditor | undefined
-  >();
-  const sqlIdentifierSuggestionProviderDisposer = useRef<
-    IDisposable | undefined
-  >(undefined);
-
-  useEffect(() => {
-    if (!editor && codeEditorRef.current) {
-      const element = codeEditorRef.current;
-      const newEditor = monacoEditorAPI.create(element, {
-        ...getBaseCodeEditorOptions(),
-        theme: CODE_EDITOR_THEME.DEFAULT_DARK,
-        language: CODE_EDITOR_LANGUAGE.SQL,
-        padding: {
-          top: 10,
-        },
-      });
-
-      newEditor.onDidChangeModelContent(() => {
-        const currentVal = newEditor.getValue();
-        playgroundState.setSQLText(currentVal);
-      });
-
-      // Restore the editor model and view state
-      newEditor.setModel(playgroundState.sqlEditorTextModel);
-      if (playgroundState.sqlEditorViewState) {
-        newEditor.restoreViewState(playgroundState.sqlEditorViewState);
-      }
-      newEditor.focus(); // focus on the editor initially
-      playgroundState.setSQLEditor(newEditor);
-      setEditor(newEditor);
-    }
-  }, [playgroundState, applicationStore, editor]);
-
-  useCommands(playgroundState);
-
-  if (editor) {
-    sqlIdentifierSuggestionProviderDisposer.current?.dispose();
-    sqlIdentifierSuggestionProviderDisposer.current =
-      monacoLanguagesAPI.registerCompletionItemProvider(
-        CODE_EDITOR_LANGUAGE.SQL,
-        {
-          triggerCharacters: [],
-          provideCompletionItems: async (model, position, context) => {
-            let suggestions: monacoLanguagesAPI.CompletionItem[] = [];
-            if (
-              context.triggerKind ===
-              monacoLanguagesAPI.CompletionTriggerKind.Invoke
-            ) {
-              // keywords
-              suggestions = suggestions.concat(
-                await getKeywordSuggestions(position, model),
-              );
-
-              // database schema entities
-              suggestions = suggestions.concat(
-                await getDatabaseSchemaEntities(
-                  position,
-                  model,
-                  playgroundState,
-                ),
-              );
-            }
-
-            return { suggestions };
-          },
-        },
-      );
-  }
-
-  // clean up
-  useEffect(
-    () => (): void => {
-      if (editor) {
-        // persist editor view state (cursor, scroll, etc.) to restore on re-open
-        playgroundState.setSQLEditorViewState(
-          editor.saveViewState() ?? undefined,
-        );
-        editor.dispose();
-
-        // Dispose the providers properly to avoid ending up with duplicated suggestions
-        sqlIdentifierSuggestionProviderDisposer.current?.dispose();
-      }
-    },
-    [playgroundState, editor],
-  );
-
-  const handleDatabaseNodeDrop = useCallback(
-    (item: DatabaseNodeDragType): void => {
-      if (isString(item.text)) {
-        if (playgroundState.sqlEditor) {
-          const currentValue = playgroundState.sqlEditorTextModel.getValue();
-          const lines = currentValue.split('\n');
-          const position = playgroundState.sqlEditor.getPosition() ?? {
-            lineNumber: lines.length,
-            column: lines.at(-1)?.length ?? 0,
-          };
-          playgroundState.sqlEditor.executeEdits('', [
-            {
-              range: {
-                startLineNumber: position.lineNumber,
-                startColumn: position.column,
-                endLineNumber: position.lineNumber,
-                endColumn: position.column,
-              },
-              text: item.text,
-              forceMoveMarkers: true,
-            },
-          ]);
-          playgroundState.setSQLText(
-            playgroundState.sqlEditorTextModel.getValue(),
-          );
-        }
-      }
-    },
-    [playgroundState],
-  );
-  const [{ isDatabaseNodeDragOver }, dropConnector] = useDrop<
-    DatabaseNodeDragType,
-    void,
-    { isDatabaseNodeDragOver: boolean }
-  >(
-    () => ({
-      accept: DATABASE_NODE_DND_TYPE,
-      drop: (item): void => handleDatabaseNodeDrop(item),
-      collect: (monitor) => ({
-        isDatabaseNodeDragOver: monitor.isOver({ shallow: true }),
-      }),
-    }),
-    [handleDatabaseNodeDrop],
-  );
-
-  return (
-    <div className="sql-playground__code-editor">
-      <PanelDropZone
-        className="sql-playground__code-editor__content"
-        isDragOver={isDatabaseNodeDragOver}
-        dropTargetConnector={dropConnector}
-      >
-        <div className="code-editor__container">
-          <div className="code-editor__body" ref={codeEditorRef} />
-        </div>
-      </PanelDropZone>
-    </div>
-  );
-});
-
-const parseExecutionResultData = (
-  data: string,
-): { rowData: Record<string, string>[]; columns: string[] } | undefined => {
-  const lines = data.split('\n').filter((line) => line.trim().length);
-  if (lines.length) {
-    const columns = parseCSVString(at(lines, 0)) ?? [];
-    const rowData = lines
-      .slice(1)
-      .map((item) => {
-        const rowItems = parseCSVString(item);
-        if (!rowItems) {
-          return undefined;
-        }
-        const row: Record<string, string> = {};
-        columns.forEach((column, idx) => {
-          row[column] = rowItems[idx] ?? '';
-        });
-        return row;
-      })
-      .filter(isNonNullable);
-    return { rowData, columns };
-  }
-  return undefined;
-};
-
-const TDSResultCellRenderer = observer((params: DataGridCellRendererParams) => {
-  const cellValue = params.value as string;
-  const formattedCellValue = (): string => {
-    if (isNumber(cellValue)) {
-      return Intl.NumberFormat('en-US', {
-        maximumFractionDigits: 4,
-      }).format(Number(cellValue));
-    }
-    return cellValue;
-  };
-  const cellValueUrlLink =
-    isString(cellValue) && isValidURL(cellValue) ? cellValue : undefined;
-
-  return (
-    <div className={clsx('query-builder__result__values__table__cell')}>
-      {cellValueUrlLink ? (
-        <a href={cellValueUrlLink} target="_blank" rel="noreferrer">
-          {cellValueUrlLink}
-        </a>
-      ) : (
-        <span>{formattedCellValue()}</span>
-      )}
-    </div>
-  );
-});
-
-const PlayGroundSQLExecutionResultGrid = observer(
-  (props: {
-    result: string;
-    useAdvancedGrid?: boolean;
-    useLocalMode?: boolean;
-  }) => {
-    const { result, useAdvancedGrid, useLocalMode } = props;
-    const data = parseExecutionResultData(result);
-    const applicationStore = useApplicationStore();
-    const darkMode =
-      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
-
-    if (!data) {
-      return (
-        <BlankPanelContent>{`Can't parse result, displaying raw form:\n${result}`}</BlankPanelContent>
-      );
-    }
-    if (useAdvancedGrid) {
-      if (useLocalMode) {
-        const localcolDefs = data.columns.map(
-          (colName) =>
-            ({
-              minWidth: 50,
-              sortable: true,
-              resizable: true,
-              field: colName,
-              flex: 1,
-              enablePivot: true,
-              enableRowGroup: true,
-              enableValue: true,
-              allowedAggFuncs: ['count'],
-            }) as DataGridColumnDefinition,
-        );
-
-        return (
-          <div
-            className={clsx('sql-playground__result__grid', {
-              'ag-theme-balham': !darkMode,
-              'ag-theme-balham-dark': darkMode,
-            })}
-          >
-            <DataGrid
-              rowData={data.rowData}
-              gridOptions={{
-                suppressScrollOnNewData: true,
-                rowSelection: {
-                  mode: 'multiRow',
-                  checkboxes: false,
-                  headerCheckbox: false,
-                },
-                pivotPanelShow: 'always',
-                rowGroupPanelShow: 'always',
-                cellSelection: true,
-              }}
-              // NOTE: when column definition changed, we need to force refresh the cell to make sure the cell renderer is updated
-              // See https://stackoverflow.com/questions/56341073/how-to-refresh-an-ag-grid-when-a-change-occurs-inside-a-custom-cell-renderer-com
-              onRowDataUpdated={(params) => {
-                params.api.refreshCells({ force: true });
-              }}
-              suppressFieldDotNotation={true}
-              suppressContextMenu={false}
-              columnDefs={localcolDefs}
-              sideBar={['columns', 'filters']}
-            />
-          </div>
-        );
-      }
-      const colDefs = data.columns.map(
-        (colName) =>
-          ({
-            minWidth: 50,
-            sortable: true,
-            resizable: true,
-            field: colName,
-            flex: 1,
-            cellRenderer: TDSResultCellRenderer,
-            filter: true,
-          }) as DataGridColumnDefinition,
-      );
-      const getContextMenuItems = useCallback(
-        (
-          params: DataGridGetContextMenuItemsParams<{
-            [key: string]: string;
-          }>,
-        ): (DataGridDefaultMenuItem | DataGridMenuItemDef)[] => [
-          'copy',
-          'copyWithHeaders',
-          {
-            name: 'Copy Row Value',
-            action: () => {
-              params.api.copySelectedRowsToClipboard();
-            },
-          },
-        ],
-        [],
-      );
-      return (
-        <div
-          className={clsx('sql-playground__result__grid', {
-            'ag-theme-balham': !darkMode,
-            'ag-theme-balham-dark': darkMode,
-          })}
-        >
-          <DataGrid
-            rowData={data.rowData}
-            overlayNoRowsTemplate={`<div class="sql-playground__result__grid--empty">No results</div>`}
-            gridOptions={{
-              suppressScrollOnNewData: true,
-              rowSelection: {
-                mode: 'multiRow',
-                checkboxes: false,
-                headerCheckbox: false,
-              },
-              cellSelection: true,
-            }}
-            onRowDataUpdated={(params) => {
-              params.api.refreshCells({ force: true });
-            }}
-            suppressFieldDotNotation={true}
-            suppressClipboardPaste={false}
-            suppressContextMenu={false}
-            columnDefs={colDefs}
-            getContextMenuItems={(params) => getContextMenuItems(params)}
-          />
-        </div>
-      );
-    }
-
-    return (
-      <div
-        className={clsx('sql-playground__result__grid', {
-          'ag-theme-balham': !darkMode,
-          'ag-theme-balham-dark': darkMode,
-        })}
-      >
-        <DataGrid
-          rowData={data.rowData}
-          overlayNoRowsTemplate={`<div class="sql-playground__result__grid--empty">No results</div>`}
-          alwaysShowVerticalScroll={true}
-          suppressFieldDotNotation={true}
-          columnDefs={data.columns.map((column) => ({
-            minWidth: 50,
-            sortable: true,
-            resizable: true,
-            headerName: column,
-            field: column,
-            flex: 1,
-          }))}
-        />
-      </div>
-    );
-  },
-);
-
 type SQLPlaygroundPanelDropTarget = ElementDragSource;
 
 export const SQLPlaygroundPanel = observer(() => {
   const editorStore = useEditorStore();
-  const playgroundState = editorStore.sqlPlaygroundState;
+  const playgroundState = editorStore.studioSqlPlaygroundState;
   const applicationStore = useApplicationStore();
 
   // connection
@@ -640,26 +166,6 @@ export const SQLPlaygroundPanel = observer(() => {
     }
   };
 
-  const executeRawSQL = (): void => {
-    flowResult(playgroundState.executeRawSQL()).catch(
-      applicationStore.alertUnhandledError,
-    );
-  };
-  const advancedMode = Boolean(
-    editorStore.applicationStore.config.options.queryBuilderConfig
-      ?.TEMPORARY__enableGridEnterpriseMode,
-  );
-  const resultDescription = playgroundState.sqlExecutionResult
-    ? `query ran in ${prettyDuration(
-        playgroundState.sqlExecutionResult.sqlDuration,
-        {
-          ms: true,
-        },
-      )}`
-    : undefined;
-  const toggleocalMode = (): void => {
-    playgroundState.toggleIsLocalModeEnabled();
-  };
   useEffect(() => {
     if (playgroundState.schemaExplorerState) {
       flowResult(
@@ -668,6 +174,10 @@ export const SQLPlaygroundPanel = observer(() => {
     }
   }, [playgroundState, applicationStore, playgroundState.schemaExplorerState]);
 
+  useEffect(() => {
+    playgroundState.fetchSchemaMetaData();
+  }, [playgroundState]);
+
   useConditionedApplicationNavigationContext(
     LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SQL_PLAYGROUND,
     editorStore.activePanelMode === PANEL_MODE.SQL_PLAYGROUND,
@@ -749,85 +259,11 @@ export const SQLPlaygroundPanel = observer(() => {
             <ResizablePanelSplitter />
             <ResizablePanel>
               <div className="panel sql-playground__sql-editor">
-                <ResizablePanelGroup orientation="horizontal">
-                  <ResizablePanel>
-                    <PlaygroundSQLCodeEditor />
-                  </ResizablePanel>
-                  <ResizablePanelSplitter>
-                    <ResizablePanelSplitterLine color="var(--color-dark-grey-250)" />
-                  </ResizablePanelSplitter>
-                  <ResizablePanel size={300}>
-                    <div className="panel__header">
-                      <div className="panel__header__title">
-                        <div className="panel__header__title__label">
-                          result
-                        </div>
-
-                        {playgroundState.executeRawSQLState.isInProgress && (
-                          <div className="panel__header__title__label__status">
-                            Running SQL...
-                          </div>
-                        )}
-
-                        <div className="query-builder__result__analytics">
-                          {resultDescription ?? ''}
-                        </div>
-                      </div>
-                      <div className="panel__header__actions query-builder__result__header__actions">
-                        {advancedMode && (
-                          <div className="query-builder__result__advanced__mode">
-                            <div className="query-builder__result__advanced__mode__label">
-                              Local Mode
-                            </div>
-                            <button
-                              className={clsx(
-                                'query-builder__result__advanced__mode__toggler__btn',
-                                {
-                                  'query-builder__result__advanced__mode__toggler__btn--toggled':
-                                    playgroundState.isLocalModeEnabled,
-                                },
-                              )}
-                              onClick={toggleocalMode}
-                              tabIndex={-1}
-                            >
-                              {playgroundState.isLocalModeEnabled ? (
-                                <CheckSquareIcon />
-                              ) : (
-                                <SquareIcon />
-                              )}
-                            </button>
-                          </div>
-                        )}
-
-                        <div className="query-builder__result__execute-btn btn__dropdown-combo btn__dropdown-combo--primary">
-                          <button
-                            className="btn__dropdown-combo__label"
-                            onClick={executeRawSQL}
-                            disabled={
-                              playgroundState.executeRawSQLState.isInProgress
-                            }
-                            tabIndex={-1}
-                          >
-                            <PlayIcon className="btn__dropdown-combo__label__icon" />
-                            <div className="btn__dropdown-combo__label__title">
-                              Run Query
-                            </div>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                    {playgroundState.sqlExecutionResult !== undefined && (
-                      <PlayGroundSQLExecutionResultGrid
-                        result={playgroundState.sqlExecutionResult.value}
-                        useAdvancedGrid={advancedMode}
-                        useLocalMode={playgroundState.isLocalModeEnabled}
-                      />
-                    )}
-                    {playgroundState.sqlExecutionResult === undefined && (
-                      <div />
-                    )}
-                  </ResizablePanel>
-                </ResizablePanelGroup>
+                <SQLPlaygroundEditorResultPanel
+                  playgroundState={playgroundState}
+                  advancedMode={true}
+                  enableDarkMode={true}
+                />
               </div>
             </ResizablePanel>
           </ResizablePanelGroup>

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

@@ -618,7 +618,7 @@ const ExplorerContextMenu = observer(
       if (isRelationalDatabaseConnection(node?.packageableElement)) {
         editorStore.panelGroupDisplayState.open();
         editorStore.setActivePanelMode(PANEL_MODE.SQL_PLAYGROUND);
-        editorStore.sqlPlaygroundState.setConnection(
+        editorStore.studioSqlPlaygroundState.setConnection(
           guaranteeType(node?.packageableElement, PackageableConnection),
         );
       }

package/src/stores/editor/EditorStore.ts

@@ -109,7 +109,7 @@ import { GraphEditFormModeState } from './GraphEditFormModeState.js';
 import type { GraphEditorMode } from './GraphEditorMode.js';
 import { GraphEditGrammarModeState } from './GraphEditGrammarModeState.js';
 import { GlobalBulkServiceRegistrationState } from './sidebar-state/BulkServiceRegistrationState.js';
-import { SQLPlaygroundPanelState } from './panel-group/SQLPlaygroundPanelState.js';
+import { StudioSQLPlaygroundPanelState } from './panel-group/StudioSQLPlaygroundPanelState.js';
 import type { QuickInputState } from './QuickInputState.js';
 import { GlobalEndToEndWorkflowState } from './sidebar-state/end-to-end-workflow/GlobalEndToEndFlowState.js';
 import {
@@ -183,7 +183,7 @@ export class EditorStore implements CommandRegistrar {
   globalEndToEndWorkflowState: GlobalEndToEndWorkflowState;
   devToolState: DevToolPanelState;
   devMetadataState: DevMetadataState;
-  sqlPlaygroundState: SQLPlaygroundPanelState;
+  studioSqlPlaygroundState: StudioSQLPlaygroundPanelState;
 
   modelImporterState: ModelImporterState;
   projectConfigurationEditorState: ProjectConfigurationEditorState;
@@ -280,7 +280,7 @@ export class EditorStore implements CommandRegistrar {
     this.changeDetectionState = new ChangeDetectionState(this, this.graphState);
     this.devToolState = new DevToolPanelState(this);
     this.devMetadataState = new DevMetadataState(this);
-    this.sqlPlaygroundState = new SQLPlaygroundPanelState(this);
+    this.studioSqlPlaygroundState = new StudioSQLPlaygroundPanelState(this);
     this.embeddedQueryBuilderState = new EmbeddedQueryBuilderState(this);
     // side bar panels
     this.explorerTreeState = new ExplorerTreeState(this);

package/src/stores/editor/GraphEditFormModeState.ts

@@ -556,7 +556,7 @@ export class GraphEditFormModeState extends GraphEditorMode {
   }
 
   *onLeave(): GeneratorFn<void> {
-    this.editorStore.sqlPlaygroundState.setConnection(undefined);
+    this.editorStore.studioSqlPlaygroundState.setConnection(undefined);
     this.editorStore.tabManagerState.cacheAndClose();
     this.editorStore.applicationStore.layoutService.setShowBackdrop(false);
   }