@microsoft/power-apps-native-host 0.2.22 → 0.3.0

package/lib/module/provider/PowerAppsProvider.js

@@ -7,7 +7,7 @@
  * Power Apps canvas app inside an Expo shell:
  *
  *   GestureHandlerRootView
- *   └── TamaguiProvider  (defaults to @tamagui/config/v3)
+ *   └── TamaguiProvider  (defaults to @tamagui/config/v5)
  *       └── PortalProvider  (required by ToastViewport)
  *           └── ToastProvider + ToastViewport
  *               └── QueryClientProvider  (own QueryClient, wired to NetInfo + AppState)
@@ -27,24 +27,28 @@
  *   </PowerAppsProvider>
  */
 
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { AppState, Platform } from 'react-native';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { AppState, Platform, ScrollView, StyleSheet, Text } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { createTamagui, TamaguiProvider } from '@tamagui/core';
 import { PortalProvider } from '@tamagui/portal';
-import { config as tamaguiDefaultConfig } from '@tamagui/config/v3';
+import { defaultConfig as tamaguiDefaultConfig } from '@tamagui/config/v5';
 import { ToastProvider, ToastViewport } from '@tamagui/toast';
-import { QueryClient, QueryClientProvider, focusManager, onlineManager } from '@tanstack/react-query';
+import { QueryClientProvider, focusManager, onlineManager } from '@tanstack/react-query';
 import NetInfo from '@react-native-community/netinfo';
-import { AuthProvider, useAuth } from "../auth/AuthContext.js";
-import { PowerAppsHostProvider } from "./PowerAppsHostProvider.js";
-import { fetchInstanceUrl } from "../platform/PowerPlatformEnvironmentApi.js";
+import { AuthProvider, useAuth } from '../auth/AuthContext';
+import { PowerAppsHostProvider } from './PowerAppsHostProvider';
+import { powerPlatformScope } from "../platform/PowerPlatformEnvironmentApi.js";
 import { ThemeProvider } from "../theme/ThemeProvider.js";
 import { ErrorBoundary } from "../ErrorBoundary.js";
+import { isDevPlayer } from "../utils/isDevPlayer.js";
 import Constants from 'expo-constants';
-import { configureAppLogger, getAppLogger, Logger, OneDsTelemetryProvider, resolveDeviceId, resolveTelemetryLocation, regionToClusterCategory, suppressKnownWarnings } from '@microsoft/power-apps-native-common';
+import { ApplicationInsightsTelemetryProvider, configureAppLogger, configureCustomerTelemetryLogger, getAppLogger, Logger, OneDsTelemetryProvider, resolveDeviceId, resolveTelemetryLocation, regionToClusterCategory, suppressKnownWarnings } from '@microsoft/power-apps-native-common';
 suppressKnownWarnings();
-import { useOfflineIntegration } from '@microsoft/power-apps-native-offline';
+import { createHostQueryClient } from "../offline/createOfflineHostActivationCallbacks.js";
+import { useOfflineIntegrationWithStartupGate } from '../offline/useOfflineIntegrationWithStartupGate';
+import { SessionDetailsGesture } from "./SessionDetailsGesture.js";
+import { configureOfflineSdkTelemetry } from '../telemetry/OfflineSdkTelemetry';
 
 // ---- React-Query wiring (runs once at module load) ----
 
@@ -52,6 +56,15 @@ import { useOfflineIntegration } from '@microsoft/power-apps-native-offline';
 // (the default browser-event-based detection is a no-op in React Native).
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 onlineManager.setEventListener(setOnline => {
+  if (Platform.OS === 'web' && typeof window !== 'undefined') {
+    const updateOnlineState = () => setOnline(window.navigator.onLine);
+    window.addEventListener('online', updateOnlineState);
+    updateOnlineState();
+    return () => {
+      window.removeEventListener('online', updateOnlineState);
+      window.removeEventListener('offline', updateOnlineState);
+    };
+  }
   return NetInfo.addEventListener(state => setOnline(!!state.isConnected));
 });
 
