Stop defaulting values to derived property/filter/post-filter panel

.changeset/afraid-flies-attack.md

@@ -0,0 +1,5 @@
+---
+'@finos/legend-query-builder': patch
+---
+
+Stop defaulting values to derived property/filter/post-filter panel

packages/legend-query-builder/src/components/fetch-structure/QueryBuilderPostFilterPanel.tsx

@@ -46,12 +46,14 @@ import {
   MoreVerticalIcon,
   MenuContentItemIcon,
   MenuContentItemLabel,
+  ExclamationTriangleIcon,
 } from '@finos/legend-art';
 import {
   type ValueSpecification,
   Class,
   Enumeration,
   PrimitiveType,
+  InstanceValue,
 } from '@finos/legend-graph';
 import {
   assertErrorThrown,
@@ -82,7 +84,10 @@ import {
 } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
 import { QUERY_BUILDER_TEST_ID } from '../../__lib__/QueryBuilderTesting.js';
-import { isTypeCompatibleForAssignment } from '../../stores/QueryBuilderValueSpecificationHelper.js';
+import {
+  isTypeCompatibleForAssignment,
+  isValidInstanceValue,
+} from '../../stores/QueryBuilderValueSpecificationHelper.js';
 import { QUERY_BUILDER_GROUP_OPERATION } from '../../stores/QueryBuilderGroupOperationHelper.js';
 import { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import {
@@ -100,6 +105,7 @@ import {
 } from '../../stores/fetch-structure/tds/window/QueryBuilderWindowState.js';
 import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState.js';
 import { QueryBuilderTelemetryHelper } from '../../__lib__/QueryBuilderTelemetryHelper.js';
+import { QueryBuilderPanelIssueCountBadge } from '../shared/QueryBuilderPanelIssueCountBadge.js';
 
 const QueryBuilderPostFilterConditionContextMenu = observer(
   forwardRef<
@@ -366,6 +372,9 @@ const QueryBuilderPostFilterConditionEditor = observer(
       reloadValues: debouncedTypeaheadSearch,
       cleanUpReloadValues,
     };
+    const isPostFilterValueInValid =
+      node.condition.value instanceof InstanceValue &&
+      !isValidInstanceValue(node.condition.value);
 
     const { showDroppableSuggestion } = useDragLayer((monitor) => ({
       showDroppableSuggestion:
@@ -454,6 +463,11 @@ const QueryBuilderPostFilterConditionEditor = observer(
                     )}
                   />
                 </PanelEntryDropZonePlaceholder>
+                {isPostFilterValueInValid && (
+                  <div className="query-builder-post-filter-tree__condition-node__error--icon">
+                    <ExclamationTriangleIcon />
+                  </div>
+                )}
               </div>
             )}
           </div>
@@ -971,6 +985,11 @@ const QueryBuilderPostFilterPanelContent = observer(
         <div className="panel__header">
           <div className="panel__header__title">
             <div className="panel__header__title__label">post-filter</div>
+            {postFilterState.allValidationIssues.length !== 0 && (
+              <QueryBuilderPanelIssueCountBadge
+                issues={postFilterState.allValidationIssues}
+              />
+            )}
           </div>
           <div className="panel__header__actions">
             <DropdownMenu

packages/legend-query-builder/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -45,6 +45,7 @@ import {
   MoreVerticalIcon,
   MenuContentItemIcon,
   MenuContentItemLabel,
+  ExclamationTriangleIcon,
 } from '@finos/legend-art';
 import {
   type QueryBuilderFilterConditionDragSource,
@@ -72,21 +73,25 @@ import {
 } from '@finos/legend-shared';
 import { QUERY_BUILDER_TEST_ID } from '../../__lib__/QueryBuilderTesting.js';
 import { useApplicationStore } from '@finos/legend-application';
-import type { ValueSpecification } from '@finos/legend-graph';
+import { InstanceValue, type ValueSpecification } from '@finos/legend-graph';
 import {
   type QueryBuilderProjectionColumnDragSource,
   QueryBuilderSimpleProjectionColumnState,
   QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
 } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import type { QueryBuilderFilterOperator } from '../../stores/filter/QueryBuilderFilterOperator.js';
-import { isTypeCompatibleForAssignment } from '../../stores/QueryBuilderValueSpecificationHelper.js';
+import {
+  isTypeCompatibleForAssignment,
+  isValidInstanceValue,
+} from '../../stores/QueryBuilderValueSpecificationHelper.js';
 import { QUERY_BUILDER_GROUP_OPERATION } from '../../stores/QueryBuilderGroupOperationHelper.js';
 import {
   BasicValueSpecificationEditor,
   type QueryBuilderVariableDragSource,
   QUERY_BUILDER_VARIABLE_DND_TYPE,
 } from '../shared/BasicValueSpecificationEditor.js';
 import { QueryBuilderTelemetryHelper } from '../../__lib__/QueryBuilderTelemetryHelper.js';
+import { QueryBuilderPanelIssueCountBadge } from '../shared/QueryBuilderPanelIssueCountBadge.js';
 
 export const IS_DRAGGABLE_FILTER_DND_TYPES_FETCH_SUPPORTED = [
   QUERY_BUILDER_FILTER_DND_TYPE.CONDITION,
@@ -231,7 +236,6 @@ const QueryBuilderFilterConditionEditor = observer(
       reloadValues: debouncedTypeaheadSearch,
       cleanUpReloadValues,
     };
-
     const { showDroppableSuggestion } = useDragLayer((monitor) => ({
       showDroppableSuggestion:
         monitor.isDragging() &&
@@ -240,7 +244,9 @@ const QueryBuilderFilterConditionEditor = observer(
           : IS_DRAGGABLE_FILTER_DND_TYPES
         ).includes(monitor.getItemType()?.toString() ?? ''),
     }));
-
+    const isFilterValueInValid =
+      node.condition.value instanceof InstanceValue &&
+      !isValidInstanceValue(node.condition.value);
     return (
       <div className="query-builder-filter-tree__node__label__content dnd__entry__container">
         {showDroppableSuggestion && (
@@ -323,6 +329,11 @@ const QueryBuilderFilterConditionEditor = observer(
                     )}
                   />
                 </PanelEntryDropZonePlaceholder>
+                {isFilterValueInValid && (
+                  <div className="query-builder-filter-tree__condition-node__error--icon">
+                    <ExclamationTriangleIcon />
+                  </div>
+                )}
               </div>
             )}
           </div>
@@ -906,6 +917,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">

packages/legend-query-builder/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -33,6 +33,7 @@ import {
   BasePopover,
   PanelFormSection,
   CalculateIcon,
+  type SelectComponent,
 } 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';
@@ -227,6 +229,8 @@ const StringPrimitiveInstanceValueEditor = observer(
       selectorConfig,
       obseverContext,
     } = props;
+    const inputRef = useRef<HTMLInputElement>(null);
+    const selectorRef = useRef<SelectComponent>(null);
     const useSelector = Boolean(selectorConfig);
     const applicationStore = useApplicationStore();
     const value = valueSpecification.values[0] as string;
@@ -277,10 +281,19 @@ const StringPrimitiveInstanceValueEditor = observer(
     const noOptionsMessage =
       selectorConfig?.values === undefined ? (): null => null : undefined;
 
+    useEffect(() => {
+      if (useSelector) {
+        selectorRef.current?.focus();
+      } else {
+        inputRef.current?.focus();
+      }
+    }, [useSelector]);
+
     return (
       <div className={clsx('value-spec-editor', className)}>
         {useSelector ? (
           <CustomSelectorInput
+            ref={selectorRef}
             className="value-spec-editor__enum-selector"
             options={queryOptions}
             onChange={changeValue}
@@ -300,6 +313,7 @@ const StringPrimitiveInstanceValueEditor = observer(
           />
         ) : (
           <input
+            ref={inputRef}
             className="panel__content__form__section__input value-spec-editor__input"
             spellCheck={false}
             value={value}
@@ -380,20 +394,24 @@ const NumberPrimitiveInstanceValueEditor = observer(
       obseverContext,
     } = props;
     const [value, setValue] = useState(
-      (valueSpecification.values[0] as number).toString(),
+      valueSpecification.values[0] !== undefined
+        ? (valueSpecification.values[0] as number).toString()
+        : '',
     );
     const inputRef = useRef<HTMLInputElement>(null);
-    const numericValue = isInteger
-      ? Number.parseInt(Number(value).toString(), 10)
-      : Number(value);
+    const numericValue = value
+      ? isInteger
+        ? Number.parseInt(Number(value).toString(), 10)
+        : Number(value)
+      : undefined;
 
     const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
       setValue(event.target.value);
     };
 
     // Support expression evaluation
     const calculateExpression = (): void => {
-      if (isNaN(numericValue)) {
+      if (value && numericValue !== undefined && isNaN(numericValue)) {
         try {
           const calculatedValue = guaranteeIsNumber(evaluate(value));
           setValue(
@@ -405,7 +423,7 @@ const NumberPrimitiveInstanceValueEditor = observer(
           setValue((valueSpecification.values[0] as number).toString());
         }
       } else {
-        setValue(numericValue.toString());
+        setValue(numericValue ? numericValue.toString() : '');
       }
     };
 
@@ -419,11 +437,14 @@ const NumberPrimitiveInstanceValueEditor = observer(
     };
 
     useEffect(() => {
-      setValue((valueSpecification.values[0] as number).toString());
+      valueSpecification.values[0] !== undefined
+        ? setValue((valueSpecification.values[0] as number).toString())
+        : setValue('');
     }, [valueSpecification]);
 
     useEffect(() => {
       if (
+        numericValue !== undefined &&
         !isNaN(numericValue) &&
         numericValue !== valueSpecification.values[0]
       ) {
@@ -434,6 +455,12 @@ const NumberPrimitiveInstanceValueEditor = observer(
           obseverContext,
         );
         setValueSpecification(valueSpecification);
+      } else if (
+        numericValue === undefined &&
+        numericValue !== valueSpecification.values[0]
+      ) {
+        instanceValue_setValues(valueSpecification, [], obseverContext);
+        setValueSpecification(valueSpecification);
       }
     }, [
       numericValue,
@@ -442,6 +469,10 @@ const NumberPrimitiveInstanceValueEditor = observer(
       obseverContext,
     ]);
 
+    useEffect(() => {
+      inputRef.current?.focus();
+    }, []);
+
     return (
       <div className={clsx('value-spec-editor', className)}>
         <div className="value-spec-editor__number__input-container">
@@ -493,9 +524,13 @@ const EnumValueInstanceValueEditor = observer(
       setValueSpecification,
       obseverContext,
     } = props;
-    const enumValueRef = guaranteeNonNullable(valueSpecification.values[0]);
-    const enumValue = enumValueRef.value;
-    const options = enumValue._OWNER.values.map((value) => ({
+    const selectorRef = useRef<SelectComponent>(null);
+    const enumValueRef = valueSpecification.values[0];
+    const enumValue = enumValueRef?.value;
+    const options = guaranteeType(
+      valueSpecification.genericType?.ownerReference.value,
+      Enumeration,
+    ).values.map((value) => ({
       label: value.name,
       value: value,
     }));
@@ -509,13 +544,18 @@ const EnumValueInstanceValueEditor = observer(
       setValueSpecification(valueSpecification);
     };
 
+    useEffect(() => {
+      selectorRef.current?.focus();
+    }, []);
+
     return (
       <div className={clsx('value-spec-editor', className)}>
         <CustomSelectorInput
+          ref={selectorRef}
           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={true}
         />
         <button
@@ -667,7 +707,7 @@ const CollectionValueInstanceValueEditor = observer(
     } = props;
     const inputRef = useRef<HTMLInputElement>(null);
     const [text, setText] = useState(stringifyValue(valueSpecification.values));
-    const [editable, setEditable] = useState(false);
+    const [editable, setEditable] = useState(true);
     const [showAdvancedEditorPopover, setShowAdvancedEditorPopover] =
       useState(false);
     const valueText = stringifyValue(valueSpecification.values);