@finos/legend-query-builder 3.0.7 → 3.0.8

package/src/components/QueryBuilder.tsx

@@ -69,7 +69,6 @@ import { QueryBuilderConstantExpressionPanel } from './QueryBuilderConstantExpre
 import { QueryBuilder_LegendApplicationPlugin } from './QueryBuilder_LegendApplicationPlugin.js';
 import { QUERY_BUILDER_SETTING_KEY } from '../__lib__/QueryBuilderSetting.js';
 import { QUERY_BUILDER_COMPONENT_ELEMENT_ID } from './QueryBuilderComponentElement.js';
-import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../__lib__/QueryBuilderDocumentation.js';
 
 const QueryBuilderStatusBar = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
@@ -250,18 +249,6 @@ export const QueryBuilder = observer(
     const applicationStore = queryBuilderState.applicationStore;
     const openLambdaEditor = (mode: QueryBuilderTextEditorMode): void =>
       queryBuilderState.textEditorState.openModal(mode);
-    const toggleAssistant = (): void =>
-      applicationStore.assistantService.toggleAssistant();
-    const queryDocEntry = applicationStore.documentationService.getDocEntry(
-      QUERY_BUILDER_DOCUMENTATION_KEY.TUTORIAL_QUERY_BUILDER,
-    );
-    const openQueryTutorial = (): void => {
-      if (queryDocEntry?.url) {
-        applicationStore.navigationService.navigator.visitAddress(
-          queryDocEntry.url,
-        );
-      }
-    };
     const toggleShowFunctionPanel = (): void => {
       queryBuilderState.setShowFunctionsExplorerPanel(
         !queryBuilderState.showFunctionsExplorerPanel,
@@ -373,206 +360,178 @@ export const QueryBuilder = observer(
                 )}
               </div>
               <div className="query-builder__sub-header__content__actions">
-                <div
-                  title="Query title"
-                  className="query-builder__sub-header__query__title"
-                >
-                  {queryBuilderState.titleOfQuery}
-                </div>
-                <div className="query-builder__sub-header__actions">
-                  <DropdownMenu
-                    className="query-builder__sub-header__custom-action"
-                    title="Show Advanced Menu..."
-                    content={
-                      <MenuContent>
+                <DropdownMenu
+                  className="query-builder__sub-header__custom-action"
+                  title="Show Advanced Menu..."
+                  content={
+                    <MenuContent>
+                      <MenuContentItem
+                        onClick={toggleShowFunctionPanel}
+                        disabled={!queryBuilderState.isQuerySupported}
+                      >
+                        <MenuContentItemIcon>
+                          {queryBuilderState.showFunctionsExplorerPanel ? (
+                            <CheckIcon />
+                          ) : null}
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Show Function(s)
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      {!queryBuilderState.isParameterSupportDisabled && (
                         <MenuContentItem
-                          onClick={toggleShowFunctionPanel}
-                          disabled={!queryBuilderState.isQuerySupported}
-                        >
-                          <MenuContentItemIcon>
-                            {queryBuilderState.showFunctionsExplorerPanel ? (
-                              <CheckIcon />
-                            ) : null}
-                          </MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Function(s)
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                        {!queryBuilderState.isParameterSupportDisabled && (
-                          <MenuContentItem
-                            onClick={toggleShowParameterPanel}
-                            disabled={
-                              !queryBuilderState.isQuerySupported ||
-                              queryBuilderState.parametersState.parameterStates
-                                .length > 0
-                            }
-                          >
-                            <MenuContentItemIcon>
-                              {queryBuilderState.showParametersPanel ? (
-                                <CheckIcon />
-                              ) : null}
-                            </MenuContentItemIcon>
-                            <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                              Show Parameter(s)
-                            </MenuContentItemLabel>
-                          </MenuContentItem>
-                        )}
-                        {
-                          <MenuContentItem
-                            onClick={toggleConstantPanel}
-                            disabled={
-                              !queryBuilderState.isQuerySupported ||
-                              queryBuilderState.constantState.constants.length >
-                                0
-                            }
-                          >
-                            <MenuContentItemIcon>
-                              {queryBuilderState.constantState
-                                .showConstantPanel ? (
-                                <CheckIcon />
-                              ) : null}
-                            </MenuContentItemIcon>
-                            <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                              Show Constant(s)
-                            </MenuContentItemLabel>
-                          </MenuContentItem>
-                        }
-                        <MenuContentItem
-                          onClick={toggleShowFilterPanel}
+                          onClick={toggleShowParameterPanel}
                           disabled={
                             !queryBuilderState.isQuerySupported ||
-                            Array.from(
-                              queryBuilderState.filterState.nodes.values(),
-                            ).length > 0
+                            queryBuilderState.parametersState.parameterStates
+                              .length > 0
                           }
                         >
                           <MenuContentItemIcon>
-                            {queryBuilderState.filterState.showPanel ? (
+                            {queryBuilderState.showParametersPanel ? (
                               <CheckIcon />
                             ) : null}
                           </MenuContentItemIcon>
                           <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Filter
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                        <MenuContentItem
-                          onClick={toggleShowOLAPGroupByPanel}
-                          disabled={
-                            !queryBuilderState.isQuerySupported ||
-                            !(
-                              queryBuilderState.fetchStructureState
-                                .implementation instanceof QueryBuilderTDSState
-                            ) ||
-                            queryBuilderState.fetchStructureState.implementation
-                              .windowState.windowColumns.length > 0
-                          }
-                        >
-                          <MenuContentItemIcon>
-                            {isTDSState &&
-                            guaranteeType(
-                              queryBuilderState.fetchStructureState
-                                .implementation,
-                              QueryBuilderTDSState,
-                            ).showWindowFuncPanel ? (
-                              <CheckIcon />
-                            ) : null}
-                          </MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Window Func(s)
+                            Show Parameter(s)
                           </MenuContentItemLabel>
                         </MenuContentItem>
+                      )}
+                      {
                         <MenuContentItem
-                          onClick={toggleShowPostFilterPanel}
+                          onClick={toggleConstantPanel}
                           disabled={
                             !queryBuilderState.isQuerySupported ||
-                            !(
-                              queryBuilderState.fetchStructureState
-                                .implementation instanceof QueryBuilderTDSState
-                            ) ||
-                            Array.from(
-                              queryBuilderState.fetchStructureState.implementation.postFilterState.nodes.values(),
-                            ).length > 0
+                            queryBuilderState.constantState.constants.length > 0
                           }
                         >
                           <MenuContentItemIcon>
-                            {queryBuilderState.fetchStructureState
-                              .implementation instanceof QueryBuilderTDSState &&
-                            queryBuilderState.fetchStructureState.implementation
-                              .showPostFilterPanel ? (
+                            {queryBuilderState.constantState
+                              .showConstantPanel ? (
                               <CheckIcon />
                             ) : null}
                           </MenuContentItemIcon>
                           <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Post-Filter
+                            Show Constant(s)
                           </MenuContentItemLabel>
                         </MenuContentItem>
-                        <MenuContentItem onClick={openWatermark}>
-                          <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Watermark
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                        <MenuContentDivider />
-                        <MenuContentItem
-                          onClick={openCheckEntitlmentsEditor}
-                          disabled={
-                            queryBuilderState.isQuerySupported &&
+                      }
+                      <MenuContentItem
+                        onClick={toggleShowFilterPanel}
+                        disabled={
+                          !queryBuilderState.isQuerySupported ||
+                          Array.from(
+                            queryBuilderState.filterState.nodes.values(),
+                          ).length > 0
+                        }
+                      >
+                        <MenuContentItemIcon>
+                          {queryBuilderState.filterState.showPanel ? (
+                            <CheckIcon />
+                          ) : null}
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Show Filter
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentItem
+                        onClick={toggleShowOLAPGroupByPanel}
+                        disabled={
+                          !queryBuilderState.isQuerySupported ||
+                          !(
                             queryBuilderState.fetchStructureState
-                              .implementation instanceof QueryBuilderTDSState &&
-                            queryBuilderState.fetchStructureState.implementation
-                              .projectionColumns.length === 0
-                          }
-                        >
-                          <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Check Entitlements
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                        <MenuContentItem onClick={editQueryInPure}>
-                          <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Edit Query in Pure
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                        <MenuContentItem onClick={showQueryProtocol}>
-                          <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Query Protocol
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                        <MenuContentDivider />
-                        {queryDocEntry && (
-                          <MenuContentItem onClick={openQueryTutorial}>
-                            <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                            <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                              Open Documentation
-                            </MenuContentItemLabel>
-                          </MenuContentItem>
-                        )}
-                        <MenuContentItem onClick={toggleAssistant}>
-                          <MenuContentItemIcon>
-                            {!applicationStore.assistantService.isHidden ? (
-                              <CheckIcon />
-                            ) : null}
-                          </MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Virtual Assistant
-                          </MenuContentItemLabel>
-                        </MenuContentItem>
-                      </MenuContent>
-                    }
-                    menuProps={{
-                      anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                      transformOrigin: { vertical: 'top', horizontal: 'right' },
-                      elevation: 7,
-                    }}
-                  >
-                    <div className="query-builder__sub-header__custom-action__label">
-                      Advanced
-                    </div>
-                    <CaretDownIcon className="query-builder__sub-header__custom-action__icon" />
-                  </DropdownMenu>
-                </div>
+                              .implementation instanceof QueryBuilderTDSState
+                          ) ||
+                          queryBuilderState.fetchStructureState.implementation
+                            .windowState.windowColumns.length > 0
+                        }
+                      >
+                        <MenuContentItemIcon>
+                          {isTDSState &&
+                          guaranteeType(
+                            queryBuilderState.fetchStructureState
+                              .implementation,
+                            QueryBuilderTDSState,
+                          ).showWindowFuncPanel ? (
+                            <CheckIcon />
+                          ) : null}
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Show Window Func(s)
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentItem
+                        onClick={toggleShowPostFilterPanel}
+                        disabled={
+                          !queryBuilderState.isQuerySupported ||
+                          !(
+                            queryBuilderState.fetchStructureState
+                              .implementation instanceof QueryBuilderTDSState
+                          ) ||
+                          Array.from(
+                            queryBuilderState.fetchStructureState.implementation.postFilterState.nodes.values(),
+                          ).length > 0
+                        }
+                      >
+                        <MenuContentItemIcon>
+                          {queryBuilderState.fetchStructureState
+                            .implementation instanceof QueryBuilderTDSState &&
+                          queryBuilderState.fetchStructureState.implementation
+                            .showPostFilterPanel ? (
+                            <CheckIcon />
+                          ) : null}
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Show Post-Filter
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentItem onClick={openWatermark}>
+                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Show Watermark
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentDivider />
+                      <MenuContentItem
+                        onClick={openCheckEntitlmentsEditor}
+                        disabled={
+                          queryBuilderState.isQuerySupported &&
+                          queryBuilderState.fetchStructureState
+                            .implementation instanceof QueryBuilderTDSState &&
+                          queryBuilderState.fetchStructureState.implementation
+                            .projectionColumns.length === 0
+                        }
+                      >
+                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Check Entitlements
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentItem onClick={editQueryInPure}>
+                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Edit Query in Pure
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentItem onClick={showQueryProtocol}>
+                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
+                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          Show Query Protocol
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                    </MenuContent>
+                  }
+                  menuProps={{
+                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                    transformOrigin: { vertical: 'top', horizontal: 'right' },
+                    elevation: 7,
+                  }}
+                >
+                  <div className="query-builder__sub-header__custom-action__label">
+                    Advanced
+                  </div>
+                  <CaretDownIcon className="query-builder__sub-header__custom-action__icon" />
+                </DropdownMenu>
               </div>
             </div>
             <div className="query-builder__main">

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