@finos/legend-query-builder 2.1.1 → 2.1.3

package/{lib/stores/QueryBuilderBootstraper.d.ts → src/application/QueryBuilderDocumentation.ts}

@@ -13,5 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export declare const setupQueryBuilderUILibrary: () => Promise<void>;
-//# sourceMappingURL=QueryBuilderBootstraper.d.ts.map
+
+export enum QUERY_BUILDER_DOCUMENTATION_KEY {
+  TUTORIAL_QUERY_BUILDER = 'tutorial.query.builder',
+
+  // questions
+  QUESTION_HOW_TO_ADD_PARAMETERS_TO_QUERY = 'question.how-to-add-parameters-to-query',
+  QUESTION_HOW_TO_ADD_CONSTANTS_TO_QUERY = 'question.how-to-add-constants-to-query',
+}

package/src/components/QueryBuilder.tsx

@@ -56,7 +56,6 @@ import {
   BackdropContainer,
   useApplicationStore,
   useCommands,
-  LEGEND_APPLICATION_DOCUMENTATION_KEY,
 } from '@finos/legend-application';
 import { QueryBuilderParametersPanel } from './QueryBuilderParametersPanel.js';
 import { QueryBuilderFunctionsExplorerPanel } from './explorer/QueryBuilderFunctionsExplorerPanel.js';
@@ -70,6 +69,7 @@ import { QueryBuilderConstantExpressionPanel } from './QueryBuilderConstantExpre
 import { QueryBuilder_LegendApplicationPlugin } from './QueryBuilder_LegendApplicationPlugin.js';
 import { QUERY_BUILDER_SETTING_KEY } from '../application/QueryBuilderSetting.js';
 import { QUERY_BUILDER_COMPONENT_ELEMENT_ID } from './QueryBuilderComponentElement.js';
+import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../application/QueryBuilderDocumentation.js';
 
 const QueryBuilderStatusBar = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
