@finos/legend-query-builder 3.0.6 → 3.0.8

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

@@ -44,6 +44,9 @@ import {
   useDragPreviewLayer,
   BlankPanelContent,
   PanelContent,
+  MoreVerticalIcon,
+  MenuContentItemIcon,
+  MenuContentItemLabel,
 } from '@finos/legend-art';
 import {
   type ValueSpecification,
@@ -97,6 +100,7 @@ import {
   QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
 } from '../../stores/fetch-structure/tds/window/QueryBuilderWindowState.js';
 import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState.js';
+import { QueryBuilderTelemetryHelper } from '../../__lib__/QueryBuilderTelemetryHelper.js';
 
 const QueryBuilderPostFilterConditionContextMenu = observer(
   forwardRef<
@@ -765,22 +769,37 @@ const QueryBuilderPostFilterPanelContent = observer(
     const rootNode = postFilterState.getRootNode();
     // actions
     const collapseTree = (): void => {
+      QueryBuilderTelemetryHelper.logEvent_PostFilterCollapseTreeLaunched(
+        applicationStore.telemetryService,
+      );
       postFilterState.setSelectedNode(undefined);
       postFilterState.collapseTree();
     };
     const expandTree = (): void => {
+      QueryBuilderTelemetryHelper.logEvent_PostFilterExpandTreeLaunched(
+        applicationStore.telemetryService,
+      );
       postFilterState.setSelectedNode(undefined);
       postFilterState.expandTree();
     };
     const pruneTree = (): void => {
+      QueryBuilderTelemetryHelper.logEvent_PostFilterCleanupTreeLaunched(
+        applicationStore.telemetryService,
+      );
       postFilterState.suppressClickawayEventListener();
       postFilterState.pruneTree();
     };
     const simplifyTree = (): void => {
+      QueryBuilderTelemetryHelper.logEvent_PostFilterSimplifyTreeLaunched(
+        applicationStore.telemetryService,
+      );
       postFilterState.suppressClickawayEventListener();
       postFilterState.simplifyTree();
     };
     const createCondition = (): void => {
+      QueryBuilderTelemetryHelper.logEvent_PostFilterCreateConditionLaunched(
+        applicationStore.telemetryService,
+      );
       postFilterState.suppressClickawayEventListener();
       postFilterState.addNodeFromNode(
         new QueryBuilderPostFilterTreeBlankConditionNodeData(undefined),
@@ -794,6 +813,9 @@ const QueryBuilderPostFilterPanelContent = observer(
           rootNode instanceof QueryBuilderPostFilterTreeGroupNodeData)); // or if it is the root note, it has to be a group node
 
     const createGroupCondition = (): void => {
+      QueryBuilderTelemetryHelper.logEvent_PostFilterCreateLogicalGroupLaunched(
+        applicationStore.telemetryService,
+      );
       postFilterState.suppressClickawayEventListener();
       if (allowGroupCreation) {
         postFilterState.addGroupConditionNodeFromNode(
@@ -802,6 +824,9 @@ const QueryBuilderPostFilterPanelContent = observer(
       }
     };
     const newGroupWithCondition = (): void => {
+      QueryBuilderTelemetryHelper.logEvent_PostFilterCreateGroupFromConditionLaunched(
+        applicationStore.telemetryService,
+      );
       postFilterState.suppressClickawayEventListener();
       if (
         postFilterState.selectedNode instanceof
@@ -889,69 +914,80 @@ const QueryBuilderPostFilterPanelContent = observer(
             <div className="panel__header__title__label">post-filter</div>
           </div>
           <div className="panel__header__actions">
-            <button
-              className="panel__header__action"
-              onClick={createCondition}
-              tabIndex={-1}
-              title="Create Condition"
-            >
-              <PlusIcon />
-            </button>
-            <button
+            <DropdownMenu
               className="panel__header__action"
-              disabled={
-                !(
-                  postFilterState.selectedNode instanceof
-                  QueryBuilderPostFilterTreeConditionNodeData
-                )
+              title="Show Filter Options Menu..."
+              content={
+                <MenuContent>
+                  <MenuContentItem onClick={createCondition}>
+                    <MenuContentItemIcon>
+                      <PlusIcon />
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>
+                      Create Condition
+                    </MenuContentItemLabel>
+                  </MenuContentItem>
+                  <MenuContentItem
+                    disabled={
+                      !(
+                        postFilterState.selectedNode instanceof
+                        QueryBuilderPostFilterTreeConditionNodeData
+                      )
+                    }
+                    onClick={newGroupWithCondition}
+                  >
+                    <MenuContentItemIcon>
+                      <PlusCircleIcon />
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>
+                      Create Group From Condition
+                    </MenuContentItemLabel>
+                  </MenuContentItem>
+                  <MenuContentItem
+                    disabled={!allowGroupCreation}
+                    title={
+                      !allowGroupCreation
+                        ? 'Please select a filter node first to create logical group'
+                        : ''
+                    }
+                    onClick={createGroupCondition}
+                  >
+                    <MenuContentItemIcon>
+                      <NewFolderIcon />
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>
+                      Create Logical Group
+                    </MenuContentItemLabel>
+                  </MenuContentItem>
+                  <MenuContentItem onClick={pruneTree}>
+                    <MenuContentItemIcon>
+                      <TrashIcon />
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>Cleanup Tree</MenuContentItemLabel>
+                  </MenuContentItem>
+                  <MenuContentItem onClick={simplifyTree}>
+                    <MenuContentItemIcon>
+                      <CircleIcon />
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>Simplify Tree</MenuContentItemLabel>
+                  </MenuContentItem>
+                  <MenuContentItem onClick={collapseTree}>
+                    <MenuContentItemIcon>
+                      <CompressIcon />
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>Collapse Tree</MenuContentItemLabel>
+                  </MenuContentItem>
+                  <MenuContentItem onClick={expandTree}>
+                    <MenuContentItemIcon>
+                      <ExpandIcon />
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>Expand Tree</MenuContentItemLabel>
+                  </MenuContentItem>
+                </MenuContent>
               }
-              onClick={newGroupWithCondition}
-              tabIndex={-1}
-              title="Create Group From Condition"
-            >
-              <PlusCircleIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              disabled={!allowGroupCreation}
-              onClick={createGroupCondition}
-              tabIndex={-1}
-              title="Create Logical Group"
             >
-              <NewFolderIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              onClick={pruneTree}
-              tabIndex={-1}
-              title="Cleanup Tree"
-            >
-              <TrashIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              onClick={simplifyTree}
-              tabIndex={-1}
-              title="Simplify Tree"
-            >
-              <CircleIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              onClick={collapseTree}
-              tabIndex={-1}
-              title="Collapse Tree"
-            >
-              <CompressIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              onClick={expandTree}
-              tabIndex={-1}
-              title="Expand Tree"
-            >
-              <ExpandIcon />
-            </button>
+              <MoreVerticalIcon className="query-builder__icon__more-options" />
+            </DropdownMenu>
           </div>
         </div>
         <PanelContent>

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

@@ -372,9 +372,7 @@ const QueryBuilderProjectionColumnEditor = observer(
               spellCheck={false}
               value={projectionColumnState.columnName}
               onChange={changeColumnName}
-              validationErrorMessage={
-                isDuplicatedColumnName ? 'Duplicated column' : undefined
-              }
+              error={isDuplicatedColumnName ? 'Duplicated column' : undefined}
             />
           </div>
           <div className="query-builder__projection__column__value">

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

@@ -513,9 +513,7 @@ const QueryBuilderWindowColumnModalEditor = observer(
                 spellCheck={false}
                 value={windowColumnState.columnName}
                 onChange={changeColumnName}
-                validationErrorMessage={
-                  isDuplicatedColumnName ? 'Duplicated column' : undefined
-                }
+                error={isDuplicatedColumnName ? 'Duplicated column' : undefined}
               />
             </PanelFormSection>
           </div>
@@ -1087,7 +1085,7 @@ const QueryBuilderWindowColumnEditor = observer(
               spellCheck={false}
               value={windowColumnState.columnName}
               onChange={changeColumnName}
-              validationErrorMessage={
+              error={
                 isDuplicatedColumnName
                   ? 'Duplicated column'
                   : isInvalidColumnName

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -43,6 +43,9 @@ import {
   PanelEntryDropZonePlaceholder,
   useDragPreviewLayer,
   PanelContent,
+  MoreVerticalIcon,
+  MenuContentItemIcon,
+  MenuContentItemLabel,
 } from '@finos/legend-art';
 import {
   type QueryBuilderFilterConditionDragSource,
@@ -84,6 +87,7 @@ import {
   type QueryBuilderVariableDragSource,
   QUERY_BUILDER_VARIABLE_DND_TYPE,
 } from '../shared/BasicValueSpecificationEditor.js';
+import { QueryBuilderTelemetryHelper } from '../../__lib__/QueryBuilderTelemetryHelper.js';
 
 const QueryBuilderFilterGroupConditionEditor = observer(
   (props: {
@@ -335,6 +339,10 @@ const QueryBuilderFilterConditionContextMenu = observer(
       filterState.addGroupConditionNodeFromNode(node);
     };
     const newGroupWithCondition = (): void => {
+      QueryBuilderTelemetryHelper.logEvent_FilterCreateGroupFromConditionLaunched(
+        queryBuilderState.applicationStore.telemetryService,
+      );
+
       filterState.suppressClickawayEventListener();
       filterState.newGroupWithConditionFromNode(undefined, node);
     };
@@ -677,26 +685,42 @@ const QueryBuilderFilterTree = observer(
 export const QueryBuilderFilterPanel = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
+
     const applicationStore = useApplicationStore();
     const filterState = queryBuilderState.filterState;
     const rootNode = filterState.getRootNode();
     const collapseTree = (): void => {
+      QueryBuilderTelemetryHelper.logEvent_FilterCollapseTreeLaunched(
+        queryBuilderState.applicationStore.telemetryService,
+      );
       filterState.setSelectedNode(undefined);
       filterState.collapseTree();
     };
     const expandTree = (): void => {
+      QueryBuilderTelemetryHelper.logEvent_FilterExpandTreeLaunched(
+        queryBuilderState.applicationStore.telemetryService,
+      );
       filterState.setSelectedNode(undefined);
       filterState.expandTree();
     };
     const pruneTree = (): void => {
+      QueryBuilderTelemetryHelper.logEvent_FilterCleanupTreeLaunched(
+        queryBuilderState.applicationStore.telemetryService,
+      );
       filterState.suppressClickawayEventListener();
       filterState.pruneTree();
     };
     const simplifyTree = (): void => {
+      QueryBuilderTelemetryHelper.logEvent_FilterSimplifyTreeLaunched(
+        queryBuilderState.applicationStore.telemetryService,
+      );
       filterState.suppressClickawayEventListener();
       filterState.simplifyTree();
     };
     const createCondition = (): void => {
+      QueryBuilderTelemetryHelper.logEvent_FilterCreateConditionLaunched(
+        queryBuilderState.applicationStore.telemetryService,
+      );
       filterState.suppressClickawayEventListener();
       filterState.addNodeFromNode(
         new QueryBuilderFilterTreeBlankConditionNodeData(undefined),
@@ -709,12 +733,18 @@ export const QueryBuilderFilterPanel = observer(
         (filterState.selectedNode !== rootNode || // either not a root node
           rootNode instanceof QueryBuilderFilterTreeGroupNodeData)); // or if it is the root note, it has to be a group node
     const createGroupCondition = (): void => {
+      QueryBuilderTelemetryHelper.logEvent_FilterCreateLogicalGroupLaunched(
+        queryBuilderState.applicationStore.telemetryService,
+      );
       filterState.suppressClickawayEventListener();
       if (allowGroupCreation) {
         filterState.addGroupConditionNodeFromNode(filterState.selectedNode);
       }
     };
     const newGroupWithCondition = (): void => {
+      QueryBuilderTelemetryHelper.logEvent_FilterCreateLogicalGroupLaunched(
+        applicationStore.telemetryService,
+      );
       filterState.suppressClickawayEventListener();
       if (
         filterState.selectedNode instanceof
@@ -812,70 +842,82 @@ export const QueryBuilderFilterPanel = observer(
           <div className="panel__header__title">
             <div className="panel__header__title__label">filter</div>
           </div>
+
           <div className="panel__header__actions">
-            <button
-              className="panel__header__action"
-              onClick={createCondition}
-              tabIndex={-1}
-              title="Create Condition"
-            >
-              <PlusIcon />
-            </button>
-            <button
+            <DropdownMenu
               className="panel__header__action"
-              disabled={
-                !(
-                  filterState.selectedNode instanceof
-                  QueryBuilderFilterTreeConditionNodeData
-                )
+              title="Show Filter Options Menu..."
+              content={
+                <MenuContent>
+                  <MenuContentItem onClick={createCondition}>
+                    <MenuContentItemIcon>
+                      <PlusIcon />
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>
+                      Create Condition
+                    </MenuContentItemLabel>
+                  </MenuContentItem>
+                  <MenuContentItem
+                    disabled={
+                      !(
+                        filterState.selectedNode instanceof
+                        QueryBuilderFilterTreeConditionNodeData
+                      )
+                    }
+                    onClick={newGroupWithCondition}
+                  >
+                    <MenuContentItemIcon>
+                      <PlusCircleIcon />
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>
+                      Create Group From Condition
+                    </MenuContentItemLabel>
+                  </MenuContentItem>
+                  <MenuContentItem
+                    disabled={!allowGroupCreation}
+                    title={
+                      !allowGroupCreation
+                        ? 'Please select a filter node first to create logical group'
+                        : ''
+                    }
+                    onClick={createGroupCondition}
+                  >
+                    <MenuContentItemIcon>
+                      <NewFolderIcon />
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>
+                      Create Logical Group
+                    </MenuContentItemLabel>
+                  </MenuContentItem>
+                  <MenuContentItem onClick={pruneTree}>
+                    <MenuContentItemIcon>
+                      <TrashIcon />
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>Cleanup Tree</MenuContentItemLabel>
+                  </MenuContentItem>
+                  <MenuContentItem onClick={simplifyTree}>
+                    <MenuContentItemIcon>
+                      <CircleIcon />
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>Simplify Tree</MenuContentItemLabel>
+                  </MenuContentItem>
+                  <MenuContentItem onClick={collapseTree}>
+                    <MenuContentItemIcon>
+                      <CompressIcon />
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>Collapse Tree</MenuContentItemLabel>
+                  </MenuContentItem>
+                  <MenuContentItem onClick={expandTree}>
+                    <MenuContentItemIcon>
+                      <ExpandIcon />
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>Expand Tree</MenuContentItemLabel>
+                  </MenuContentItem>
+                </MenuContent>
               }
-              onClick={newGroupWithCondition}
-              tabIndex={-1}
-              title="Create Group From Condition"
             >
-              <PlusCircleIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              disabled={!allowGroupCreation}
-              onClick={createGroupCondition}
-              tabIndex={-1}
-              title="Create Logical Group"
-            >
-              <NewFolderIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              onClick={pruneTree}
-              tabIndex={-1}
-              title="Cleanup Tree"
-            >
-              <TrashIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              onClick={simplifyTree}
-              tabIndex={-1}
-              title="Simplify Tree"
-            >
-              <CircleIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              onClick={collapseTree}
-              tabIndex={-1}
-              title="Collapse Tree"
-            >
-              <CompressIcon />
-            </button>
-            <button
-              className="panel__header__action"
-              onClick={expandTree}
-              tabIndex={-1}
-              title="Expand Tree"
-            >
-              <ExpandIcon />
-            </button>
+              <MoreVerticalIcon className="query-builder__icon__more-options" />
+            </DropdownMenu>
           </div>
         </div>
         <PanelContent>

package/src/components/shared/LambdaParameterValuesEditor.tsx

@@ -30,6 +30,7 @@ import {
   type ObserverContext,
   PrimitiveType,
 } from '@finos/legend-graph';
+import { prettyCONSTName } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 import type { LambdaParametersState } from '../../stores/shared/LambdaParameterState.js';
@@ -119,15 +120,15 @@ export const LambdaParameterValuesEditor = observer(
             )}
             {submitAction && (
               <ModalFooterButton
-                inProgress={isSubmitAction}
-                inProgressText={`${submitAction.label}...`}
+                inProgressText={
+                  isSubmitAction ? `${submitAction.label}...` : undefined
+                }
                 onClick={submit}
-                text={submitAction.label}
+                text={prettyCONSTName(submitAction.label)}
               />
             )}
             <ModalFooterButton
-              inProgress={isClosingAction}
-              inProgressText={'Closing...'}
+              inProgressText={isClosingAction ? 'Closing...' : undefined}
               onClick={close}
               text="Close"
             />

package/src/index.ts

@@ -52,6 +52,8 @@ export * from './components/QuerySetupUtils.js';
 export * from './components/QueryBuilderTextEditor.js';
 
 export { QueryBuilderTextEditorMode } from './stores/QueryBuilderTextEditorState.js';
+export { buildSerialzieFunctionWithGraphFetch } from './stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeValueSpecificationBuilder.js';
+export { buildGetAllFunction } from './stores/QueryBuilderValueSpecificationBuilder.js';
 
 // ------------------------------------------- Shared components -------------------------------------------
 

package/src/stores/QueryBuilderState.ts

@@ -87,6 +87,7 @@ export abstract class QueryBuilderState implements CommandRegistrar {
   readonly changeDetectionState: QueryBuilderChangeDetectionState;
   readonly queryCompileState = ActionState.create();
   readonly observerContext: ObserverContext;
+  readonly saveQueryProgressState = ActionState.create();
 
   explorerState: QueryBuilderExplorerState;
   functionsExplorerState: QueryFunctionsExplorerState;
@@ -102,8 +103,6 @@ export abstract class QueryBuilderState implements CommandRegistrar {
   resultState: QueryBuilderResultState;
   textEditorState: QueryBuilderTextEditorState;
   unsupportedQueryState: QueryBuilderUnsupportedQueryState;
-
-  titleOfQuery: string | undefined;
   showFunctionsExplorerPanel = false;
   showParametersPanel = false;
   isEditingWatermark = false;
@@ -129,7 +128,6 @@ export abstract class QueryBuilderState implements CommandRegistrar {
       fetchStructureState: observable,
       filterState: observable,
       watermarkState: observable,
-      titleOfQuery: observable,
       checkEntitlementsState: observable,
       resultState: observable,
       textEditorState: observable,
@@ -155,8 +153,6 @@ export abstract class QueryBuilderState implements CommandRegistrar {
       setMapping: action,
       setRuntimeValue: action,
 
-      setTitleOfQuery: action,
-
       resetQueryResult: action,
       resetQueryContent: action,
       changeClass: action,
@@ -259,10 +255,6 @@ export abstract class QueryBuilderState implements CommandRegistrar {
     this.runtimeValue = val;
   }
 
-  setTitleOfQuery(val: string | undefined): void {
-    this.titleOfQuery = val;
-  }
-
   get isQuerySupported(): boolean {
     return !this.unsupportedQueryState.rawLambda;
   }
@@ -437,7 +429,7 @@ export abstract class QueryBuilderState implements CommandRegistrar {
       }
     } catch (error) {
       assertErrorThrown(error);
-      this.resetQueryResult();
+      this.resetQueryResult({ preserveResult: options?.preserveResult });
       this.resetQueryContent();
       this.unsupportedQueryState.setLambdaError(error);
       this.unsupportedQueryState.setRawLambda(query);
@@ -448,13 +440,14 @@ export abstract class QueryBuilderState implements CommandRegistrar {
       )
         .map((param) => observe_ValueSpecification(param, this.observerContext))
         .filter(filterByType(VariableExpression));
-      processParameters(parameters, this);
+      processParameters(parameters, this, previousStateParameterValues);
     }
   }
 
   async saveQuery(
     onSaveQuery: (lambda: RawLambda) => Promise<void>,
   ): Promise<void> {
+    this.saveQueryProgressState.inProgress();
     try {
       const query = this.buildQuery();
       await onSaveQuery(query);
@@ -463,6 +456,8 @@ export abstract class QueryBuilderState implements CommandRegistrar {
       this.applicationStore.notificationService.notifyError(
         `Can't save query: ${error.message}`,
       );
+    } finally {
+      this.saveQueryProgressState.complete();
     }
   }
 

package/src/stores/QueryBuilderValueSpecificationBuilder.ts

@@ -41,7 +41,7 @@ import { buildWatermarkExpression } from './watermark/QueryBuilderWatermarkValue
 import { buildExecutionQueryFromLambdaFunction } from './shared/LambdaParameterState.js';
 import type { QueryBuilderConstantExpressionState } from './QueryBuilderConstantsState.js';
 
-const buildGetAllFunction = (
+export const buildGetAllFunction = (
   _class: Class,
   multiplicity: Multiplicity,
 ): SimpleFunctionExpression => {