@finos/legend-query-builder 4.14.18 → 4.14.20

package/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -190,6 +190,7 @@ const VariableExpressionParameterEditor = observer(
 
             <button
               className="value-spec-editor__variable__reset-btn"
+              name="Reset"
               title="Reset"
               onClick={resetValue}
             >
@@ -310,6 +311,7 @@ const StringPrimitiveInstanceValueEditor = observer(
         )}
         <button
           className="value-spec-editor__reset-btn"
+          name="Reset"
           title="Reset"
           onClick={resetValue}
         >
@@ -353,6 +355,7 @@ const BooleanPrimitiveInstanceValueEditor = observer(
         </button>
         <button
           className="value-spec-editor__reset-btn"
+          name="Reset"
           title="Reset"
           onClick={resetValue}
         >
@@ -388,8 +391,26 @@ const NumberPrimitiveInstanceValueEditor = observer(
       ? Number.parseInt(Number(value).toString(), 10)
       : Number(value);
 
-    const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    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);
+      }
+    };
+
+    const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
       setValue(event.target.value);
+      updateValueSpecIfValid(event.target.value);
     };
 
     // Support expression evaluation
@@ -397,15 +418,16 @@ const NumberPrimitiveInstanceValueEditor = observer(
       if (isNaN(numericValue)) {
         try {
           const calculatedValue = guaranteeIsNumber(evaluate(value));
-          setValue(
-            isInteger
-              ? Number.parseInt(calculatedValue.toString(), 10).toString()
-              : Number(calculatedValue).toString(),
-          );
+          updateValueSpecIfValid(calculatedValue.toString());
+          setValue(calculatedValue.toString());
         } catch {
+          updateValueSpecIfValid(
+            (valueSpecification.values[0] as number).toString(),
+          );
           setValue((valueSpecification.values[0] as number).toString());
         }
       } else {
+        updateValueSpecIfValid(numericValue.toString());
         setValue(numericValue.toString());
       }
     };
@@ -419,29 +441,14 @@ const NumberPrimitiveInstanceValueEditor = observer(
       }
     };
 
