@finos/legend-query-builder 4.14.37 → 4.14.38

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

@@ -1148,27 +1148,118 @@ export const QueryBuilderTDSPanel = observer(
           >
             <div className="query-builder__projection__result-modifier-prompt__header">
               <button
-                className="query-builder__projection__result-modifier-prompt__header__label"
+                className="query-builder__projection__result-modifier-prompt__header__label editable-value"
                 onClick={openResultSetModifierEditor}
-                title="Configure result set modifiers..."
+                title="Configure Query Options..."
               >
                 <CogIcon className="query-builder__projection__result-modifier-prompt__header__label__icon" />
                 <div className="query-builder__projection__result-modifier-prompt__header__label__title">
-                  Query Options
+                  {tdsState.isQueryOptionsSet
+                    ? 'Query Options'
+                    : 'Set Query Options'}
                 </div>
               </button>
+              <div className="query-builder__projection__result-modifier-prompt__divider">
+                {tdsState.isQueryOptionsSet && ' - '}
+              </div>
+              {tdsState.queryBuilderState.milestoningState.businessDate && (
+                <div className="query-builder__projection__result-modifier-prompt__group">
+                  <div className="query-builder__projection__result-modifier-prompt__group__label">
+                    Business Date
+                  </div>
+                  <button
+                    className="query-builder__projection__result-modifier-prompt__header__label editable-value"
+                    onClick={openResultSetModifierEditor}
+                  >
+                    <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                      {getNameOfValueSpecification(
+                        tdsState.queryBuilderState.milestoningState
+                          .businessDate,
+                        tdsState.queryBuilderState,
+                      )}
+                    </div>
+                  </button>
+                </div>
+              )}
+              {tdsState.queryBuilderState.milestoningState.processingDate && (
+                <div className="query-builder__projection__result-modifier-prompt__group">
+                  <div className="query-builder__projection__result-modifier-prompt__group__label">
+                    Processing Date
+                  </div>
+                  <button
+                    className="query-builder__projection__result-modifier-prompt__header__label editable-value"
+                    onClick={openResultSetModifierEditor}
+                  >
+                    <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                      {getNameOfValueSpecification(
+                        tdsState.queryBuilderState.milestoningState
+                          .processingDate,
+                        tdsState.queryBuilderState,
+                      )}
+                    </div>
+                  </button>
+                </div>
+              )}
+              {tdsState.queryBuilderState.milestoningState
+                .isAllVersionsEnabled &&
+                !tdsState.queryBuilderState.milestoningState
+                  .isAllVersionsInRangeEnabled && (
+                  <div className="query-builder__projection__result-modifier-prompt__group">
+                    <div className="query-builder__projection__result-modifier-prompt__group__label">
+                      All Versions
+                    </div>
+                    <button
+                      className="query-builder__projection__result-modifier-prompt__header__label editable-value"
+                      onClick={openResultSetModifierEditor}
+                    >
+                      <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                        Yes
+                      </div>
+                    </button>
+                  </div>
+                )}
+              {tdsState.queryBuilderState.milestoningState
+                .isAllVersionsInRangeEnabled &&
+                tdsState.queryBuilderState.milestoningState.startDate &&
+                tdsState.queryBuilderState.milestoningState.endDate && (
+                  <div className="query-builder__projection__result-modifier-prompt__group">
+                    <div className="query-builder__projection__result-modifier-prompt__group__label">
+                      All Versions
+                    </div>
+                    <button
+                      className="query-builder__projection__result-modifier-prompt__header__label editable-value"
+                      onClick={openResultSetModifierEditor}
+                    >
+                      <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                        (
+                        {getNameOfValueSpecification(
+                          tdsState.queryBuilderState.milestoningState.startDate,
+                          tdsState.queryBuilderState,
+                        )}{' '}
+                        -{' '}
+                        {getNameOfValueSpecification(
+                          tdsState.queryBuilderState.milestoningState.endDate,
+                          tdsState.queryBuilderState,
+                        )}
+                        )
+                      </div>
+                    </button>
+                  </div>
+                )}
             </div>
             {tdsState.resultSetModifierState.limit && (
               <div className="query-builder__projection__result-modifier-prompt__group">
                 <div className="query-builder__projection__result-modifier-prompt__group__label">
                   Max Rows
                 </div>
-                <div
-                  className="query-builder__projection__result-modifier-prompt__group__content"
+                <button
+                  className="query-builder__projection__result-modifier-prompt__header__label editable-value"
                   onClick={openResultSetModifierEditor}
                 >
-                  {tdsState.resultSetModifierState.limit}
-                </div>
+                  <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                    {tdsState.resultSetModifierState.limit}
+                  </div>
+                </button>
               </div>
             )}
             {tdsState.resultSetModifierState.distinct && (
@@ -1176,12 +1267,14 @@ export const QueryBuilderTDSPanel = observer(
                 <div className="query-builder__projection__result-modifier-prompt__group__label">
                   Eliminate Duplicate Rows
                 </div>
-                <div
-                  className="query-builder__projection__result-modifier-prompt__group__content"
+                <button
+                  className="query-builder__projection__result-modifier-prompt__header__label editable-value"
                   onClick={openResultSetModifierEditor}
                 >
-                  Yes
-                </div>
+                  <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                    Yes
+                  </div>
+                </button>
               </div>
             )}
             {tdsState.resultSetModifierState.sortColumns.length > 0 && (
@@ -1191,13 +1284,15 @@ export const QueryBuilderTDSPanel = observer(
                 </div>
                 {tdsState.resultSetModifierState.sortColumns.map(
                   (columnState) => (
-                    <div
-                      className="query-builder__projection__result-modifier-prompt__group__content"
+                    <button
                       key={columnState.columnState.uuid}
+                      className="query-builder__projection__result-modifier-prompt__header__label editable-value"
                       onClick={openResultSetModifierEditor}
                     >
-                      {`${columnState.columnState.columnName} ${columnState.sortType}`}
-                    </div>
+                      <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                        {`${columnState.columnState.columnName} ${columnState.sortType}`}
+                      </div>
+                    </button>
                   ),
                 )}
               </div>
@@ -1207,12 +1302,14 @@ export const QueryBuilderTDSPanel = observer(
                 <div className="query-builder__projection__result-modifier-prompt__group__label">
                   Slice
                 </div>
-                <div
-                  className="query-builder__projection__result-modifier-prompt__group__content"
+                <button
+                  className="query-builder__projection__result-modifier-prompt__header__label editable-value"
                   onClick={openResultSetModifierEditor}
                 >
-                  {`${tdsState.resultSetModifierState.slice[0]},${tdsState.resultSetModifierState.slice[1]}`}
-                </div>
+                  <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                    {`${tdsState.resultSetModifierState.slice[0]},${tdsState.resultSetModifierState.slice[1]}`}
+                  </div>
+                </button>
               </div>
             )}
             {tdsState.queryBuilderState.watermarkState.value && (

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/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);