@finos/legend-query-builder 4.14.27 → 4.14.29

package/src/components/QueryBuilder.tsx

@@ -16,7 +16,6 @@
 
 import { observer } from 'mobx-react-lite';
 import {
-  clsx,
   HammerIcon,
   ResizablePanelGroup,
   ResizablePanel,
@@ -31,7 +30,6 @@ import {
   CaretDownIcon,
   DiffIcon,
   WaterDropIcon,
-  AssistantIcon,
   MenuContentDivider,
   Dialog,
   Modal,
@@ -43,6 +41,9 @@ import {
   CalendarClockIcon,
   ChatIcon,
   PanelLoadingIndicator,
+  SerializeIcon,
+  DataAccessIcon,
+  AssistantIcon,
 } from '@finos/legend-art';
 import { QueryBuilderFilterPanel } from './filter/QueryBuilderFilterPanel.js';
 import { QueryBuilderExplorerPanel } from './explorer/QueryBuilderExplorerPanel.js';
@@ -57,7 +58,6 @@ import { flowResult } from 'mobx';
 import { QueryBuilderUnsupportedQueryEditor } from './QueryBuilderUnsupportedQueryEditor.js';
 import {
   BackdropContainer,
-  useApplicationStore,
   useCommands,
   ActionAlertActionType,
   ActionAlertType,
@@ -78,138 +78,6 @@ import { QueryChat } from './QueryChat.js';
 import { useEffect, useRef } from 'react';
 import { RedoButton, UndoButton } from '@finos/legend-lego/application';
 
-const QueryBuilderStatusBar = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { queryBuilderState } = props;
-    const applicationStore = useApplicationStore();
-    const showDiff = (): void =>
-      queryBuilderState.changeDetectionState.showDiffViewPanel();
-    const openLambdaEditor = (mode: QueryBuilderTextEditorMode): void =>
-      queryBuilderState.textEditorState.openModal(mode);
-    const compile = applicationStore.guardUnhandledError(() =>
-      flowResult(queryBuilderState.compileQuery()),
-    );
-    const toggleAssistant = (): void =>
-      applicationStore.assistantService.toggleAssistant();
-    const openQueryChat = (): void =>
-      queryBuilderState.setIsQueryChatOpened(true);
-
-    return (
-      <div className="query-builder__status-bar">
-        <div className="query-builder__status-bar__left"></div>
-        <div className="query-builder__status-bar__right">
-          {queryBuilderState.changeDetectionState.initState.hasCompleted && (
-            <>
-              <button
-                className={clsx(
-                  'query-builder__status-bar__action query-builder__status-bar__view-diff-btn',
-                )}
-                disabled={!queryBuilderState.changeDetectionState.hasChanged}
-                onClick={showDiff}
-                tabIndex={-1}
-                title={
-                  queryBuilderState.changeDetectionState.hasChanged
-                    ? 'Show changes'
-                    : 'Query has not been changed'
-                }
-              >
-                <DiffIcon />
-              </button>
-              {queryBuilderState.changeDetectionState.diffViewState && (
-                <QueryBuilderDiffViewPanelDiaglog
-                  diffViewState={
-                    queryBuilderState.changeDetectionState.diffViewState
-                  }
-                />
-              )}
-            </>
-          )}
-          {queryBuilderState.isQueryChatOpened && (
-            <QueryChat queryBuilderState={queryBuilderState} />
-          )}
-          {!queryBuilderState.config?.TEMPORARY__disableQueryBuilderChat && (
-            <button
-              className={clsx(
-                'query-builder__status-bar__action query-builder__status-bar__action__toggler',
-                {
-                  'query-builder__status-bar__action__toggler--toggled':
-                    queryBuilderState.isQueryChatOpened === true,
-                },
-              )}
-              onClick={openQueryChat}
-              tabIndex={-1}
-              title="Open Query Chat"
-            >
-              <ChatIcon />
-            </button>
-          )}
-          <button
-            className={clsx(
-              'query-builder__status-bar__action query-builder__status-bar__compile-btn',
-              {
-                'query-builder__status-bar__compile-btn--wiggling':
-                  queryBuilderState.queryCompileState.isInProgress,
-              },
-            )}
-            disabled={queryBuilderState.queryCompileState.isInProgress}
-            onClick={compile}
-            tabIndex={-1}
-            title="Compile (F9)"
-          >
-            <HammerIcon />
-          </button>
-          <button
-            className={clsx(
-              'query-builder__status-bar__action query-builder__status-bar__action__toggler',
-              {
-                'query-builder__status-bar__action__toggler--toggled':
-                  queryBuilderState.textEditorState.mode ===
-                  QueryBuilderTextEditorMode.JSON,
-              },
-            )}
-            onClick={(): void =>
-              openLambdaEditor(QueryBuilderTextEditorMode.JSON)
-            }
-            tabIndex={-1}
-            title="View Query Protocol"
-          >{`{ }`}</button>
-          <button
-            className={clsx(
-              'query-builder__status-bar__action query-builder__status-bar__action__toggler',
-              {
-                'query-builder__status-bar__action__toggler--toggled':
-                  queryBuilderState.textEditorState.mode ===
-                  QueryBuilderTextEditorMode.TEXT,
-              },
-            )}
-            onClick={(): void =>
-              openLambdaEditor(QueryBuilderTextEditorMode.TEXT)
-            }
-            tabIndex={-1}
-            title="View Query in Pure"
-          >
-            <HackerIcon />
-          </button>
-          <button
-            className={clsx(
-              'query-builder__status-bar__action query-builder__status-bar__action__toggler',
-              {
-                'query-builder__status-bar__action__toggler--toggled':
-                  !applicationStore.assistantService.isHidden,
-              },
-            )}
-            onClick={toggleAssistant}
-            tabIndex={-1}
-            title="Toggle assistant"
-          >
-            <AssistantIcon />
-          </button>
-        </div>
-      </div>
-    );
-  },
-);
-
 const QueryBuilderPostGraphFetchPanel = observer(
   (props: { graphFetchState: QueryBuilderGraphFetchTreeState }) => {
     const { graphFetchState } = props;
@@ -381,6 +249,16 @@ export const QueryBuilder = observer(
       queryBuilderState.changeHistoryState.redo();
     };
 
+    const toggleAssistant = (): void =>
+      applicationStore.assistantService.toggleAssistant();
+    const compileQuery = applicationStore.guardUnhandledError(() =>
+      flowResult(queryBuilderState.compileQuery()),
+    );
+    const showDiff = (): void =>
+      queryBuilderState.changeDetectionState.showDiffViewPanel();
+    const openQueryChat = (): void =>
+      queryBuilderState.setIsQueryChatOpened(true);
+
     useEffect(() => {
       // this condition is for passing all exisitng tests because when we initialize a queryBuilderState for a test,
       // we use an empty RawLambda with an empty class and this useEffect is called earlier than initializeWithQuery()
@@ -576,7 +454,9 @@ export const QueryBuilder = observer(
                         </MenuContentItemLabel>
                       </MenuContentItem>
                       <MenuContentItem onClick={openWatermark}>
-                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
+                        <MenuContentItemIcon>
+                          <WaterDropIcon />
+                        </MenuContentItemIcon>
                         <MenuContentItemLabel>
                           Show Watermark
                         </MenuContentItemLabel>
@@ -594,7 +474,9 @@ export const QueryBuilder = observer(
                         <MenuContentItemIcon>
                           {queryBuilderState.isCalendarEnabled ? (
                             <CheckIcon />
-                          ) : null}
+                          ) : (
+                            <CalendarClockIcon />
+                          )}
                         </MenuContentItemIcon>
                         <MenuContentItemLabel>
                           Enable Calendar
@@ -611,23 +493,77 @@ export const QueryBuilder = observer(
                             .projectionColumns.length === 0
                         }
                       >
-                        <MenuContentItemIcon />
+                        <MenuContentItemIcon>
+                          <DataAccessIcon />
+                        </MenuContentItemIcon>
                         <MenuContentItemLabel>
                           Check Entitlements
                         </MenuContentItemLabel>
                       </MenuContentItem>
                       <MenuContentItem onClick={editQueryInPure}>
-                        <MenuContentItemIcon />
+                        <MenuContentItemIcon>
+                          <HackerIcon />
+                        </MenuContentItemIcon>
                         <MenuContentItemLabel>
                           Edit Query in Pure
                         </MenuContentItemLabel>
                       </MenuContentItem>
                       <MenuContentItem onClick={showQueryProtocol}>
-                        <MenuContentItemIcon />
+                        <MenuContentItemIcon>
+                          <SerializeIcon />
+                        </MenuContentItemIcon>
                         <MenuContentItemLabel>
                           Show Query Protocol
                         </MenuContentItemLabel>
                       </MenuContentItem>
+                      <MenuContentItem onClick={compileQuery}>
+                        <MenuContentItemIcon>
+                          <HammerIcon />
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel>
+                          Compile Query (F9)
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      {queryBuilderState.changeDetectionState.initState
+                        .hasCompleted && (
+                        <MenuContentItem
+                          disabled={
+                            !queryBuilderState.changeDetectionState.hasChanged
+                          }
+                          onClick={showDiff}
+                          title={
+                            queryBuilderState.changeDetectionState.hasChanged
+                              ? 'Show changes'
+                              : 'Query has not been changed'
+                          }
+                        >
+                          <MenuContentItemIcon>
+                            <DiffIcon />
+                          </MenuContentItemIcon>
+                          <MenuContentItemLabel>
+                            Show Query Diff
+                          </MenuContentItemLabel>
+                        </MenuContentItem>
+                      )}
+                      {!queryBuilderState.config
+                        ?.TEMPORARY__disableQueryBuilderChat && (
+                        <MenuContentItem onClick={openQueryChat}>
+                          <MenuContentItemIcon>
+                            <ChatIcon />
+                          </MenuContentItemIcon>
+                          <MenuContentItemLabel>
+                            Open Query Chat
+                          </MenuContentItemLabel>
+                        </MenuContentItem>
+                      )}
+                      <MenuContentItem onClick={toggleAssistant}>
+                        <MenuContentItemIcon>
+                          <AssistantIcon />
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel>
+                          Open Assistant
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
                     </MenuContent>
                   }
                   menuProps={{
@@ -736,9 +672,19 @@ export const QueryBuilder = observer(
               </ResizablePanelGroup>
             </div>
           </div>
+          {queryBuilderState.isQueryChatOpened && (
+            <QueryChat queryBuilderState={queryBuilderState} />
+          )}
           {queryBuilderState.textEditorState.mode && (
             <QueryBuilderTextEditor queryBuilderState={queryBuilderState} />
           )}
+          {queryBuilderState.changeDetectionState.diffViewState && (
+            <QueryBuilderDiffViewPanelDiaglog
+              diffViewState={
+                queryBuilderState.changeDetectionState.diffViewState
+              }
+            />
+          )}
           {queryBuilderState.checkEntitlementsState
             .showCheckEntitlementsViewer && (
             <Dialog
@@ -789,7 +735,6 @@ export const QueryBuilder = observer(
             </Dialog>
           )}
         </div>
-        <QueryBuilderStatusBar queryBuilderState={queryBuilderState} />
       </div>
     );
   },

package/src/components/QueryBuilderPropertyExpressionEditor.tsx

@@ -408,11 +408,15 @@ export const QueryBuilderEditablePropertyName = observer(
           onChange={changeColumnName}
           onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
             if (event.key === 'Enter') {
-              setIsEditingColumnName(false);
+              if (columnName.length > 0) {
+                setIsEditingColumnName(false);
+              }
             }
           }}
           onBlur={() => {
-            setIsEditingColumnName(false);
+            if (columnName.length > 0) {
+              setIsEditingColumnName(false);
+            }
           }}
           error={error}
           ref={columnNameInputRef}

package/src/components/fetch-structure/QueryBuilderTDSPanel.tsx

@@ -789,7 +789,11 @@ const QueryBuilderProjectionColumnEditor = observer(
                     projectionColumnState={projectionColumnState}
                     changeColumnName={changeColumnName}
                     error={
-                      isDuplicatedColumnName ? 'Duplicated column' : undefined
+                      isDuplicatedColumnName
+                        ? 'Duplicated column'
+                        : projectionColumnState.columnName.length === 0
+                        ? 'Empty column name'
+                        : undefined
                     }
                   />
                 </div>
@@ -812,7 +816,11 @@ const QueryBuilderProjectionColumnEditor = observer(
                     columnName={projectionColumnState.columnName}
                     changeColumnName={changeColumnName}
                     error={
-                      isDuplicatedColumnName ? 'Duplicated column' : undefined
+                      isDuplicatedColumnName
+                        ? 'Duplicated column'
+                        : projectionColumnState.columnName.length === 0
+                        ? 'Empty column name'
+                        : undefined
                     }
                     title={projectionColumnState.columnName}
                   />

package/src/components/result/tds/QueryBuilderTDSGridResult.tsx

@@ -88,6 +88,7 @@ const getAggregationTDSColumnCustomizations = (
         allowedAggFuncs: ['count'],
       };
     case PRIMITIVE_TYPE.DECIMAL:
+    case PRIMITIVE_TYPE.NUMBER:
     case PRIMITIVE_TYPE.INTEGER:
     case PRIMITIVE_TYPE.FLOAT:
       return {

package/src/stores/QueryBuilderState.ts

@@ -32,6 +32,7 @@ import {
   ActionState,
   hashArray,
   assertTrue,
+  assertNonNullable,
 } from '@finos/legend-shared';
 import { QueryBuilderFilterState } from './filter/QueryBuilderFilterState.js';
 import { QueryBuilderFetchStructureState } from './fetch-structure/QueryBuilderFetchStructureState.js';
@@ -54,6 +55,7 @@ import {
   type ValueSpecification,
   type Type,
   type QueryGridConfig,
+  type QueryExecutionContext,
   GRAPH_MANAGER_EVENT,
   CompilationError,
   extractSourceInformationCoordinates,
@@ -73,6 +75,7 @@ import {
   InstanceValue,
   Multiplicity,
   RuntimePointer,
+  QueryExplicitExecutionContext,
 } from '@finos/legend-graph';
 import { buildLambdaFunction } from './QueryBuilderValueSpecificationBuilder.js';
 import type {
@@ -287,6 +290,24 @@ export abstract class QueryBuilderState implements CommandRegistrar {
     return this.allVariables.map((e) => e.name);
   }
 
+  getQueryExecutionContext(): QueryExecutionContext {
+    const queryExeContext = new QueryExplicitExecutionContext();
+    const runtimeValue = guaranteeType(
+      this.executionContextState.runtimeValue,
+      RuntimePointer,
+      'Query runtime must be of type runtime pointer',
+    );
+    assertNonNullable(
+      this.executionContextState.mapping,
+      'Query required mapping to update',
+    );
+    queryExeContext.mapping = PackageableElementExplicitReference.create(
+      this.executionContextState.mapping,
+    );
+    queryExeContext.runtime = runtimeValue.packageableRuntime;
+    return queryExeContext;
+  }
+
   /**
    * Gets information about the current queryBuilderState.
    * This information can be used as a part of analytics

package/src/stores/fetch-structure/tds/QueryBuilderTDSState.ts

@@ -279,6 +279,13 @@ export class QueryBuilderTDSState
   get fetchStructureValidationIssues(): string[] {
     const validationIssues: string[] = [];
 
+    const hasEmptyProjectionColumnName = this.projectionColumns.some(
+      (column) => column.columnName.length === 0,
+    );
+    if (hasEmptyProjectionColumnName) {
+      validationIssues.push('Query has projection column with no name');
+    }
+
     const hasInValidCalendarAggregateColumns =
       this.aggregationState.columns.some(
         (column) =>