@finos/legend-query-builder 4.14.35 → 4.14.36

package/src/components/QueryBuilder.tsx

@@ -29,7 +29,6 @@ import {
   CheckIcon,
   CaretDownIcon,
   DiffIcon,
-  WaterDropIcon,
   MenuContentDivider,
   Dialog,
   Modal,
@@ -74,16 +73,16 @@ 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';
 
 const QueryBuilderPostGraphFetchPanel = observer(
   (props: { graphFetchState: QueryBuilderGraphFetchTreeState }) => {
@@ -126,13 +125,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 +197,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 +217,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 +291,6 @@ export const QueryBuilder = observer(
       }
     };
 
-    const openWatermark = (): void => {
-      queryBuilderState.watermarkState.setIsEditingWatermark(true);
-    };
-
     const toggleEnableCalendar = (): void => {
       if (queryBuilderState.isCalendarEnabled) {
         queryBuilderState.applicationStore.alertService.setActionAlertInfo({
@@ -431,7 +441,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 +471,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 +484,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 +517,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 +672,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 +716,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 +736,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 +752,15 @@ export const QueryBuilder = observer(
                           Edit Query in Pure
                         </MenuContentItemLabel>
                       </MenuContentItem>
-                      <MenuContentItem onClick={showQueryProtocol}>
+                      <MenuContentItem
+                        onClick={showQueryProtocol}
+                        disabled={!queryBuilderState.canBuildQuery}
+                        title={
+                          !queryBuilderState.canBuildQuery
+                            ? 'Please fix query errors to show query protocol'
+                            : undefined
+                        }
+                      >
                         <MenuContentItemIcon>
                           <SerializeIcon />
                         </MenuContentItemIcon>

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,