@finos/legend-query-builder 4.14.34 → 4.14.36

package/src/components/QueryBuilderSideBar.tsx

@@ -18,11 +18,9 @@ import {
   CustomSelectorInput,
   createFilter,
   CogIcon,
-  PURE_ClassIcon,
-  PURE_MappingIcon,
-  PURE_RuntimeIcon,
   ClockIcon,
   clsx,
+  PanelHeader,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
@@ -75,7 +73,7 @@ export const getParameterValue = (
 const generateClassLabel = (
   val: Class,
   queryBuilderState: QueryBuilderState,
-): string | React.ReactNode => {
+): React.ReactNode => {
   const milestoneStereotype = getMilestoneTemporalStereotype(
     val,
     queryBuilderState.graphManagerState.graph,
@@ -132,10 +130,12 @@ export const QueryBuilderClassSelector = observer(
         option.value.path,
     });
 
-    const classOptions = classes.map((_class) => ({
-      value: _class,
-      label: generateClassLabel(_class, queryBuilderState),
-    }));
+    const classOptions = classes
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map((_class) => ({
+        value: _class,
+        label: generateClassLabel(_class, queryBuilderState),
+      }));
     const selectedClassOption = queryBuilderState.class
       ? {
           value: queryBuilderState.class,
@@ -156,257 +156,57 @@ export const QueryBuilderClassSelector = observer(
 
     return (
       <div className="query-builder__setup__config-group query-builder__setup__config-group--class">
-        <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="class"
-            >
-              <PURE_ClassIcon />
-            </div>
-            <CustomSelectorInput
-              className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector query-builder__setup__config-group__item__selector__milestoned"
-              placeholder={
-                classOptions.length
-                  ? 'Choose a class...'
-                  : noMatchMessage ?? 'No class found'
-              }
-              disabled={
-                classOptions.length < 1 ||
-                (classOptions.length === 1 && Boolean(selectedClassOption))
-              }
-              noMatchMessage={noMatchMessage}
-              options={classOptions}
-              onChange={changeClass}
-              value={selectedClassOption}
-              darkMode={
+        <div className="query-builder__setup__config-group__item ">
+          <label
+            className="btn--sm query-builder__setup__config-group__item__label"
+            title="entity"
+            htmlFor="query-builder__setup__class-selector"
+          >
+            Entity
+          </label>
+          <CustomSelectorInput
+            inputId="query-builder__setup__class-selector"
+            className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector query-builder__setup__config-group__item__selector__milestoned"
+            placeholder={
+              classOptions.length
+                ? 'Choose an entity...'
+                : noMatchMessage ?? 'No entity found'
+            }
+            disabled={
+              classOptions.length < 1 ||
+              (classOptions.length === 1 && Boolean(selectedClassOption))
+            }
+            noMatchMessage={noMatchMessage}
+            options={classOptions}
+            onChange={changeClass}
+            value={selectedClassOption}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
+            filterOption={elementFilterOption}
+            formatOptionLabel={getPackageableElementOptionFormatter({
+              darkMode:
                 !applicationStore.layoutService
-                  .TEMPORARY__isLightColorThemeEnabled
-              }
-              filterOption={elementFilterOption}
-              formatOptionLabel={getPackageableElementOptionFormatter({
-                darkMode:
-                  !applicationStore.layoutService
-                    .TEMPORARY__isLightColorThemeEnabled,
-              })}
-            />
-            {queryBuilderState.isQuerySupported && (
-              <button
-                className="btn--dark btn__icon--dark query-builder__setup__milestoning"
-                tabIndex={-1}
-                onClick={showMilestoningEditor}
-                disabled={!milestoningState.isMilestonedQuery}
-                title="Edit Milestoning Parameters"
-              >
-                <ClockIcon />
-              </button>
-            )}
-            {milestoningState.isMilestonedQuery && (
-              <MilestoningParametersEditor
-                queryBuilderState={queryBuilderState}
-              />
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  },
-);
-
-export const QueryBuilderMappingSelector = observer(
-  (props: {
-    queryBuilderState: QueryBuilderState;
-    classes: Class[];
-    onClassChange?: ((val: Class) => void) | undefined;
-    noMatchMessage?: string | undefined;
-  }) => {
-    const { queryBuilderState, classes, onClassChange, noMatchMessage } = props;
-    const milestoningState = queryBuilderState.milestoningState;
-    const applicationStore = useApplicationStore();
-
-    // class
-    const elementFilterOption = createFilter({
-      ignoreCase: true,
-      ignoreAccents: false,
-      stringify: (option: PackageableElementOption<Class>): string =>
-        option.value.path,
-    });
-
-    const classOptions = classes.map((_class) => ({
-      value: _class,
-      label: generateClassLabel(_class, queryBuilderState),
-    }));
-    const selectedClassOption = queryBuilderState.class
-      ? {
-          value: queryBuilderState.class,
-          label: generateClassLabel(queryBuilderState.class, queryBuilderState),
-        }
-      : null;
-    const changeClass = (val: PackageableElementOption<Class>): void => {
-      if (val.value === queryBuilderState.class) {
-        return;
-      }
-      queryBuilderState.changeClass(val.value);
-      onClassChange?.(val.value);
-    };
-
-    // milestoning
-    const showMilestoningEditor = (): void =>
-      milestoningState.setShowMilestoningEditor(true);
-
-    return (
-      <div className="query-builder__setup__config-group query-builder__setup__config-group--class">
-        <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="class"
+                  .TEMPORARY__isLightColorThemeEnabled,
+            })}
+          />
+          {queryBuilderState.isQuerySupported && (
+            <button
+              className="btn--dark btn__icon--dark query-builder__setup__milestoning"
+              tabIndex={-1}
+              onClick={showMilestoningEditor}
+              disabled={!milestoningState.isMilestonedQuery}
+              title="Edit Milestoning Parameters"
             >
-              <PURE_ClassIcon />
-            </div>
-            <CustomSelectorInput
-              className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector query-builder__setup__config-group__item__selector__milestoned"
-              placeholder={
-                classOptions.length
-                  ? 'Choose a class...'
-                  : noMatchMessage ?? 'No class found'
-              }
-              disabled={
-                classOptions.length < 1 ||
-                (classOptions.length === 1 && Boolean(selectedClassOption))
-              }
-              noMatchMessage={noMatchMessage}
-              options={classOptions}
-              onChange={changeClass}
-              value={selectedClassOption}
-              darkMode={
-                !applicationStore.layoutService
-                  .TEMPORARY__isLightColorThemeEnabled
-              }
-              filterOption={elementFilterOption}
-              formatOptionLabel={getPackageableElementOptionFormatter({
-                darkMode:
-                  !applicationStore.layoutService
-                    .TEMPORARY__isLightColorThemeEnabled,
-              })}
+              <ClockIcon />
+            </button>
+          )}
+          {milestoningState.isMilestonedQuery && (
+            <MilestoningParametersEditor
+              queryBuilderState={queryBuilderState}
             />
-            {queryBuilderState.isQuerySupported && (
-              <button
-                className="btn--dark btn__icon--dark query-builder__setup__milestoning"
-                tabIndex={-1}
-                onClick={showMilestoningEditor}
-                disabled={!milestoningState.isMilestonedQuery}
-                title="Edit Milestoning Parameters"
-              >
-                <ClockIcon />
-              </button>
-            )}
-            {milestoningState.isMilestonedQuery && (
-              <MilestoningParametersEditor
-                queryBuilderState={queryBuilderState}
-              />
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  },
-);
-
-export const QueryBuilderFunction = observer(
-  (props: {
-    queryBuilderState: QueryBuilderState;
-    classes: Class[];
-    onClassChange?: ((val: Class) => void) | undefined;
-    noMatchMessage?: string | undefined;
-  }) => {
-    const { queryBuilderState, classes, onClassChange, noMatchMessage } = props;
-    const milestoningState = queryBuilderState.milestoningState;
-    const applicationStore = useApplicationStore();
-
-    // class
-    const elementFilterOption = createFilter({
-      ignoreCase: true,
-      ignoreAccents: false,
-      stringify: (option: PackageableElementOption<Class>): string =>
-        option.value.path,
-    });
-
-    const classOptions = classes.map((_class) => ({
-      value: _class,
-      label: generateClassLabel(_class, queryBuilderState),
-    }));
-    const selectedClassOption = queryBuilderState.class
-      ? {
-          value: queryBuilderState.class,
-          label: generateClassLabel(queryBuilderState.class, queryBuilderState),
-        }
-      : null;
-    const changeClass = (val: PackageableElementOption<Class>): void => {
-      if (val.value === queryBuilderState.class) {
-        return;
-      }
-      queryBuilderState.changeClass(val.value);
-      onClassChange?.(val.value);
-    };
-
-    // milestoning
-    const showMilestoningEditor = (): void =>
-      milestoningState.setShowMilestoningEditor(true);
-
-    return (
-      <div className="query-builder__setup__config-group query-builder__setup__config-group--class">
-        <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="class"
-            >
-              <PURE_ClassIcon />
-            </div>
-            <CustomSelectorInput
-              className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector query-builder__setup__config-group__item__selector__milestoned"
-              placeholder={
-                classOptions.length
-                  ? 'Choose a class...'
-                  : noMatchMessage ?? 'No class found'
-              }
-              disabled={
-                classOptions.length < 1 ||
-                (classOptions.length === 1 && Boolean(selectedClassOption))
-              }
-              noMatchMessage={noMatchMessage}
-              options={classOptions}
-              onChange={changeClass}
-              value={selectedClassOption}
-              darkMode={
-                !applicationStore.layoutService
-                  .TEMPORARY__isLightColorThemeEnabled
-              }
-              filterOption={elementFilterOption}
-              formatOptionLabel={getPackageableElementOptionFormatter({
-                darkMode:
-                  !applicationStore.layoutService
-                    .TEMPORARY__isLightColorThemeEnabled,
-              })}
-            />
-            {queryBuilderState.isQuerySupported && (
-              <button
-                className="btn--dark btn__icon--dark query-builder__setup__milestoning"
-                tabIndex={-1}
-                onClick={showMilestoningEditor}
-                disabled={!milestoningState.isMilestonedQuery}
-                title="Edit Milestoning Parameters"
-              >
-                <ClockIcon />
-              </button>
-            )}
-            {milestoningState.isMilestonedQuery && (
-              <MilestoningParametersEditor
-                queryBuilderState={queryBuilderState}
-              />
-            )}
-          </div>
+          )}
         </div>
       </div>
     );
@@ -454,10 +254,9 @@ const BasicQueryBuilderSetup = observer(
     const classes = queryBuilderState.graphManagerState.usableClasses;
 
     // 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)
@@ -485,7 +284,8 @@ const BasicQueryBuilderSetup = 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(
@@ -511,88 +311,87 @@ const BasicQueryBuilderSetup = observer(
     });
 
     return (
-      <>
-        <QueryBuilderClassSelector
-          queryBuilderState={queryBuilderState}
-          classes={classes}
-        />
-        <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'
-                }
-                disabled={
-                  queryBuilderState.isMappingReadOnly ||
-                  !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 mapping found'
+              }
+              disabled={
+                queryBuilderState.isMappingReadOnly || !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={
-                  runtimeOptions.length
-                    ? 'Choose a runtime...'
-                    : 'No runtime found'
-                }
-                disabled={
-                  queryBuilderState.isRuntimeReadOnly ||
-                  !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={
+                runtimeOptions.length
+                  ? 'Choose a runtime...'
+                  : 'No runtime found'
+              }
+              disabled={
+                queryBuilderState.isRuntimeReadOnly ||
+                !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}
+            />
           </div>
         </div>
-      </>
+      </div>
     );
   },
 );

package/src/components/execution-plan/FunctionParametersValidationNodeViewer.tsx

@@ -90,8 +90,9 @@ export const FunctionParametersValidationNodeViewer: React.FC<{
                   <tr>
                     <td className="table__cell--left">{parameter.name}</td>
                     <td className="table__cell--left">
-                      {`${parameter.genericType?.value.rawType
-                        .name} ${showMultiplicity(parameter.multiplicity)}`}
+                      {`${
+                        parameter.genericType?.value.rawType.name
+                      } ${showMultiplicity(parameter.multiplicity)}`}
                     </td>
                   </tr>
                 </React.Fragment>

package/src/components/explorer/QueryBuilderExplorerPanel.tsx

@@ -426,8 +426,8 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
             ? node.type instanceof Enumeration
               ? QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY
               : node.type instanceof Class
-              ? QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.CLASS_PROPERTY
-              : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY
+                ? QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.CLASS_PROPERTY
+                : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY
             : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ROOT,
         item: () =>
           node instanceof QueryBuilderExplorerTreePropertyNodeData
@@ -468,8 +468,8 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
         ? TYPE_CAST_TOKEN + prettyCONSTName(node.label)
         : prettyCONSTName(node.label)
       : node instanceof QueryBuilderExplorerTreeSubTypeNodeData
-      ? TYPE_CAST_TOKEN + node.label
-      : node.label;
+        ? TYPE_CAST_TOKEN + node.label
+        : node.label;
     const selectNode = (): void => onNodeSelect?.(node);
     const openNode = (): void => {
       if (!node.isOpen) {

package/src/components/explorer/QueryBuilderPropertySearchPanel.tsx

@@ -130,8 +130,8 @@ const QueryBuilderTreeNodeViewer = observer(
             ? node.type instanceof Enumeration
               ? QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY
               : node.type instanceof Class
-              ? QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.CLASS_PROPERTY
-              : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY
+                ? QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.CLASS_PROPERTY
+                : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY
             : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ROOT,
         item: () =>
           node instanceof QueryBuilderExplorerTreePropertyNodeData
@@ -186,8 +186,8 @@ const QueryBuilderTreeNodeViewer = observer(
       parentNode instanceof QueryBuilderExplorerTreeSubTypeNodeData
         ? prettyPropertyNameForSubType(node.id)
         : node instanceof QueryBuilderExplorerTreeSubTypeNodeData
-        ? prettyPropertyNameForSubTypeClass(node.id)
-        : prettyPropertyNameFromNodeId(node.id);
+          ? prettyPropertyNameForSubTypeClass(node.id)
+          : prettyPropertyNameFromNodeId(node.id);
 
     return (
       <div>

package/src/components/fetch-structure/QueryBuilderPostFilterPanel.tsx

@@ -109,6 +109,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<
@@ -660,8 +661,8 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
             node instanceof QueryBuilderPostFilterTreeGroupNodeData
               ? QUERY_BUILDER_POST_FILTER_DND_TYPE.GROUP_CONDITION
               : node instanceof QueryBuilderPostFilterTreeConditionNodeData
-              ? QUERY_BUILDER_POST_FILTER_DND_TYPE.CONDITION
-              : QUERY_BUILDER_POST_FILTER_DND_TYPE.BLANK_CONDITION,
+                ? QUERY_BUILDER_POST_FILTER_DND_TYPE.CONDITION
+                : QUERY_BUILDER_POST_FILTER_DND_TYPE.BLANK_CONDITION,
           item: () => ({ node }),
           end: (): void => postFilterState.setRearrangingConditions(false),
         }),
@@ -1008,6 +1009,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
@@ -1141,7 +1147,6 @@ export const QueryBuilderPostFilterPanel = observer(
     const { queryBuilderState } = props;
     const fetchStructureImplementation =
       queryBuilderState.fetchStructureState.implementation;
-
     return (
       <div
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_POST_FILTER_PANEL}