@finos/legend-query-builder 4.14.35 → 4.14.37

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/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<
@@ -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}