@finos/legend-query-builder 1.0.5 → 2.0.0

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/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 {

package/src/stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeState.ts

@@ -24,6 +24,7 @@ import {
   PackageableElementExplicitReference,
   RootGraphFetchTree,
   getAllSuperclasses,
+  type Binding,
 } from '@finos/legend-graph';
 import {
   type QueryBuilderGraphFetchTreeData,
@@ -54,6 +55,145 @@ import {
 import { QUERY_BUILDER_HASH_STRUCTURE } from '../../../graphManager/QueryBuilderHashUtils.js';
 import { isValueExpressionReferencedInValue } from '../../QueryBuilderValueSpecificationHelper.js';
 
+export enum SERIALIZATION_TYPE {
+  PURE = 'PURE',
+  EXTERNAL_FORMAT = 'EXTERNAL_FORMAT',
+}
+
+const DEFAULT_PURE_CONFIG_TYPE_NAME = '@type';
+
+export class PureSerializationConfig {
+  typeKeyName: string;
+  includeType: boolean;
+  includeEnumType: boolean;
+  removePropertiesWithNullValues: boolean;
+  removePropertiesWithEmptySets: boolean;
+  fullyQualifiedTypePath: boolean;
+  includeObjectReference: boolean;
+
+  constructor() {
+    // default values
+    this.typeKeyName = DEFAULT_PURE_CONFIG_TYPE_NAME;
+    this.includeType = true;
+    this.includeEnumType = true;
+    this.removePropertiesWithNullValues = true;
+    this.removePropertiesWithEmptySets = false;
+    this.fullyQualifiedTypePath = true;
+    this.includeObjectReference = false;
+    makeObservable(this, {
+      typeKeyName: observable,
+      includeType: observable,
+      includeEnumType: observable,
+      removePropertiesWithNullValues: observable,
+      removePropertiesWithEmptySets: observable,
+      fullyQualifiedTypePath: observable,
+      includeObjectReference: observable,
+      setTypeName: action,
+      setIncludeObjectReference: action,
+      setIncludeType: action,
+      setFullyQualifiedTypePath: action,
+      setRemovePropertiesWithEmptySets: action,
+      setInclueEnumType: action,
+      setRemovePropertiesWithNullValues: action,
+    });
+  }
+
+  setTypeName(val: string): void {
+    this.typeKeyName = val;
+  }
+
+  setIncludeType(val: boolean): void {
+    this.includeType = val;
+  }
+
+  setInclueEnumType(val: boolean): void {
+    this.includeEnumType = val;
+  }
+
+  setRemovePropertiesWithNullValues(val: boolean): void {
+    this.removePropertiesWithNullValues = val;
+  }
+
+  setRemovePropertiesWithEmptySets(val: boolean): void {
+    this.removePropertiesWithEmptySets = val;
+  }
+
+  setFullyQualifiedTypePath(val: boolean): void {
+    this.fullyQualifiedTypePath = val;
+  }
+
+  setIncludeObjectReference(val: boolean): void {
+    this.includeObjectReference = val;
+  }
+}
+
+export abstract class GraphFetchSerializationState {
+  readonly queryBuilderGraphFetchTreeState: QueryBuilderGraphFetchTreeState;
+
+  constructor(graphFetchTreeState: QueryBuilderGraphFetchTreeState) {
+    this.queryBuilderGraphFetchTreeState = graphFetchTreeState;
+  }
+
+  abstract getLabel(): string;
+}
+
+export class GraphFetchPureSerializationState extends GraphFetchSerializationState {
+  config: PureSerializationConfig | undefined;
+  configModal = false;
+
+  constructor(graphFetchTreeState: QueryBuilderGraphFetchTreeState) {
+    super(graphFetchTreeState);
+    makeObservable(this, {
+      config: observable,
+      configModal: observable,
+      setConfigModal: action,
+    });
+  }
+
+  setConfig(value: PureSerializationConfig | undefined): void {
+    this.config = value;
+  }
+
+  setConfigModal(val: boolean): void {
+    this.configModal = val;
+  }
+
+  override getLabel(): string {
+    return SERIALIZATION_TYPE.PURE;
+  }
+}
+
+export class GraphFetchExternalFormatSerializationState extends GraphFetchSerializationState {
+  targetBinding: Binding;
+  treeData: QueryBuilderGraphFetchTreeData | undefined;
+
+  constructor(
+    graphFetchTreeState: QueryBuilderGraphFetchTreeState,
+    targetBinding: Binding,
+    treeData: QueryBuilderGraphFetchTreeData | undefined,
+  ) {
+    super(graphFetchTreeState);
+    makeObservable(this, {
+      targetBinding: observable,
+      treeData: observable.ref,
+    });
+    this.targetBinding = targetBinding;
+    this.treeData = treeData;
+  }
+
+  setBinding(value: Binding): void {
+    this.targetBinding = value;
+  }
+
+  setGraphFetchTree(val: QueryBuilderGraphFetchTreeData | undefined): void {
+    this.treeData = val;
+  }
+
+  override getLabel(): string {
+    return SERIALIZATION_TYPE.EXTERNAL_FORMAT;
+  }
+}
+
 export class QueryBuilderGraphFetchTreeState
   extends QueryBuilderFetchStructureImplementationState
   implements Hashable
@@ -66,6 +206,11 @@ export class QueryBuilderGraphFetchTreeState
    */
   isChecked = false;
 
+  /**
+   * Used to describe how the graph fetch tree is serialized to the final result set
+   */
+  serializationState: GraphFetchSerializationState;
+
   constructor(
     queryBuilderState: QueryBuilderState,
     fetchStructureState: QueryBuilderFetchStructureState,
@@ -75,13 +220,18 @@ export class QueryBuilderGraphFetchTreeState
     makeObservable(this, {
       treeData: observable.ref,
       isChecked: observable,
+      serializationState: observable,
       TEMPORARY__showPostFetchStructurePanel: computed,
       setGraphFetchTree: action,
+      setSerializationState: action,
       setChecked: action,
+      initialize: action,
     });
 
     // try to initialize the graph-fetch tree data using the setup class
     this.updateTreeData(this.queryBuilderState.class);
+    // we will default to standard pure serialization with no config
+    this.serializationState = new GraphFetchPureSerializationState(this);
   }
 
   get type(): string {
@@ -143,6 +293,14 @@ export class QueryBuilderGraphFetchTreeState
     return undefined;
   }
 
+  override initialize(): void {
+    this.queryBuilderState.filterState.setShowPanel(true);
+  }
+
+  setSerializationState(val: GraphFetchSerializationState): void {
+    this.serializationState = val;
+  }
+
   setGraphFetchTree(val: QueryBuilderGraphFetchTreeData | undefined): void {
     this.treeData = val;
   }