@finos/legend-query-builder 4.14.35 → 4.14.36

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

@@ -32,10 +32,15 @@ import {
   MenuContentItem,
   ModalFooterButton,
   InputWithInlineValidation,
+  PanelDivider,
+  PanelDropZone,
+  PanelFormSection,
 } from '@finos/legend-art';
 import { SortColumnState } from '../../stores/fetch-structure/tds/QueryResultSetModifierState.js';
 import {
   addUniqueEntry,
+  clone,
+  deepClone,
   deleteEntry,
   guaranteeNonNullable,
 } from '@finos/legend-shared';
@@ -43,9 +48,23 @@ import { useApplicationStore } from '@finos/legend-application';
 import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState.js';
 import { COLUMN_SORT_TYPE } from '../../graph/QueryBuilderMetaModelConst.js';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import type { QueryBuilderProjectionColumnState } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import { QUERY_BUILDER_TEST_ID } from '../../__lib__/QueryBuilderTesting.js';
+import { VariableSelector } from '../shared/QueryBuilderVariableSelector.js';
+import {
+  type ValueSpecification,
+  type VariableExpression,
+  PrimitiveType,
+  Multiplicity,
+  areMultiplicitiesEqual,
+} from '@finos/legend-graph';
+import {
+  BasicValueSpecificationEditor,
+  QUERY_BUILDER_VARIABLE_DND_TYPE,
+  type QueryBuilderVariableDragSource,
+} from '../shared/BasicValueSpecificationEditor.js';
+import { useDrop } from 'react-dnd';
 
 const ColumnSortEditor = observer(
   (props: {
@@ -246,6 +265,10 @@ export const QueryResultModifierModal = observer(
     const [slice, setSlice] = useState<
       [number | undefined, number | undefined]
     >(stateSlice ?? [undefined, undefined]);
+    const watermarkState = tdsState.queryBuilderState.watermarkState;
+    const [watermarkValue, setWatermarkValue] = useState(
+      deepClone(watermarkState.value),
+    );
 
     // Sync temp state with tdsState when modal is opened/closed
     useEffect(() => {
@@ -253,8 +276,10 @@ export const QueryResultModifierModal = observer(
       setDistinct(stateDistinct);
       setLimitResults(stateLimitResults);
       setSlice(stateSlice ?? [undefined, undefined]);
+      setWatermarkValue(deepClone(watermarkState.value));
     }, [
       resultSetModifierState.showModal,
+      watermarkState.value,
       stateSortColumns,
       stateDistinct,
       stateLimitResults,
@@ -273,6 +298,7 @@ export const QueryResultModifierModal = observer(
         resultSetModifierState.setSlice(undefined);
       }
       resultSetModifierState.setShowModal(false);
+      watermarkState.setValue(watermarkValue);
     };
 
     const handleLimitResultsChange: React.ChangeEventHandler<
@@ -321,6 +347,50 @@ export const QueryResultModifierModal = observer(
         slice[1] !== undefined &&
         slice[0] >= slice[1]);
 
+    // watermark
+    const isParamaterCompatibleWithWaterMark = (
+      parameter: VariableExpression,
+    ): boolean =>
+      PrimitiveType.STRING === parameter.genericType?.value.rawType &&
+      areMultiplicitiesEqual(parameter.multiplicity, Multiplicity.ONE);
+    const handleDrop = useCallback(
+      (item: QueryBuilderVariableDragSource): void => {
+        setWatermarkValue(item.variable);
+      },
+      [setWatermarkValue],
+    );
+    const toggleWatermark = (): void => {
+      if (watermarkValue) {
+        setWatermarkValue(undefined);
+      } else {
+        setWatermarkValue(watermarkState.getDefaultValue());
+      }
+    };
+    const [{ isParameterValueDragOver }, dropTargetConnector] = useDrop<
+      QueryBuilderVariableDragSource,
+      void,
+      { isParameterValueDragOver: boolean }
+    >(
+      () => ({
+        accept: [QUERY_BUILDER_VARIABLE_DND_TYPE],
+        drop: (item, monitor): void => {
+          if (
+            !monitor.didDrop() &&
+            // Only allows parameters with muliplicity 1 and type string
+            isParamaterCompatibleWithWaterMark(item.variable)
+          ) {
+            handleDrop(item);
+          } // prevent drop event propagation to accomondate for nested DnD
+        },
+        collect: (monitor) => ({
+          isParameterValueDragOver: monitor.isOver({
+            shallow: true,
+          }),
+        }),
+      }),
+      [handleDrop],
+    );
+
     return (
       <Dialog
         open={Boolean(resultSetModifierState.showModal)}
@@ -428,6 +498,74 @@ export const QueryResultModifierModal = observer(
                   </div>
                 </div>
               </div>
+              <>
+                <PanelFormSection>
+                  <label className="panel__content__form__section__header__label">
+                    Watermark
+                  </label>
+                  <button
+                    className={clsx(
+                      'panel__content__form__section__toggler',
+                      'panel__content__form__section__toggler__btn',
+                      {
+                        'panel__content__form__section__toggler__btn--toggled':
+                          watermarkValue,
+                      },
+                    )}
+                    onClick={toggleWatermark}
+                    tabIndex={-1}
+                  >
+                    {watermarkValue ? <CheckSquareIcon /> : <SquareIcon />}
+                    <div className="panel__content__form__section__toggler__prompt">
+                      Enable Watermark
+                    </div>
+                  </button>
+                </PanelFormSection>
+                {watermarkValue && (
+                  <>
+                    <PanelFormSection>
+                      <div className="query-builder__variable-editor">
+                        <PanelDropZone
+                          isDragOver={isParameterValueDragOver}
+                          dropTargetConnector={dropTargetConnector}
+                        >
+                          <BasicValueSpecificationEditor
+                            valueSpecification={watermarkValue}
+                            setValueSpecification={(
+                              val: ValueSpecification,
+                            ): void => {
+                              setWatermarkValue(clone(val));
+                            }}
+                            graph={
+                              watermarkState.queryBuilderState.graphManagerState
+                                .graph
+                            }
+                            obseverContext={
+                              watermarkState.queryBuilderState.observerContext
+                            }
+                            typeCheckOption={{
+                              expectedType: PrimitiveType.STRING,
+                            }}
+                            resetValue={() =>
+                              setWatermarkValue(
+                                watermarkState.getDefaultValue(),
+                              )
+                            }
+                            isConstant={watermarkState.queryBuilderState.constantState.isValueSpecConstant(
+                              watermarkValue,
+                            )}
+                          />
+                        </PanelDropZone>
+                      </div>
+                    </PanelFormSection>
+                    <PanelDivider />
+                    <VariableSelector
+                      filterBy={isParamaterCompatibleWithWaterMark}
+                      queryBuilderState={tdsState.queryBuilderState}
+                    />
+                  </>
+                )}
+              </>
             </div>
           </ModalBody>
           <ModalFooter>

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

@@ -116,6 +116,7 @@ import {
   QueryBuilderDerivationInfoTooltip,
   QueryBuilderPropertyInfoTooltip,
 } from '../shared/QueryBuilderPropertyInfoTooltip.js';
+import { getNameOfValueSpecification } from '../shared/QueryBuilderVariableSelector.js';
 
 const QueryBuilderProjectionColumnContextMenu = observer(
   forwardRef<
@@ -1214,6 +1215,22 @@ export const QueryBuilderTDSPanel = observer(
                 </div>
               </div>
             )}
+            {tdsState.queryBuilderState.watermarkState.value && (
+              <div className="query-builder__projection__result-modifier-prompt__group">
+                <div className="query-builder__projection__result-modifier-prompt__group__label">
+                  Watermark
+                </div>
+                <div
+                  className="query-builder__projection__result-modifier-prompt__group__content"
+                  onClick={openResultSetModifierEditor}
+                >
+                  {getNameOfValueSpecification(
+                    tdsState.queryBuilderState.watermarkState.value,
+                    tdsState.queryBuilderState,
+                  )}
+                </div>
+              </div>
+            )}
           </div>
           <div className="query-builder__projection__toolbar__actions">
             <button

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -111,6 +111,7 @@ import { QueryBuilderTelemetryHelper } from '../../__lib__/QueryBuilderTelemetry
 import { getPropertyChainName } from '../../stores/QueryBuilderPropertyEditorState.js';
 import { QUERY_BUILDER_SUPPORTED_FUNCTIONS } from '../../graph/QueryBuilderMetaModelConst.js';
 import { buildPropertyExpressionChain } from '../../stores/QueryBuilderValueSpecificationBuilderHelper.js';
+import { QueryBuilderPanelIssueCountBadge } from '../shared/QueryBuilderPanelIssueCountBadge.js';
 
 const isCollectionProperty = (
   propertyExpression: AbstractPropertyExpression,
@@ -1479,6 +1480,11 @@ export const QueryBuilderFilterPanel = observer(
         <div className="panel__header">
           <div className="panel__header__title">
             <div className="panel__header__title__label">filter</div>
+            {filterState.allValidationIssues.length !== 0 && (
+              <QueryBuilderPanelIssueCountBadge
+                issues={filterState.allValidationIssues}
+              />
+            )}
           </div>
 
           <div className="panel__header__actions">

package/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -33,6 +33,7 @@ import {
   BasePopover,
   PanelFormSection,
   CalculateIcon,
+  InputWithInlineValidation,
 } from '@finos/legend-art';
 import {
   type Enum,
@@ -67,6 +68,7 @@ import {
   parseCSVString,
   guaranteeIsNumber,
   csvStringify,
+  guaranteeType,
 } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
@@ -83,7 +85,10 @@ import {
 } from '../../stores/shared/ValueSpecificationModifierHelper.js';
 import { CustomDatePicker } from './CustomDatePicker.js';
 import { QUERY_BUILDER_SUPPORTED_FUNCTIONS } from '../../graph/QueryBuilderMetaModelConst.js';
-import { simplifyValueExpression } from '../../stores/QueryBuilderValueSpecificationHelper.js';
+import {
+  isValidInstanceValue,
+  simplifyValueExpression,
+} from '../../stores/QueryBuilderValueSpecificationHelper.js';
 import { evaluate } from 'mathjs';
 import { isUsedDateFunctionSupportedInFormMode } from '../../stores/QueryBuilderStateBuilder.js';
 
@@ -240,7 +245,7 @@ const StringPrimitiveInstanceValueEditor = observer(
     } = props;
     const useSelector = Boolean(selectorConfig);
     const applicationStore = useApplicationStore();
-    const value = valueSpecification.values[0] as string;
+    const value = valueSpecification.values[0] as string | null;
     const updateValueSpec = (val: string): void => {
       instanceValue_setValue(valueSpecification, val, 0, obseverContext);
       setValueSpecification(valueSpecification);
@@ -295,8 +300,8 @@ const StringPrimitiveInstanceValueEditor = observer(
             className="value-spec-editor__enum-selector"
             options={queryOptions}
             onChange={changeValue}
-            value={selectedValue}
-            inputValue={value}
+            value={selectedValue.label === '' ? '' : selectedValue}
+            inputValue={value ?? ''}
             onInputChange={handleInputChange}
             darkMode={
               !applicationStore.layoutService
@@ -308,15 +313,22 @@ const StringPrimitiveInstanceValueEditor = observer(
             components={{
               DropdownIndicator: null,
             }}
+            hasError={!isValidInstanceValue(valueSpecification)}
+            placeholder={value === '' ? '(empty)' : undefined}
           />
         ) : (
-          <input
+          <InputWithInlineValidation
             className="panel__content__form__section__input value-spec-editor__input"
             spellCheck={false}
-            value={value}
+            value={value ?? ''}
             placeholder={value === '' ? '(empty)' : undefined}
             onChange={changeInputValue}
             ref={ref}
+            error={
+              !isValidInstanceValue(valueSpecification)
+                ? 'Invalid String value'
+                : undefined
+            }
           />
         )}
         <button
@@ -397,26 +409,37 @@ const NumberPrimitiveInstanceValueEditor = observer(
       obseverContext,
     } = props;
     const [value, setValue] = useState(
-      (valueSpecification.values[0] as number).toString(),
+      valueSpecification.values[0] === null
+        ? ''
+        : (valueSpecification.values[0] as number).toString(),
     );
     const inputRef = useRef<HTMLInputElement>(null);
     useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);
-    const numericValue = isInteger
-      ? Number.parseInt(Number(value).toString(), 10)
-      : Number(value);
+    const numericValue = value
+      ? isInteger
+        ? Number.parseInt(Number(value).toString(), 10)
+        : Number(value)
+      : null;
 
     const updateValueSpecIfValid = (val: string): void => {
-      const parsedValue = isInteger
-        ? Number.parseInt(Number(val).toString(), 10)
-        : Number(val);
-      if (!isNaN(parsedValue) && parsedValue !== valueSpecification.values[0]) {
-        instanceValue_setValue(
-          valueSpecification,
-          parsedValue,
-          0,
-          obseverContext,
-        );
-        setValueSpecification(valueSpecification);
+      if (val) {
+        const parsedValue = isInteger
+          ? Number.parseInt(Number(val).toString(), 10)
+          : Number(val);
+        if (
+          !isNaN(parsedValue) &&
+          parsedValue !== valueSpecification.values[0]
+        ) {
+          instanceValue_setValue(
+            valueSpecification,
+            parsedValue,
+            0,
+            obseverContext,
+          );
+          setValueSpecification(valueSpecification);
+        }
+      } else {
+        resetValue();
       }
     };
 
@@ -429,20 +452,29 @@ const NumberPrimitiveInstanceValueEditor = observer(
 
     // Support expression evaluation
     const calculateExpression = (): void => {
-      if (isNaN(numericValue)) {
+      if (numericValue !== null && isNaN(numericValue)) {
+        // If the value is not a number, try to evaluate it as an expression
         try {
           const calculatedValue = guaranteeIsNumber(evaluate(value));
           updateValueSpecIfValid(calculatedValue.toString());
           setValue(calculatedValue.toString());
         } catch {
-          updateValueSpecIfValid(
-            (valueSpecification.values[0] as number).toString(),
-          );
-          setValue((valueSpecification.values[0] as number).toString());
+          // If we fail to evaluate the expression, we just keep the previous value
+          const prevValue =
+            valueSpecification.values[0] !== null &&
+            valueSpecification.values[0] !== undefined
+              ? valueSpecification.values[0].toString()
+              : '';
+          updateValueSpecIfValid(prevValue);
+          setValue(prevValue);
         }
-      } else {
+      } else if (numericValue !== null) {
+        // If numericValue is a number, update the value spec
         updateValueSpecIfValid(numericValue.toString());
         setValue(numericValue.toString());
+      } else {
+        // If numericValue is null, reset the value spec
+        resetValue();
       }
     };
 
@@ -457,10 +489,15 @@ const NumberPrimitiveInstanceValueEditor = observer(
 
     useEffect(() => {
       if (
+        numericValue !== null &&
         !isNaN(numericValue) &&
         numericValue !== valueSpecification.values[0]
       ) {
-        setValue((valueSpecification.values[0] as number).toString());
+        const valueFromValueSpec =
+          valueSpecification.values[0] !== null
+            ? (valueSpecification.values[0] as number).toString()
+            : '';
+        setValue(valueFromValueSpec);
       }
     }, [numericValue, valueSpecification]);
 
@@ -469,7 +506,15 @@ const NumberPrimitiveInstanceValueEditor = observer(
         <div className="value-spec-editor__number__input-container">
           <input
             ref={inputRef}
-            className="panel__content__form__section__input value-spec-editor__input value-spec-editor__number__input"
+            className={clsx(
+              'panel__content__form__section__input',
+              'value-spec-editor__input',
+              'value-spec-editor__number__input',
+              {
+                'value-spec-editor__number__input--error':
+                  !isValidInstanceValue(valueSpecification),
+              },
+            )}
             spellCheck={false}
             type="text" // NOTE: we leave this as text so that we can support expression evaluation
             inputMode="numeric"
@@ -517,9 +562,15 @@ const EnumValueInstanceValueEditor = observer(
       obseverContext,
     } = props;
     const applicationStore = useApplicationStore();
-    const enumValueRef = guaranteeNonNullable(valueSpecification.values[0]);
-    const enumValue = enumValueRef.value;
-    const options = enumValue._OWNER.values.map((value) => ({
+    const enumType = guaranteeType(
+      valueSpecification.genericType?.value.rawType,
+      Enumeration,
+    );
+    const enumValue =
+      valueSpecification.values[0] === undefined
+        ? null
+        : valueSpecification.values[0].value;
+    const options = enumType.values.map((value) => ({
       label: value.name,
       value: value,
     }));
@@ -539,10 +590,12 @@ const EnumValueInstanceValueEditor = observer(
           className="value-spec-editor__enum-selector"
           options={options}
           onChange={changeValue}
-          value={{ value: enumValue, label: enumValue.name }}
+          value={enumValue ? { value: enumValue, label: enumValue.name } : null}
           darkMode={
             !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
           }
+          hasError={!isValidInstanceValue(valueSpecification)}
+          placeholder="Select value"
         />
         <button
           className="value-spec-editor__reset-btn"
@@ -899,7 +952,12 @@ const CollectionValueInstanceValueEditor = observer(
         onClick={enableEdit}
         title="Click to edit"
       >
-        <div className="value-spec-editor__list-editor__preview">
+        <div
+          className={clsx('value-spec-editor__list-editor__preview', {
+            'value-spec-editor__list-editor__preview--error':
+              !isValidInstanceValue(valueSpecification),
+          })}
+        >
           {previewText}
         </div>
         <button className="value-spec-editor__list-editor__edit-icon">
@@ -941,6 +999,10 @@ const DateInstanceValueEditor = observer(
           observerContext={obseverContext}
           typeCheckOption={typeCheckOption}
           setValueSpecification={setValueSpecification}
+          hasError={
+            valueSpecification instanceof PrimitiveInstanceValue &&
+            !isValidInstanceValue(valueSpecification)
+          }
         />
         <button
           className="value-spec-editor__reset-btn"

package/src/components/shared/CustomDatePicker.tsx

@@ -19,6 +19,7 @@ import {
   BasePopover,
   BaseRadioGroup,
   CustomSelectorInput,
+  clsx,
 } from '@finos/legend-art';
 import {
   type PureModel,
@@ -733,11 +734,13 @@ export const buildDatePickerOption = (
           CUSTOM_DATE_PICKER_OPTION.LATEST_DATE,
         )
       : new DatePickerOption(
-          valueSpecification.values[0] as string,
-          valueSpecification.genericType.value.rawType.path ===
-          PRIMITIVE_TYPE.DATETIME
-            ? CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_TIME
-            : CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_DATE,
+          (valueSpecification.values[0] ?? '') as string,
+          valueSpecification.values[0] === null
+            ? ''
+            : valueSpecification.genericType.value.rawType.path ===
+                PRIMITIVE_TYPE.DATETIME
+              ? CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_TIME
+              : CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_DATE,
         );
   }
 };
@@ -760,7 +763,7 @@ const AbsoluteDateValueSpecificationEditor: React.FC<{
   const absoluteDateValue =
     valueSpecification instanceof SimpleFunctionExpression
       ? ''
-      : (valueSpecification.values[0] as string);
+      : (valueSpecification.values[0] as string | null);
   const updateAbsoluteDateValue: React.ChangeEventHandler<HTMLInputElement> = (
     event,
   ) => {
@@ -812,7 +815,7 @@ const AbsoluteDateValueSpecificationEditor: React.FC<{
         className="panel__content__form__section__input value-spec-editor__date-picker__absolute-date__input input--dark"
         type="date"
         spellCheck={false}
-        value={absoluteDateValue}
+        value={absoluteDateValue ?? ''}
         onChange={updateAbsoluteDateValue}
       />
     </div>
@@ -837,7 +840,7 @@ const AbsoluteTimeValueSpecificationEditor: React.FC<{
   const absoluteTimeValue =
     valueSpecification instanceof SimpleFunctionExpression
       ? ''
-      : (valueSpecification.values[0] as string);
+      : (valueSpecification.values[0] as string | null);
   const updateAbsoluteTimeValue: React.ChangeEventHandler<HTMLInputElement> = (
     event,
   ) => {
@@ -893,7 +896,7 @@ const AbsoluteTimeValueSpecificationEditor: React.FC<{
         // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local#step
         step="1"
         spellCheck={false}
-        value={absoluteTimeValue}
+        value={absoluteTimeValue ?? ''}
         onChange={updateAbsoluteTimeValue}
       />
     </div>
@@ -1225,6 +1228,7 @@ export const CustomDatePicker: React.FC<{
   valueSpecification: PrimitiveInstanceValue | SimpleFunctionExpression;
   graph: PureModel;
   observerContext: ObserverContext;
+  hasError?: boolean;
   typeCheckOption: {
     expectedType: Type;
     /**
@@ -1247,6 +1251,7 @@ export const CustomDatePicker: React.FC<{
     setValueSpecification,
     graph,
     observerContext,
+    hasError,
     typeCheckOption,
   } = props;
   const applicationStore = useApplicationStore();
@@ -1404,11 +1409,13 @@ export const CustomDatePicker: React.FC<{
   return (
     <>
       <button
-        className="value-spec-editor__date-picker__trigger"
+        className={clsx('value-spec-editor__date-picker__trigger', {
+          'value-spec-editor__date-picker__trigger--error': hasError,
+        })}
         title="Click to edit and pick from more date options"
         onClick={openCustomDatePickerPopover}
       >
-        {datePickerOption.label}
+        {datePickerOption.label || 'Select value'}
       </button>
       <BasePopover
         open={Boolean(anchorEl)}

package/src/components/shared/QueryBuilderVariableSelector.tsx

@@ -48,7 +48,7 @@ import { forwardRef, useState } from 'react';
 
 const CALCULATED = '(calculated)';
 
-const getNameOfValue = (
+export const getNameOfValueSpecification = (
   value: ValueSpecification,
   queryBuilderState: QueryBuilderState,
 ): string | undefined => {
@@ -143,7 +143,7 @@ export const VariableViewer = observer(
     const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
     const isConstant = Boolean(value);
     const constantValueString = value?.val
-      ? getNameOfValue(value.val, queryBuilderState)
+      ? getNameOfValueSpecification(value.val, queryBuilderState)
       : undefined;
     const name = variable.name;
     const variableTypeName =