@@ -67,78 +80,55 @@ focusManager.setEventListener(handleFocus => {
 
 // The app's tamagui.config.ts (generated by /tamagui-design-system) is always
 // passed as the `tamaguiConfig` prop and owns all $surface* / $accent* tokens.
-// The bare @tamagui/config/v3 preset is only a last-resort fallback for tests
+// The bare @tamagui/config/v5 preset is only a last-resort fallback for tests
 // and storybook — it will not resolve custom $surface* tokens.
 const defaultTamaguiConfig = createTamagui(tamaguiDefaultConfig);
-
-// Whether the offline SDK will actually orchestrate for this app. Mirrors the
-// resolution that @microsoft/power-apps-native-offline's useOfflineIntegration
-// performs (offlineProfile prop → expo manifest `extra.__offlineProfile`;
-// enabled defaults true unless the profile's `appConfig.enabled` is explicitly
-// false), but computed synchronously here because the QueryClient's networkMode
-// must be fixed BEFORE the first query runs. The SDK's own `isEnabled` is only
-// known deep inside the tree (below QueryClientProvider), which is too late to
-// configure the client without a race. Kept deliberately narrow: it only
-// decides networkMode below.
-function isOfflineEnabled(offlineProfile) {
-  // Only honour the prop when it carries a profileId — this mirrors the SDK's
-  // useOfflineIntegration, which ignores a profileId-less prop and falls through
-  // to the manifest. Without this guard a truthy-but-invalid prop (no profileId)
-  // short-circuits to `false` here while the SDK still resolves enabled from the
-  // manifest, leaving networkMode on 'online' (blank offline lists).
-  const propProfile = offlineProfile;
-  let profile = propProfile && propProfile.profileId ? propProfile : undefined;
-  if (!profile) {
-    const fromManifest = Constants.expoConfig?.extra?.__offlineProfile;
-    if (fromManifest && typeof fromManifest === 'object' && fromManifest.profileId) {
-      profile = fromManifest;
-    }
-  }
-  if (profile) {
-    // Honour an explicit `appConfig.enabled: false`. This mirrors the SDK's
-    // useOfflineIntegration, whose validateConfig classifies `enabled === false`
-    // as "explicitly-disabled" and stays inert. A host shell's placeholder
-    // profile (e.g. Power Apps Dev Player's offline-profile.json, enabled:false)
-    // must NOT flip networkMode to 'always' for the loaded app — otherwise every
-    // scanned app gets paused queries / blank lists. Any other resolved profile
-    // (enabled true, or omitted → SDK defaults to true) enables offline.
-    const appConfig = profile.appConfig;
-    if (appConfig && appConfig.enabled === false) {
-      return false;
-    }
-    return true;
-  }
-  return false;
+function hasConfiguredValue(value) {
+  return typeof value === 'string' && value.trim().length > 0;
 }
-
-// Builds the app's QueryClient. networkMode is gated on whether offline is
-// actually enabled:
-//   • Offline enabled → 'always': the host is offline-first, so reads/writes are
-//     served by the offline SDK from local SQLite regardless of connectivity.
-//     onlineManager is wired to NetInfo (above) for refetchOnReconnect, but that
-//     same wiring makes the default 'online' mode PAUSE every query/mutation while
-//     offline (queryFn never runs → blank lists with WiFi off). 'always' makes
-//     React Query ignore connectivity for both the initial attempt AND retries, so
-//     local-SQLite reads/writes never get paused. ('offlineFirst' would still pause
-//     *retries* offline — wrong for a purely-local SDK where a transient first
-//     attempt error, e.g. SDK-not-ready at cold boot, would leave the query stuck
-//     'paused' until reconnect.)
-//   • Offline disabled → undefined: React Query keeps its default 'online' mode,
-//     i.e. the exact pre-offline behaviour for online-only apps.
-function createQueryClient(offlineEnabled) {
-  const networkMode = offlineEnabled ? 'always' : undefined;
-  return new QueryClient({
-    defaultOptions: {
-      queries: {
-        staleTime: 60_000,
-        retry: 2,
-        networkMode
-      },
-      mutations: {
-        retry: 0,
-        networkMode
-      }
-    }
+function hasEntries(value) {
+  return Boolean(value && typeof value === 'object' && Object.keys(value).length > 0);
+}
+function requiresPowerPlatformAuth(powerConfig) {
+  return Boolean(hasConfiguredValue(powerConfig.appId) || hasConfiguredValue(powerConfig.environmentId) || hasEntries(powerConfig.connectionReferences) || hasEntries(powerConfig.databaseReferences));
+}
+function MissingClientIdErrorScreen() {
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    contentContainerStyle: styles.errorContainer,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.errorTitle,
+      children: "Missing auth client ID"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.errorBody,
+      children: "This app needs Power Platform authentication, but `auth.config.json` does not include `msal.clientId`."
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.errorBody,
+      children: "Add the Entra app registration client ID to `auth.config.json`, rebuild the app bundle, and run it again in Power Apps Dev Player."
+    })]
+  });
+}
+function MissingAppIdErrorScreen() {
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    contentContainerStyle: styles.errorContainer,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.errorTitle,
+      children: "App ID is missing"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.errorBody,
+      children: "This mobile app does not include an app ID. Push the mobile app to the Power Platform environment, rebuild it, and try again."
+    })]
+  });
+}
+function MissingEnvironmentIdErrorScreen() {
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    contentContainerStyle: styles.errorContainer,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.errorTitle,
+      children: "Environment ID is missing"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.errorBody,
+      children: "This mobile app does not include an environment ID. Push the mobile app to the Power Platform environment, rebuild it, and try again."
+    })]
   });
 }
 
