@microsoft/power-apps-native-host 0.2.25 → 0.3.3

package/lib/module/connections/ConnectionSetupScreen.js

@@ -42,14 +42,16 @@
  */
 
 import React, { useState, useEffect, useCallback } from 'react';
-import { View, Text, TouchableOpacity, ActivityIndicator, StyleSheet, ScrollView } from 'react-native';
+import { View, Text, TouchableOpacity, ActivityIndicator, StyleSheet, ScrollView, Switch, TextInput } from 'react-native';
 import * as WebBrowser from 'expo-web-browser';
 import * as Linking from 'expo-linking';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useConnectionSetup } from "../connections/useConnectionSetup.js";
-import { fetchConnectorMetadata, fetchConnectionsForConnector } from "../platform/PowerPlatformConnectionApi.js";
+import { fetchConnectorMetadata, fetchConnectionsForConnector } from "./PowerPlatformConnectionApi.js";
 import { powerPlatformScope } from "../platform/PowerPlatformEnvironmentApi.js";
 import { ConnectionStatus } from "../connections/types.js";
+import { normalizeApiId } from "./types.js";
+import { connectionIdsEqual, extractConnectionId } from "./disambiguate.js";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -61,12 +63,17 @@ import { ConnectionStatus } from "../connections/types.js";
 // ---------------------------------------------------------------------------
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function ConnectorSetupStep({
+  localRefId,
   connectorId,
   apiId,
   environmentId,
   region,
   acquireToken,
+  onSignOut,
   isvClientId,
+  gatewayObjectIdHint,
+  parameterSetName,
+  sharedConnectionId,
   onConnected,
   renderOAuthWebView
 }) {
@@ -80,18 +87,24 @@ function ConnectorSetupStep({
   // useConnectionSetup) so the hook stays focused on connection flow only.
   const [isLoadingMetadata, setIsLoadingMetadata] = useState(true);
   const [metadata, setMetadata] = useState(null);
+  const [metadataError, setMetadataError] = useState(null);
+  const [metadataReload, setMetadataReload] = useState(0);
   const [showOAuthModal, setShowOAuthModal] = useState(false);
-  // Track if there's already a connected instance the user can reuse.
-  const [existingConnected, setExistingConnected] = useState(null);
+  const [existingConnected, setExistingConnected] = useState([]);
+  const [existingRepairable, setExistingRepairable] = useState([]);
+  const [selectedParameterSet, setSelectedParameterSet] = useState(parameterSetName ?? '');
+  const [parameterValues, setParameterValues] = useState({});
+  const [gatewayObjectId, setGatewayObjectId] = useState(gatewayObjectIdHint ?? '');
   const setup = useConnectionSetup({
     connectorId,
     environmentId,
     region,
     acquireToken,
     isvClientId,
+    sharedConnectionId,
     onConnected: instance => {
       setShowOAuthModal(false);
-      onConnected(apiId, instance);
+      onConnected(localRefId, instance);
     },
     oauthRedirectUrl,
     polling: {
@@ -103,46 +116,94 @@ function ConnectorSetupStep({
   // Fetch connector metadata and check for existing non-connected connections.
   useEffect(() => {
     let cancelled = false;
+    setIsLoadingMetadata(true);
+    setMetadata(null);
+    setMetadataError(null);
+    setExistingConnected([]);
+    setExistingRepairable([]);
+    setSelectedParameterSet(parameterSetName ?? '');
+    setParameterValues({});
+    setGatewayObjectId(gatewayObjectIdHint ?? '');
     async function load() {
       const token = await acquireToken([powerPlatformScope(region)]);
       if (!token || cancelled) {
         if (!cancelled) {
-          setMetadata({
-            displayName: connectorId,
-            iconUri: '',
-            description: ''
-          });
+          setMetadataError('Unable to acquire a token to load connector setup.');
           setIsLoadingMetadata(false);
         }
         return;
       }
-      const [meta, instances] = await Promise.all([fetchConnectorMetadata(connectorId, environmentId, region, token), fetchConnectionsForConnector(connectorId, environmentId, region, token)]);
-      if (cancelled) return;
-      setMetadata(meta ?? {
-        displayName: connectorId,
-        iconUri: '',
-        description: ''
-      });
+      try {
+        const [meta, instances] = await Promise.all([fetchConnectorMetadata(connectorId, environmentId, region, token), fetchConnectionsForConnector(connectorId, environmentId, region, token)]);
+        if (cancelled) return;
+        if (!meta) throw new Error('Connector metadata is unavailable.');
+        const resolvedMetadata = meta;
+        setMetadata(resolvedMetadata);
+        const preferredSet = resolvedMetadata.parameterSets.find(set => set.name === parameterSetName) ?? resolvedMetadata.parameterSets[0];
+        setSelectedParameterSet(preferredSet?.name ?? '');
+        setParameterValues(Object.fromEntries((preferredSet?.parameters ?? []).filter(parameter => parameter.defaultValue !== undefined).map(parameter => [parameter.name, parameter.defaultValue])));
 
-      // If there's already a Connected instance the disambiguation didn't pick
-      // (e.g., appeared after the initial load), use it directly.
-      const connected = instances.find(i => i.status === ConnectionStatus.Connected);
-      if (connected) setExistingConnected(connected);
-      setIsLoadingMetadata(false);
+        // If there's already a Connected instance the disambiguation didn't pick
+        // (e.g., appeared after the initial load), use it directly.
+        const sharedId = sharedConnectionId ? extractConnectionId(sharedConnectionId) : undefined;
+        const eligibleInstances = sharedId ? instances.filter(instance => connectionIdsEqual(instance.id, sharedId)) : instances;
+        setExistingConnected(eligibleInstances.filter(instance => instance.status === ConnectionStatus.Connected));
+        setExistingRepairable(sharedId ? [] : eligibleInstances.filter(instance => instance.status !== ConnectionStatus.Connected));
+      } catch (error) {
+        if (!cancelled) {
+          setMetadataError(error instanceof Error ? error.message : 'Unable to load connector setup.');
+        }
+      } finally {
+        if (!cancelled) setIsLoadingMetadata(false);
+      }
     }
     void load();
     return () => {
       cancelled = true;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [connectorId]);
-  const handleUseExisting = useCallback(() => {
-    if (existingConnected) {
-      onConnected(apiId, existingConnected);
+  }, [acquireToken, connectorId, environmentId, gatewayObjectIdHint, parameterSetName, region, sharedConnectionId, metadataReload]);
+  const handleUseExisting = useCallback(async instance => {
+    await setup.useExisting(instance);
+  }, [setup]);
+  const activeParameterSet = metadata?.parameterSets.find(set => (set.name ?? '') === selectedParameterSet) ?? metadata?.parameterSets[0];
+  const selectedCapability = gatewayObjectIdHint ? 'gateway' : 'cloud';
+  const visibleParameters = activeParameterSet?.parameters.filter(parameter => !parameter.hidden && (!parameter.capabilities?.length || parameter.capabilities.some(capability => capability.toLowerCase() === selectedCapability))) ?? [];
+  const requiredParametersComplete = visibleParameters.every(parameter => {
+    if (!parameter.required) return true;
+    const value = parameterValues[parameter.name];
+    if (typeof value === 'object' && value && 'pfx' in value) {
+      return Boolean(value.pfx && value.password);
     }
-  }, [existingConnected, apiId, onConnected]);
+    return value !== undefined && value !== '';
+  });
+  const buildInput = useCallback(() => ({
+    parameterSetName: activeParameterSet?.name,
+    gatewayObjectId: gatewayObjectId || undefined,
+    gatewayParameterName: activeParameterSet?.gatewayParameterName,
+    parameters: parameterValues
+  }), [activeParameterSet?.name, gatewayObjectId, parameterValues]);
   const handleConnect = useCallback(async () => {
-    await setup.startCreate();
+    await setup.startCreate(buildInput());
+  }, [setup, buildInput]);
+  const handleRepair = useCallback(async instance => {
+    const instanceParameterSet = metadata?.parameterSets.find(parameterSet => parameterSet.name === instance.parameterSetName) ?? activeParameterSet;
+    const requiresApiConsent = instanceParameterSet?.requiresApiConsent ?? metadata?.hasOAuthParameter ?? false;
+    const input = buildInput();
+    const hasEditableInput = Object.keys(input.parameters).length > 0 || Boolean(input.gatewayObjectId);
+    await setup.startRepair(instance, !requiresApiConsent || hasEditableInput ? input : undefined, requiresApiConsent);
+  }, [setup, metadata, activeParameterSet, buildInput]);
+  const completeOAuthRedirect = useCallback(async redirectUrl => {
+    let code;
+    if (redirectUrl) {
+      try {
+        const raw = new URL(redirectUrl).searchParams.get('code') ?? '';
+        if (/^[0-9a-f]{32}$/i.test(raw)) code = raw;
+      } catch {
+        setup.reset();
+        return;
+      }
+    }
+    await setup.completeConsent(code);
   }, [setup]);
 
   // Open OAuth UI when consentUrl becomes available (set by startCreate in the hook).
@@ -156,29 +217,24 @@ function ConnectorSetupStep({
         // custom-scheme redirect (e.g. expo-app://oauth-callback).
         void (async () => {
           const result = await WebBrowser.openAuthSessionAsync(setup.consentUrl, oauthRedirectUrl);
-          // Extract a CommitTokenCode from the redirect URL if present.
-          let code;
-          if (result.type === 'success' && result.url) {
-            const params = new URL(result.url).searchParams;
-            const raw = params.get('code') ?? '';
-            // CommitTokenCode is a 32-char lowercase hex string.
-            if (/^[0-9a-f]{32}$/i.test(raw)) {
-              code = raw;
-            }
+          if (result.type === 'success') {
+            await completeOAuthRedirect(result.url);
+          } else {
+            setup.reset();
           }
-          await setup.completeConsent(code);
         })();
       }
     }
-  }, [setup.phase, setup.consentUrl, renderOAuthWebView, oauthRedirectUrl]);
-  const handleWebViewDismiss = useCallback(async () => {
+  }, [setup.phase, setup.consentUrl, renderOAuthWebView, oauthRedirectUrl, completeOAuthRedirect]);
+  const handleWebViewDismiss = useCallback(async redirectUrl => {
     setShowOAuthModal(false);
-    await setup.checkNow();
-  }, [setup]);
+    if (redirectUrl) await completeOAuthRedirect(redirectUrl);else await setup.checkNow();
+  }, [completeOAuthRedirect, setup]);
   const displayName = metadata?.displayName ?? connectorId;
   const description = metadata?.description ?? '';
   if (isLoadingMetadata) {
     return /*#__PURE__*/_jsx(View, {
+      testID: `powerApps.connectionSetup.connector.${connectorId}`,
       style: styles.connectorCard,
       children: /*#__PURE__*/_jsx(View, {
         style: styles.metadataLoading,
@@ -188,7 +244,36 @@ function ConnectorSetupStep({
       })
     });
   }
+  if (metadataError || !metadata) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.connectorCard,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.connectorName,
+        children: connectorId
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.errorText,
+        children: metadataError ?? 'Unable to load connector setup.'
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.button,
+        onPress: () => setMetadataReload(value => value + 1),
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.buttonText,
+          children: "Retry"
+        })
+      }), onSignOut ? /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: [styles.button, styles.buttonSecondary],
+        onPress: () => {
+          void onSignOut();
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.buttonTextSecondary,
+          children: "Sign out"
+        })
+      }) : null]
+    });
+  }
   return /*#__PURE__*/_jsxs(View, {
+    testID: `powerApps.connectionSetup.connector.${connectorId}`,
     style: styles.connectorCard,
     children: [/*#__PURE__*/_jsx(Text, {
       style: styles.connectorName,
@@ -196,33 +281,140 @@ function ConnectorSetupStep({
     }), description ? /*#__PURE__*/_jsx(Text, {
       style: styles.connectorDescription,
       children: description
-    }) : null, setup.phase === 'idle' && /*#__PURE__*/_jsx(_Fragment, {
-      children: existingConnected ? /*#__PURE__*/_jsxs(View, {
-        style: styles.buttonRow,
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.button, styles.buttonSecondary],
-          onPress: handleUseExisting,
+    }) : null, setup.phase === 'idle' && !sharedConnectionId && (metadata?.parameterSets.length ?? 0) > 1 ? /*#__PURE__*/_jsxs(View, {
+      style: styles.fieldGroup,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.fieldLabel,
+        children: "Authentication type"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.choiceRow,
+        children: metadata?.parameterSets.map(parameterSet => /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.choiceButton, selectedParameterSet === (parameterSet.name ?? '') && styles.choiceButtonSelected],
+          onPress: () => {
+            setSelectedParameterSet(parameterSet.name ?? '');
+            setParameterValues(Object.fromEntries(parameterSet.parameters.filter(parameter => parameter.defaultValue !== undefined).map(parameter => [parameter.name, parameter.defaultValue])));
+          },
           children: /*#__PURE__*/_jsx(Text, {
-            style: styles.buttonTextSecondary,
-            children: "Use existing"
+            style: selectedParameterSet === (parameterSet.name ?? '') ? styles.choiceTextSelected : styles.choiceText,
+            children: parameterSet.displayName
           })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.button,
-          onPress: handleConnect,
+        }, parameterSet.name ?? 'default'))
+      })]
+    }) : null, setup.phase === 'idle' && !sharedConnectionId && visibleParameters.map(parameter => /*#__PURE__*/_jsxs(View, {
+      style: styles.fieldGroup,
+      children: [/*#__PURE__*/_jsxs(Text, {
+        style: styles.fieldLabel,
+        children: [parameter.displayName, parameter.required ? ' *' : '']
+      }), parameter.allowedValues?.length ? /*#__PURE__*/_jsx(View, {
+        style: styles.choiceRow,
+        children: parameter.allowedValues.map(option => /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.choiceButton, parameterValues[parameter.name] === option.value && styles.choiceButtonSelected],
+          onPress: () => setParameterValues(values => ({
+            ...values,
+            [parameter.name]: option.value
+          })),
           children: /*#__PURE__*/_jsx(Text, {
-            style: styles.buttonText,
-            children: "Create new"
+            style: parameterValues[parameter.name] === option.value ? styles.choiceTextSelected : styles.choiceText,
+            children: option.displayName
           })
+        }, option.value))
+      }) : parameter.type === 'boolean' ? /*#__PURE__*/_jsx(Switch, {
+        value: Boolean(parameterValues[parameter.name]),
+        onValueChange: value => setParameterValues(values => ({
+          ...values,
+          [parameter.name]: value
+        }))
+      }) : parameter.type === 'clientcertificate' ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(TextInput, {
+          style: styles.textInput,
+          placeholder: "PFX certificate (base64)",
+          autoCapitalize: "none",
+          value: parameterValues[parameter.name]?.pfx ?? '',
+          onChangeText: pfx => setParameterValues(values => ({
+            ...values,
+            [parameter.name]: {
+              pfx,
+              password: values[parameter.name]?.password ?? ''
+            }
+          }))
+        }), /*#__PURE__*/_jsx(TextInput, {
+          style: styles.textInput,
+          placeholder: "Certificate password",
+          secureTextEntry: true,
+          value: parameterValues[parameter.name]?.password ?? '',
+          onChangeText: password => setParameterValues(values => ({
+            ...values,
+            [parameter.name]: {
+              pfx: values[parameter.name]?.pfx ?? '',
+              password
+            }
+          }))
         })]
