@finos/legend-query-builder 3.0.7 → 3.0.8

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';
@@ -123,7 +124,7 @@ export const LambdaParameterValuesEditor = observer(
                   isSubmitAction ? `${submitAction.label}...` : undefined
                 }
                 onClick={submit}
-                text={submitAction.label}
+                text={prettyCONSTName(submitAction.label)}
               />
             )}
             <ModalFooterButton

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;
   }
@@ -455,6 +447,7 @@ export abstract class QueryBuilderState implements CommandRegistrar {
   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();
     }
   }