@finos/legend-application-query 5.2.6 → 5.2.7

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

@@ -15,38 +15,44 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import {
-  clsx,
-  BlankPanelContent,
-  PlusIcon,
-  OptionsIcon,
-} from '@finos/legend-art';
+import { clsx, BlankPanelContent } from '@finos/legend-art';
 import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
 import { prettyCONSTName } from '@finos/legend-shared';
 import { QueryBuilderProjectionPanel } from './QueryBuilderProjectionPanel.js';
 import { QueryBuilderGraphFetchTreePanel } from './QueryBuilderGraphFetchTreePanel.js';
-import { FETCH_STRUCTURE_MODE } from '../../stores/fetch-structure/QueryBuilderFetchStructureState.js';
-import { QueryBuilderPostFilterState } from '../../stores/fetch-structure/projection/post-filter/QueryBuilderPostFilterState.js';
-import {
-  ActionAlertActionType,
-  ActionAlertType,
-  useApplicationStore,
-} from '@finos/legend-application';
 import { QueryBuilderProjectionState } from '../../stores/fetch-structure/projection/QueryBuilderProjectionState.js';
 import { QueryBuilderGraphFetchTreeState } from '../../stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeState.js';
 import { QueryBuilderPanelIssueCountBadge } from '../shared/QueryBuilderPanelIssueCountBadge.js';
+import { FETCH_STRUCTURE_IMPLEMENTATION } from '../../stores/fetch-structure/QueryBuilderFetchStructureImplementationState.js';
 