-      }) : /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: styles.button,
+      }) : /*#__PURE__*/_jsx(TextInput, {
+        style: styles.textInput,
+        secureTextEntry: parameter.type === 'securestring',
+        keyboardType: parameter.type === 'integer' ? 'number-pad' : 'default',
+        autoCapitalize: "none",
+        value: String(parameterValues[parameter.name] ?? ''),
+        onChangeText: value => setParameterValues(values => ({
+          ...values,
+          [parameter.name]: parameter.type === 'integer' && value !== '' ? /^-?\d+$/.test(value) ? parseInt(value, 10) : '' : value
+        }))
+      })]
+    }, parameter.name)), setup.phase === 'idle' && !sharedConnectionId && gatewayObjectIdHint ? /*#__PURE__*/_jsxs(View, {
+      style: styles.fieldGroup,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.fieldLabel,
+        children: "Gateway"
+      }), /*#__PURE__*/_jsx(TextInput, {
+        style: styles.textInput,
+        value: gatewayObjectId,
+        onChangeText: setGatewayObjectId,
+        autoCapitalize: "none"
+      })]
+    }) : null, setup.phase === 'idle' && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [existingConnected.map((instance, index) => /*#__PURE__*/_jsx(TouchableOpacity, {
+        testID: index === 0 ? `powerApps.connectionSetup.connector.${connectorId}.useExistingButton` : `powerApps.connectionSetup.connector.${connectorId}.useExistingButton.${instance.id}`,
+        style: [styles.button, styles.buttonSecondary],
+        onPress: () => handleUseExisting(instance),
+        children: /*#__PURE__*/_jsxs(Text, {
+          style: styles.buttonTextSecondary,
+          children: ["Use ", instance.displayName || instance.id]
+        })
+      }, instance.id)), existingRepairable.map(instance => /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: [styles.button, styles.buttonSecondary],
+        disabled: !requiredParametersComplete,
+        onPress: () => handleRepair(instance),
+        children: /*#__PURE__*/_jsxs(Text, {
+          style: styles.buttonTextSecondary,
+          children: ["Fix ", instance.displayName || instance.id]
+        })
+      }, instance.id)), sharedConnectionId && existingConnected.length === 0 ? /*#__PURE__*/_jsxs(View, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.errorText,
+          children: "You do not have access to the shared connection required by this app."
+        }), onSignOut ? /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.button, styles.buttonSecondary],
+          onPress: () => {
+            void onSignOut();
+          },
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.buttonTextSecondary,
+            children: "Sign out"
+          })
+        }) : null]
+      }) : !sharedConnectionId ? /*#__PURE__*/_jsx(TouchableOpacity, {
+        testID: `powerApps.connectionSetup.connector.${connectorId}.${existingConnected.length ? 'createButton' : 'connectButton'}`,
+        style: [styles.button, !requiredParametersComplete && styles.buttonDisabled],
+        disabled: !requiredParametersComplete,
         onPress: handleConnect,
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.buttonText,
-          children: "Connect"
+          children: existingConnected.length ? 'Create new' : metadata?.hasOAuthParameter ? 'Sign in' : 'Connect'
         })
