@finos/legend-query-builder 4.14.35 → 4.14.37

package/src/components/shared/CustomDatePicker.tsx

@@ -19,6 +19,7 @@ import {
   BasePopover,
   BaseRadioGroup,
   CustomSelectorInput,
+  clsx,
 } from '@finos/legend-art';
 import {
   type PureModel,
@@ -733,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,
         );
   }
 };
@@ -760,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,
   ) => {
@@ -812,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>
@@ -837,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,
   ) => {
@@ -893,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>
@@ -1225,6 +1228,7 @@ export const CustomDatePicker: React.FC<{
   valueSpecification: PrimitiveInstanceValue | SimpleFunctionExpression;
   graph: PureModel;
   observerContext: ObserverContext;
+  hasError?: boolean;
   typeCheckOption: {
     expectedType: Type;
     /**
@@ -1247,6 +1251,7 @@ export const CustomDatePicker: React.FC<{
     setValueSpecification,
     graph,
     observerContext,
+    hasError,
     typeCheckOption,
   } = props;
   const applicationStore = useApplicationStore();
@@ -1404,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>
     );
   },
 );

package/src/components/workflows/ServiceQueryBuilder.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { CustomSelectorInput, PlayIcon, RobotIcon } from '@finos/legend-art';
+import { CustomSelectorInput, PanelHeader } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { getMappingCompatibleClasses, type Service } from '@finos/legend-graph';
 import { useApplicationStore } from '@finos/legend-application';
@@ -55,7 +55,9 @@ const ServiceQueryBuilderSetupPanelContent = observer(
 
     // execution context
     const serviceOptions =
-      queryBuilderState.usableServices?.map(buildElementOption) ?? [];
+      queryBuilderState.usableServices
+        ?.map(buildElementOption)
+        .sort((a, b) => a.label.localeCompare(b.label)) ?? [];
     const selectedServiceOption = buildElementOption(queryBuilderState.service);
     const onServiceOptionChange = (
       option: PackageableElementOption<Service>,
@@ -67,9 +69,9 @@ const ServiceQueryBuilderSetupPanelContent = observer(
     };
 
     // execution context
-    const executionContextOptions = queryBuilderState.executionContexts.map(
-      buildExecutionContextOption,
-    );
+    const executionContextOptions = queryBuilderState.executionContexts
+      .map(buildExecutionContextOption)
+      .sort((a, b) => a.label.localeCompare(b.label));
     const selectedExecutionContextOption =
       queryBuilderState.selectedExecutionContext
         ? buildExecutionContextOption(
@@ -96,75 +98,74 @@ const ServiceQueryBuilderSetupPanelContent = 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">
-              service execution context
-            </div>
+      <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="service"
+              htmlFor="query-builder__setup__service-selector"
+            >
+              Service
+            </label>
+            <CustomSelectorInput
+              inputId="query-builder__setup__service-selector"
+              className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
+              placeholder="Choose a service..."
+              options={serviceOptions}
+              disabled={
+                serviceOptions.length < 1 ||
+                (serviceOptions.length === 1 && Boolean(selectedServiceOption))
+              }
+              onChange={onServiceOptionChange}
+              value={selectedServiceOption}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
+            />
           </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="service"
-              >
-                <RobotIcon className="query-builder__setup__service__icon__service" />
+          {/* We will display mapping and runtime selector for single-execution and execution context for multi-execution */}
+          {Boolean(queryBuilderState.executionContexts.length) && (
+            <>
+              <div className="query-builder__setup__config-group__item">
+                <label
+                  className="btn--sm query-builder__setup__config-group__item__label"
+                  title="execution context"
+                  htmlFor="query-builder__setup__context-selector"
+                >
+                  Context
+                </label>
+                <CustomSelectorInput
+                  inputId="query-builder__setup__context-selector"
+                  className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
+                  placeholder="Choose an execution context..."
+                  options={executionContextOptions}
+                  disabled={
+                    executionContextOptions.length < 1 ||
+                    (executionContextOptions.length === 1 &&
+                      Boolean(selectedExecutionContextOption))
+                  }
+                  onChange={onExecutionContextOptionChange}
+                  value={selectedExecutionContextOption}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
+                />
               </div>
-              <CustomSelectorInput
-                className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
-                placeholder="Choose a service..."
-                options={serviceOptions}
-                disabled={
-                  serviceOptions.length < 1 ||
-                  (serviceOptions.length === 1 &&
-                    Boolean(selectedServiceOption))
-                }
-                onChange={onServiceOptionChange}
-                value={selectedServiceOption}
-                darkMode={
-                  !applicationStore.layoutService
-                    .TEMPORARY__isLightColorThemeEnabled
-                }
-              />
-            </div>
-            {/* We will display mapping and runtime selector for single-execution and execution context for multi-execution */}
-            {Boolean(queryBuilderState.executionContexts.length) && (
-              <>
-                <div className="query-builder__setup__config-group__item">
-                  <div
-                    className="btn--sm query-builder__setup__config-group__item__label"
-                    title="execution context"
-                  >
-                    <PlayIcon className="query-builder__setup__service__icon__execution-context" />
-                  </div>
-                  <CustomSelectorInput
-                    className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
-                    placeholder="Choose an execution context..."
-                    options={executionContextOptions}
-                    disabled={
-                      executionContextOptions.length < 1 ||
-                      (executionContextOptions.length === 1 &&
-                        Boolean(selectedExecutionContextOption))
-                    }
-                    onChange={onExecutionContextOptionChange}
-                    value={selectedExecutionContextOption}
-                    darkMode={
-                      !applicationStore.layoutService
-                        .TEMPORARY__isLightColorThemeEnabled
-                    }
-                  />
-                </div>
-              </>
-            )}
+            </>
+          )}
+          <div className="query-builder__setup__config-group__item">
+            <QueryBuilderClassSelector
+              queryBuilderState={queryBuilderState}
+              classes={classes}
+              noMatchMessage="No compatible entity found for specified execution context"
+            />
           </div>
         </div>
-        <QueryBuilderClassSelector
-          queryBuilderState={queryBuilderState}
-          classes={classes}
-          noMatchMessage="No compatible class found for specified execution context"
-        />
-      </>
+      </div>
     );
   },
 );