@finos/legend-query-builder 1.0.6 → 2.0.1

package/src/application/QueryBuilderEvent.ts

@@ -15,12 +15,12 @@
  */
 
 export enum QUERY_BUILDER_EVENT {
-  RUN_QUERY__LAUNCH = 'editor.execution.run-query.launch',
-  GENERATE_EXECUTION_PLAN__LAUNCH = 'editor.execution.generate-plan.launch',
-  DEBUG_EXECUTION_PLAN__LAUNCH = 'editor.execution.debug-plan.launch',
+  RUN_QUERY__LAUNCH = 'query-builder.run-query.launch',
+  GENERATE_EXECUTION_PLAN__LAUNCH = 'query-builder.generate-plan.launch',
+  DEBUG_EXECUTION_PLAN__LAUNCH = 'query-builder.debug-plan.launch',
 
-  RUN_QUERY__SUCCESS = 'editor.execution.run-query.success',
-  GENERATE_EXECUTION_PLAN__SUCCESS = 'editor.execution.generate-plan.success',
-  DEBUG_EXECUTION_PLAN__SUCCESS = 'editor.execution.debug-plan.success',
-  BUILD_EXECUTION_PLAN__SUCCESS = 'graph-manager.execution.build-plan.success',
+  RUN_QUERY__SUCCESS = 'query-builder.run-query.success',
+  GENERATE_EXECUTION_PLAN__SUCCESS = 'query-builder.generate-plan.success',
+  DEBUG_EXECUTION_PLAN__SUCCESS = 'query-builder.debug-plan.success',
+  BUILD_EXECUTION_PLAN__SUCCESS = 'query-builder.build-plan.success',
 }

package/src/components/QueryBuilder.tsx

@@ -478,7 +478,7 @@ export const QueryBuilder = observer(
                             ) : null}
                           </MenuContentItemIcon>
                           <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                            Show Window Funcs
+                            Show Window Func(s)
                           </MenuContentItemLabel>
                         </MenuContentItem>
                         <MenuContentItem

package/src/components/QueryBuilderResultPanel.tsx

@@ -481,8 +481,19 @@ export const QueryBuilderResultPanel = observer(
       });
     };
     const queryValidationIssues = queryBuilderState.validationIssues;
+    const queryWindowValidationIssues =
+      queryBuilderState.fetchStructureState.implementation instanceof
+      QueryBuilderTDSState
+        ? queryBuilderState.fetchStructureState.implementation.windowState
+            .validationIssues
+        : undefined;
+    const queryWindowStateIsValid = !queryWindowValidationIssues;
+
+    const isSupportedQueryValid =
+      queryBuilderState.validationIssues && queryWindowStateIsValid;
     const isQueryValid =