-      })
+      }) : null]
     }), (setup.phase === 'creating' || setup.phase === 'confirming') && /*#__PURE__*/_jsxs(View, {
+      testID: `powerApps.connectionSetup.connector.${connectorId}.${setup.phase}`,
       style: styles.statusRow,
       children: [/*#__PURE__*/_jsx(ActivityIndicator, {
         size: "small",
@@ -232,6 +424,7 @@ function ConnectorSetupStep({
         children: setup.phase === 'creating' ? 'Creating connection…' : 'Confirming…'
       })]
     }), setup.phase === 'oauth' && /*#__PURE__*/_jsxs(View, {
+      testID: `powerApps.connectionSetup.connector.${connectorId}.oauth`,
       style: styles.statusRow,
       children: [/*#__PURE__*/_jsx(ActivityIndicator, {
         size: "small",
@@ -240,30 +433,43 @@ function ConnectorSetupStep({
         style: styles.statusText,
         children: "Waiting for sign-in\u2026"
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: handleWebViewDismiss,
+        testID: `powerApps.connectionSetup.connector.${connectorId}.doneButton`,
+        onPress: () => handleWebViewDismiss(),
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.linkText,
           children: "Done"
         })
       })]
     }), setup.phase === 'connected' && /*#__PURE__*/_jsx(View, {
+      testID: `powerApps.connectionSetup.connector.${connectorId}.connected`,
       style: styles.statusRow,
       children: /*#__PURE__*/_jsx(Text, {
         style: styles.successText,
         children: "\u2713 Connected"
       })
     }), setup.phase === 'error' && /*#__PURE__*/_jsxs(View, {
+      testID: `powerApps.connectionSetup.connector.${connectorId}.error`,
       children: [/*#__PURE__*/_jsx(Text, {
         style: styles.errorText,
         children: setup.errorMessage ?? 'Connection failed'
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        testID: `powerApps.connectionSetup.connector.${connectorId}.retryButton`,
         style: [styles.button, styles.buttonDanger],
         onPress: setup.reset,
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.buttonText,
           children: "Retry"
         })
-      })]
+      }), onSignOut ? /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: [styles.button, styles.buttonSecondary],
+        onPress: () => {
+          void onSignOut();
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.buttonTextSecondary,
+          children: "Sign out"
+        })
+      }) : null]
     }), showOAuthModal && setup.consentUrl && renderOAuthWebView ? renderOAuthWebView(setup.consentUrl, handleWebViewDismiss) : null]
   });
 }
