@finos/legend-query-builder 4.14.34 → 4.14.36

package/src/components/shared/CustomDatePicker.tsx

@@ -19,6 +19,7 @@ import {
   BasePopover,
   BaseRadioGroup,
   CustomSelectorInput,
+  clsx,
 } from '@finos/legend-art';
 import {
   type PureModel,
@@ -541,14 +542,14 @@ const buildCustomDateOptionDurationValue = (
   return durationParam instanceof PrimitiveInstanceValue
     ? (durationParam.values[0] as number)
     : durationParam instanceof SimpleFunctionExpression &&
-      matchFunctionName(
-        durationParam.functionName,
-        QUERY_BUILDER_SUPPORTED_FUNCTIONS.MINUS,
-      )
-    ? durationParam.parametersValues[0] instanceof PrimitiveInstanceValue
-      ? (durationParam.parametersValues[0].values[0] as number)
-      : 0
-    : 0;
+        matchFunctionName(
+          durationParam.functionName,
+          QUERY_BUILDER_SUPPORTED_FUNCTIONS.MINUS,
+        )
+      ? durationParam.parametersValues[0] instanceof PrimitiveInstanceValue
+        ? (durationParam.parametersValues[0].values[0] as number)
+        : 0
+      : 0;
 };
 
 /**
@@ -713,9 +714,10 @@ export const buildDatePickerOption = (
         );
       case QUERY_BUILDER_SUPPORTED_FUNCTIONS.PREVIOUS_DAY_OF_WEEK:
         return new CustomPreviousDayOfWeekOption(
-          `Previous ${(
-            valueSpecification.parametersValues[0] as EnumValueInstanceValue
-          ).values[0]?.value.name}`,
+          `Previous ${
+            (valueSpecification.parametersValues[0] as EnumValueInstanceValue)
+              .values[0]?.value.name
+          }`,
           (valueSpecification.parametersValues[0] as EnumValueInstanceValue)
             .values[0]?.value.name as CUSTOM_DATE_DAY_OF_WEEK,
         );
@@ -732,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,
         );
   }
 };
@@ -759,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,
   ) => {
@@ -811,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>
@@ -836,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,
   ) => {
@@ -892,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>
@@ -1224,6 +1228,7 @@ export const CustomDatePicker: React.FC<{
   valueSpecification: PrimitiveInstanceValue | SimpleFunctionExpression;
   graph: PureModel;
   observerContext: ObserverContext;
+  hasError?: boolean;
   typeCheckOption: {
     expectedType: Type;
     /**
@@ -1246,6 +1251,7 @@ export const CustomDatePicker: React.FC<{
     setValueSpecification,
     graph,
     observerContext,
+    hasError,
     typeCheckOption,
   } = props;
   const applicationStore = useApplicationStore();
@@ -1403,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 =

package/src/components/workflows/ClassQueryBuilder.tsx

@@ -16,9 +16,8 @@
 
 import {
   CustomSelectorInput,
+  PanelHeader,
   createFilter,
-  PURE_MappingIcon,
-  PURE_RuntimeIcon,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import {
@@ -70,7 +69,9 @@ const ClassQueryBuilderSetupPanelContent = observer(
             queryBuilderState.graphManagerState.usableMappings,
           )
         : []
-    ).map(buildElementOption);
+    )
+      .map(buildElementOption)
+      .sort((a, b) => a.label.localeCompare(b.label));
     const selectedMappingOption = queryBuilderState.executionContextState
       .mapping
       ? buildElementOption(queryBuilderState.executionContextState.mapping)
@@ -105,7 +106,8 @@ const ClassQueryBuilderSetupPanelContent = observer(
         (rt) =>
           new RuntimePointer(PackageableElementExplicitReference.create(rt)),
       )
-      .map(buildRuntimeValueOption);
+      .map(buildRuntimeValueOption)
+      .sort((a, b) => a.label.localeCompare(b.label));
     const selectedRuntimeOption = queryBuilderState.executionContextState
       .runtimeValue
       ? buildRuntimeValueOption(
@@ -128,83 +130,83 @@ const ClassQueryBuilderSetupPanelContent = observer(
     });
 
     return (
-      <>
-        <QueryBuilderClassSelector
-          queryBuilderState={queryBuilderState}
-          classes={classes}
-          onClassChange={onClassChange}
-        />
-        <div className="query-builder__setup__config-group">
-          <div className="query-builder__setup__config-group__header">
-            <div className="query-builder__setup__config-group__header__title">
-              execution context
-            </div>
-          </div>
-          <div className="query-builder__setup__config-group__content">
-            <div className="query-builder__setup__config-group__item">
-              <div
-                className="btn--sm query-builder__setup__config-group__item__label"
-                title="mapping"
-              >
-                <PURE_MappingIcon />
-              </div>
-              <CustomSelectorInput
-                className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
-                placeholder={
-                  mappingOptions.length
-                    ? 'Choose a mapping...'
-                    : 'No compatible mapping found for class'
-                }
-                noMatchMessage="No compatible mapping found for specified class"
-                disabled={!queryBuilderState.class}
-                options={mappingOptions}
-                onChange={changeMapping}
-                value={selectedMappingOption}
-                darkMode={
+      <div className="query-builder__setup__config-group">
+        <PanelHeader title="properties" />
+        <div className="query-builder__setup__config-group__content">
+          <div className="query-builder__setup__config-group__item">
+            <label
+              className="btn--sm query-builder__setup__config-group__item__label"
+              title="mapping"
+              htmlFor="query-builder__setup__mapping-selector"
+            >
+              Mapping
+            </label>
+            <CustomSelectorInput
+              inputId="query-builder__setup__mapping-selector"
+              className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
+              placeholder={
+                mappingOptions.length
+                  ? 'Choose a mapping...'
+                  : 'No compatible mapping found for class'
+              }
+              noMatchMessage="No compatible mapping found for specified class"
+              disabled={!queryBuilderState.class}
+              options={mappingOptions}
+              onChange={changeMapping}
+              value={selectedMappingOption}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
+              filterOption={mappingFilterOption}
+              formatOptionLabel={getPackageableElementOptionFormatter({
+                darkMode:
                   !applicationStore.layoutService
-                    .TEMPORARY__isLightColorThemeEnabled
-                }
-                filterOption={mappingFilterOption}
-                formatOptionLabel={getPackageableElementOptionFormatter({
-                  darkMode:
-                    !applicationStore.layoutService
-                      .TEMPORARY__isLightColorThemeEnabled,
-                })}
-              />
-            </div>
-            <div className="query-builder__setup__config-group__item">
-              <div
-                className="btn--sm query-builder__setup__config-group__item__label"
-                title="runtime"
-              >
-                <PURE_RuntimeIcon />
-              </div>
-              <CustomSelectorInput
-                className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
-                placeholder="Choose a runtime..."
-                noMatchMessage="No compatible runtime found for specified mapping"
-                disabled={
-                  !queryBuilderState.class ||
-                  !queryBuilderState.executionContextState.mapping
-                }
-                options={runtimeOptions}
-                onChange={changeRuntime}
-                value={selectedRuntimeOption}
-                darkMode={
+                    .TEMPORARY__isLightColorThemeEnabled,
+              })}
+            />
+          </div>
+          <div className="query-builder__setup__config-group__item">
+            <label
+              className="btn--sm query-builder__setup__config-group__item__label"
+              title="runtime"
+              htmlFor="query-builder__setup__runtime-selector"
+            >
+              Runtime
+            </label>
+            <CustomSelectorInput
+              inputId="query-builder__setup__runtime-selector"
+              className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
+              placeholder="Choose a runtime..."
+              noMatchMessage="No compatible runtime found for specified mapping"
+              disabled={
+                !queryBuilderState.class ||
+                !queryBuilderState.executionContextState.mapping
+              }
+              options={runtimeOptions}
+              onChange={changeRuntime}
+              value={selectedRuntimeOption}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
+              filterOption={runtimeFilterOption}
+              formatOptionLabel={getRuntimeOptionFormatter({
+                darkMode:
                   !applicationStore.layoutService
-                    .TEMPORARY__isLightColorThemeEnabled
-                }
-                filterOption={runtimeFilterOption}
-                formatOptionLabel={getRuntimeOptionFormatter({
-                  darkMode:
-                    !applicationStore.layoutService
-                      .TEMPORARY__isLightColorThemeEnabled,
-                })}
-              />
-            </div>
+                    .TEMPORARY__isLightColorThemeEnabled,
+              })}
+            />
+          </div>
+          <div className="query-builder__setup__config-group__item">
+            <QueryBuilderClassSelector
+              queryBuilderState={queryBuilderState}
+              classes={classes}
+              onClassChange={onClassChange}
+            />
           </div>
         </div>
-      </>
+      </div>
     );
   },
 );

package/src/components/workflows/MappingQueryBuilder.tsx

@@ -16,9 +16,8 @@
 
 import {
   CustomSelectorInput,
+  PanelHeader,
   createFilter,
-  PURE_MappingIcon,
-  PURE_RuntimeIcon,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import {
@@ -58,10 +57,9 @@ const MappingQueryBuilderSetupPanelContent = observer(
     const applicationStore = useApplicationStore();
 
     // mapping
-    const mappingOptions =
-      queryBuilderState.graphManagerState.usableMappings.map(
-        buildElementOption,
-      );
+    const mappingOptions = queryBuilderState.graphManagerState.usableMappings
+      .map(buildElementOption)
+      .sort((a, b) => a.label.localeCompare(b.label));
     const selectedMappingOption = queryBuilderState.executionContextState
       .mapping
       ? buildElementOption(queryBuilderState.executionContextState.mapping)
@@ -94,7 +92,8 @@ const MappingQueryBuilderSetupPanelContent = observer(
         (rt) =>
           new RuntimePointer(PackageableElementExplicitReference.create(rt)),
       )
-      .map(buildRuntimeValueOption);
+      .map(buildRuntimeValueOption)
+      .sort((a, b) => a.label.localeCompare(b.label));
     const selectedRuntimeOption = queryBuilderState.executionContextState
       .runtimeValue
       ? buildRuntimeValueOption(
@@ -125,79 +124,79 @@ const MappingQueryBuilderSetupPanelContent = observer(
       : [];
 
     return (
-      <>
-        <div className="query-builder__setup__config-group">
-          <div className="query-builder__setup__config-group__header">
-            <div className="query-builder__setup__config-group__header__title">
-              execution context
-            </div>
-          </div>
-          <div className="query-builder__setup__config-group__content">
-            <div className="query-builder__setup__config-group__item">
-              <div
-                className="btn--sm query-builder__setup__config-group__item__label"
-                title="mapping"
-              >
-                <PURE_MappingIcon />
-              </div>
-              <CustomSelectorInput
-                className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
-                placeholder={
-                  mappingOptions.length
-                    ? 'Choose a mapping...'
-                    : 'No mapping found'
-                }
-                noMatchMessage="No mapping found"
-                options={mappingOptions}
-                onChange={changeMapping}
-                value={selectedMappingOption}
-                darkMode={
+      <div className="query-builder__setup__config-group">
+        <PanelHeader title="properties" />
+        <div className="query-builder__setup__config-group__content">
+          <div className="query-builder__setup__config-group__item">
+            <label
+              className="btn--sm query-builder__setup__config-group__item__label"
+              title="mapping"
+              htmlFor="query-builder__setup__mapping-selector"
+            >
+              Mapping
+            </label>
+            <CustomSelectorInput
+              inputId="query-builder__setup__mapping-selector"
+              className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
+              placeholder={
+                mappingOptions.length
+                  ? 'Choose a mapping...'
+                  : 'No mapping found'
+              }
+              noMatchMessage="No mapping found"
+              options={mappingOptions}
+              onChange={changeMapping}
+              value={selectedMappingOption}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
+              filterOption={mappingFilterOption}
+              formatOptionLabel={getPackageableElementOptionFormatter({
+                darkMode:
                   !applicationStore.layoutService
-                    .TEMPORARY__isLightColorThemeEnabled
-                }
-                filterOption={mappingFilterOption}
-                formatOptionLabel={getPackageableElementOptionFormatter({
-                  darkMode:
-                    !applicationStore.layoutService
-                      .TEMPORARY__isLightColorThemeEnabled,
-                })}
-              />
-            </div>
-            <div className="query-builder__setup__config-group__item">
-              <div
-                className="btn--sm query-builder__setup__config-group__item__label"
-                title="runtime"
-              >
-                <PURE_RuntimeIcon />
-              </div>
-              <CustomSelectorInput
-                className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
-                placeholder="Choose a runtime..."
-                noMatchMessage="No compatible runtime found for specified mapping"
-                disabled={!queryBuilderState.executionContextState.mapping}
-                options={runtimeOptions}
-                onChange={changeRuntime}
-                value={selectedRuntimeOption}
-                darkMode={
+                    .TEMPORARY__isLightColorThemeEnabled,
+              })}
+            />
+          </div>
+          <div className="query-builder__setup__config-group__item">
+            <label
+              className="btn--sm query-builder__setup__config-group__item__label"
+              title="runtime"
+              htmlFor="query-builder__setup__runtime-selector"
+            >
+              Runtime
+            </label>
+            <CustomSelectorInput
+              inputId="query-builder__setup__runtime-selector"
+              className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
+              placeholder="Choose a runtime..."
+              noMatchMessage="No compatible runtime found for specified mapping"
+              disabled={!queryBuilderState.executionContextState.mapping}
+              options={runtimeOptions}
+              onChange={changeRuntime}
+              value={selectedRuntimeOption}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
+              filterOption={runtimeFilterOption}
+              formatOptionLabel={getRuntimeOptionFormatter({
+                darkMode:
                   !applicationStore.layoutService
-                    .TEMPORARY__isLightColorThemeEnabled
-                }
-                filterOption={runtimeFilterOption}
-                formatOptionLabel={getRuntimeOptionFormatter({
-                  darkMode:
-                    !applicationStore.layoutService
-                      .TEMPORARY__isLightColorThemeEnabled,
-                })}
-              />
-            </div>
+                    .TEMPORARY__isLightColorThemeEnabled,
+              })}
+            />
+          </div>
+          <div className="query-builder__setup__config-group__item">
+            <QueryBuilderClassSelector
+              queryBuilderState={queryBuilderState}
+              classes={classes}
+              noMatchMessage="No compatible entity found for specified mapping"
+            />
           </div>
         </div>
-        <QueryBuilderClassSelector
-          queryBuilderState={queryBuilderState}
-          classes={classes}
-          noMatchMessage="No compatible class found for specified mapping"
-        />
-      </>
+      </div>
     );
   },
 );