@@ -146,6 +136,29 @@ function createQueryClient(offlineEnabled) {
 
 /** Shape of power.config.json consumed by the provider. */
 
+function readAppInsightsConfig(value) {
+  if (!value || typeof value !== 'object') return undefined;
+  const config = value;
+  const minSeverity = config.minSeverity;
+  return {
+    enabled: config.enabled === true,
+    connectionString: typeof config.connectionString === 'string' ? config.connectionString : '',
+    appId: typeof config.appId === 'string' ? config.appId : '',
+    ...(typeof config.appVersion === 'string' ? {
+      appVersion: config.appVersion
+    } : {}),
+    ...(typeof config.environment === 'string' ? {
+      environment: config.environment
+    } : {}),
+    ...(minSeverity === 'verbose' || minSeverity === 'info' || minSeverity === 'warning' || minSeverity === 'error' ? {
+      minSeverity
+    } : {}),
+    ...(typeof config.includeUserId === 'boolean' ? {
+      includeUserId: config.includeUserId
+    } : {})
+  };
+}
+
 // ---- Inner component ----
 // Separate from PowerAppsProvider only because useAuth() must be called inside
 // AuthProvider. All auth-dependent wiring lives here.
@@ -156,53 +169,49 @@ function InnerProviders({
   schemaMap,
   renderOAuthWebView,
   onDisambiguationNeeded,
+  onConnectionConsent,
+  onResourceConsent,
+  onConnectionConsentDeclined,
   offlineProfile,
+  onOfflineEnabledChange,
   children
 }) {
   const {
     acquireToken,
     isSignedIn,
-    hasRealAccount
+    hasRealAccount,
+    isAuthReady,
+    signOut
   } = useAuth();
-  const connectionReferences = useMemo(() => powerConfig.connectionReferences ?? {}, [powerConfig.connectionReferences]);
-
-  // ---- Offline (all logic lives in the SDK) ----
-  // Adapter over the host's fetchInstanceUrl: the offline SDK's contract passes a
-  // 4th `signal?: AbortSignal` arg (which fetchInstanceUrl treats as bearerToken)
-  // and expects a `string | null` return, so drop the extra arg and normalise
-  // `undefined` -> `null`.
-  const resolveInstanceUrlForOffline = useCallback(async (environmentId, region, acqToken, _signal) => {
-    const url = await fetchInstanceUrl(environmentId, region, acqToken);
-    return url ?? null;
-  }, []);
-
-  // Gate offline engagement on a REAL account (`hasRealAccount`), not the
-  // `isSignedIn` flag — `isSignedIn` is inflated by noAuthMode (login-bypassed /
-  // demo sessions report signed-in but have no account, so `acquireToken` always
-  // returns null). Passing the inflated flag makes the SDK orchestrator engage
-  // and then spin in a perpetual "waiting-for-auth" 3s retry loop (each retry
-  // re-renders the provider subtree). With no obtainable token offline cannot
-  // sync anyway, so we only engage once a usable token exists.
-  const offline = useOfflineIntegration({
+  const connectionReferences = useMemo(() => isDevPlayer ? powerConfig.connectionReferences ?? {} : {}, [powerConfig.connectionReferences, isDevPlayer]);
+  const runtimeSchemaMap = useMemo(() => isDevPlayer ? schemaMap : {}, [schemaMap, isDevPlayer]);
+  const offline = useOfflineIntegrationWithStartupGate({
     powerConfig,
     offlineProfile,
     acquireToken,
-    isSignedIn: hasRealAccount,
-    fetchInstanceUrl: resolveInstanceUrlForOffline
+    hasRealAccount,
+    isAuthReady
   });
+  useEffect(() => {
+    onOfflineEnabledChange(offline.isEnabled);
+  }, [offline.isEnabled, onOfflineEnabledChange]);
   return /*#__PURE__*/_jsxs(PowerAppsHostProvider, {
     acquireToken: acquireToken,
     isSignedIn: isSignedIn,
+    onSignOut: signOut,
     appId: powerConfig.appId ?? undefined,
     environmentId: powerConfig.environmentId ?? '',
     region: powerConfig.region ?? 'prod',
     connectionReferences: connectionReferences,
-    schemaMap: schemaMap,
-    databaseReferences: powerConfig.databaseReferences,
+    schemaMap: runtimeSchemaMap,
+    databaseReferences: isDevPlayer ? powerConfig.databaseReferences : undefined,
     isvClientId: msalConfig.clientId,
     renderOAuthWebView: renderOAuthWebView,
     onDisambiguationNeeded: onDisambiguationNeeded,
-    children: [children, offline.StatusOverlay && /*#__PURE__*/_jsx(offline.StatusOverlay, {})]
+    onConnectionConsent: onConnectionConsent,
+    onResourceConsent: onResourceConsent,
+    onConnectionConsentDeclined: onConnectionConsentDeclined,
+    children: [offline.shouldMountChildren && children, offline.StatusOverlay && /*#__PURE__*/_jsx(offline.StatusOverlay, {})]
   });
 }
 
@@ -229,8 +238,13 @@ export function PowerAppsProvider({
   followSystemTheme = true,
   renderOAuthWebView,
   onDisambiguationNeeded,
+  onConnectionConsent,
+  onResourceConsent,
+  onConnectionConsentDeclined,
   appName,
   logger: loggerProp,
+  showSessionDetailsOnSwipe = true,
+  appInsightsConfig,
   offlineProfile,
   children
 }) {
@@ -238,13 +252,17 @@ export function PowerAppsProvider({
   // is stable (loggerProp is an object reference; re-running on every render
   // would reconfigure and leak the previous provider).
   const loggerPropRef = useRef(loggerProp);
-
-  // Gate the offline-first networkMode on whether offline is actually enabled
-  // for this app. Keyed on the resolved boolean (not the prop object refs) so the
-  // QueryClient identity stays stable across renders even if the caller passes
-  // fresh offlineProfile literals.
-  const offlineEnabled = useMemo(() => isOfflineEnabled(offlineProfile), [offlineProfile]);
-  const queryClient = useMemo(() => createQueryClient(offlineEnabled), [offlineEnabled]);
+  const appInsightsConfigRef = useRef(appInsightsConfig ?? readAppInsightsConfig(Constants.expoConfig?.extra?.appInsightsConfig));
+  const [offlineTelemetryEnabled, setOfflineTelemetryEnabled] = useState();
+  const missingClientIdInDevPlayer = Platform.OS !== 'web' && isDevPlayer && !hasConfiguredValue(msalConfig.clientId) && requiresPowerPlatformAuth(powerConfig);
+  const missingAppId = !isDevPlayer && !hasConfiguredValue(powerConfig.appId);
+  const missingEnvironmentId = !isDevPlayer && !hasConfiguredValue(powerConfig.environmentId);
+  const appId = typeof powerConfig.appId === 'string' ? powerConfig.appId.trim() : '';
+  const bundleId = Platform.OS === 'ios' ? Constants.expoConfig?.ios?.bundleIdentifier : Platform.OS === 'android' ? Constants.expoConfig?.android?.package : undefined;
+  const appInstanceId = Constants.expoConfig?.extra?.telemetry?.appInstanceId;
+  const skillCorrelationId = typeof appInstanceId === 'string' ? appInstanceId.trim() : '';
+  const requiredAuthScopes = useMemo(() => [powerPlatformScope(powerConfig.region ?? 'prod')], [powerConfig.region]);
+  const queryClient = useMemo(() => createHostQueryClient(), []);
 
   // Configure the app logger exactly once per mount inside useEffect so that
   // side effects (provider construction, async resolveDeviceId) never run
@@ -252,6 +270,9 @@ export function PowerAppsProvider({
   // silent no-op Logger, so any telemetry emitted before the first commit is
   // silently dropped rather than crashing.
   useEffect(() => {
+    // Customer telemetry is a no-op until a valid Application Insights
+    // provider is configured below.
+    configureCustomerTelemetryLogger(new Logger());
     const lp = loggerPropRef.current;
     if (lp === null) {
       // Explicit opt-out — replace with a silent no-op Logger.
@@ -267,26 +288,63 @@ export function PowerAppsProvider({
         clientType: appName ?? 'PowerAppsNative',
         appVersion: Constants.expoConfig?.version,
         minSeverity: __DEV__ ? 'verbose' : 'info',
-        telemetryLocation: resolveTelemetryLocation(powerConfig.geoRegion)
+        telemetryLocation: resolveTelemetryLocation(powerConfig.geoRegion),
+        commonProperties: {
+          ...(appId ? {
+            appId
+          } : {}),
+          ...(bundleId ? {
+            bundleId
+          } : {}),
+          ...(skillCorrelationId ? {
+            skillCorrelationId
+          } : {})
+        }
+      };
+      const configureDefaultLogger = (deviceId = 'react-native') => {
+        const oneDsProvider = new OneDsTelemetryProvider({
+          ...providerConfig,
+          deviceId
+        });
+        const providers = [oneDsProvider];
+        let appInsightsEnabled = false;
+        const configuredAppInsights = appInsightsConfigRef.current;
+        if (configuredAppInsights?.enabled) {
+          try {
+            const customerProvider = new ApplicationInsightsTelemetryProvider({
+              ...configuredAppInsights,
+              appVersion: configuredAppInsights.appVersion ?? Constants.expoConfig?.version,
+              deviceId,
+              sessionId: oneDsProvider.sessionId
+            });
+            providers.push(customerProvider);
+            configureCustomerTelemetryLogger(new Logger({
+              providers: [customerProvider]
+            }));
+            appInsightsEnabled = true;
+          } catch (error) {
+            console.error('[PowerAppsProvider] Application Insights configuration is invalid.', error);
+          }
+        }
+        const logger = new Logger({
+          providers
+        });
+        configureAppLogger(logger);
+        if (appInsightsEnabled) {
+          logger.trackActivityEvent('PowerAppsNative.ApplicationStarted', {
+            app_id: configuredAppInsights?.appId
+          });
+        }
       };
       // Resolve the stable device ID first so every event — including the
       // very first — carries the real GUID rather than the 'react-native'
       // fallback. Events emitted while this resolves are silently dropped
       // by the no-op Logger that is active until configureAppLogger is called.
       resolveDeviceId().then(deviceId => {
-        const provider = new OneDsTelemetryProvider({
-          ...providerConfig,
-          deviceId
-        });
-        configureAppLogger(new Logger({
-          providers: [provider]
-        }));
+        configureDefaultLogger(deviceId);
       }).catch(_err => {
         // SecureStore unavailable — fall back to a provider without a stable ID.
-        const provider = new OneDsTelemetryProvider(providerConfig);
-        configureAppLogger(new Logger({
-          providers: [provider]
-        }));
+        configureDefaultLogger();
       });
     }
 
@@ -299,6 +357,11 @@ export function PowerAppsProvider({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // intentionally empty — logger is configured once per mount
+
+  useEffect(() => {
+    if (offlineTelemetryEnabled === undefined) return undefined;
+    return configureOfflineSdkTelemetry(offlineTelemetryEnabled);
+  }, [offlineTelemetryEnabled]);
   return /*#__PURE__*/_jsx(ErrorBoundary, {
     children: /*#__PURE__*/_jsx(GestureHandlerRootView, {
       style: {
@@ -316,19 +379,32 @@ export function PowerAppsProvider({
             children: /*#__PURE__*/_jsxs(ToastProvider, {
               swipeDirection: "horizontal",
               duration: 3000,
-              children: [/*#__PURE__*/_jsx(QueryClientProvider, {
-                client: queryClient,
-                children: /*#__PURE__*/_jsx(AuthProvider, {
-                  msalConfig: msalConfig,
-                  intuneConfig: intuneConfig,
-                  children: /*#__PURE__*/_jsx(InnerProviders, {
+              children: [/*#__PURE__*/_jsx(SessionDetailsGesture, {
+                enabled: showSessionDetailsOnSwipe,
+                appName: appName ?? Constants.expoConfig?.name ?? 'Power Apps',
+                appId: appId || undefined,
+                environmentId: powerConfig.environmentId,
+                region: powerConfig.region ?? 'prod',
+                appVersion: Constants.expoConfig?.version,
+                children: /*#__PURE__*/_jsx(QueryClientProvider, {
+                  client: queryClient,
+                  children: missingAppId ? /*#__PURE__*/_jsx(MissingAppIdErrorScreen, {}) : missingEnvironmentId ? /*#__PURE__*/_jsx(MissingEnvironmentIdErrorScreen, {}) : missingClientIdInDevPlayer ? /*#__PURE__*/_jsx(MissingClientIdErrorScreen, {}) : /*#__PURE__*/_jsx(AuthProvider, {
                     msalConfig: msalConfig,
-                    powerConfig: powerConfig,
-                    schemaMap: schemaMap,
-                    renderOAuthWebView: renderOAuthWebView,
-                    onDisambiguationNeeded: onDisambiguationNeeded,
-                    offlineProfile: offlineProfile,
-                    children: children
+                    intuneConfig: intuneConfig,
+                    requiredScopes: requiredAuthScopes,
+                    children: /*#__PURE__*/_jsx(InnerProviders, {
+                      msalConfig: msalConfig,
+                      powerConfig: powerConfig,
+                      schemaMap: schemaMap,
+                      renderOAuthWebView: renderOAuthWebView,
+                      onDisambiguationNeeded: onDisambiguationNeeded,
+                      onConnectionConsent: onConnectionConsent,
+                      onResourceConsent: onResourceConsent,
+                      onConnectionConsentDeclined: onConnectionConsentDeclined,
+                      offlineProfile: offlineProfile,
+                      onOfflineEnabledChange: setOfflineTelemetryEnabled,
+                      children: children
+                    })
                   })
                 })
               }), /*#__PURE__*/_jsx(ToastViewport, {
@@ -342,4 +418,24 @@ export function PowerAppsProvider({
       })
     })
   });
-}
+}
+const styles = StyleSheet.create({
+  errorContainer: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    padding: 24,
+    backgroundColor: '#F8F8F8'
+  },
+  errorTitle: {
+    color: '#A4262C',
+    fontSize: 22,
+    fontWeight: '700',
+    marginBottom: 12
+  },
+  errorBody: {
+    color: '#323130',
+    fontSize: 15,
+    lineHeight: 22,
+    marginBottom: 10
+  }
+});