@finos/legend-application-query 5.0.2 → 5.2.2

package/src/application/LegendQueryApplicationConfig.ts

@@ -17,12 +17,40 @@
 import {
   assertNonNullable,
   guaranteeNonEmptyString,
+  SerializationFactory,
+  type PlainObject,
 } from '@finos/legend-shared';
 import {
   LegendApplicationConfig,
   type LegendApplicationConfigurationInput,
   type LegendApplicationConfigurationData,
 } from '@finos/legend-application';
+import { createModelSchema, optional, primitive } from 'serializr';
+
+class LegendQueryApplicationCoreOptions {
+  /**
+   * Indicates if we should enable theme switcher.
+   *
+   * NOTE: support for theme switcher is fairly basic at the moment, so we really should
+   * just keep this feature as a beta.
+   *
+   * This flag will be kept until we have full support for themeing
+   * See https://github.com/finos/legend-studio/issues/264
+   */
+  TEMPORARY__enableThemeSwitcher = false;
+
+  private static readonly serialization = new SerializationFactory(
+    createModelSchema(LegendQueryApplicationCoreOptions, {
+      TEMPORARY__enableThemeSwitcher: optional(primitive()),
+    }),
+  );
+
+  static create(
+    configData: PlainObject<LegendQueryApplicationCoreOptions>,
+  ): LegendQueryApplicationCoreOptions {
+    return LegendQueryApplicationCoreOptions.serialization.fromJson(configData);
+  }
+}
 
 export interface LegendQueryApplicationConfigurationData
   extends LegendApplicationConfigurationData {
@@ -38,15 +66,17 @@ export interface LegendQueryApplicationConfigurationData
     TEMPORARY__useLegacyDepotServerAPIRoutes?: boolean;
   };
   engine: { url: string; queryUrl?: string };
-  studio: { url: string };
-  extensions?: Record<PropertyKey, unknown>;
+  studio: { url: string; sdlcUrl: string };
 }
 
 export class LegendQueryApplicationConfig extends LegendApplicationConfig {
+  readonly options = new LegendQueryApplicationCoreOptions();
+
   readonly engineServerUrl: string;
   readonly engineQueryServerUrl?: string | undefined;
   readonly depotServerUrl: string;
   readonly studioUrl: string;
+  readonly sdlcUrl: string;
   readonly TEMPORARY__useLegacyDepotServerAPIRoutes?: boolean | undefined;
 
   constructor(
@@ -71,7 +101,16 @@ export class LegendQueryApplicationConfig extends LegendApplicationConfig {
       input.configData.studio.url,
       `Can't configure application: 'studio.url' field is missing or empty`,
     );
+    this.sdlcUrl = guaranteeNonEmptyString(
+      input.configData.studio.sdlcUrl,
+      `Can't configure application: 'studio.sdlcUrl' field is missing or empty`,
+    );
     this.TEMPORARY__useLegacyDepotServerAPIRoutes =
       input.configData.depot.TEMPORARY__useLegacyDepotServerAPIRoutes;
+
+    this.options = LegendQueryApplicationCoreOptions.create(
+      (input.configData.extensions?.core ??
+        {}) as PlainObject<LegendQueryApplicationCoreOptions>,
+    );
   }
 }

package/src/components/LegendQueryApplication.tsx

@@ -33,13 +33,23 @@ import type { LegendQueryApplicationConfig } from '../application/LegendQueryApp
 import {
   LegendQueryBaseStoreProvider,
   useLegendQueryApplicationStore,
+  useLegendQueryBaseStore,
 } from './LegendQueryBaseStoreProvider.js';
