@finos/legend-query-builder 4.14.35 → 4.14.37

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/result/QueryBuilderResultPanel.tsx

@@ -37,6 +37,12 @@ import {
   PanelDivider,
   SquareIcon,
   CheckSquareIcon,
+  MenuContentItemIcon,
+  MenuContentItemLabel,
+  ChartIcon,
+  CsvIcon,
+  DebugIcon,
+  ReportIcon,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { flowResult } from 'mobx';
@@ -306,6 +312,28 @@ export const QueryBuilderResultPanel = observer(
         !queryBuilderState.isLocalModeEnabled,
       );
     };
+
+    const extraExportMenuContentItems = applicationStore.pluginManager
+      .getApplicationPlugins()
+      .flatMap(
+        (plugin) =>
+          (
+            plugin as QueryBuilder_LegendApplicationPlugin_Extension
+          ).getExtraQueryBuilderExportMenuActionConfigurations?.() ?? [],
+      )
+      .map((item) => (
+        <MenuContentItem
+          key={item.key}
+          title={item.title ?? ''}
+          onClick={() => {
+            item.onClick(queryBuilderState);
+          }}
+        >
+          {item.icon && <MenuContentItemIcon>{item.icon}</MenuContentItemIcon>}
+          <MenuContentItemLabel>{item.label}</MenuContentItemLabel>
+        </MenuContentItem>
+      ));
+
     return (
       <div
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_PANEL}
@@ -490,14 +518,22 @@ export const QueryBuilderResultPanel = observer(
                           onClick={generatePlan}
                           disabled={isRunQueryDisabled}
                         >
-                          Generate Plan
+                          <MenuContentItemIcon>
+                            <ReportIcon />
+                          </MenuContentItemIcon>
+                          <MenuContentItemLabel>
+                            Generate Plan
+                          </MenuContentItemLabel>
                         </MenuContentItem>
                         <MenuContentItem
                           className="btn__dropdown-combo__option"
                           onClick={debugPlanGeneration}
                           disabled={isRunQueryDisabled}
                         >
-                          Debug
+                          <MenuContentItemIcon>
+                            <DebugIcon />
+                          </MenuContentItemIcon>
+                          <MenuContentItemLabel>Debug</MenuContentItemLabel>
                         </MenuContentItem>
                       </MenuContent>
                     }
@@ -522,14 +558,15 @@ export const QueryBuilderResultPanel = observer(
                   ).map((format) => (
                     <MenuContentItem
                       key={format}
-                      className="query-builder__result__export__dropdown__menu__item"
                       onClick={(): void => confirmExport(format)}
                     >
-                      {format}
+                      <MenuContentItemIcon>
+                        <CsvIcon />
+                      </MenuContentItemIcon>
+                      <MenuContentItemLabel>{format}</MenuContentItemLabel>
                     </MenuContentItem>
                   ))}
                   <MenuContentItem
-                    className="query-builder__result__export__dropdown__menu__item"
                     onClick={(): void =>
                       resultState.setIsQueryUsageViewerOpened(true)
                     }
@@ -538,8 +575,12 @@ export const QueryBuilderResultPanel = observer(
                       !isExtraQueryUsageOptionsConfigured
                     }
                   >
-                    Query Code Snippets...
+                    <MenuContentItemIcon>
+                      <ChartIcon />
+                    </MenuContentItemIcon>
+                    <MenuContentItemLabel>Others...</MenuContentItemLabel>
                   </MenuContentItem>
+                  {extraExportMenuContentItems}
                 </MenuContent>
               }
               menuProps={{
@@ -558,6 +599,22 @@ export const QueryBuilderResultPanel = observer(
             {resultState.isQueryUsageViewerOpened && (
               <QueryUsageViewer resultState={resultState} />
             )}
+            {applicationStore.pluginManager
+              .getApplicationPlugins()
+              .flatMap(
+                (plugin) =>
+                  (
+                    plugin as QueryBuilder_LegendApplicationPlugin_Extension
+                  ).getExtraQueryBuilderExportMenuActionConfigurations?.() ??
+                  [],
+              )
+              .map((item) => (
+                <div key={item.key}>
+                  {item.renderExtraComponent
+                    ? item.renderExtraComponent(queryBuilderState)
+                    : undefined}
+                </div>
+              ))}
           </div>
         </div>
         <PanelContent>

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"