@finos/legend-query-builder 4.14.16 → 4.14.19

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>

package/src/stores/QueryBuilderConstantsState.ts

@@ -45,6 +45,7 @@ import {
   changeEntry,
   assertTrue,
   ActionState,
+  deepClone,
 } from '@finos/legend-shared';
 import { action, makeObservable, observable } from 'mobx';
 import { QUERY_BUILDER_STATE_HASH_STRUCTURE } from './QueryBuilderStateHashUtils.js';
@@ -386,3 +387,14 @@ export class QueryBuilderConstantsState implements Hashable {
     ]);
   }
 }
+
+export const cloneQueryBuilderConstantLambdaEditorState = (
+  state: QueryBuilderConstantLambdaEditorState,
+): QueryBuilderConstantLambdaEditorState => {
+  const clonedState = new QueryBuilderConstantLambdaEditorState(
+    deepClone(state.calculatedState),
+  );
+  clonedState.lambdaString = state.lambdaString;
+  clonedState.parserError = deepClone(state.parserError);
+  return clonedState;
+};

package/src/stores/QueryBuilder_LegendApplicationPlugin_Extension.ts

@@ -53,6 +53,10 @@ export type QueryChatRenderer = (
   queryBuilderState: QueryBuilderState,
 ) => React.ReactNode;
 
+export type TemplateQueryPanelContentRenderer = (
+  queryBuilderState: QueryBuilderState,
+) => React.ReactNode;
+
 export interface QueryBuilder_LegendApplicationPlugin_Extension
   extends LegendApplicationPlugin {
   /**
@@ -79,4 +83,9 @@ export interface QueryBuilder_LegendApplicationPlugin_Extension
    * Get the list of query chat configurations
    */
   getExtraQueryChatRenderers?(): QueryChatRenderer[];
+
+  /**
+   * Get the list of template query panel content render
+   */
+  getExtraTemplateQueryPanelContentRenderer?(): TemplateQueryPanelContentRenderer[];
 }

package/src/stores/watermark/QueryBuilderWatermarkState.ts

@@ -39,8 +39,6 @@ export class QueryBuilderWatermarkState implements Hashable {
       value: observable,
       isEditingWatermark: observable,
       setValue: action,
-      resetValue: action,
-      enableWatermark: action,
       setIsEditingWatermark: action,
       hashCode: computed,
     });
@@ -48,7 +46,7 @@ export class QueryBuilderWatermarkState implements Hashable {
     this.queryBuilderState = queryBuilderState;
   }
 
-  resetValue(): void {
+  getDefaultValue(): ValueSpecification {
     const watermarkConstant = new PrimitiveInstanceValue(
       GenericTypeExplicitReference.create(
         new GenericType(PrimitiveType.STRING),
@@ -56,21 +54,13 @@ export class QueryBuilderWatermarkState implements Hashable {
     );
 
     watermarkConstant.values = ['watermarkValue'];
-    this.setValue(watermarkConstant);
+    return watermarkConstant;
   }
 
   setIsEditingWatermark(val: boolean): void {
     this.isEditingWatermark = val;
   }
 
-  enableWatermark(): void {
-    if (this.value) {
-      this.setValue(undefined);
-    } else {
-      this.resetValue();
-    }
-  }
-
   setValue(val: ValueSpecification | undefined): void {
     this.value = val
       ? observe_ValueSpecification(val, this.queryBuilderState.observerContext)