+import { SDLCServerClientProvider } from '@finos/legend-server-sdlc';
+import { useEffect } from 'react';
+import { flowResult } from 'mobx';
 
 const LegendQueryApplicationRoot = observer(() => {
+  const baseStore = useLegendQueryBaseStore();
   const applicationStore = useLegendQueryApplicationStore();
   const extraApplicationPageEntries = applicationStore.pluginManager
     .getApplicationPlugins()
     .flatMap((plugin) => plugin.getExtraApplicationPageEntries?.() ?? []);
+  useEffect(() => {
+    flowResult(
+      baseStore.applicationSDLCSetupState.initializeSDLCServerClient(),
+    ).catch(applicationStore.alertUnhandledError);
+  }, [applicationStore, baseStore]);
 
   return (
     <div className="app">
@@ -86,19 +96,26 @@ export const LegendQueryApplication = observer(
     const { config, pluginManager } = props;
 
     return (
-      <DepotServerClientProvider
+      <SDLCServerClientProvider
         config={{
-          serverUrl: config.depotServerUrl,
-          TEMPORARY__useLegacyDepotServerAPIRoutes:
-            config.TEMPORARY__useLegacyDepotServerAPIRoutes,
+          env: config.env,
+          serverUrl: config.sdlcUrl,
         }}
       >
-        <LegendQueryBaseStoreProvider pluginManager={pluginManager}>
-          <LegendApplicationComponentFrameworkProvider>
-            <LegendQueryApplicationRoot />
-          </LegendApplicationComponentFrameworkProvider>
-        </LegendQueryBaseStoreProvider>
-      </DepotServerClientProvider>
+        <DepotServerClientProvider
+          config={{
+            serverUrl: config.depotServerUrl,
+            TEMPORARY__useLegacyDepotServerAPIRoutes:
+              config.TEMPORARY__useLegacyDepotServerAPIRoutes,
+          }}
+        >
+          <LegendQueryBaseStoreProvider pluginManager={pluginManager}>
+            <LegendApplicationComponentFrameworkProvider>
+              <LegendQueryApplicationRoot />
+            </LegendApplicationComponentFrameworkProvider>
+          </LegendQueryBaseStoreProvider>
+        </DepotServerClientProvider>
+      </SDLCServerClientProvider>
     );
   },
 );

package/src/components/LegendQueryBaseStoreProvider.tsx

@@ -26,6 +26,7 @@ import {
   type ApplicationStore,
   useApplicationStore,
 } from '@finos/legend-application';
+import { useSDLCServerClient } from '@finos/legend-server-sdlc';
 
 export const useLegendQueryApplicationStore = (): ApplicationStore<
   LegendQueryApplicationConfig,
@@ -46,11 +47,13 @@ export const LegendQueryBaseStoreProvider: React.FC<{
 }> = ({ children, pluginManager }) => {
   const applicationStore = useLegendQueryApplicationStore();
   const depotServerClient = useDepotServerClient();
+  const sdlcServerClient = useSDLCServerClient();
   const store = useLocalObservable(
     () =>
       new LegendQueryBaseStore(
         applicationStore,
         depotServerClient,
+        sdlcServerClient,
         pluginManager,
       ),
   );

package/src/components/QueryBuilder.tsx

@@ -176,7 +176,13 @@ export const QueryBuilder = observer(
                       Show Function(s)
                     </MenuContentItemLabel>
                   </MenuContentItem>
-                  <MenuContentItem onClick={toggleShowParameterPanel}>
+                  <MenuContentItem
+                    onClick={toggleShowParameterPanel}
+                    disabled={
+                      queryBuilderState.queryParametersState.parameterStates
+                        .length > 0
+                    }
+                  >
                     <MenuContentItemIcon>
                       {queryBuilderState.showParameterPanel ? (
                         <CheckIcon />
@@ -188,7 +194,12 @@ export const QueryBuilder = observer(
                   </MenuContentItem>
                   <MenuContentItem
                     onClick={toggleShowPostFilterPanel}
-                    disabled={queryBuilderState.fetchStructureState.isGraphFetchMode()}
+                    disabled={
+                      queryBuilderState.fetchStructureState.isGraphFetchMode() ||
+                      Array.from(
+                        queryBuilderState.postFilterState.nodes.values(),
+                      ).length > 0
+                    }
                   >
                     <MenuContentItemIcon>
                       {queryBuilderState.showPostFilterPanel ? (

package/src/components/QueryBuilderExplorerPanel.tsx

@@ -46,6 +46,8 @@ import {
   CheckIcon,
   SearchIcon,
   PanelLoadingIndicator,
+  DragPreviewLayer,
+  useDragPreviewLayer,
 } from '@finos/legend-art';
 import {
   type QueryBuilderExplorerTreeDragSource,
@@ -58,9 +60,8 @@ import {
   getQueryBuilderPropertyNodeData,
   getQueryBuilderSubTypeNodeData,
 } from '../stores/QueryBuilderExplorerState.js';
-import { useDrag, useDragLayer } from 'react-dnd';
+import { useDrag } from 'react-dnd';
 import { QueryBuilderPropertyInfoTooltip } from './QueryBuilderPropertyInfoTooltip.js';
-import { getEmptyImage } from 'react-dnd-html5-backend';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import { addQueryBuilderPropertyNode } from '../stores/QueryBuilderGraphFetchTreeUtil.js';
 import { QueryBuilderSimpleProjectionColumnState } from '../stores/QueryBuilderProjectionState.js';
@@ -233,51 +234,6 @@ const QueryBuilderExplorerPreviewDataModal = observer(
   },
 );
 
-const QueryBuilderExplorerPropertyDragLayer = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { queryBuilderState } = props;
-    const explorerState = queryBuilderState.explorerState;
-    const { itemType, item, isDragging, currentPosition } = useDragLayer(
-      (monitor) => ({
-        itemType: monitor.getItemType() as QUERY_BUILDER_EXPLORER_TREE_DND_TYPE,
-        item: monitor.getItem<QueryBuilderExplorerTreeDragSource | null>(),
-        isDragging: monitor.isDragging(),
-        initialOffset: monitor.getInitialSourceClientOffset(),
-        currentPosition: monitor.getClientOffset(),
-      }),
-    );
-
-    if (
-      !isDragging ||
-      !item ||
-      !Object.values(QUERY_BUILDER_EXPLORER_TREE_DND_TYPE).includes(itemType)
-    ) {
-      return null;
-    }
-    return (
-      <div className="query-builder-explorer-tree__drag-preview-layer">
-        <div
-          className="query-builder-explorer-tree__drag-preview"
-          // added some offset so the mouse doesn't overlap the label too much
-          style={
-            !currentPosition
-              ? { display: 'none' }
-              : {
-                  transform: `translate(${currentPosition.x + 20}px, ${
-                    currentPosition.y + 10
-                  }px)`,
-                }
-          }
-        >
-          {explorerState.humanizePropertyName
-            ? prettyPropertyName(item.node.label)
-            : item.node.label}
-        </div>
-      </div>
-    );
-  },
-);
-
 const QueryBuilderExplorerContextMenu = observer(
   forwardRef<
     HTMLDivElement,
@@ -442,7 +398,9 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
       useState(false);
     const applicationStore = useApplicationStore();
     const explorerState = queryBuilderState.explorerState;
-    const [, dragConnector, dragPreviewConnector] = useDrag(
+    const [, dragConnector, dragPreviewConnector] = useDrag<{
+      node?: QueryBuilderExplorerTreePropertyNodeData;
+    }>(
       () => ({
         type:
           node instanceof QueryBuilderExplorerTreePropertyNodeData
@@ -452,13 +410,15 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
               ? QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.CLASS_PROPERTY
               : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY
             : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ROOT,
-        item: (): { node?: QueryBuilderExplorerTreePropertyNodeData } =>
+        item: () =>
           node instanceof QueryBuilderExplorerTreePropertyNodeData
             ? { node }
             : {},
       }),
       [node],
     );
+    useDragPreviewLayer(dragPreviewConnector);
+
     const isExpandable = Boolean(node.childrenIds.length);
     const isDerivedProperty =
       node instanceof QueryBuilderExplorerTreePropertyNodeData &&
@@ -506,10 +466,6 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
         ).catch(applicationStore.alertUnhandledError);
       }
     };
-    // hide default HTML5 preview image
-    useEffect(() => {
-      dragPreviewConnector(getEmptyImage(), { captureDraggingState: true });
-    }, [dragPreviewConnector]);
 
     if (!node.mappingData.mapped && !explorerState.showUnmappedProperties) {
       return null;
@@ -595,7 +551,7 @@ const QueryBuilderExplorerTreeNodeContainer = observer(
               >
                 <div
                   className={clsx(
-                    'query-builder-explorer-tree__node__label--property--name',
+                    'query-builder-explorer-tree__node__label--property__name',
                     {
                       'query-builder-explorer-tree__node__label--deprecated':
                         checkForDeprecatedNode(
@@ -968,8 +924,13 @@ export const QueryBuilderExplorerPanel = observer(
               explorerState.mappingModelCoverageAnalysisState.isInProgress
             }
           />
-          <QueryBuilderExplorerPropertyDragLayer
-            queryBuilderState={queryBuilderState}
+          <DragPreviewLayer
+            labelGetter={(item: QueryBuilderExplorerTreeDragSource): string =>
+              explorerState.humanizePropertyName
+                ? prettyPropertyName(item.node.label)
+                : item.node.label
+            }
+            types={Object.values(QUERY_BUILDER_EXPLORER_TREE_DND_TYPE)}
           />
           {explorerState.mappingModelCoverageAnalysisState.isInProgress ? (
             <BlankPanelContent>

package/src/components/QueryBuilderFetchStructurePanel.tsx

@@ -34,6 +34,7 @@ import {
 } from '@finos/legend-application';
 import { QueryBuilderProjectionState } from '../stores/QueryBuilderProjectionState.js';
 import { QueryBuilderGraphFetchTreeState } from '../stores/QueryBuilderGraphFetchTreeState.js';
+import { QueryBuilderPanelIssueCountBadge } from './QueryBuilderPanelIssueCountBadge.js';
 
 const QueryBuilderUnsupportedFetchStructure = observer(
   (props: { mode: FETCH_STRUCTURE_MODE }) => {
@@ -89,84 +90,96 @@ export const QueryBuilderFetchStructurePanel = observer(
     const onChangeFetchStructureMode =
       (fetchMode: FETCH_STRUCTURE_MODE): (() => void) =>
       (): void => {
+        const reset = (): void => {
+          fetchStructureState.setFetchStructureMode(fetchMode);
+          queryBuilderState.changeFetchStructure();
+          queryBuilderState.postFilterState = new QueryBuilderPostFilterState(
+            queryBuilderState,
+            queryBuilderState.postFilterOperators,
+          );
+          queryBuilderState.setShowPostFilterPanel(false);
+        };
         if (fetchStructureState.fetchStructureMode !== fetchMode) {
-          if (
-            fetchMode === FETCH_STRUCTURE_MODE.GRAPH_FETCH &&
-            queryBuilderState.fetchStructureState.projectionState.columns
-              .length > 0
-          ) {
-            applicationStore.setActionAlertInfo({
-              message:
-                queryBuilderState.showPostFilterPanel &&
-                queryBuilderState.postFilterState.nodes.size > 0
-                  ? 'With graph fetch, post filter is not supported. Current projection columns and post filters will be lost when switching to the graph fetch panel. Do you still want to proceed?'
-                  : 'Current projection columns will be lost when switching to the graph fetch panel. Do you still want to proceed?',
-              type: ActionAlertType.CAUTION,
-              actions: [
-                {
-                  label: 'Proceed',
-                  type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-                  handler: applicationStore.guardUnhandledError(async () => {
-                    fetchStructureState.setFetchStructureMode(fetchMode);
-                    queryBuilderState.changeFetchStructure();
-                    queryBuilderState.fetchStructureState.projectionState =
-                      new QueryBuilderProjectionState(queryBuilderState);
-                    queryBuilderState.postFilterState =
-                      new QueryBuilderPostFilterState(
-                        queryBuilderState,
-                        queryBuilderState.postFilterOperators,
-                      );
-                    queryBuilderState.setShowPostFilterPanel(false);
-                  }),
-                },
-                {
-                  label: 'Cancel',
-                  type: ActionAlertActionType.PROCEED,
-                  default: true,
-                },
-              ],
-            });
-          } else if (
-            fetchMode === FETCH_STRUCTURE_MODE.PROJECTION &&
-            queryBuilderState.fetchStructureState.graphFetchTreeState.treeData
-              ?.rootIds.length
-          ) {
-            applicationStore.setActionAlertInfo({
-              message:
-                'Current graph fetch nodes will be lost when switching to the projection panel. Do you still want to proceed?',
-              type: ActionAlertType.CAUTION,
-              actions: [
-                {
-                  label: 'Proceed',
-                  type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-                  handler: applicationStore.guardUnhandledError(async () => {
-                    fetchStructureState.setFetchStructureMode(fetchMode);
-                    queryBuilderState.changeFetchStructure();
-                    queryBuilderState.fetchStructureState.graphFetchTreeState =
-                      new QueryBuilderGraphFetchTreeState(queryBuilderState);
-                    queryBuilderState.postFilterState =
-                      new QueryBuilderPostFilterState(
-                        queryBuilderState,
-                        queryBuilderState.postFilterOperators,
-                      );
-                    queryBuilderState.setShowPostFilterPanel(false);
-                  }),
-                },
-                {
-                  label: 'Cancel',
-                  type: ActionAlertActionType.PROCEED,
-                  default: true,
-                },
-              ],
-            });
-          } else {
-            fetchStructureState.setFetchStructureMode(fetchMode);
-            queryBuilderState.changeFetchStructure();
-            queryBuilderState.postFilterState = new QueryBuilderPostFilterState(
-              queryBuilderState,
-              queryBuilderState.postFilterOperators,
-            );
-            queryBuilderState.setShowPostFilterPanel(false);
+          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.showPostFilterPanel &&
+                    queryBuilderState.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.projectionState.aggregationState.operators,
+                            );
+                          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,
+                            );
+                          reset();
+                        },
+                      ),
+                    },
+                    {
+                      label: 'Cancel',
+                      type: ActionAlertActionType.PROCEED,
+                      default: true,
+                    },
+                  ],
+                });
+              } else {
+                reset();
+              }
+              return;
+            }
+            default:
+              return;
           }
         }
       };
@@ -176,6 +189,9 @@ export const QueryBuilderFetchStructurePanel = observer(
         <div className="panel__header">
           <div className="panel__header__title">
             <div className="panel__header__title__label">fetch structure</div>
+            <QueryBuilderPanelIssueCountBadge
+              issues={fetchStructureState.validationIssues}
+            />
           </div>
           <div className="panel__header__actions">
             {fetchStructureStateMode === FETCH_STRUCTURE_MODE.PROJECTION && (