-      !queryBuilderState.isQuerySupported || !queryValidationIssues;
+      !queryBuilderState.isQuerySupported || !isSupportedQueryValid;
+
     const runQuery = (): void => {
       resultState.pressedRunQuery.inProgress();
       if (queryParametersState.parameterStates.length) {
@@ -614,6 +625,10 @@ export const QueryBuilderResultPanel = observer(
                       ? `Query is not valid:\n${queryValidationIssues
                           .map((issue) => `\u2022 ${issue}`)
                           .join('\n')}`
+                      : queryWindowValidationIssues
+                      ? `Query is not valid:\n${queryWindowValidationIssues
+                          .map((issue) => `\u2022 ${issue}`)
+                          .join('\n')}`
                       : undefined
                   }
                   disabled={isRunQueryDisabled}

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

@@ -24,7 +24,7 @@ import {
 import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
 import { prettyCONSTName } from '@finos/legend-shared';
 import { QueryBuilderTDSPanel } from './QueryBuilderTDSPanel.js';
-import { QueryBuilderGraphFetchTreePanel } from './QueryBuilderGraphFetchTreePanel.js';
+import { QueryBuilderGraphFetchPanel } from './QueryBuilderGraphFetchTreePanel.js';
 import { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import { QueryBuilderGraphFetchTreeState } from '../../stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeState.js';
 import { QueryBuilderPanelIssueCountBadge } from '../shared/QueryBuilderPanelIssueCountBadge.js';
@@ -42,7 +42,7 @@ const QueryBuilderFetchStructureEditor = observer(
       fetchStructureImplementation instanceof QueryBuilderGraphFetchTreeState
     ) {
       return (
-        <QueryBuilderGraphFetchTreePanel
+        <QueryBuilderGraphFetchPanel
           graphFetchTreeState={fetchStructureImplementation}
         />
       );

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

@@ -29,6 +29,18 @@ import {
   SquareIcon,
   InfoCircleIcon,
   PanelDropZone,
+  BlankPanelContent,
+  Dialog,
+  ModalHeader,
+  Modal,
+  ModalBody,
+  Panel,
+  PanelForm,
+  PanelFormTextField,
+  PanelFormBooleanField,
+  ModalFooterButton,
+  ModalFooter,
+  SerializeIcon,
 } from '@finos/legend-art';
 import { QUERY_BUILDER_TEST_ID } from '../../application/QueryBuilderTesting.js';
 import { isNonNullable } from '@finos/legend-shared';
@@ -42,8 +54,13 @@ import {
   type QueryBuilderExplorerTreeDragSource,
   QUERY_BUILDER_EXPLORER_TREE_DND_TYPE,
 } from '../../stores/explorer/QueryBuilderExplorerState.js';
-import type { QueryBuilderGraphFetchTreeState } from '../../stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeState.js';
+import {
+  GraphFetchPureSerializationState,
+  PureSerializationConfig,
+  type QueryBuilderGraphFetchTreeState,
+} from '../../stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeState.js';
 import { getClassPropertyIcon } from '../shared/ElementIconUtils.js';
+import { QueryBuilderTextEditorMode } from '../../stores/QueryBuilderTextEditorState.js';
 
 const QueryBuilderGraphFetchTreeNodeContainer: React.FC<
   TreeNodeContainerProps<
@@ -134,14 +151,157 @@ const QueryBuilderGraphFetchTreeNodeContainer: React.FC<
   );
 };
 
+const PureSerializationConfigModal = observer(
+  (props: {
+    pureSerializationState: GraphFetchPureSerializationState;
+    graphFetchState: QueryBuilderGraphFetchTreeState;
+    config: PureSerializationConfig;
+  }) => {
+    const { pureSerializationState, graphFetchState, config } = props;
+    const applicationStore = graphFetchState.queryBuilderState.applicationStore;
+    const toAdd = !pureSerializationState.config;
+    const handleAction = (): void => {
+      if (toAdd) {
+        pureSerializationState.setConfig(config);
+      }
+      pureSerializationState.setConfigModal(false);
+    };
+    const removeConfig = (): void => {
+      pureSerializationState.setConfig(undefined);
+      pureSerializationState.setConfigModal(false);
+      graphFetchState.queryBuilderState.applicationStore.notificationService.notifySuccess(
+        'Serialization config removed',
+      );
+    };
+    const close = (): void => pureSerializationState.setConfigModal(false);
+    return (
+      <Dialog
+        open={pureSerializationState.configModal}
+        onClose={close}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="query-builder-graph-fetch-config"
+        >
+          <ModalHeader
+            title={`${
+              toAdd ? 'Add Serialization Config' : 'Edit Serialization Config'
+            }`}
+          />
+          <ModalBody className="query-builder-graph-fetch-config__content">
+            <Panel>
+              <PanelForm>
+                <PanelFormTextField
+                  name="Type Key Name"
+                  value={config.typeKeyName}
+                  isReadOnly={false}
+                  update={(value: string | undefined): void =>
+                    config.setTypeName(value ?? '')
+                  }
+                  errorMessage={
+                    config.typeKeyName === ''
+                      ? `Type key name can't be empty`
+                      : undefined
+                  }
+                />
+                <PanelFormBooleanField
+                  name="Include Type"
+                  value={config.includeType}
+                  isReadOnly={false}
+                  update={(value: boolean | undefined): void =>
+                    config.setIncludeType(Boolean(value))
+                  }
+                />
+
+                <PanelFormBooleanField
+                  name="Include Enum Type"
+                  value={config.includeEnumType}
+                  isReadOnly={false}
+                  update={(value: boolean | undefined): void =>
+                    config.setInclueEnumType(Boolean(value))
+                  }
+                />
+
+                <PanelFormBooleanField
+                  name="Remove Properties With Null Values"
+                  value={config.removePropertiesWithNullValues}
+                  isReadOnly={false}
+                  update={(value: boolean | undefined): void =>
+                    config.setRemovePropertiesWithNullValues(Boolean(value))
+                  }
+                />
+
+                <PanelFormBooleanField
+                  name="Remove properties with empty sets"
+                  value={config.removePropertiesWithEmptySets}
+                  isReadOnly={false}
+                  update={(value: boolean | undefined): void =>
+                    config.setRemovePropertiesWithEmptySets(Boolean(value))
+                  }
+                />
+
+                <PanelFormBooleanField
+                  name="Use Fully Qualified Type Path"
+                  value={config.fullyQualifiedTypePath}
+                  isReadOnly={false}
+                  update={(value: boolean | undefined): void =>
+                    config.setFullyQualifiedTypePath(Boolean(value))
+                  }
+                />
+                <PanelFormBooleanField
+                  name="Include Object Reference"
+                  value={config.includeObjectReference}
+                  isReadOnly={false}
+                  update={(value: boolean | undefined): void =>
+                    config.setIncludeObjectReference(Boolean(value))
+                  }
+                />
+              </PanelForm>
+            </Panel>
+          </ModalBody>
+          <ModalFooter>
+            {!toAdd && (
+              <ModalFooterButton
+                className="btn--caution"
+                text="Remove Config"
+                onClick={removeConfig}
+              />
+            )}
+            <button
+              className="btn modal__footer__close-btn btn--dark"
+              onClick={handleAction}
+            >
+              {toAdd ? 'Add Config' : 'Close'}
+            </button>
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
 export const QueryBuilderGraphFetchTreeExplorer = observer(
   (props: {
     graphFetchState: QueryBuilderGraphFetchTreeState;
+    pureSerializationState: GraphFetchPureSerializationState;
     treeData: QueryBuilderGraphFetchTreeData;
     updateTreeData: (data: QueryBuilderGraphFetchTreeData) => void;
     isReadOnly: boolean;
   }) => {
-    const { graphFetchState, treeData, updateTreeData, isReadOnly } = props;
+    const {
+      graphFetchState,
+      pureSerializationState,
+      treeData,
+      updateTreeData,
+      isReadOnly,
+    } = props;
 
     const onNodeSelect = (node: QueryBuilderGraphFetchTreeNodeData): void => {
       if (node.childrenIds.length) {
@@ -165,9 +325,30 @@ export const QueryBuilderGraphFetchTreeExplorer = observer(
     const toggleChecked = (): void =>
       graphFetchState.setChecked(!graphFetchState.isChecked);
 
+    const openConfigModal = (): void => {
+      pureSerializationState.setConfigModal(true);
+    };
+
     return (
       <div className="query-builder-graph-fetch-tree">
         <div className="query-builder-graph-fetch-tree__toolbar">
+          <div className="query-builder-graph-fetch-tree__actions">
+            <button
+              className="query-builder-graph-fetch-tree__actions__action-btn__label"
+              onClick={openConfigModal}
+              title={`${
+                pureSerializationState.config
+                  ? 'Edit pure serialization config'
+                  : 'Add pure serialization config'
+              }`}
+              tabIndex={-1}
+            >
+              <SerializeIcon className="query-builder-graph-fetch-tree__actions__action-btn__label__icon" />
+              <div className="query-builder-graph-fetch-tree__actions__action-btn__label__title">
+                {pureSerializationState.config ? 'Edit Config' : 'Add Config'}
+              </div>
+            </button>
+          </div>
           <div
             className={clsx('panel__content__form__section__toggler')}
             onClick={toggleChecked}
@@ -189,6 +370,15 @@ export const QueryBuilderGraphFetchTreeExplorer = observer(
           </div>
         </div>
         <div className="query-builder-graph-fetch-tree__container">
+          {pureSerializationState.configModal && (
+            <PureSerializationConfigModal
+              pureSerializationState={pureSerializationState}
+              graphFetchState={graphFetchState}
+              config={
+                pureSerializationState.config ?? new PureSerializationConfig()
+              }
+            />
+          )}
           <TreeView
             components={{
               TreeNodeContainer: QueryBuilderGraphFetchTreeNodeContainer,
@@ -207,9 +397,13 @@ export const QueryBuilderGraphFetchTreeExplorer = observer(
   },
 );
 
-export const QueryBuilderGraphFetchTreePanel = observer(
-  (props: { graphFetchTreeState: QueryBuilderGraphFetchTreeState }) => {
-    const { graphFetchTreeState } = props;
+const QueryBuilderGraphFetchTreePanel = observer(
+  (props: {
+    graphFetchTreeState: QueryBuilderGraphFetchTreeState;
+
+    pureSerializationState: GraphFetchPureSerializationState;
+  }) => {
+    const { graphFetchTreeState, pureSerializationState } = props;
     const treeData = graphFetchTreeState.treeData;
 
     // Deep/Graph Fetch Tree
@@ -264,6 +458,7 @@ export const QueryBuilderGraphFetchTreePanel = observer(
           {treeData && !isGraphFetchTreeDataEmpty(treeData) && (
             <QueryBuilderGraphFetchTreeExplorer
               graphFetchState={graphFetchTreeState}
+              pureSerializationState={pureSerializationState}
               treeData={treeData}
               isReadOnly={false}
               updateTreeData={updateTreeData}
@@ -274,3 +469,43 @@ export const QueryBuilderGraphFetchTreePanel = observer(
     );
   },
 );
+
+export const QueryBuilderGraphFetchPanel = observer(
+  (props: { graphFetchTreeState: QueryBuilderGraphFetchTreeState }) => {
+    const { graphFetchTreeState } = props;
+    const serializationState = graphFetchTreeState.serializationState;
+    const handleTextModeClick = (): void =>
+      graphFetchTreeState.queryBuilderState.textEditorState.openModal(
+        QueryBuilderTextEditorMode.TEXT,
+      );
+    if (serializationState instanceof GraphFetchPureSerializationState) {
+      return (
+        <QueryBuilderGraphFetchTreePanel
+          graphFetchTreeState={graphFetchTreeState}
+          pureSerializationState={serializationState}
+        />
+      );
+    }
+    return (
+      <div
+        data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_GRAPH_FETCH}
+        className="panel__content"
+      >
+        <BlankPanelContent>
+          <div className="unsupported-element-editor__main">
+            <div className="unsupported-element-editor__summary">
+              Unsupported Graph Fetch Serialization Type
+            </div>
+
+            <button
+              className="btn--dark unsupported-element-editor__to-text-mode__btn"
+              onClick={handleTextModeClick}
+            >
+              Edit in text mode
+            </button>
+          </div>
+        </BlankPanelContent>
+      </div>
+    );
+  },
+);

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

@@ -63,6 +63,7 @@ import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/td
 import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import { COLUMN_SORT_TYPE } from '../../stores/fetch-structure/tds/QueryResultSetModifierState.js';
 import { QUERY_BUILDER_TEST_ID } from '../../application/QueryBuilderTesting.js';
+import { QueryBuilderPanelIssueCountBadge } from '../shared/QueryBuilderPanelIssueCountBadge.js';
 
 // helpers
 const createWindowColumnState = (
@@ -190,7 +191,9 @@ const QueryBuilderWindowColumnModalEditor = observer(
     const close = (): void => {
       windowState.setEditColumn(undefined);
     };
-    const isDuplicatedColumnName = createNewWindow
+    const isDuplicatedColumnName = !windowState.windowColumns.includes(
+      windowColumnState,
+    )
       ? windowState.tdsState.tdsColumns
           .map((c) => c.columnName)
           .includes(windowColumnState.columnName)
@@ -1167,10 +1170,7 @@ export const QueryBuilderTDSWindowPanel = observer(
       [applicationStore, handleDrop],
     );
     return (
-      <div
-        data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_WINDOW_GROUPBY}
-        className="panel"
-      >
+      <div className="panel">
         <div
           data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_WINDOW_GROUPBY}
           className="panel"
@@ -1178,6 +1178,9 @@ export const QueryBuilderTDSWindowPanel = observer(
           <div className="panel__header">
             <div className="panel__header__title">
               <div className="panel__header__title__label">Window Function</div>
+              <QueryBuilderPanelIssueCountBadge
+                issues={tdsWindowState.validationIssues}
+              />
             </div>
             <div className="panel__header__actions">
               <button

package/src/graphManager/QueryBuilderSupportedFunctions.ts

@@ -30,6 +30,7 @@ export enum QUERY_BUILDER_SUPPORTED_FUNCTIONS {
   GRAPH_FETCH = 'meta::pure::graphFetch::execution::graphFetch',
   GRAPH_FETCH_CHECKED = 'meta::pure::graphFetch::execution::graphFetchChecked',
   SERIALIZE = 'meta::pure::graphFetch::execution::serialize',
+  EXTERNALIZE = 'meta::external::shared::format::functions::externalize',
 
   // TDS
   TDS_FILTER = 'meta::pure::tds::filter',

package/src/stores/QueryBuilderStateBuilder.ts

@@ -32,6 +32,7 @@ import {
   type InstanceValue,
   type INTERNAL__UnknownValueSpecification,
   type LambdaFunction,
+  type KeyExpressionInstanceValue,
   matchFunctionName,
   Class,
   type CollectionInstanceValue,
@@ -53,6 +54,7 @@ import {
 } from './fetch-structure/tds/aggregation/QueryBuilderAggregationStateBuilder.js';
 import {
   processGraphFetchExpression,
+  processGraphFetchExternalizeExpression,
   processGraphFetchSerializeExpression,
 } from './fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeStateBuilder.js';
 import {
@@ -503,6 +505,18 @@ export class QueryBuilderValueSpecificationProcessor
         this.parentLambda,
       );
       return;
+    } else if (
+      matchFunctionName(
+        functionName,
+        QUERY_BUILDER_SUPPORTED_FUNCTIONS.EXTERNALIZE,
+      )
+    ) {
+      processGraphFetchExternalizeExpression(
+        valueSpecification,
+        this.queryBuilderState,
+        this.parentLambda,
+      );
+      return;
     } else if (
       matchFunctionName(functionName, [
         QUERY_BUILDER_SUPPORTED_FUNCTIONS.GRAPH_FETCH_CHECKED,
@@ -563,6 +577,12 @@ export class QueryBuilderValueSpecificationProcessor
     throw new UnsupportedOperationError();
   }
 
+  visit_KeyExpressionInstanceValue(
+    valueSpecification: KeyExpressionInstanceValue,
+  ): void {
+    throw new UnsupportedOperationError();
+  }
+
   visit_CollectionInstanceValue(
     valueSpecification: CollectionInstanceValue,
   ): void {

package/src/stores/fetch-structure/QueryBuilderFetchStructureImplementationState.ts

@@ -55,6 +55,7 @@ export abstract class QueryBuilderFetchStructureImplementationState
   abstract get type(): string;
   abstract get usedExplorerTreePropertyNodeIDs(): string[];
   abstract get validationIssues(): string[] | undefined;
+
   abstract onClassChange(_class: Class | undefined): void;
   abstract revealCompilationError(compilationError: CompilationError): boolean;
   abstract clearCompilationError(): void;
@@ -68,6 +69,7 @@ export abstract class QueryBuilderFetchStructureImplementationState
     lambdaFunction: LambdaFunction,
     options?: LambdaFunctionBuilderOption,
   ): void;
+  abstract initialize(): void;
   abstract get hashCode(): string;
 
   get TEMPORARY__showPostFetchStructurePanel(): boolean {

package/src/stores/fetch-structure/QueryBuilderFetchStructureState.ts

@@ -59,20 +59,21 @@ export class QueryBuilderFetchStructureState {
           this.queryBuilderState,
           this,
         );
-        return;
+        break;
       }
       case FETCH_STRUCTURE_IMPLEMENTATION.GRAPH_FETCH: {
         this.implementation = new QueryBuilderGraphFetchTreeState(
           this.queryBuilderState,
           this,
         );
-        return;
+        break;
       }
       default:
         throw new UnsupportedOperationError(
           `Can't change fetch-structure implementation to unsupported type: '${type}'`,
         );
     }
+    this.implementation.initialize();
   }
 
   fetchProperty(node: QueryBuilderExplorerTreeNodeData): void {