fix(designer): Managed Identity picker does not show up on new connec…

…tion creation (#4719)

* fix(designer): Managed Identity picker does not show up on new connection creation

* Update libs/designer/src/lib/ui/panel/connectionsPanel/createConnection/createConnectionWrapper.tsx

Co-authored-by: Travis Harris <hartra344@users.noreply.github.com>

* Addressing PR comments

* Fixing reactquery import

---------

Co-authored-by: Priti Sambandam <psamband@microsoft.com>
Co-authored-by: Travis Harris <hartra344@users.noreply.github.com>

libs/designer/src/lib/core/queries/connections.ts

@@ -46,14 +46,14 @@ export const useConnectionById = (connectionId: string, connectorId: string) =>
       return { isLoading: false, result: undefined };
     }
 
-    if (!connections) {
+    if (!connections && !connection) {
       return {
         isLoading,
         result: undefined,
       };
     }
 
-    const foundConnection = connections.find((connection: any) => equals(connection.id, connectionId));
+    const foundConnection = (connections ?? []).find((connection: any) => equals(connection.id, connectionId));
     return {
       isLoading,
       result: foundConnection ?? connection,

libs/designer/src/lib/core/state/connection/connectionSelector.ts

@@ -1,5 +1,5 @@
 import type { ConnectionMapping, ConnectionReference, ConnectionReferences } from '../../../common/models/workflow';
-import { getConnection } from '../../queries/connections';
+import { useConnectionResource } from '../../queries/connections';
 import type { RootState } from '../../store';
 import { getConnectionReference, isConnectionMultiAuthManagedIdentityType } from '../../utils/connectors/connections';
 import { useNodeConnectorId } from '../operation/operationSelector';
@@ -82,28 +82,6 @@ export const useNodeConnectionId = (nodeId: string): string => {
   }, [connectionsMapping, connectionReferences, nodeId]);
 };
 
-const useConnectionByNodeId = (nodeId: string) => {
-  const operationInfo = useOperationInfo(nodeId);
-  const connectionId = useNodeConnectionId(nodeId);
-  return useQuery(
-    ['connection', { connectorId: operationInfo?.connectorId }, { connectionId }],
-    () => {
-      if (!connectionId || !operationInfo?.connectorId) {
-        return;
-      }
-      return getConnection(connectionId, operationInfo.connectorId);
-    },
-    {
-      enabled: !!connectionId && !!operationInfo?.connectorId,
-      placeholderData: undefined,
-      cacheTime: 1000 * 60 * 60 * 24,
-      refetchOnMount: false,
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-    }
-  );
-};
-
 export const useConnectionMapping = (): ConnectionMapping => {
   return useSelector((state: RootState) => {
     return state.connections.connectionsMapping;
@@ -128,16 +106,22 @@ export const useIsOperationMissingConnection = (nodeId: string) => {
 
 export const useShowIdentitySelectorQuery = (nodeId: string) => {
   const connector = useConnectorByNodeId(nodeId);
-  const connectionQuery = useConnectionByNodeId(nodeId);
+  const connectionId = useNodeConnectionId(nodeId);
+  const { data: connection, isLoading } = useConnectionResource(connectionId);
   const operationInfo = useOperationInfo(nodeId);
   const connectionReference = useSelector((state: RootState) => getConnectionReference(state.connections, nodeId));
 
   return useMemo(() => {
-    if (connectionReference && !connectionQuery.isLoading && !isServiceProviderOperation(operationInfo?.type)) {
-      return isConnectionMultiAuthManagedIdentityType(connectionQuery.data, connector);
+    if (!connectionId || !connector?.id) {
+      return { isLoading: false, result: false };
+    }
+
+    if (connectionReference && !isServiceProviderOperation(operationInfo?.type)) {
+      return { isLoading, result: isLoading ? undefined : isConnectionMultiAuthManagedIdentityType(connection, connector) };
     }
-    return false;
-  }, [connectionQuery, connectionReference, connector, operationInfo?.type]);
+
+    return { isLoading: false, result: false };
+  }, [connectionId, connector, connectionReference, operationInfo?.type, isLoading, connection]);
 };
 
 export const getConnectionReferenceForNodeId = (

libs/designer/src/lib/ui/panel/connectionsPanel/createConnection/createConnectionWrapper.tsx

@@ -1,3 +1,4 @@
+import { useQueryClient } from '@tanstack/react-query';
 import constants from '../../../../common/constants';
 import type { AppDispatch, RootState } from '../../../../core';
 import { useOperationInfo, useSelectedNodeId, useSelectedNodeIds } from '../../../../core';
@@ -127,6 +128,16 @@ export const CreateConnectionWrapper = () => {
     dispatch(openPanel({ nodeId, panelMode }));
   }, [dispatch, referencePanelMode, nodeIds]);
 
+  const queryClient = useQueryClient();
+  const updateNewConnection = useCallback(
+    async (newConnection: Connection) => {
+      return queryClient.setQueryData<Connection[]>(
+        ['connections', connector?.id?.toLowerCase()],
+        (oldConnections: Connection[] | undefined) => [...(oldConnections ?? []), newConnection]
+      );
+    },
+    [connector?.id, queryClient]
+  );
   const createConnectionCallback = useCallback(
     async (
       displayName?: string,
@@ -217,6 +228,7 @@ export const CreateConnectionWrapper = () => {
         }
 
         if (connection) {
+          updateNewConnection(connection);
           for (const nodeId of nodeIds) {
             applyNewConnection(nodeId, connection, identitySelected);
           }
@@ -246,6 +258,7 @@ export const CreateConnectionWrapper = () => {
       nodeIds,
       applyNewConnection,
       existingReferences,
+      updateNewConnection,
     ]
   );
 

libs/designer/src/lib/ui/panel/nodeDetailsPanel/tabs/parametersTab/index.tsx

@@ -164,7 +164,9 @@ export const ParametersTab = () => {
           />
         </>
       ) : null}
-      {showIdentitySelector ? <IdentitySelector nodeId={selectedNodeId} readOnly={!!readOnly} /> : null}
+      {!showIdentitySelector.isLoading && showIdentitySelector.result ? (
+        <IdentitySelector nodeId={selectedNodeId} readOnly={!!readOnly} />
+      ) : null}
     </>
   );
 };