@finos/legend-lego 2.0.151 → 2.0.153

package/src/sql-playground/SQLPlaygroundPanel.tsx

@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import {
+  CheckSquareIcon,
+  clsx,
+  PlayIcon,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  ResizablePanelSplitterLine,
+  SquareIcon,
+} from '@finos/legend-art';
+import { prettyDuration } from '@finos/legend-shared';
+import {
+  PlaygroundSQLCodeEditor,
+  type SQLPlaygroundPanelProps,
+} from './SQLPlaygroundEditor.js';
+import { PlayGroundSQLExecutionResultGrid } from './SQLPlaygroundGrid.js';
+
+export const SQLPlaygroundEditorResultPanel = observer(
+  (props: SQLPlaygroundPanelProps) => {
+    const {
+      playgroundState,
+      advancedMode,
+      disableDragDrop = false,
+      enableDarkMode = false,
+    } = props;
+
+    const executeRawSQL = (): void => {
+      playgroundState.executeRawSQL();
+    };
+    const resultDescription = playgroundState.sqlExecutionResult
+      ? `query ran in ${prettyDuration(
+          playgroundState.sqlExecutionResult.sqlDuration,
+          {
+            ms: true,
+          },
+        )}`
+      : undefined;
+    const toggleLocalMode = (): void => {
+      playgroundState.toggleIsLocalModeEnabled();
+    };
+
+    return (
+      <ResizablePanelGroup orientation="horizontal">
+        <ResizablePanel>
+          <div className="panel sql-playground__sql-editor">
+            <ResizablePanelGroup orientation="horizontal">
+              <ResizablePanel>
+                <PlaygroundSQLCodeEditor
+                  playgroundState={playgroundState}
+                  advancedMode={advancedMode}
+                  disableDragDrop={disableDragDrop}
+                  enableDarkMode={enableDarkMode}
+                />
+              </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={!enableDarkMode ? 'light-mode' : ''}>
+                    <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={toggleLocalMode}
+                            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>
+                </div>
+                {playgroundState.sqlExecutionResult !== undefined && (
+                  <PlayGroundSQLExecutionResultGrid
+                    result={playgroundState.sqlExecutionResult.value}
+                    useAdvancedGrid={advancedMode}
+                    useLocalMode={playgroundState.isLocalModeEnabled}
+                    enableDarkMode={enableDarkMode}
+                  />
+                )}
+                {playgroundState.sqlExecutionResult === undefined && <div />}
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    );
+  },
+);

package/src/sql-playground/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './store/AbstractSQLPlaygroundState.js';
+export * from './SQLPlaygroundPanel.js';
+export * from './SQLPlaygroundGrid.js';
+export * from './SQLPlaygroundEditor.js';

package/src/sql-playground/store/AbstractSQLPlaygroundState.ts

@@ -0,0 +1,152 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ActionState, type GeneratorFn } from '@finos/legend-shared';
+import * as monaco from 'monaco-editor';
+import type { CommandRegistrar } from '@finos/legend-application';
+import {
+  CODE_EDITOR_LANGUAGE,
+  moveCursorToPosition,
+} from '@finos/legend-code-editor';
+import { action, makeObservable, observable } from 'mobx';
+
+export type SQLPlaygroundTheme = 'light' | 'dark';
+export interface SQL_ExecutionResult {
+  value: string;
+  sqlDuration: number;
+}
+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',
+];
+
+export abstract class AbstractSQLPlaygroundState implements CommandRegistrar {
+  theme: SQLPlaygroundTheme;
+  sqlText = '';
+  executeRawSQLState: ActionState;
+  sqlExecutionResult?: SQL_ExecutionResult | undefined;
+  sqlEditorViewState: monaco.editor.ICodeEditorViewState | undefined;
+  sqlEditorTextModel: monaco.editor.ITextModel;
+  sqlEditor?: monaco.editor.IStandaloneCodeEditor | undefined;
+  isLocalModeEnabled: boolean;
+
+  constructor() {
+    this.sqlEditorTextModel = monaco.editor.createModel(
+      this.sqlText,
+      CODE_EDITOR_LANGUAGE.SQL,
+    );
+    this.isLocalModeEnabled = false;
+    this.executeRawSQLState = ActionState.create();
+    this.theme = 'light';
+    makeObservable(this, {
+      sqlExecutionResult: observable,
+      isLocalModeEnabled: observable,
+      sqlText: observable,
+      executeRawSQLState: observable,
+      stopExecuteSQL: action,
+      setSQLEditor: action,
+      setSQLEditorViewState: action,
+      setSQLText: action,
+      setTheme: action,
+      toggleIsLocalModeEnabled: action,
+      sqlEditorViewState: observable.ref,
+      sqlEditor: observable.ref,
+    });
+  }
+
+  abstract executeRawSQL(): GeneratorFn<void>;
+  abstract registerCommands(): void;
+  abstract deregisterCommands(): void;
+
+  getCodeCompletionSuggestions(): string[] {
+    return SQL_KEYWORDS;
+  }
+
+  stopExecuteSQL(): void {
+    this.sqlExecutionResult = undefined;
+  }
+
+  setSQLText(val: string): void {
+    this.sqlText = val;
+  }
+
+  setTheme(val: SQLPlaygroundTheme): void {
+    this.theme = val;
+  }
+
+  setSQLEditorViewState(
+    state: monaco.editor.ICodeEditorViewState | undefined,
+  ): void {
+    this.sqlEditorViewState = state;
+  }
+
+  setSQLEditor(val: monaco.editor.IStandaloneCodeEditor | undefined): void {
+    this.sqlEditor = val;
+    if (val) {
+      const lines = this.sqlText.split('\n');
+      moveCursorToPosition(val, {
+        lineNumber: lines.length,
+        column: lines.at(-1)?.length ?? 0,
+      });
+    }
+  }
+
+  toggleIsLocalModeEnabled(): void {
+    this.isLocalModeEnabled = !this.isLocalModeEnabled;
+    this.sqlExecutionResult = undefined;
+  }
+
+  get isExecuting(): boolean {
+    return this.executeRawSQLState.isInProgress;
+  }
+
+  get hasResult(): boolean {
+    return this.sqlExecutionResult !== undefined;
+  }
+}

package/tsconfig.json

@@ -55,6 +55,8 @@
     "./src/graph-editor/index.ts",
     "./src/model-documentation/ModelDocumentationAnalysis.ts",
     "./src/model-documentation/index.ts",
+    "./src/sql-playground/index.ts",
+    "./src/sql-playground/store/AbstractSQLPlaygroundState.ts",
     "./src/application/ActivityBar.tsx",
     "./src/application/DocumentationLink.tsx",
     "./src/application/FuzzySearchAdvancedConfigMenu.tsx",
@@ -68,7 +70,10 @@
     "./src/graph-editor/ElementIconUtils.tsx",
     "./src/graph-editor/PackageableElementOption.tsx",
     "./src/model-documentation/ModelDocumentationState.tsx",
-    "./src/model-documentation/ModelDocumentationViewer.tsx"
+    "./src/model-documentation/ModelDocumentationViewer.tsx",
+    "./src/sql-playground/SQLPlaygroundEditor.tsx",
+    "./src/sql-playground/SQLPlaygroundGrid.tsx",
+    "./src/sql-playground/SQLPlaygroundPanel.tsx"
   ],
   "include": [
     "src/**/*.ts",