@@ -286,15 +492,31 @@ export function ConnectionSetupScreen({
   environmentId,
   region = 'prod',
   acquireToken,
+  onSignOut,
   isvClientId,
   onAllConnected,
   onSkip,
+  consentDetails = [],
+  resourceConsents = [],
+  onConsentDeclined,
+  showReview = true,
   renderOAuthWebView,
   title = 'Set up connections'
 }) {
   // resolvedIds accumulates as each connector is connected.
   const [resolvedIds, setResolvedIds] = useState({});
+  const [isSubmittingConsent, setIsSubmittingConsent] = useState(false);
+  const [consentError, setConsentError] = useState(null);
+  const [consentDeclined, setConsentDeclined] = useState(false);
+  const autoCompletionStartedRef = React.useRef(false);
   const insets = useSafeAreaInsets();
+  const missingReferencesKey = React.useMemo(() => missingConnectors.map(connector => `${connector.localRefId}:${normalizeApiId(connector.apiId)}`).sort().join('|'), [missingConnectors]);
+  useEffect(() => {
+    setResolvedIds({});
+    setConsentError(null);
+    setConsentDeclined(false);
+    autoCompletionStartedRef.current = false;
+  }, [missingReferencesKey]);
 
   // Build connectorId (short name) for each missing entry from the schemaMap.
   // schemaMap keys are data source names; we need to find the ConnectorSchema
@@ -310,26 +532,38 @@ export function ConnectionSetupScreen({
     }
     return map;
   }, [schemaMap]);
