@finos/legend-query-builder 4.14.35 → 4.14.36

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>
     );
   },
 );

package/src/index.ts

@@ -21,6 +21,7 @@ export * from './__lib__/QueryBuilderEvent.js';
 export { QueryBuilder_GraphManagerPreset } from './graph-manager/QueryBuilder_GraphManagerPreset.js';
 export { QueryBuilderConfig } from './graph-manager/QueryBuilderConfig.js';
 export { QUERY_BUILDER_TEST_ID } from './__lib__/QueryBuilderTesting.js';
+export { dragAndDrop } from './components/__test-utils__/QueryBuilderComponentTestUtils.js';
 export {
   type CheckEntitlementEditorRender,
   QueryBuilder_LegendApplicationPlugin,
@@ -29,8 +30,8 @@ export { QueryBuilderNavigationBlocker } from './components/QueryBuilderNavigati
 export { QueryBuilder } from './components/QueryBuilder.js';
 export { QUERY_BUILDER_COMPONENT_ELEMENT_ID } from './components/QueryBuilderComponentElement.js';
 export {
-  QueryBuilderState,
   type QuerySDLC,
+  QueryBuilderState,
 } from './stores/QueryBuilderState.js';
 export {
   getTDSColumnDerivedProperyFromType,

package/src/stores/QueryBuilderConstantsState.ts

@@ -131,6 +131,8 @@ export class QueryBuilderSimpleConstantExpressionState
           this.queryBuilderState.graphManagerState.graph,
           type,
           this.queryBuilderState.observerContext,
+          this.queryBuilderState
+            .INTERNAL__enableInitializingDefaultSimpleExpressionValue,
         );
         this.setValueSpec(valSpec);
       } catch (error) {