@finos/legend-query-builder 4.14.35 → 4.14.37

package/src/components/QueryBuilder.tsx

@@ -29,7 +29,6 @@ import {
   CheckIcon,
   CaretDownIcon,
   DiffIcon,
-  WaterDropIcon,
   MenuContentDivider,
   Dialog,
   Modal,
@@ -45,6 +44,8 @@ import {
   DataAccessIcon,
   AssistantIcon,
   clsx,
+  DocumentationIcon,
+  CodeIcon,
 } from '@finos/legend-art';
 import { QueryBuilderFilterPanel } from './filter/QueryBuilderFilterPanel.js';
 import { QueryBuilderExplorerPanel } from './explorer/QueryBuilderExplorerPanel.js';
@@ -74,16 +75,17 @@ import { QueryBuilderDiffViewPanelDiaglog } from './QueryBuilderDiffPanel.js';
 import { guaranteeType } from '@finos/legend-shared';
 import { QueryBuilderGraphFetchTreeState } from '../stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeState.js';
 import { QueryBuilderPostTDSPanel } from './fetch-structure/QueryBuilderPostTDSPanel.js';
-import { QueryBuilderWatermarkEditor } from './watermark/QueryBuilderWatermark.js';
 import { QueryBuilderConstantExpressionPanel } from './QueryBuilderConstantExpressionPanel.js';
 import { QUERY_BUILDER_SETTING_KEY } from '../__lib__/QueryBuilderSetting.js';
 import { QUERY_BUILDER_COMPONENT_ELEMENT_ID } from './QueryBuilderComponentElement.js';
 import { DataAccessOverview } from './data-access/DataAccessOverview.js';
 import { QueryChat } from './QueryChat.js';
-import { useEffect, useRef } from 'react';
+import { Fragment, useEffect, useRef } from 'react';
 import { RedoButton, UndoButton } from '@finos/legend-lego/application';
 import { FETCH_STRUCTURE_IMPLEMENTATION } from '../stores/fetch-structure/QueryBuilderFetchStructureImplementationState.js';
 import { onChangeFetchStructureImplementation } from '../stores/fetch-structure/QueryBuilderFetchStructureState.js';
+import type { QueryBuilder_LegendApplicationPlugin_Extension } from '../stores/QueryBuilder_LegendApplicationPlugin_Extension.js';
+import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../__lib__/QueryBuilderDocumentation.js';
 
 const QueryBuilderPostGraphFetchPanel = observer(
   (props: { graphFetchState: QueryBuilderGraphFetchTreeState }) => {
@@ -126,13 +128,18 @@ const QueryBuilderStatusBar = observer(
                 className={clsx(
                   'query-builder__status-bar__action query-builder__status-bar__view-diff-btn',
                 )}
-                disabled={!queryBuilderState.changeDetectionState.hasChanged}
+                disabled={
+                  !queryBuilderState.changeDetectionState.hasChanged ||
+                  !queryBuilderState.canBuildQuery
+                }
                 onClick={showDiff}
                 tabIndex={-1}
                 title={
-                  queryBuilderState.changeDetectionState.hasChanged
-                    ? 'Show changes'
-                    : 'Query has not been changed'
+                  !queryBuilderState.canBuildQuery
+                    ? 'Please fix query errors to show changes'
+                    : queryBuilderState.changeDetectionState.hasChanged
+                      ? 'Show changes'
+                      : 'Query has not been changed'
                 }
               >
                 <DiffIcon />
@@ -193,7 +200,12 @@ const QueryBuilderStatusBar = observer(
               openLambdaEditor(QueryBuilderTextEditorMode.JSON)
             }
             tabIndex={-1}
-            title="View Query Protocol"
+            disabled={!queryBuilderState.canBuildQuery}
+            title={
+              !queryBuilderState.canBuildQuery
+                ? 'Please fix query errors to show query protocol'
+                : 'Show Query Protocol'
+            }
           >{`{ }`}</button>
           <button
             className={clsx(
@@ -208,7 +220,12 @@ const QueryBuilderStatusBar = observer(
               openLambdaEditor(QueryBuilderTextEditorMode.TEXT)
             }
             tabIndex={-1}
-            title="View Query in Pure"
+            disabled={!queryBuilderState.canBuildQuery}
+            title={
+              !queryBuilderState.canBuildQuery
+                ? 'Please fix query errors to edit in Pure'
+                : 'Edit Query in Pure'
+            }
           >
             <HackerIcon />
           </button>
@@ -277,10 +294,6 @@ export const QueryBuilder = observer(
       }
     };
 
-    const openWatermark = (): void => {
-      queryBuilderState.watermarkState.setIsEditingWatermark(true);
-    };
-
     const toggleEnableCalendar = (): void => {
       if (queryBuilderState.isCalendarEnabled) {
         queryBuilderState.applicationStore.alertService.setActionAlertInfo({
@@ -363,6 +376,9 @@ export const QueryBuilder = observer(
     const editQueryInPure = (): void => {
       openLambdaEditor(QueryBuilderTextEditorMode.TEXT);
     };
+    const showQueryInPure = (): void => {
+      openLambdaEditor(QueryBuilderTextEditorMode.TEXT);
+    };
     const showQueryProtocol = (): void => {
       openLambdaEditor(QueryBuilderTextEditorMode.JSON);
     };
@@ -418,8 +434,38 @@ export const QueryBuilder = observer(
       queryBuilderState.changeHistoryState.redo();
     };
 
+    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 toggleAssistant = (): void =>
       applicationStore.assistantService.toggleAssistant();
+
+    const extraHelpMenuContentItems = applicationStore.pluginManager
+      .getApplicationPlugins()
+      .flatMap(
+        (plugin) =>
+          (
+            plugin as QueryBuilder_LegendApplicationPlugin_Extension
+          ).getExtraQueryBuilderHelpMenuActionConfigurations?.() ?? [],
+      )
+      .map((item) => (
+        <MenuContentItem
+          key={item.key}
+          title={item.title ?? ''}
+          onClick={() => item.onClick(queryBuilderState)}
+        >
+          {item.icon && <MenuContentItemIcon>{item.icon}</MenuContentItemIcon>}
+          <MenuContentItemLabel>{item.label}</MenuContentItemLabel>
+        </MenuContentItem>
+      ));
+
     const compileQuery = applicationStore.guardUnhandledError(() =>
       flowResult(queryBuilderState.compileQuery()),
     );
@@ -431,7 +477,11 @@ export const QueryBuilder = observer(
     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()
-      if (queryBuilderState.isQuerySupported && queryBuilderState.class) {
+      if (
+        queryBuilderState.isQuerySupported &&
+        queryBuilderState.class &&
+        queryBuilderState.canBuildQuery
+      ) {
         queryBuilderState.changeHistoryState.cacheNewQuery(
           queryBuilderState.buildQuery(),
         );
@@ -457,19 +507,11 @@ export const QueryBuilder = observer(
             isLoading={queryBuilderState.resultState.exportState.isInProgress}
           />
           <div className="query-builder__content">
-            <div className="query-builder__header">
+            <div
+              data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_ACTIONS}
+              className="query-builder__header"
+            >
               <div className="query-builder__header__statuses">
-                {queryBuilderState.watermarkState.value && (
-                  <button
-                    className="query-builder__header__status query-builder__header__status--action"
-                    onClick={openWatermark}
-                    tabIndex={-1}
-                    title="Used watermark"
-                    name="Used watermark"
-                  >
-                    <WaterDropIcon />
-                  </button>
-                )}
                 {queryBuilderState.isCalendarEnabled && (
                   <div
                     className="query-builder__header__status"
@@ -478,11 +520,19 @@ export const QueryBuilder = observer(
                     <CalendarClockIcon className="query-builder__header__status__icon--calendar" />
                   </div>
                 )}
-                {queryBuilderState.watermarkState.isEditingWatermark && (
-                  <QueryBuilderWatermarkEditor
-                    queryBuilderState={queryBuilderState}
-                  />
-                )}
+                {applicationStore.pluginManager
+                  .getApplicationPlugins()
+                  .flatMap(
+                    (plugin) =>
+                      (
+                        plugin as QueryBuilder_LegendApplicationPlugin_Extension
+                      ).getExtraQueryBuilderHeaderTitleConfigurations?.() ?? [],
+                  )
+                  .map((actionConfig) => (
+                    <Fragment key={actionConfig.key}>
+                      {actionConfig.renderer(queryBuilderState)}
+                    </Fragment>
+                  ))}
               </div>
               <div className="query-builder__header__actions">
                 <div className="query-builder__header__actions__undo-redo">
@@ -503,6 +553,21 @@ export const QueryBuilder = observer(
                     redo={redo}
                   />
                 </div>
+                {applicationStore.pluginManager
+                  .getApplicationPlugins()
+                  .flatMap(
+                    (plugin) =>
+                      (
+                        plugin as QueryBuilder_LegendApplicationPlugin_Extension
+                      ).getExtraQueryBuilderHeaderActionConfigurations?.() ??
+                      [],
+                  )
+                  .sort((A, B) => B.category - A.category)
+                  .map((actionConfig) => (
+                    <Fragment key={actionConfig.key}>
+                      {actionConfig.renderer(queryBuilderState)}
+                    </Fragment>
+                  ))}
                 <DropdownMenu
                   className="query-builder__header__advanced-dropdown"
                   title="Show Advanced Menu..."
@@ -643,14 +708,6 @@ export const QueryBuilder = observer(
                           Show Post-Filter
                         </MenuContentItemLabel>
                       </MenuContentItem>
-                      <MenuContentItem onClick={openWatermark}>
-                        <MenuContentItemIcon>
-                          <WaterDropIcon />
-                        </MenuContentItemIcon>
-                        <MenuContentItemLabel>
-                          Show Watermark
-                        </MenuContentItemLabel>
-                      </MenuContentItem>
                       <MenuContentItem
                         onClick={toggleEnableCalendar}
                         disabled={
@@ -695,11 +752,17 @@ export const QueryBuilder = observer(
                       <MenuContentItem
                         onClick={openCheckEntitlmentsEditor}
                         disabled={
-                          queryBuilderState.isQuerySupported &&
-                          queryBuilderState.fetchStructureState
-                            .implementation instanceof QueryBuilderTDSState &&
-                          queryBuilderState.fetchStructureState.implementation
-                            .projectionColumns.length === 0
+                          (queryBuilderState.isQuerySupported &&
+                            queryBuilderState.fetchStructureState
+                              .implementation instanceof QueryBuilderTDSState &&
+                            queryBuilderState.fetchStructureState.implementation
+                              .projectionColumns.length === 0) ||
+                          !queryBuilderState.canBuildQuery
+                        }
+                        title={
+                          !queryBuilderState.canBuildQuery
+                            ? 'Please fix query errors to check entitlements'
+                            : ''
                         }
                       >
                         <MenuContentItemIcon>
@@ -709,7 +772,15 @@ export const QueryBuilder = observer(
                           Check Entitlements
                         </MenuContentItemLabel>
                       </MenuContentItem>
-                      <MenuContentItem onClick={editQueryInPure}>
+                      <MenuContentItem
+                        onClick={editQueryInPure}
+                        disabled={!queryBuilderState.canBuildQuery}
+                        title={
+                          !queryBuilderState.canBuildQuery
+                            ? 'Please fix query errors to edit in Pure'
+                            : undefined
+                        }
+                      >
                         <MenuContentItemIcon>
                           <HackerIcon />
                         </MenuContentItemIcon>
@@ -717,7 +788,31 @@ export const QueryBuilder = observer(
                           Edit Query in Pure
                         </MenuContentItemLabel>
                       </MenuContentItem>
-                      <MenuContentItem onClick={showQueryProtocol}>
+                      <MenuContentItem
+                        onClick={showQueryInPure}
+                        disabled={!queryBuilderState.canBuildQuery}
+                        title={
+                          !queryBuilderState.canBuildQuery
+                            ? 'Please fix query errors to edit in Pure'
+                            : undefined
+                        }
+                      >
+                        <MenuContentItemIcon>
+                          <CodeIcon />
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel>
+                          Show Query in Pure
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                      <MenuContentItem
+                        onClick={showQueryProtocol}
+                        disabled={!queryBuilderState.canBuildQuery}
+                        title={
+                          !queryBuilderState.canBuildQuery
+                            ? 'Please fix query errors to show query protocol'
+                            : undefined
+                        }
+                      >
                         <MenuContentItemIcon>
                           <SerializeIcon />
                         </MenuContentItemIcon>
@@ -765,14 +860,6 @@ export const QueryBuilder = observer(
                           </MenuContentItemLabel>
                         </MenuContentItem>
                       )}
-                      <MenuContentItem onClick={toggleAssistant}>
-                        <MenuContentItemIcon>
-                          <AssistantIcon />
-                        </MenuContentItemIcon>
-                        <MenuContentItemLabel>
-                          Open Assistant
-                        </MenuContentItemLabel>
-                      </MenuContentItem>
                     </MenuContent>
                   }
                   menuProps={{
@@ -786,6 +873,44 @@ export const QueryBuilder = observer(
                   </div>
                   <CaretDownIcon className="query-builder__header__advanced-dropdown__icon" />
                 </DropdownMenu>
+                <DropdownMenu
+                  className="query-builder__header__advanced-dropdown"
+                  content={
+                    <MenuContent>
+                      {extraHelpMenuContentItems}
+                      {queryDocEntry && (
+                        <MenuContentItem onClick={openQueryTutorial}>
+                          <MenuContentItemIcon>
+                            <DocumentationIcon />
+                          </MenuContentItemIcon>
+                          <MenuContentItemLabel>
+                            Open Documentation
+                          </MenuContentItemLabel>
+                        </MenuContentItem>
+                      )}
+                      <MenuContentItem onClick={toggleAssistant}>
+                        <MenuContentItemIcon>
+                          {!applicationStore.assistantService.isHidden ? (
+                            <CheckIcon />
+                          ) : (
+                            <AssistantIcon />
+                          )}
+                        </MenuContentItemIcon>
+                        <MenuContentItemLabel>
+                          Show Virtual Assistant
+                        </MenuContentItemLabel>
+                      </MenuContentItem>
+                    </MenuContent>
+                  }
+                >
+                  <div
+                    className="query-builder__header__advanced-dropdown__label"
+                    title="See more options"
+                  >
+                    Help...
+                  </div>
+                  <CaretDownIcon className="query-builder__header__advanced-dropdown__icon" />
+                </DropdownMenu>
               </div>
             </div>
             <div className="query-builder__main">

package/src/components/QueryBuilderConstantExpressionPanel.tsx

@@ -41,6 +41,7 @@ import {
   VariableExpression,
   Multiplicity,
   isValidIdentifier,
+  InstanceValue,
 } from '@finos/legend-graph';
 import { deepClone } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
@@ -60,6 +61,7 @@ import { variableExpression_setName } from '../stores/shared/ValueSpecificationM
 import { LambdaEditor } from './shared/LambdaEditor.js';
 import { VariableViewer } from './shared/QueryBuilderVariableSelector.js';
 import { flowResult } from 'mobx';
+import { isValidInstanceValue } from '../stores/QueryBuilderValueSpecificationHelper.js';
 
 const getConstantNameValidationMessage = (
   constantInput: string,
@@ -93,13 +95,9 @@ const QueryBuilderSimpleConstantExpressionEditor = observer(
     const [selectedName, setSelectedName] = useState(stateName);
     const [isNameValid, setIsNameValid] = useState<boolean>(true);
     const [hasEditedName, setHasEditedName] = useState<boolean>(false);
-    const [nameInputRef, setNameInputRef] = useState<HTMLInputElement | null>(
-      null,
-    );
     const handleNameInputRef = useCallback(
       (ref: HTMLInputElement | null): void => {
         ref?.focus();
-        setNameInputRef(ref);
       },
       [],
     );
@@ -107,6 +105,17 @@ const QueryBuilderSimpleConstantExpressionEditor = observer(
     // Value
     const stateValue = constantState.value;
     const [selectedValue, setSelectedValue] = useState(deepClone(stateValue));
+    const [shouldFocusOnValue, setShouldFocusOnValue] =
+      useState<boolean>(!isCreating);
+    const handleValueInputRef = useCallback(
+      (ref: HTMLInputElement | null): void => {
+        if (shouldFocusOnValue) {
+          ref?.focus();
+          setShouldFocusOnValue(false);
+        }
+      },
+      [shouldFocusOnValue],
+    );
 
     // Type
     const stateType =
@@ -121,12 +130,28 @@ const QueryBuilderSimpleConstantExpressionEditor = observer(
           queryBuilderState.graphManagerState.graph,
           val.value,
           queryBuilderState.observerContext,
+          queryBuilderState.INTERNAL__enableInitializingDefaultSimpleExpressionValue,
         );
         setSelectedValue(newValSpec);
       }
+      setShouldFocusOnValue(true);
     };
+    // Disabling binary, strict time, latest date, and byte as we
+    // don't support these constant types
+    const supportedPrimitiveTypes: PrimitiveType[] = [
+      PrimitiveType.STRING,
+      PrimitiveType.BOOLEAN,
+      PrimitiveType.NUMBER,
+      PrimitiveType.INTEGER,
+      PrimitiveType.FLOAT,
+      PrimitiveType.DECIMAL,
+      PrimitiveType.DATE,
+      PrimitiveType.STRICTDATE,
+      PrimitiveType.DATETIME,
+    ];
     const typeOptions: PackageableElementOption<Type>[] =
       queryBuilderState.graphManagerState.graph.primitiveTypes
+        .filter((type) => supportedPrimitiveTypes.includes(type))
         .map(buildElementOption)
         .concat(
           queryBuilderState.graphManagerState.graph.enumerations.map(
@@ -134,15 +159,6 @@ const QueryBuilderSimpleConstantExpressionEditor = observer(
           ),
         );
 
-    const handleValueInputRef = (ref: HTMLInputElement | null): void => {
-      if (
-        (!isCreating || hasEditedName) &&
-        document.activeElement !== nameInputRef
-      ) {
-        ref?.focus();
-      }
-    };
-
     // Modal lifecycle actions
     const handleCancel = (): void => {
       variableState.setSelectedConstant(undefined);
@@ -163,6 +179,7 @@ const QueryBuilderSimpleConstantExpressionEditor = observer(
         queryBuilderState.graphManagerState.graph,
         selectedType.value,
         queryBuilderState.observerContext,
+        queryBuilderState.INTERNAL__enableInitializingDefaultSimpleExpressionValue,
       );
       setSelectedValue(valSpec);
     };
@@ -259,7 +276,11 @@ const QueryBuilderSimpleConstantExpressionEditor = observer(
           <ModalFooter>
             <ModalFooterButton
               text={isCreating ? 'Create' : 'Apply'}
-              disabled={!isNameValid}
+              disabled={
+                !isNameValid ||
+                (selectedValue instanceof InstanceValue &&
+                  !isValidInstanceValue(selectedValue))
+              }
               onClick={handleApply}
             />
             <ModalFooterButton
@@ -415,6 +436,7 @@ export const QueryBuilderConstantExpressionPanel = observer(
           graph,
           PrimitiveType.STRING,
           queryBuilderState.observerContext,
+          queryBuilderState.INTERNAL__enableInitializingDefaultSimpleExpressionValue,
         );
         const variableEx = new VariableExpression('', Multiplicity.ONE);
         variableEx.genericType = defaultVal.genericType;

package/src/components/QueryBuilderPropertyExpressionEditor.tsx

@@ -207,6 +207,8 @@ const DerivedPropertyParameterValueEditor = observer(
             variable,
             derivedPropertyExpressionState.queryBuilderState.graphManagerState
               .graph,
+            derivedPropertyExpressionState.queryBuilderState
+              .INTERNAL__enableInitializingDefaultSimpleExpressionValue,
             derivedPropertyExpressionState.queryBuilderState.observerContext,
           ),
         idx + 1,