@finos/legend-query-builder 4.14.37 → 4.14.39

package/src/components/result/QueryBuilderResultPanel.tsx

@@ -16,7 +16,6 @@
 
 import {
   BlankPanelContent,
-  PanelLoadingIndicator,
   PlayIcon,
   DropdownMenu,
   MenuContent,
@@ -43,6 +42,8 @@ import {
   CsvIcon,
   DebugIcon,
   ReportIcon,
+  CubesLoadingIndicatorIcon,
+  CubesLoadingIndicator,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { flowResult } from 'mobx';
@@ -334,6 +335,9 @@ export const QueryBuilderResultPanel = observer(
         </MenuContentItem>
       ));
 
+    const isLoading =
+      resultState.isRunningQuery || resultState.isGeneratingPlan;
+
     return (
       <div
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_RESULT_PANEL}
@@ -383,7 +387,7 @@ export const QueryBuilderResultPanel = observer(
 
         <div className="panel__header">
           <div className="panel__header__title">
-            <div className="panel__header__title__label">result</div>
+            <div className="panel__header__title__label">results</div>
             {executedSql && (
               <Button
                 onClick={() => setShowSqlModal(true)}
@@ -457,7 +461,7 @@ export const QueryBuilderResultPanel = observer(
             {allowSettingPreviewLimit && (
               <div className="query-builder__result__limit">
                 <div className="query-builder__result__limit__label">
-                  preview limit
+                  preview row limit
                 </div>
                 <input
                   ref={inputRef}
@@ -476,22 +480,20 @@ export const QueryBuilderResultPanel = observer(
             <div className="query-builder__result__execute-btn btn__dropdown-combo btn__dropdown-combo--primary">
               {resultState.isRunningQuery ? (
                 <button
-                  className="btn__dropdown-combo__canceler"
+                  className="btn__dropdown-combo__canceler query-builder__result__execute-btn__btn"
                   onClick={cancelQuery}
                   tabIndex={-1}
                   disabled={!isQueryValid}
                 >
-                  <div className="btn--dark btn--caution btn__dropdown-combo__canceler__label">
-                    <PauseCircleIcon className="btn__dropdown-combo__canceler__label__icon" />
-                    <div className="btn__dropdown-combo__canceler__label__title">
-                      Stop
-                    </div>
+                  <div className="btn--dark btn--caution btn__dropdown-combo__canceler__label query-builder__result__execute-btn__btn">
+                    <PauseCircleIcon />
+                    Stop
                   </div>
                 </button>
               ) : (
                 <>
                   <button
-                    className="btn__dropdown-combo__label"
+                    className="btn__dropdown-combo__label query-builder__result__execute-btn__btn query-builder__result__execute-btn__btn--green"
                     onClick={runQuery}
                     tabIndex={-1}
                     title={
@@ -503,13 +505,11 @@ export const QueryBuilderResultPanel = observer(
                     }
                     disabled={isRunQueryDisabled}
                   >
-                    <PlayIcon className="btn__dropdown-combo__label__icon" />
-                    <div className="btn__dropdown-combo__label__title">
-                      Run Query
-                    </div>
+                    <PlayIcon />
+                    Run Query
                   </button>
                   <DropdownMenu
-                    className="btn__dropdown-combo__dropdown-btn"
+                    className="btn__dropdown-combo__dropdown-btn query-builder__result__execute-btn__btn query-builder__result__execute-btn__btn--green"
                     disabled={isRunQueryDisabled}
                     content={
                       <MenuContent>
@@ -617,18 +617,16 @@ export const QueryBuilderResultPanel = observer(
               ))}
           </div>
         </div>
-        <PanelContent>
-          <PanelLoadingIndicator
-            isLoading={
-              resultState.isRunningQuery || resultState.isGeneratingPlan
-            }
-          />
-          {!executionResult && (
+        <PanelContent className="query-builder__result__content">
+          <CubesLoadingIndicator isLoading={isLoading}>
+            <CubesLoadingIndicatorIcon />
+          </CubesLoadingIndicator>
+          {!executionResult && !isLoading && (
             <BlankPanelContent>
               Build or load a valid query first
             </BlankPanelContent>
           )}
-          {executionResult && (
+          {executionResult && !isLoading && (
             <div className="query-builder__result__values">
               <QueryBuilderResultValues
                 executionResult={executionResult}

package/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -776,6 +776,98 @@ const setCollectionValue = (
   instanceValue_setValues(valueSpecification, result, obseverContext);
 };
 
+const EnumCollectionInstanceValueEditor = observer(
+  (props: {
+    valueSpecification: CollectionInstanceValue;
+    observerContext: ObserverContext;
+    saveEdit: () => void;
+  }) => {
+    const { valueSpecification, observerContext, saveEdit } = props;
+    const applicationStore = useApplicationStore();
+    const enumType = guaranteeType(
+      valueSpecification.genericType?.value.rawType,
+      Enumeration,
+    );
+
+    const [selectedOptions, setSelectedOptions] = useState<
+      { label: string; value: Enum }[]
+    >(
+      (valueSpecification.values as EnumValueInstanceValue[])
+        .filter((valueSpec) => valueSpec.values[0]?.value !== undefined)
+        .map((valueSpec) => ({
+          label: valueSpec.values[0]!.value.name,
+          value: valueSpec.values[0]!.value,
+        })),
+    );
+
+    const availableOptions = enumType.values
+      .filter(
+        (value) =>
+          !selectedOptions.some(
+            (selectedValue) => selectedValue.value.name === value.name,
+          ),
+      )
+      .map((value) => ({
+        label: value.name,
+        value: value,
+      }));
+
+    const changeValue = (
+      newSelectedOptions: { value: Enum; label: string }[],
+    ): void => {
+      setSelectedOptions(newSelectedOptions);
+    };
+
+    const updateValueSpecAndSaveEdit = (): void => {
+      const result = selectedOptions
+        .map((value) => {
+          const enumValueInstanceValue = new EnumValueInstanceValue(
+            GenericTypeExplicitReference.create(new GenericType(enumType)),
+          );
+          instanceValue_setValues(
+            enumValueInstanceValue,
+            [EnumValueExplicitReference.create(value.value)],
+            observerContext,
+          );
+          return enumValueInstanceValue;
+        })
+        .filter(isNonNullable);
+      instanceValue_setValues(valueSpecification, result, observerContext);
+      saveEdit();
+    };
+
+    return (
+      <>
+        <CustomSelectorInput
+          className="value-spec-editor__enum-collection-selector"
+          options={availableOptions}
+          isMulti={true}
+          onChange={changeValue}
+          onBlur={updateValueSpecAndSaveEdit}
+          onKeyDown={(event: KeyboardEvent): void => {
+            if (event.key === 'Enter' && !event.shiftKey) {
+              updateValueSpecAndSaveEdit();
+            }
+          }}
+          value={selectedOptions}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          placeholder="Select value"
+          autoFocus={true}
+          menuIsOpen={true}
+        />
+        <button
+          className="value-spec-editor__list-editor__save-button btn--dark"
+          onClick={updateValueSpecAndSaveEdit}
+        >
+          <SaveIcon />
+        </button>
+      </>
+    );
+  },
+);
+
 const COLLECTION_PREVIEW_CHAR_LIMIT = 50;
 
 const getPlaceHolder = (expectedType: Type): string => {
@@ -836,6 +928,11 @@ const CollectionValueInstanceValueEditor = observer(
       if (editable) {
         setEditable(false);
         setShowAdvancedEditorPopover(false);
+        setValueSpecification(valueSpecification);
+      }
+    };
+    const updateValueSpecAndSaveEdit = (): void => {
+      if (editable) {
         setCollectionValue(
           valueSpecification,
           expectedType,
@@ -843,7 +940,7 @@ const CollectionValueInstanceValueEditor = observer(
           obseverContext,
         );
         setText(stringifyValue(valueSpecification.values));
-        setValueSpecification(valueSpecification);
+        saveEdit();
       }
     };
 
@@ -861,7 +958,7 @@ const CollectionValueInstanceValueEditor = observer(
         (event.relatedTarget as HTMLButtonElement | undefined)?.name !==
         expandButtonName
       ) {
-        saveEdit();
+        updateValueSpecAndSaveEdit();
       }
     };
 
@@ -891,7 +988,7 @@ const CollectionValueInstanceValueEditor = observer(
                 onChange={changeValueTextArea}
                 onKeyDown={(event): void => {
                   if (event.key === 'Enter' && !event.shiftKey) {
-                    saveEdit();
+                    updateValueSpecAndSaveEdit();
                   }
                 }}
               />
@@ -903,37 +1000,47 @@ const CollectionValueInstanceValueEditor = observer(
             </BasePopover>
           )}
           <div className={clsx('value-spec-editor', className)}>
-            <textarea
-              ref={inputRef}
-              className={clsx(
-                'panel__content__form__section__input value-spec-editor__input value-spec-editor__textarea ',
-              )}
-              spellCheck={false}
-              value={text}
-              placeholder={placeholder}
-              onChange={changeValueTextArea}
-              onKeyDown={(event): void => {
-                if (event.key === 'Enter' && !event.shiftKey) {
-                  saveEdit();
-                }
-              }}
-              onBlur={handleOnBlur}
-            />
-            <button
-              className="value-spec-editor__list-editor__expand-button btn--dark"
-              onClick={() => setShowAdvancedEditorPopover(true)}
-              tabIndex={-1}
-              name={expandButtonName}
-              title="Expand window..."
-            >
-              <FilledWindowMaximizeIcon />
-            </button>
-            <button
-              className="value-spec-editor__list-editor__save-button btn--dark"
-              onClick={saveEdit}
-            >
-              <SaveIcon />
-            </button>
+            {expectedType instanceof Enumeration ? (
+              <EnumCollectionInstanceValueEditor
+                valueSpecification={valueSpecification}
+                observerContext={obseverContext}
+                saveEdit={saveEdit}
+              />
+            ) : (
+              <>
+                <textarea
+                  ref={inputRef}
+                  className={clsx(
+                    'panel__content__form__section__input value-spec-editor__input value-spec-editor__textarea ',
+                  )}
+                  spellCheck={false}
+                  value={text}
+                  placeholder={placeholder}
+                  onChange={changeValueTextArea}
+                  onKeyDown={(event): void => {
+                    if (event.key === 'Enter' && !event.shiftKey) {
+                      updateValueSpecAndSaveEdit();
+                    }
+                  }}
+                  onBlur={handleOnBlur}
+                />
+                <button
+                  className="value-spec-editor__list-editor__expand-button btn--dark"
+                  onClick={() => setShowAdvancedEditorPopover(true)}
+                  tabIndex={-1}
+                  name={expandButtonName}
+                  title="Expand window..."
+                >
+                  <FilledWindowMaximizeIcon />
+                </button>
+                <button
+                  className="value-spec-editor__list-editor__save-button btn--dark"
+                  onClick={saveEdit}
+                >
+                  <SaveIcon />
+                </button>
+              </>
+            )}
             <button
               className="value-spec-editor__reset-btn"
               name="Reset"

package/src/components/workflows/ClassQueryBuilder.tsx

@@ -17,6 +17,7 @@
 import {
   CustomSelectorInput,
   PanelHeader,
+  compareLabelFn,
   createFilter,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
@@ -71,7 +72,7 @@ const ClassQueryBuilderSetupPanelContent = observer(
         : []
     )
       .map(buildElementOption)
-      .sort((a, b) => a.label.localeCompare(b.label));
+      .sort(compareLabelFn);
     const selectedMappingOption = queryBuilderState.executionContextState
       .mapping
       ? buildElementOption(queryBuilderState.executionContextState.mapping)
@@ -107,7 +108,7 @@ const ClassQueryBuilderSetupPanelContent = observer(
           new RuntimePointer(PackageableElementExplicitReference.create(rt)),
       )
       .map(buildRuntimeValueOption)
-      .sort((a, b) => a.label.localeCompare(b.label));
+      .sort(compareLabelFn);
     const selectedRuntimeOption = queryBuilderState.executionContextState
       .runtimeValue
       ? buildRuntimeValueOption(

package/src/components/workflows/MappingQueryBuilder.tsx

@@ -17,6 +17,7 @@
 import {
   CustomSelectorInput,
   PanelHeader,
+  compareLabelFn,
   createFilter,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
@@ -59,7 +60,7 @@ const MappingQueryBuilderSetupPanelContent = observer(
     // mapping
     const mappingOptions = queryBuilderState.graphManagerState.usableMappings
       .map(buildElementOption)
-      .sort((a, b) => a.label.localeCompare(b.label));
+      .sort(compareLabelFn);
     const selectedMappingOption = queryBuilderState.executionContextState
       .mapping
       ? buildElementOption(queryBuilderState.executionContextState.mapping)
@@ -93,7 +94,7 @@ const MappingQueryBuilderSetupPanelContent = observer(
           new RuntimePointer(PackageableElementExplicitReference.create(rt)),
       )
       .map(buildRuntimeValueOption)
-      .sort((a, b) => a.label.localeCompare(b.label));
+      .sort(compareLabelFn);
     const selectedRuntimeOption = queryBuilderState.executionContextState
       .runtimeValue
       ? buildRuntimeValueOption(

package/src/components/workflows/ServiceQueryBuilder.tsx

@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 
-import { CustomSelectorInput, PanelHeader } from '@finos/legend-art';
+import {
+  CustomSelectorInput,
+  PanelHeader,
+  compareLabelFn,
+} from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { getMappingCompatibleClasses, type Service } from '@finos/legend-graph';
 import { useApplicationStore } from '@finos/legend-application';
@@ -57,7 +61,7 @@ const ServiceQueryBuilderSetupPanelContent = observer(
     const serviceOptions =
       queryBuilderState.usableServices
         ?.map(buildElementOption)
-        .sort((a, b) => a.label.localeCompare(b.label)) ?? [];
+        .sort(compareLabelFn) ?? [];
     const selectedServiceOption = buildElementOption(queryBuilderState.service);
     const onServiceOptionChange = (
       option: PackageableElementOption<Service>,
@@ -71,7 +75,7 @@ const ServiceQueryBuilderSetupPanelContent = observer(
     // execution context
     const executionContextOptions = queryBuilderState.executionContexts
       .map(buildExecutionContextOption)
-      .sort((a, b) => a.label.localeCompare(b.label));
+      .sort(compareLabelFn);
     const selectedExecutionContextOption =
       queryBuilderState.selectedExecutionContext
         ? buildExecutionContextOption(

package/src/stores/QueryBuilderTextEditorState.ts

@@ -67,6 +67,7 @@ export class QueryBuilderTextEditorState extends LambdaEditorState {
    * TODO: consider moving this to another state if we need to simplify the logic of text-mode
    */
   readOnlylambdaJson = '';
+  isReadOnly: boolean | undefined;
 
   constructor(queryBuilderState: QueryBuilderState) {
     super('', '');
@@ -75,7 +76,9 @@ export class QueryBuilderTextEditorState extends LambdaEditorState {
       rawLambdaState: observable,
       isConvertingLambdaToString: observable,
       mode: observable,
+      isReadOnly: observable,
       setQueryRawLambdaState: action,
+      setIsReadOnly: action,
       setMode: action,
       openModal: action,
       closeModal: flow,
@@ -89,10 +92,23 @@ export class QueryBuilderTextEditorState extends LambdaEditorState {
     return buildSourceInformationSourceId(['query-builder']);
   }
 
+  get text(): string | undefined {
+    if (this.mode === QueryBuilderTextEditorMode.TEXT) {
+      return this.fullLambdaString;
+    } else if (this.mode === QueryBuilderTextEditorMode.JSON) {
+      return this.readOnlylambdaJson;
+    }
+    return undefined;
+  }
+
   setQueryRawLambdaState(rawLambdaState: QueryBuilderRawLambdaState): void {
     this.rawLambdaState = rawLambdaState;
   }
 
+  setIsReadOnly(val: boolean | undefined): void {
+    this.isReadOnly = val;
+  }
+
   setMode(openModal: QueryBuilderTextEditorMode | undefined): void {
     this.mode = openModal;
   }
@@ -170,7 +186,7 @@ export class QueryBuilderTextEditorState extends LambdaEditorState {
     }
   }
 
-  openModal(mode: QueryBuilderTextEditorMode): void {
+  openModal(mode: QueryBuilderTextEditorMode, isReadOnly?: boolean): void {
     try {
       const rawLambda = this.queryBuilderState.buildQuery();
       if (mode === QueryBuilderTextEditorMode.TEXT) {
@@ -190,6 +206,7 @@ export class QueryBuilderTextEditorState extends LambdaEditorState {
         );
       }
       this.setMode(mode);
+      this.setIsReadOnly(isReadOnly);
     } catch (error) {
       assertErrorThrown(error);
       this.queryBuilderState.applicationStore.notificationService.notifyError(
@@ -200,7 +217,7 @@ export class QueryBuilderTextEditorState extends LambdaEditorState {
 
   *closeModal(): GeneratorFn<void> {
     this.closingQueryState.inProgress();
-    if (this.mode === QueryBuilderTextEditorMode.TEXT) {
+    if (this.mode === QueryBuilderTextEditorMode.TEXT && !this.isReadOnly) {
       yield flowResult(this.convertLambdaGrammarStringToObject());
       if (this.parserError) {
         this.queryBuilderState.applicationStore.notificationService.notifyError(
@@ -215,6 +232,7 @@ export class QueryBuilderTextEditorState extends LambdaEditorState {
       }
       return;
     }
+    this.setIsReadOnly(undefined);
     this.closingQueryState.complete();
 
     this.setMode(undefined);

package/src/stores/QueryLoaderState.ts

@@ -65,7 +65,7 @@ export class QueryLoaderState {
 
   readonly isReadOnly?: boolean | undefined;
   readonly onQueryRenamed?: ((query: LightQuery) => void) | undefined;
-  readonly onQueryDeleted?: ((query: LightQuery) => void) | undefined;
+  readonly onQueryDeleted?: ((query: string) => void) | undefined;
   readonly handleFetchDefaultQueriesFailure?: (() => void) | undefined;
 
   queryBuilderState?: QueryBuilderState | undefined;
@@ -100,7 +100,7 @@ export class QueryLoaderState {
 
       isReadOnly?: boolean | undefined;
       onQueryRenamed?: ((query: LightQuery) => void) | undefined;
-      onQueryDeleted?: ((query: LightQuery) => void) | undefined;
+      onQueryDeleted?: ((query: string) => void) | undefined;
       handleFetchDefaultQueriesFailure?: (() => void) | undefined;
     },
   ) {
@@ -304,11 +304,9 @@ export class QueryLoaderState {
   *deleteQuery(queryId: string): GeneratorFn<void> {
     this.deleteQueryState.inProgress();
     try {
-      const query = (yield this.graphManagerState.graphManager.deleteQuery(
-        queryId,
-      )) as Query;
-      this.onQueryDeleted?.(query);
-      this.applicationStore.notificationService.notify(
+      yield this.graphManagerState.graphManager.deleteQuery(queryId);
+      this.onQueryDeleted?.(queryId);
+      this.applicationStore.notificationService.notifySuccess(
         'Deleted query successfully',
       );
       this.deleteQueryState.pass();

package/src/stores/explorer/QueryFunctionsExplorerState.ts

@@ -30,7 +30,11 @@ import {
 } from '@finos/legend-shared';
 import { action, makeObservable, observable } from 'mobx';
 import type { QueryBuilderState } from '../QueryBuilderState.js';
-import type { TreeNodeData, TreeData } from '@finos/legend-art';
+import {
+  type TreeNodeData,
+  type TreeData,
+  compareLabelFn,
+} from '@finos/legend-art';
 
 export const QUERY_BUILDER_FUNCTION_DND_TYPE = 'QUERY_BUILDER_FUNCTION';
 
@@ -206,7 +210,7 @@ export const getFunctionsExplorerTreeNodeChildren = (
   return node.childrenIds
     .map((id) => data.nodes.get(id))
     .filter(isNonNullable)
-    .sort((a, b) => a.label.localeCompare(b.label))
+    .sort(compareLabelFn)
     .sort(
       (a, b) =>
         (b.packageableElement instanceof Package ? 1 : 0) -

package/src/stores/fetch-structure/tds/QueryBuilderTDSState.ts

@@ -146,6 +146,7 @@ export class QueryBuilderTDSState
       TEMPORARY__showPostFetchStructurePanel: computed,
       derivations: computed,
       hasParserError: computed,
+      isQueryOptionsSet: computed,
       addColumn: action,
       moveColumn: action,
       removeAllColumns: action,
@@ -356,6 +357,16 @@ export class QueryBuilderTDSState
     return fetchStructureValidationIssues;
   }
 
+  get isQueryOptionsSet(): boolean {
+    return (
+      this.resultSetModifierState.limit !== undefined ||
+      this.queryBuilderState.milestoningState.isMilestonedQuery ||
+      this.resultSetModifierState.slice !== undefined ||
+      this.resultSetModifierState.sortColumns.length > 0 ||
+      this.resultSetModifierState.distinct
+    );
+  }
+
   get tdsColumns(): QueryBuilderTDSColumnState[] {
     const aggregationStateCols = this.aggregationState.columns.map(
       (c) => c.projectionColumnState,

package/src/stores/milestoning/QueryBuilderMilestoningState.ts

@@ -75,7 +75,7 @@ export class QueryBuilderMilestoningState implements Hashable {
       startDate: observable,
       endDate: observable,
       showMilestoningEditor: observable,
-      isMilestonedQuery: computed,
+
       setProcessingDate: action,
       setBusinessDate: action,
       setStartDate: action,
@@ -87,6 +87,10 @@ export class QueryBuilderMilestoningState implements Hashable {
       initializeAllVersionsInRangeParameters: action,
       clearAllVersionsInRangeParameters: action,
       clearGetAllParameters: action,
+
+      isAllVersionsEnabled: computed,
+      isAllVersionsInRangeEnabled: computed,
+      isMilestonedQuery: computed,
       hashCode: computed,
     });
 
@@ -380,9 +384,9 @@ export class QueryBuilderMilestoningState implements Hashable {
         this.queryBuilderState.parametersState.parameterStates.find(
           (p) => p.parameter === this.startDate,
         );
-      this.queryBuilderState.parametersState.removeParameter(
-        guaranteeNonNullable(paramState),
-      );
+      if (paramState) {
+        this.queryBuilderState.parametersState.removeParameter(paramState);
+      }
     }
     if (
       this.endDate instanceof VariableExpression &&
@@ -394,9 +398,9 @@ export class QueryBuilderMilestoningState implements Hashable {
         this.queryBuilderState.parametersState.parameterStates.find(
           (p) => p.parameter === this.endDate,
         );
-      this.queryBuilderState.parametersState.removeParameter(
-        guaranteeNonNullable(paramState),
-      );
+      if (paramState) {
+        this.queryBuilderState.parametersState.removeParameter(paramState);
+      }
     }
     this.setStartDate(undefined);
     this.setEndDate(undefined);

package/src/stores/watermark/QueryBuilderWatermarkState.ts

@@ -50,7 +50,6 @@ export class QueryBuilderWatermarkState implements Hashable {
       ),
     );
 
-    watermarkConstant.values = ['watermarkValue'];
     return watermarkConstant;
   }