-    useEffect(() => {
-      setValue((valueSpecification.values[0] as number).toString());
-    }, [valueSpecification]);
-
     useEffect(() => {
       if (
         !isNaN(numericValue) &&
         numericValue !== valueSpecification.values[0]
       ) {
-        instanceValue_setValue(
-          valueSpecification,
-          numericValue,
-          0,
-          obseverContext,
-        );
-        setValueSpecification(valueSpecification);
+        setValue((valueSpecification.values[0] as number).toString());
       }
-    }, [
-      numericValue,
-      valueSpecification,
-      setValueSpecification,
-      obseverContext,
-    ]);
+    }, [numericValue, valueSpecification]);
 
     return (
       <div className={clsx('value-spec-editor', className)}>
@@ -453,7 +460,7 @@ const NumberPrimitiveInstanceValueEditor = observer(
             type="text" // NOTE: we leave this as text so that we can support expression evaluation
             inputMode="numeric"
             value={value}
-            onChange={changeValue}
+            onChange={handleInputChange}
             onBlur={calculateExpression}
             onKeyDown={onKeyDown}
           />
@@ -469,6 +476,7 @@ const NumberPrimitiveInstanceValueEditor = observer(
         </div>
         <button
           className="value-spec-editor__reset-btn"
+          name="Reset"
           title="Reset"
           onClick={resetValue}
         >
@@ -494,6 +502,7 @@ const EnumValueInstanceValueEditor = observer(
       setValueSpecification,
       obseverContext,
     } = props;
+    const applicationStore = useApplicationStore();
     const enumValueRef = guaranteeNonNullable(valueSpecification.values[0]);
     const enumValue = enumValueRef.value;
     const options = enumValue._OWNER.values.map((value) => ({
@@ -517,10 +526,13 @@ const EnumValueInstanceValueEditor = observer(
           options={options}
           onChange={changeValue}
           value={{ value: enumValue, label: enumValue.name }}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
         <button
           className="value-spec-editor__reset-btn"
+          name="Reset"
           title="Reset"
           onClick={resetValue}
         >
@@ -857,6 +869,7 @@ const CollectionValueInstanceValueEditor = observer(
             </button>
             <button
               className="value-spec-editor__reset-btn"
+              name="Reset"
               title="Reset"
               onClick={resetValue}
             >
@@ -917,6 +930,7 @@ const DateInstanceValueEditor = observer(
         />
         <button
           className="value-spec-editor__reset-btn"
+          name="Reset"
           title="Reset"
           onClick={resetValue}
         >

package/src/components/shared/CustomDatePicker.tsx

@@ -913,6 +913,7 @@ const CustomDateInstanceValueEditor: React.FC<{
     setDatePickerOption,
     observerContext,
   } = props;
+  const applicationStore = useApplicationStore();
   const inputRef = useRef<HTMLInputElement>(null);
   const [durationValue, setDurationValue] = useState(
     customDateOptionValue.duration,
@@ -1015,7 +1016,9 @@ const CustomDateInstanceValueEditor: React.FC<{
             );
           }}
           value={{ value: unitValue, label: unitValue }}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
       </div>
       <div className="value-spec-editor__date-picker__custom-date__input">
@@ -1038,7 +1041,9 @@ const CustomDateInstanceValueEditor: React.FC<{
             );
           }}
           value={{ value: directionValue, label: directionValue }}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
       </div>
       <div className="value-spec-editor__date-picker__custom-date__input">
@@ -1058,7 +1063,9 @@ const CustomDateInstanceValueEditor: React.FC<{
             changeValue(durationValue, unitValue, directionValue, val.value);
           }}
           value={{ value: referenceMomentValue, label: referenceMomentValue }}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
       </div>
     </div>
@@ -1079,6 +1086,7 @@ const CustomFirstDayOfValueSpecificationEditor: React.FC<{
     setValueSpecification,
     setDatePickerOption,
   } = props;
+  const applicationStore = useApplicationStore();
   const selectorRef = useRef<SelectComponent>(null);
   const [unitValue, setUnitValue] = useState(
     customDateAdjustOptionValue instanceof CustomFirstDayOfOption
@@ -1130,7 +1138,9 @@ const CustomFirstDayOfValueSpecificationEditor: React.FC<{
             }
           }}
           value={unitValue ? { value: unitValue, label: unitValue } : null}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
       </div>
     </div>
@@ -1151,6 +1161,7 @@ const CustomPreviousDayOfWeekValueSpecificationEditor: React.FC<{
     setValueSpecification,
     setDatePickerOption,
   } = props;
+  const applicationStore = useApplicationStore();
   const selectorRef = useRef<SelectComponent>(null);
   const [dayOfWeekValue, setDayOfWeekValue] = useState(
     customDateAdjustOptionValue instanceof CustomPreviousDayOfWeekOption
@@ -1200,7 +1211,9 @@ const CustomPreviousDayOfWeekValueSpecificationEditor: React.FC<{
               ? { value: dayOfWeekValue, label: dayOfWeekValue }
               : null
           }
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
       </div>
     </div>

package/src/components/shared/LambdaEditor.tsx

@@ -28,6 +28,7 @@ import {
   ModalFooter,
   ModalHeader,
   ModalTitle,
+  ModalFooterButton,
 } from '@finos/legend-art';
 import {
   disposeCodeEditor,
@@ -224,6 +225,21 @@ const LambdaEditor_Inner = observer(
       }
     }, [editor, isExpanded]);
 
+    // set styling when theme changes
+    useEffect(() => {
+      if (editor) {
+        editor.updateOptions({
+          theme: applicationStore.layoutService
+            .TEMPORARY__isLightColorThemeEnabled
+            ? CODE_EDITOR_THEME.BUILT_IN__VSCODE_LIGHT
+            : CODE_EDITOR_THEME.DEFAULT_DARK,
+        });
+      }
+    }, [
+      editor,
+      applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled,
+    ]);
+
     // set backdrop to force user to fix parser error when it happens
     useEffect(() => {
       if (parserError) {
@@ -605,7 +621,9 @@ const LambdaEditor_PopUp = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className={clsx(
             'editor-modal lambda-editor__popup__modal',
             {
@@ -639,19 +657,17 @@ const LambdaEditor_PopUp = observer(
             </div>
           </ModalBody>
           <ModalFooter>
-            <button
-              className="btn btn--dark btn--caution"
+            <ModalFooterButton
+              className="btn--caution"
+              text="Discard changes"
               onClick={discardChanges}
-            >
-              Discard changes
-            </button>
-            <button
-              className="btn btn--dark"
+            />
+            <ModalFooterButton
+              text="Close"
               onClick={onClose}
               disabled={Boolean(lambdaEditorState.parserError)}
-            >
-              Close
-            </button>
+              type="secondary"
+            />
           </ModalFooter>
         </Modal>
       </Dialog>

package/src/components/shared/LambdaParameterValuesEditor.tsx

@@ -71,7 +71,9 @@ export const LambdaParameterValuesEditor = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="editor-modal lambda-parameter-values__modal"
         >
           <ModalHeader title="Set Parameter Values" />
@@ -131,6 +133,7 @@ export const LambdaParameterValuesEditor = observer(
               inProgressText={isClosingAction ? 'Closing...' : undefined}
               onClick={close}
               text="Close"
+              type="secondary"
             />
           </ModalFooter>
         </Modal>

package/src/components/shared/QueryBuilderPropertyInfoTooltip.tsx

@@ -117,26 +117,18 @@ export const QueryBuilderTaggedValueInfoTooltip: React.FC<{
   );
 };
 
-export const QueryBuilderPropertyInfoTooltip: React.FC<{
+const QueryBuilderBaseInfoTooltip: React.FC<{
   title: string;
-  property: AbstractProperty;
-  path: string;
-  isMapped: boolean;
-  children: React.ReactElement;
+  data: {
+    label: string;
+    value: string;
+    actionButton?: JSX.Element | undefined;
+  }[];
   placement?: TooltipPlacement | undefined;
-  type?: Type | undefined;
-  explorerState?: QueryBuilderExplorerState | undefined;
+  children: React.ReactElement;
+  footerElement?: React.ReactElement;
 }> = (props) => {
-  const {
-    title,
-    property,
-    path,
-    isMapped,
-    children,
-    placement,
-    type,
-    explorerState,
-  } = props;
+  const { title, data, placement, children, footerElement } = props;
 
   const [open, setIsOpen] = useState(false);
 
@@ -165,55 +157,18 @@ export const QueryBuilderPropertyInfoTooltip: React.FC<{
           title={
             <div className="query-builder__tooltip__content">
               <div className="query-builder__tooltip__header">{title}</div>
-              <div className="query-builder__tooltip__item">
-                <div className="query-builder__tooltip__item__label">Type</div>
-                <div className="query-builder__tooltip__item__value">
-                  {type?.path ?? property.genericType.value.rawType.path}
-                </div>
-              </div>
-              <div className="query-builder__tooltip__item">
-                <div className="query-builder__tooltip__item__label">Path</div>
-                <div className="query-builder__tooltip__item__value">
-                  {path}
-                </div>
-                {explorerState && (
-                  <div className="query-builder__tooltip__item__action">
-                    <button
-                      onClick={() => explorerState.highlightTreeNode(path)}
-                      title="Show in tree"
-                    >
-                      <ShareBoxIcon color="white" />
-                    </button>
+              {data.map((elem) => (
+                <div key={elem.label} className="query-builder__tooltip__item">
+                  <div className="query-builder__tooltip__item__label">
+                    {elem.label}
                   </div>
-                )}
-              </div>
-              <div className="query-builder__tooltip__item">
-                <div className="query-builder__tooltip__item__label">
-                  Multiplicity
-                </div>
-                <div className="query-builder__tooltip__item__value">
-                  {getMultiplicityDescription(property.multiplicity)}
-                </div>
-              </div>
-              <div className="query-builder__tooltip__item">
-                <div className="query-builder__tooltip__item__label">
-                  Derived Property
-                </div>
-                <div className="query-builder__tooltip__item__value">
-                  {property instanceof DerivedProperty ? 'Yes' : 'No'}
-                </div>
-              </div>
-              <div className="query-builder__tooltip__item">
-                <div className="query-builder__tooltip__item__label">
-                  Mapped
-                </div>
-                <div className="query-builder__tooltip__item__value">
-                  {isMapped ? 'Yes' : 'No'}
+                  <div className="query-builder__tooltip__item__value">
+                    {elem.value}
+                  </div>
+                  {elem.actionButton}
                 </div>
-              </div>
-              <QueryBuilderTaggedValueInfoTooltip
-                taggedValues={property.taggedValues}
-              />
+              ))}
+              {footerElement}
             </div>
           }
         >
@@ -223,3 +178,99 @@ export const QueryBuilderPropertyInfoTooltip: React.FC<{
     </ClickAwayListener>
   );
 };
+
+export const QueryBuilderPropertyInfoTooltip: React.FC<{
+  title: string;
+  property: AbstractProperty;
+  path: string;
+  isMapped: boolean;
+  children: React.ReactElement;
+  placement?: TooltipPlacement | undefined;
+  type?: Type | undefined;
+  explorerState?: QueryBuilderExplorerState | undefined;
+}> = (props) => {
+  const {
+    title,
+    property,
+    path,
+    isMapped,
+    children,
+    placement,
+    type,
+    explorerState,
+  } = props;
+
+  const data = [
+    {
+      label: 'Type',
+      value: type?.path ?? property.genericType.value.rawType.path,
+    },
+    {
+      label: 'Path',
+      value: path,
+      actionButton: explorerState ? (
+        <div className="query-builder__tooltip__item__action">
+          <button
+            onClick={() => explorerState.highlightTreeNode(path)}
+            title="Show in tree"
+          >
+            <ShareBoxIcon color="white" />
+          </button>
+        </div>
+      ) : undefined,
+    },
+    {
+      label: 'Multiplicity',
+      value: getMultiplicityDescription(property.multiplicity),
+    },
+    {
+      label: 'Derived Property',
+      value: property instanceof DerivedProperty ? 'Yes' : 'No',
+    },
+    {
+      label: 'Mapped',
+      value: isMapped ? 'Yes' : 'No',
+    },
+  ];
+
+  return (
+    <QueryBuilderBaseInfoTooltip
+      title={title}
+      data={data}
+      placement={placement}
+      footerElement={
+        <QueryBuilderTaggedValueInfoTooltip
+          taggedValues={property.taggedValues}
+        />
+      }
+    >
+      {children}
+    </QueryBuilderBaseInfoTooltip>
+  );
+};
+
+export const QueryBuilderDerivationInfoTooltip: React.FC<{
+  title: string;
+  children: React.ReactElement;
+  placement?: TooltipPlacement | undefined;
+  type?: Type | undefined;
+}> = (props) => {
+  const { title, children, placement, type } = props;
+
+  const data = [
+    {
+      label: 'Type',
+      value: type?.path ?? 'undefined',
+    },
+  ];
+
+  return (
+    <QueryBuilderBaseInfoTooltip
+      title={title}
+      data={data}
+      placement={placement}
+    >
+      {children}
+    </QueryBuilderBaseInfoTooltip>
+  );
+};

package/src/components/watermark/QueryBuilderWatermark.tsx

@@ -35,7 +35,7 @@ import {
   type ValueSpecification,
 } from '@finos/legend-graph';
 import { observer } from 'mobx-react-lite';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useDrop } from 'react-dnd';
 import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
 import type { QueryBuilderWatermarkState } from '../../stores/watermark/QueryBuilderWatermarkState.js';
@@ -45,6 +45,7 @@ import {
   type QueryBuilderVariableDragSource,
 } from '../shared/BasicValueSpecificationEditor.js';
 import { VariableSelector } from '../shared/QueryBuilderVariableSelector.js';
+import { clone, deepClone } from '@finos/legend-shared';
 
 const isParamaterCompatibleWithWaterMark = (
   parameter: VariableExpression,
@@ -54,18 +55,25 @@ const isParamaterCompatibleWithWaterMark = (
 
 const WatermarkValueEditor = observer(
   (props: {
-    watermarkValue: ValueSpecification;
+    selectedValue: ValueSpecification;
+    setSelectedValue: (val: ValueSpecification) => void;
+    handleResetValue: () => void;
     watermarkState: QueryBuilderWatermarkState;
   }) => {
-    const { watermarkValue, watermarkState } = props;
+    const {
+      selectedValue,
+      setSelectedValue,
+      handleResetValue,
+      watermarkState,
+    } = props;
 
     const graph = watermarkState.queryBuilderState.graphManagerState.graph;
 
     const handleDrop = useCallback(
       (item: QueryBuilderVariableDragSource): void => {
-        watermarkState.setValue(item.variable);
+        setSelectedValue(item.variable);
       },
-      [watermarkState],
+      [setSelectedValue],
     );
 
     const [{ isParameterValueDragOver }, dropTargetConnector] = useDrop<
@@ -101,20 +109,18 @@ const WatermarkValueEditor = observer(
             dropTargetConnector={dropTargetConnector}
           >
             <BasicValueSpecificationEditor
-              valueSpecification={watermarkValue}
+              valueSpecification={selectedValue}
               setValueSpecification={(val: ValueSpecification): void => {
-                watermarkState.setValue(val);
+                setSelectedValue(clone(val));
               }}
               graph={graph}
               obseverContext={watermarkState.queryBuilderState.observerContext}
               typeCheckOption={{
                 expectedType: PrimitiveType.STRING,
               }}
-              resetValue={(): void => {
-                watermarkState.resetValue();
-              }}
+              resetValue={handleResetValue}
               isConstant={watermarkState.queryBuilderState.constantState.isValueSpecConstant(
-                watermarkValue,
+                selectedValue,
               )}
             />
           </PanelDropZone>
@@ -127,36 +133,66 @@ const WatermarkValueEditor = observer(
 export const QueryBuilderWatermarkEditor = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
+    const applicationStore = queryBuilderState.applicationStore;
     const watermarkState = queryBuilderState.watermarkState;
-    const handleClose = (): void => {
+
+    const [selectedValue, setSelectedValue] = useState(
+      deepClone(watermarkState.value),
+    );
+
+    const handleCancel = (): void => {
       watermarkState.setIsEditingWatermark(false);
     };
 
+    const handleApply = (): void => {
+      watermarkState.setValue(selectedValue);
+      handleCancel();
+    };
+
+    const handleResetValue = (): void => {
+      setSelectedValue(watermarkState.getDefaultValue());
+    };
+
+    const toggleWatermark = (): void => {
+      if (selectedValue) {
+        setSelectedValue(undefined);
+      } else {
+        handleResetValue();
+      }
+    };
+
     return (
       <Dialog
         open={Boolean(watermarkState.isEditingWatermark)}
-        onClose={handleClose}
+        onClose={handleCancel}
         classes={{
           root: 'editor-modal__root-container',
           container: 'editor-modal__container',
           paper: 'editor-modal__content',
         }}
       >
-        <Modal darkMode={true} className="editor-modal">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="editor-modal query-builder__watermark__modal"
+        >
           <ModalHeader title="Watermark" />
           <ModalBody>
             <PanelForm>
               <PanelFormBooleanField
                 isReadOnly={false}
-                value={watermarkState.value !== undefined}
+                value={selectedValue !== undefined}
                 prompt="Enable watermark"
-                update={(): void => watermarkState.enableWatermark()}
+                update={toggleWatermark}
               />
-              {watermarkState.value && (
+              {selectedValue && (
                 <>
                   <WatermarkValueEditor
+                    selectedValue={selectedValue}
+                    setSelectedValue={setSelectedValue}
+                    handleResetValue={handleResetValue}
                     watermarkState={watermarkState}
-                    watermarkValue={watermarkState.value}
                   />
                   <PanelDivider />
                   <VariableSelector
@@ -168,7 +204,12 @@ export const QueryBuilderWatermarkEditor = observer(
             </PanelForm>
           </ModalBody>
           <ModalFooter>
-            <ModalFooterButton text="Done" onClick={handleClose} />
+            <ModalFooterButton text="Apply" onClick={handleApply} />
+            <ModalFooterButton
+              text="Cancel"
+              onClick={handleCancel}
+              type="secondary"
+            />
           </ModalFooter>
         </Modal>
       </Dialog>