-const QueryBuilderUnsupportedFetchStructure = observer(
-  (props: { mode: FETCH_STRUCTURE_MODE }) => {
-    const { mode } = props;
+const QueryBuilderFetchStructureEditor = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const fetchStructureState = queryBuilderState.fetchStructureState;
+    const fetchStructureImplementation = fetchStructureState.implementation;
 
+    if (fetchStructureImplementation instanceof QueryBuilderProjectionState) {
+      return (
+        <QueryBuilderProjectionPanel
+          projectionState={fetchStructureImplementation}
+        />
+      );
+    } else if (
+      fetchStructureImplementation instanceof QueryBuilderGraphFetchTreeState
+    ) {
+      return (
+        <QueryBuilderGraphFetchTreePanel
+          graphFetchTreeState={fetchStructureImplementation}
+        />
+      );
+    }
     return (
       <div className="panel__content">
         <BlankPanelContent>
           <div className="query-builder__unsupported-view__main">
-            <div className="query-builder__unsupported-view__summary">{`Unsupported fetch structure mode ${prettyCONSTName(
-              mode,
-            )}`}</div>
+            <div className="query-builder__unsupported-view__summary">
+              Unsupported fetch structure
+            </div>
           </div>
         </BlankPanelContent>
       </div>
@@ -58,138 +64,16 @@ export const QueryBuilderFetchStructurePanel = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
     const fetchStructureState = queryBuilderState.fetchStructureState;
-    const fetchStructureStateMode = fetchStructureState.fetchStructureMode;
-    const applicationStore = useApplicationStore();
-    const openResultSetModifierEditor = (): void =>
-      queryBuilderState.fetchStructureState.projectionState.resultSetModifierState.setShowModal(
-        true,
-      );
-    const addNewBlankDerivation = (): void =>
-      fetchStructureState.projectionState.addNewBlankDerivation();
-
-    const renderFetchMode = (): React.ReactNode => {
-      switch (fetchStructureStateMode) {
-        case FETCH_STRUCTURE_MODE.PROJECTION:
-          return (
-            <QueryBuilderProjectionPanel
-              queryBuilderState={queryBuilderState}
-            />
-          );
-        case FETCH_STRUCTURE_MODE.GRAPH_FETCH:
-          return (
-            <QueryBuilderGraphFetchTreePanel
-              queryBuilderState={queryBuilderState}
-            />
-          );
-        default:
-          return (
-            <QueryBuilderUnsupportedFetchStructure
-              mode={fetchStructureStateMode}
-            />
-          );
-      }
-    };
 
-    const onChangeFetchStructureMode =
-      (fetchMode: FETCH_STRUCTURE_MODE): (() => void) =>
+    const onChangeFetchStructureImplementation =
+      (implementationType: FETCH_STRUCTURE_IMPLEMENTATION): (() => void) =>
       (): void => {
-        const reset = (): void => {
-          fetchStructureState.setFetchStructureMode(fetchMode);
-          queryBuilderState.changeFetchStructure();
-          queryBuilderState.fetchStructureState.projectionState.postFilterState =
-            new QueryBuilderPostFilterState(
-              queryBuilderState.fetchStructureState.projectionState,
-              queryBuilderState.fetchStructureState.projectionState.postFilterOperators,
-            );
-          queryBuilderState.fetchStructureState.projectionState.setShowPostFilterPanel(
-            false,
+        if (fetchStructureState.implementation.type !== implementationType) {
+          fetchStructureState.implementation.checkBeforeChangingImplementation(
+            () => {
+              fetchStructureState.changeImplementation(implementationType);
+            },
           );
-        };
-        if (fetchStructureState.fetchStructureMode !== fetchMode) {
-          switch (fetchMode) {
-            case FETCH_STRUCTURE_MODE.GRAPH_FETCH: {
-              if (
-                queryBuilderState.fetchStructureState.projectionState.columns
-                  .length > 0
-                // NOTE: here we could potentially check for the presence of post-filter as well
-                // but we make the assumption that if there is no projection column, there should
-                // not be any post-filter at all
-              ) {
-                applicationStore.setActionAlertInfo({
-                  message:
-                    queryBuilderState.fetchStructureState.projectionState
-                      .showPostFilterPanel &&
-                    queryBuilderState.fetchStructureState.projectionState
-                      .postFilterState.nodes.size > 0
-                      ? 'With graph-fetch mode, post filter is not supported. Current projection columns and post filters will be lost when switching to the graph-fetch mode. Do you still want to proceed?'
-                      : 'Current projection columns will be lost when switching to the graph-fetch mode. Do you still want to proceed?',
-                  type: ActionAlertType.CAUTION,
-                  actions: [
-                    {
-                      label: 'Proceed',
-                      type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-                      handler: applicationStore.guardUnhandledError(
-                        async () => {
-                          queryBuilderState.fetchStructureState.projectionState =
-                            new QueryBuilderProjectionState(
-                              queryBuilderState,
-                              queryBuilderState.fetchStructureState,
-                            );
-                          reset();
-                        },
-                      ),
-                    },
-                    {
-                      label: 'Cancel',
-                      type: ActionAlertActionType.PROCEED,
-                      default: true,
-                    },
-                  ],
-                });
-              } else {
-                reset();
-              }
-              return;
-            }
-            case FETCH_STRUCTURE_MODE.PROJECTION: {
-              if (
-                queryBuilderState.fetchStructureState.graphFetchTreeState
-                  .treeData?.rootIds.length
-              ) {
-                applicationStore.setActionAlertInfo({
-                  message:
-                    'Current graph-fetch will be lost when switching to projection mode. Do you still want to proceed?',
-                  type: ActionAlertType.CAUTION,
-                  actions: [
-                    {
-                      label: 'Proceed',
-                      type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-                      handler: applicationStore.guardUnhandledError(
-                        async () => {
-                          queryBuilderState.fetchStructureState.graphFetchTreeState =
-                            new QueryBuilderGraphFetchTreeState(
-                              queryBuilderState,
-                              queryBuilderState.fetchStructureState,
-                            );
-                          reset();
-                        },
-                      ),
-                    },
-                    {
-                      label: 'Cancel',
-                      type: ActionAlertActionType.PROCEED,
-                      default: true,
-                    },
-                  ],
-                });
-              } else {
-                reset();
-              }
-              return;
-            }
-            default:
-              return;
-          }
         }
       };
 
@@ -199,47 +83,29 @@ export const QueryBuilderFetchStructurePanel = observer(
           <div className="panel__header__title">
             <div className="panel__header__title__label">fetch structure</div>
             <QueryBuilderPanelIssueCountBadge
-              issues={fetchStructureState.validationIssues}
+              issues={fetchStructureState.implementation.validationIssues}
             />
           </div>
           <div className="panel__header__actions">
-            {fetchStructureStateMode === FETCH_STRUCTURE_MODE.PROJECTION && (
-              <>
-                <button
-                  className="panel__header__action"
-                  onClick={openResultSetModifierEditor}
-                  tabIndex={-1}
-                  title="Configure result set modifiers..."
-                >
-                  <OptionsIcon className="query-builder__icon query-builder__icon__query-option" />
-                </button>
-                <button
-                  className="panel__header__action"
-                  onClick={addNewBlankDerivation}
-                  tabIndex={-1}
-                  title="Add a new derivation"
-                >
-                  <PlusIcon />
-                </button>
-              </>
-            )}
             <div className="query-builder__fetch__structure__modes">
-              {Object.values(FETCH_STRUCTURE_MODE).map((fetchMode) => (
+              {Object.values(FETCH_STRUCTURE_IMPLEMENTATION).map((type) => (
                 <button
-                  onClick={onChangeFetchStructureMode(fetchMode)}
+                  onClick={onChangeFetchStructureImplementation(type)}
                   className={clsx('query-builder__fetch__structure__mode', {
                     'query-builder__fetch__structure__mode--selected':
-                      fetchMode === fetchStructureState.fetchStructureMode,
+                      type === fetchStructureState.implementation.type,
                   })}
-                  key={fetchMode}
+                  key={type}
                 >
-                  {prettyCONSTName(fetchMode)}
+                  {prettyCONSTName(type)}
                 </button>
               ))}
             </div>
           </div>
         </div>
-        {renderFetchMode()}
+        <QueryBuilderFetchStructureEditor
+          queryBuilderState={queryBuilderState}
+        />
       </div>
     );
   },

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

@@ -30,7 +30,6 @@ import {
   InfoCircleIcon,
   PanelDropZone,
 } from '@finos/legend-art';
-import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
 import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
 import { isNonNullable } from '@finos/legend-shared';
 import {
@@ -168,7 +167,7 @@ export const QueryBuilderGraphFetchTreeExplorer = observer(
 
     return (
       <div className="query-builder-graph-fetch-tree">
-        <div className="query-builder-graph-fetch-tree__settings">
+        <div className="query-builder-graph-fetch-tree__toolbar">
           <div
             className={clsx('panel__content__form__section__toggler')}
             onClick={toggleChecked}
@@ -184,7 +183,7 @@ export const QueryBuilderGraphFetchTreeExplorer = observer(
             <div className="panel__content__form__section__toggler__prompt">
               Check graph fetch
             </div>
-            <div className="query-builder-graph-fetch-tree__settings__hint-icon">
+            <div className="query-builder-graph-fetch-tree__toolbar__hint-icon">
               <InfoCircleIcon title="With this enabled, while executing, violations of constraints will reported as part of the result, rather than causing a failure" />
             </div>
           </div>
@@ -209,23 +208,21 @@ export const QueryBuilderGraphFetchTreeExplorer = observer(
 );
 
 export const QueryBuilderGraphFetchTreePanel = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { queryBuilderState } = props;
-    const fetchStructureState = queryBuilderState.fetchStructureState;
-    const graphFetchState = fetchStructureState.graphFetchTreeState;
-    const treeData = graphFetchState.treeData;
+  (props: { graphFetchTreeState: QueryBuilderGraphFetchTreeState }) => {
+    const { graphFetchTreeState } = props;
+    const treeData = graphFetchTreeState.treeData;
 
     // Deep/Graph Fetch Tree
     const updateTreeData = (data: QueryBuilderGraphFetchTreeData): void => {
-      graphFetchState.setGraphFetchTree(data);
+      graphFetchTreeState.setGraphFetchTree(data);
     };
 
     // Drag and Drop
     const handleDrop = useCallback(
       (item: QueryBuilderExplorerTreeDragSource): void => {
-        graphFetchState.addProperty(item.node);
+        graphFetchTreeState.addProperty(item.node, { refreshTreeData: true });
       },
-      [graphFetchState],
+      [graphFetchTreeState],
     );
     const [{ isDragOver }, dropTargetConnector] = useDrop<
       QueryBuilderExplorerTreeDragSource,
@@ -266,7 +263,7 @@ export const QueryBuilderGraphFetchTreePanel = observer(
           )}
           {treeData && !isGraphFetchTreeDataEmpty(treeData) && (
             <QueryBuilderGraphFetchTreeExplorer
-              graphFetchState={graphFetchState}
+              graphFetchState={graphFetchTreeState}
               treeData={treeData}
               isReadOnly={false}
               updateTreeData={updateTreeData}

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

@@ -51,6 +51,7 @@ import {
   DragPreviewLayer,
   PanelEntryDropZonePlaceholder,
   useDragPreviewLayer,
+  BlankPanelContent,
 } from '@finos/legend-art';
 import {
   type Type,
@@ -98,18 +99,18 @@ import {
 import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
 import { isTypeCompatibleForAssignment } from '../../stores/QueryBuilderValueSpecificationHelper.js';
 import { QUERY_BUILDER_GROUP_OPERATION } from '../../stores/QueryBuilderGroupOperationHelper.js';
+import { QueryBuilderProjectionState } from '../../stores/fetch-structure/projection/QueryBuilderProjectionState.js';
 
 const QueryBuilderPostFilterConditionContextMenu = observer(
   forwardRef<
     HTMLDivElement,
     {
-      queryBuilderState: QueryBuilderState;
+      projectionState: QueryBuilderProjectionState;
       node: QueryBuilderPostFilterTreeNodeData;
     }
   >(function QueryBuilderPostFilterConditionContextMenu(props, ref) {
-    const { queryBuilderState, node } = props;
-    const postFilterState =
-      queryBuilderState.fetchStructureState.projectionState.postFilterState;
+    const { projectionState, node } = props;
+    const postFilterState = projectionState.postFilterState;
     const removeNode = (): void =>
       postFilterState.removeNodeAndPruneBranch(node);
     const createCondition = (): void => {
@@ -549,18 +550,17 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
     props: TreeNodeContainerProps<
       QueryBuilderPostFilterTreeNodeData,
       {
-        queryBuilderState: QueryBuilderState;
+        projectionState: QueryBuilderProjectionState;
       }
     >,
   ) => {
     const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
-    const { queryBuilderState } = innerProps;
+    const { projectionState: projectionState } = innerProps;
     const ref = useRef<HTMLDivElement>(null);
     const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
       useState(false);
     const applicationStore = useApplicationStore();
-    const postFilterState =
-      queryBuilderState.fetchStructureState.projectionState.postFilterState;
+    const postFilterState = projectionState.postFilterState;
     const isExpandable =
       node instanceof QueryBuilderPostFilterTreeGroupNodeData;
     const selectNode = (): void => onNodeSelect?.(node);
@@ -671,7 +671,7 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
       <ContextMenu
         content={
           <QueryBuilderPostFilterConditionContextMenu
-            queryBuilderState={queryBuilderState}
+            projectionState={projectionState}
             node={node}
           />
         }
@@ -760,7 +760,7 @@ const QueryBuilderPostFilterTreeNodeView = observer(
     props: TreeNodeViewProps<
       QueryBuilderPostFilterTreeNodeData,
       {
-        queryBuilderState: QueryBuilderState;
+        projectionState: QueryBuilderProjectionState;
       }
     >,
   ) => {
@@ -798,10 +798,9 @@ const QueryBuilderPostFilterTreeNodeView = observer(
 );
 
 const QueryBuilderPostFilterTree = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { queryBuilderState } = props;
-    const postFilterState =
-      queryBuilderState.fetchStructureState.projectionState.postFilterState;
+  (props: { projectionState: QueryBuilderProjectionState }) => {
+    const { projectionState } = props;
+    const postFilterState = projectionState.postFilterState;
     const rootNodes = postFilterState.rootIds.map((rootId) =>
       postFilterState.getNode(rootId),
     );
@@ -827,7 +826,7 @@ const QueryBuilderPostFilterTree = observer(
               getChildNodes={getChildNodes}
               onNodeSelect={onNodeSelect}
               innerProps={{
-                queryBuilderState,
+                projectionState: projectionState,
               }}
             />
           ))}
@@ -837,12 +836,11 @@ const QueryBuilderPostFilterTree = observer(
   },
 );
 
-export const QueryBuilderPostFilterPanel = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { queryBuilderState } = props;
+const QueryBuilderPostFilterPanelContent = observer(
+  (props: { projectionState: QueryBuilderProjectionState }) => {
+    const { projectionState } = props;
     const applicationStore = useApplicationStore();
-    const postFilterState =
-      queryBuilderState.fetchStructureState.projectionState.postFilterState;
+    const postFilterState = projectionState.postFilterState;
     const rootNode = postFilterState.getRootNode();
     // actions
     const collapseTree = (): void => {
@@ -902,7 +900,7 @@ export const QueryBuilderPostFilterPanel = observer(
           const columnState = (item as QueryBuilderProjectionColumnDragSource)
             .columnState;
           const aggregateColumnState =
-            queryBuilderState.fetchStructureState.projectionState.aggregationState.columns.find(
+            projectionState.aggregationState.columns.find(
               (column) => column.projectionColumnState === columnState,
             );
           if (
@@ -940,8 +938,7 @@ export const QueryBuilderPostFilterPanel = observer(
       [
         applicationStore,
         postFilterState,
-        queryBuilderState.fetchStructureState.projectionState.aggregationState
-          .columns,
+        projectionState.aggregationState.columns,
       ],
     );
     const [{ isDragOver }, dropTargetConnector] = useDrop<
@@ -962,10 +959,11 @@ export const QueryBuilderPostFilterPanel = observer(
       }),
       [applicationStore, handleDrop],
     );
+
     return (
       <div
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_POST_FILTER}
-        className="panel query-builder__filter"
+        className="panel"
       >
         <div className="panel__header">
           <div className="panel__header__title">
@@ -1037,7 +1035,7 @@ export const QueryBuilderPostFilterPanel = observer(
             </button>
           </div>
         </div>
-        <div className="panel__content query-builder__filter__content">
+        <div className="panel__content">
           <PanelDropZone
             isDragOver={isDragOver}
             dropTargetConnector={dropTargetConnector}
@@ -1056,9 +1054,7 @@ export const QueryBuilderPostFilterPanel = observer(
                   ): string => item.node.dragPreviewLabel}
                   types={Object.values(QUERY_BUILDER_POST_FILTER_DND_TYPE)}
                 />
-                <QueryBuilderPostFilterTree
-                  queryBuilderState={queryBuilderState}
-                />
+                <QueryBuilderPostFilterTree projectionState={projectionState} />
               </>
             )}
           </PanelDropZone>
@@ -1067,3 +1063,41 @@ export const QueryBuilderPostFilterPanel = observer(
     );
   },
 );
+
+export const QueryBuilderPostFilterPanel = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const fetchStructureImplementation =
+      queryBuilderState.fetchStructureState.implementation;
+
+    return (
+      <div
+        data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_POST_FILTER}
+        className="panel"
+      >
+        {fetchStructureImplementation instanceof
+          QueryBuilderProjectionState && (
+          <QueryBuilderPostFilterPanelContent
+            projectionState={fetchStructureImplementation}
+          />
+        )}
+        {!(
+          fetchStructureImplementation instanceof QueryBuilderProjectionState
+        ) && (
+          <>
+            <div className="panel__header">
+              <div className="panel__header__title">
+                <div className="panel__header__title__label">post-filter</div>
+              </div>
+            </div>
+            <div className="panel__content">
+              <BlankPanelContent>
+                Post-filter is not supported for the current fetch-structure
+              </BlankPanelContent>
+            </div>
+          </>
+        )}
+      </div>
+    );
+  },
+);