@@ -253,7 +253,7 @@ export const QueryBuilder = observer(
     const toggleAssistant = (): void =>
       applicationStore.assistantService.toggleAssistant();
     const queryDocEntry = applicationStore.documentationService.getDocEntry(
-      LEGEND_APPLICATION_DOCUMENTATION_KEY.TUTORIAL_QUERY_BUILDER,
+      QUERY_BUILDER_DOCUMENTATION_KEY.TUTORIAL_QUERY_BUILDER,
     );
     const openQueryTutorial = (): void => {
       if (queryDocEntry?.url) {

package/src/components/QueryBuilderConstantExpressionPanel.tsx

@@ -18,7 +18,6 @@ import {
   type PackageableElementOption,
   buildElementOption,
   getPackageableElementOptionFormatter,
-  LEGEND_APPLICATION_DOCUMENTATION_KEY,
 } from '@finos/legend-application';
 import {
   BlankPanelPlaceholder,
@@ -51,6 +50,7 @@ import { variableExpression_setName } from '../stores/shared/ValueSpecificationM
 import { BasicValueSpecificationEditor } from './shared/BasicValueSpecificationEditor.js';
 import { VariableViewer } from './shared/QueryBuilderVariableSelector.js';
 import { QUERY_BUILDER_TEST_ID } from '../application/QueryBuilderTesting.js';
+import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../application/QueryBuilderDocumentation.js';
 
 // NOTE: We currently only allow constant variables for primitive types of multiplicity ONE.
 // This is why we don't show multiplicity in the editor.
@@ -203,7 +203,7 @@ export const QueryBuilderConstantExpressionPanel = observer(
     const varNames = queryBuilderState.allVariableNames;
     const seeDocumentation = (): void =>
       queryBuilderState.applicationStore.assistantService.openDocumentationEntry(
-        LEGEND_APPLICATION_DOCUMENTATION_KEY.QUESTION_HOW_TO_ADD_CONSTANTS_TO_QUERY,
+        QUERY_BUILDER_DOCUMENTATION_KEY.QUESTION_HOW_TO_ADD_CONSTANTS_TO_QUERY,
       );
     const addConstant = (): void => {
       if (!isReadOnly) {

package/src/components/QueryBuilderDiffPanel.tsx

@@ -15,19 +15,12 @@
  */
 
 import {
-  EDITOR_LANGUAGE,
-  EDITOR_THEME,
+  CODE_EDITOR_LANGUAGE,
+  CODE_EDITOR_THEME,
   TAB_SIZE,
   useApplicationStore,
 } from '@finos/legend-application';
-import {
-  getBaseTextEditorOptions,
-  clsx,
-  Dialog,
-  disposeDiffEditor,
-  useResizeDetector,
-  Button,
-} from '@finos/legend-art';
+import { clsx, Dialog, useResizeDetector, Button } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { editor as monacoEditorAPI } from 'monaco-editor';
 import { useEffect, useRef, useState } from 'react';
@@ -36,10 +29,14 @@ import {
   QueryBuilderDiffViewMode,
 } from '../stores/QueryBuilderChangeDetectionState.js';
 import { pruneSourceInformation } from '@finos/legend-graph';
+import {
+  disposeDiffCodeEditor,
+  getBaseCodeEditorOptions,
+} from '@finos/legend-lego/code-editor';
 
 const TextDiffView = observer(
   (props: {
-    language: EDITOR_LANGUAGE;
+    language: CODE_EDITOR_LANGUAGE;
     from?: string | undefined;
     to?: string | undefined;
   }) => {
@@ -63,11 +60,11 @@ const TextDiffView = observer(
       if (!editor && editorRef.current) {
         const element = editorRef.current;
         const _editor = monacoEditorAPI.createDiffEditor(element, {
-          ...getBaseTextEditorOptions(),
+          ...getBaseCodeEditorOptions(),
           theme: applicationStore.layoutService
             .TEMPORARY__isLightColorThemeEnabled
-            ? EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
-            : EDITOR_THEME.LEGEND,
+            ? CODE_EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
+            : CODE_EDITOR_THEME.LEGEND,
           readOnly: true,
           wordWrap: 'on',
         });
@@ -87,15 +84,15 @@ const TextDiffView = observer(
     useEffect(
       () => (): void => {
         if (editor) {
-          disposeDiffEditor(editor);
+          disposeDiffCodeEditor(editor);
         }
       },
       [editor],
     ); // dispose editor
 
     return (
-      <div ref={ref} className="text-editor__container">
-        <div className="text-editor__body" ref={editorRef} />
+      <div ref={ref} className="code-editor__container">
+        <div className="code-editor__body" ref={editorRef} />
       </div>
     );
   },
@@ -153,14 +150,14 @@ export const QueryBuilderDiffViewPanel = observer(
             <div className="query-builder__diff-panel__content">
               {diffViewState.mode === QueryBuilderDiffViewMode.GRAMMAR && (
                 <TextDiffView
-                  language={EDITOR_LANGUAGE.PURE}
+                  language={CODE_EDITOR_LANGUAGE.PURE}
                   from={fromGrammarText}
                   to={toGrammarText}
                 />
               )}
               {diffViewState.mode === QueryBuilderDiffViewMode.JSON && (
                 <TextDiffView
-                  language={EDITOR_LANGUAGE.JSON}
+                  language={CODE_EDITOR_LANGUAGE.JSON}
                   from={JSON.stringify(
                     {
                       parameters: diffViewState.initialQuery.parameters

package/src/components/QueryBuilderParametersPanel.tsx

@@ -44,7 +44,6 @@ import {
   buildElementOption,
   getPackageableElementOptionFormatter,
   useApplicationStore,
-  LEGEND_APPLICATION_DOCUMENTATION_KEY,
 } from '@finos/legend-application';
 import { generateEnumerableNameFromToken } from '@finos/legend-shared';
 import { DEFAULT_VARIABLE_NAME } from '../stores/QueryBuilderConfig.js';
@@ -53,6 +52,7 @@ import { LambdaParameterState } from '../stores/shared/LambdaParameterState.js';
 import { LambdaParameterValuesEditor } from './shared/LambdaParameterValuesEditor.js';
 import { VariableViewer } from './shared/QueryBuilderVariableSelector.js';
 import { QUERY_BUILDER_TEST_ID } from '../application/QueryBuilderTesting.js';
+import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../application/QueryBuilderDocumentation.js';
 
 type MultiplicityOption = { label: string; value: Multiplicity };
 
@@ -237,7 +237,7 @@ export const QueryBuilderParametersPanel = observer(
     );
     const seeDocumentation = (): void =>
       queryBuilderState.applicationStore.assistantService.openDocumentationEntry(
-        LEGEND_APPLICATION_DOCUMENTATION_KEY.QUESTION_HOW_TO_ADD_PARAMETERS_TO_QUERY,
+        QUERY_BUILDER_DOCUMENTATION_KEY.QUESTION_HOW_TO_ADD_PARAMETERS_TO_QUERY,
       );
     const addParameter = (): void => {
       if (!isReadOnly && !queryBuilderState.isParameterSupportDisabled) {

package/src/components/QueryBuilderResultPanel.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import { AgGridReact } from '@ag-grid-community/react';
-import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import {
   BlankPanelContent,
   PanelLoadingIndicator,
@@ -47,10 +45,8 @@ import {
 import {
   ActionAlertActionType,
   ActionAlertType,
-  EDITOR_LANGUAGE,
-  ExecutionPlanViewer,
+  CODE_EDITOR_LANGUAGE,
   TAB_SIZE,
-  TextInputEditor,
   useApplicationStore,
 } from '@finos/legend-application';
 import {
@@ -62,7 +58,6 @@ import {
   prettyCONSTName,
 } from '@finos/legend-shared';
 import { forwardRef, useState } from 'react';
-import type { CellMouseOverEvent } from '@ag-grid-community/core';
 import {
   QueryBuilderDerivationProjectionColumnState,
   QueryBuilderProjectionColumnState,
@@ -88,12 +83,18 @@ import {
 } from '../stores/shared/ValueSpecificationModifierHelper.js';
 import { PARAMETER_SUBMIT_ACTION } from '../stores/shared/LambdaParameterState.js';
 import { QUERY_BUILDER_TEST_ID } from '../application/QueryBuilderTesting.js';
+import {
+  DataGrid,
+  type DataGridCellMouseOverEvent,
+} from '@finos/legend-lego/data-grid';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
+import { ExecutionPlanViewer } from './execution-plan/ExecutionPlanViewer.js';
 
 const QueryBuilderGridResultContextMenu = observer(
   forwardRef<
     HTMLDivElement,
     {
-      event: CellMouseOverEvent | null;
+      event: DataGridCellMouseOverEvent | null;
       tdsState: QueryBuilderTDSState;
     }
   >(function QueryBuilderResultContextMenu(props, ref) {
@@ -330,7 +331,7 @@ const QueryBuilderGridResult = observer(
     const fetchStructureImplementation =
       queryBuilderState.fetchStructureState.implementation;
     const [cellDoubleClickedEvent, setCellDoubleClickedEvent] =
-      useState<CellMouseOverEvent | null>(null);
+      useState<DataGridCellMouseOverEvent | null>(null);
     const columns = executionResult.result.columns;
     const rowData = executionResult.result.rows.map((_row, rowIdx) => {
       const row: PlainObject = {};
@@ -365,7 +366,7 @@ const QueryBuilderGridResult = observer(
         key={executionResult._UUID}
         className={clsx('ag-theme-balham-dark query-builder__result__tds-grid')}
       >
-        <AgGridReact
+        <DataGrid
           rowData={rowData}
           gridOptions={{
             suppressScrollOnNewData: true,
@@ -373,7 +374,6 @@ const QueryBuilderGridResult = observer(
               return data.data.rowNumber as string;
             },
           }}
-          modules={[ClientSideRowModelModule]}
           // NOTE: we use onCellMouseOver as a bit of a workaround
           // since we use the context menu so we want the user to be
           // able to right click any cell and have the context menu
@@ -412,16 +412,16 @@ const QueryBuilderResultValues = observer(
       );
     } else if (executionResult instanceof RawExecutionResult) {
       return (
-        <TextInputEditor
-          language={EDITOR_LANGUAGE.TEXT}
+        <CodeEditor
+          language={CODE_EDITOR_LANGUAGE.TEXT}
           inputValue={executionResult.value}
           isReadOnly={true}
         />
       );
     }
     return (
-      <TextInputEditor
-        language={EDITOR_LANGUAGE.JSON}
+      <CodeEditor
+        language={CODE_EDITOR_LANGUAGE.JSON}
         inputValue={JSON.stringify(
           extractExecutionResultValues(executionResult),
           null,

package/src/components/QueryBuilderTextEditor.tsx

@@ -32,11 +32,11 @@ import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import { QueryBuilderTextEditorMode } from '../stores/QueryBuilderTextEditorState.js';
 import { flowResult } from 'mobx';
 import {
-  EDITOR_LANGUAGE,
-  TextInputEditor,
+  CODE_EDITOR_LANGUAGE,
   useApplicationStore,
 } from '@finos/legend-application';
 import { LambdaEditor } from './shared/LambdaEditor.js';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
 
 export const QueryBuilderTextEditor = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
@@ -108,8 +108,8 @@ export const QueryBuilderTextEditor = observer(
                 />
               )}
               {mode === QueryBuilderTextEditorMode.JSON && (
-                <TextInputEditor
-                  language={EDITOR_LANGUAGE.JSON}
+                <CodeEditor
+                  language={CODE_EDITOR_LANGUAGE.JSON}
                   inputValue={queryTextEditorState.readOnlylambdaJson}
                   isReadOnly={true}
                 />

package/src/components/QueryBuilder_LegendApplicationPlugin.ts

@@ -21,11 +21,13 @@ import {
   type SettingConfigurationEntry,
   type KeyedCommandConfigEntry,
   type LegendApplicationPluginManager,
+  type LegendApplicationSetup,
 } from '@finos/legend-application';
 import packageJson from '../../package.json';
 import { QUERY_BUILDER_SETTING_CONFIG } from '../application/QueryBuilderSetting.js';
 import { QUERY_BUILDER_COMMAND_CONFIG } from '../stores/QueryBuilderCommand.js';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
+import { configureDataGridComponent } from '@finos/legend-lego/data-grid';
 
 export type CheckEntitlementEditorRender = (
   queryBuilderState: QueryBuilderState,
@@ -44,6 +46,14 @@ export class QueryBuilder_LegendApplicationPlugin extends LegendApplicationPlugi
     pluginManager.registerApplicationPlugin(this);
   }
 
+  override getExtraApplicationSetups(): LegendApplicationSetup[] {
+    return [
+      async (applicationStore) => {
+        configureDataGridComponent();
+      },
+    ];
+  }
+
   override getExtraKeyedCommandConfigEntries(): KeyedCommandConfigEntry[] {
     return collectKeyedCommandConfigEntriesFromConfig(
       QUERY_BUILDER_COMMAND_CONFIG,