-  const handleConnected = useCallback((apiId, instance) => {
+  const handleConnected = useCallback((localRefId, instance) => {
     setResolvedIds(prev => ({
       ...prev,
-      [apiId]: instance.id
+      [localRefId]: instance.id
     }));
   }, []);
-
-  // Fire onAllConnected once every connector has been resolved.
-  // Done in an effect so it never runs inside a state updater (which would
-  // trigger the "Cannot update a component while rendering" React error).
-  useEffect(() => {
-    if (missingConnectors.length === 0) return;
-    const allResolved = missingConnectors.every(mc => resolvedIds[mc.apiId] !== undefined);
-    if (allResolved) {
-      onAllConnected(resolvedIds);
+  const allResolved = missingConnectors.every(mc => resolvedIds[mc.localRefId] !== undefined);
+  const handleAllow = useCallback(async () => {
+    if (!allResolved || isSubmittingConsent) return;
+    setIsSubmittingConsent(true);
+    setConsentError(null);
+    try {
+      await onAllConnected(resolvedIds);
+    } catch (error) {
+      setConsentError(error instanceof Error ? error.message : 'Unable to save connection consent.');
+    } finally {
+      setIsSubmittingConsent(false);
     }
-  }, [resolvedIds, missingConnectors, onAllConnected]);
+  }, [allResolved, isSubmittingConsent, onAllConnected, resolvedIds]);
+  const handleDecline = useCallback(async () => {
+    setConsentDeclined(true);
+    await onConsentDeclined?.();
+  }, [onConsentDeclined]);
+  useEffect(() => {
+    if (showReview || !allResolved || autoCompletionStartedRef.current) return;
+    autoCompletionStartedRef.current = true;
+    void handleAllow();
+  }, [allResolved, handleAllow, showReview]);
   const resolvedCount = Object.keys(resolvedIds).length;
   const total = missingConnectors.length;
   return /*#__PURE__*/_jsxs(View, {
+    testID: "powerApps.connectionSetup.root",
     style: [styles.container, {
       paddingTop: insets.top,
       paddingBottom: insets.bottom
@@ -337,41 +571,121 @@ export function ConnectionSetupScreen({
     children: [/*#__PURE__*/_jsxs(ScrollView, {
       contentContainerStyle: styles.scrollContent,
       children: [/*#__PURE__*/_jsx(Text, {
+        testID: "powerApps.connectionSetup.title",
         style: styles.title,
         children: title
-      }), /*#__PURE__*/_jsxs(Text, {
+      }), /*#__PURE__*/_jsx(Text, {
         style: styles.subtitle,
-        children: ["This app needs ", total === 1 ? 'a connection' : `${total} connections`, " to work. Sign in to each service below to continue."]
+        children: total > 0 ? `This app needs ${total === 1 ? 'a connection' : `${total} connections`} to work. Sign in to each service below${showReview ? ', then review access' : ''}.` : 'Review the connections and resources this app will use.'
       }), resolvedCount > 0 && /*#__PURE__*/_jsxs(Text, {
+        testID: "powerApps.connectionSetup.progress",
         style: styles.progressText,
         children: [resolvedCount, " of ", total, " connected"]
       }), missingConnectors.map(mc => {
-        const connectorId = connectorIdByApiId[mc.apiId];
+        const connectorId = mc.connectorId ?? connectorIdByApiId[normalizeApiId(mc.apiId)];
         if (!connectorId) {
           // Unknown connector — skip rendering.
           return null;
         }
-        const isResolved = resolvedIds[mc.apiId] !== undefined;
+        const isResolved = resolvedIds[mc.localRefId] !== undefined;
         if (isResolved) {
           return /*#__PURE__*/_jsx(View, {
+            testID: `powerApps.connectionSetup.connector.${connectorId}.resolved`,
             style: [styles.connectorCard, styles.connectorCardResolved],
             children: /*#__PURE__*/_jsxs(Text, {
               style: styles.successText,
               children: ["\u2713 ", connectorId.replace('shared_', '')]
             })
-          }, mc.apiId);
+          }, mc.localRefId);
         }
         return /*#__PURE__*/_jsx(ConnectorSetupStep, {
+          localRefId: mc.localRefId,
           connectorId: connectorId,
           apiId: mc.apiId,
           environmentId: environmentId,
           region: region,
           acquireToken: acquireToken,
+          onSignOut: onSignOut,
           isvClientId: isvClientId,
+          gatewayObjectIdHint: mc.gatewayObjectIdHint,
+          parameterSetName: mc.parameterSetName,
+          sharedConnectionId: mc.sharedConnectionId,
           onConnected: handleConnected,
           renderOAuthWebView: renderOAuthWebView
-        }, mc.apiId);
-      })]
+        }, mc.localRefId);
+      }), showReview && allResolved && !consentDeclined ? /*#__PURE__*/_jsxs(View, {
+        style: styles.consentSection,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.consentTitle,
+          children: "Review access"
+        }), consentDetails.map(detail => /*#__PURE__*/_jsxs(View, {
+          style: styles.consentItem,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.connectorName,
+            children: detail.displayName
+          }), detail.description ? /*#__PURE__*/_jsx(Text, {
+            style: styles.connectorDescription,
+            children: detail.description
+          }) : null, detail.appActions.length > 0 ? /*#__PURE__*/_jsxs(Text, {
+            style: styles.consentActions,
+            children: ["Uses: ", detail.appActions.join(', ')]
+          }) : null]
+        }, detail.localRefId)), resourceConsents.length > 0 ? /*#__PURE__*/_jsxs(View, {
+          style: styles.consentItem,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.connectorName,
+            children: "Protected resources"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.connectorDescription,
+            children: resourceConsents.map(resource => resource.displayName).join(', ')
+          })]
+        }) : null, consentError ? /*#__PURE__*/_jsxs(View, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.errorText,
+            children: consentError
+          }), onSignOut ? /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.button, styles.buttonSecondary],
+            onPress: () => {
+              void onSignOut();
+            },
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.buttonTextSecondary,
+              children: "Sign out"
+            })
+          }) : null]
+        }) : null, /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.button, isSubmittingConsent && styles.buttonDisabled],
+          disabled: isSubmittingConsent,
+          onPress: handleAllow,
+          children: isSubmittingConsent ? /*#__PURE__*/_jsx(ActivityIndicator, {
+            size: "small",
+            color: "#FFF"
+          }) : /*#__PURE__*/_jsx(Text, {
+            style: styles.buttonText,
+            children: "Allow"
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.skipButton,
+          onPress: handleDecline,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.skipText,
+            children: "Do not allow"
+          })
+        })]
+      }) : null, showReview && consentDeclined ? /*#__PURE__*/_jsxs(View, {
+        style: styles.consentSection,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.consentTitle,
+          children: "Access was not granted"
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.button,
+          onPress: () => setConsentDeclined(false),
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.buttonText,
+            children: "Review again"
+          })
+        })]
+      }) : null]
     }), onSkip ? /*#__PURE__*/_jsx(View, {
       style: styles.footer,
       children: /*#__PURE__*/_jsx(TouchableOpacity, {
@@ -467,6 +781,9 @@ const styles = StyleSheet.create({
   buttonDanger: {
     backgroundColor: '#C4262E'
   },
+  buttonDisabled: {
+    backgroundColor: '#A8A8A8'
+  },
   buttonText: {
     color: '#FFF',
     fontWeight: '600',
@@ -522,5 +839,67 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     minHeight: 48
+  },
+  fieldGroup: {
+    marginTop: 12,
+    gap: 6
+  },
+  fieldLabel: {
+    color: '#333',
+    fontSize: 13,
+    fontWeight: '600'
+  },
+  textInput: {
+    minHeight: 42,
+    borderWidth: 1,
+    borderColor: '#C8C8C8',
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    color: '#1A1A1A',
+    backgroundColor: '#FFF'
+  },
+  choiceRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8
+  },
+  choiceButton: {
+    borderWidth: 1,
+    borderColor: '#C8C8C8',
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 8
+  },
+  choiceButtonSelected: {
+    borderColor: '#0078D4',
+    backgroundColor: '#EFF6FC'
+  },
+  choiceText: {
+    color: '#333',
+    fontSize: 13
+  },
+  choiceTextSelected: {
+    color: '#0078D4',
+    fontSize: 13,
+    fontWeight: '600'
+  },
+  consentSection: {
+    marginTop: 12,
+    paddingTop: 16,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: '#D8D8D8'
+  },
+  consentTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#1A1A1A',
+    marginBottom: 12
+  },
+  consentItem: {
+    marginBottom: 12
+  },
+  consentActions: {
+    fontSize: 13,
+    color: '#444'
   }
 });