frontend-app-api: integrate predicate context into app phases

Compute and cache extension predicate context as part of app phase transitions so sign-in and non-sign-in flows finalize against the same gating state.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor

packages/frontend-defaults/src/createApp.test.tsx

@@ -386,6 +386,56 @@ describe('createApp', () => {
     ).resolves.toBeInTheDocument();
   });
 
+  it('should evaluate extension if predicates before rendering apps without sign-in', async () => {
+    const featureFlagsApi = {
+      isActive: jest.fn((name: string) => name === 'test-flag'),
+      registerFlag: jest.fn(),
+      getRegisteredFlags: () => [],
+      save: jest.fn(),
+    } as unknown as typeof featureFlagsApiRef.T;
+    const app = createApp({
+      advanced: {
+        configLoader: async () => ({ config: mockApis.config() }),
+      },
+      features: [
+        appPlugin,
+        createFrontendModule({
+          pluginId: 'app',
+          extensions: [
+            ApiBlueprint.make({
+              params: defineParams =>
+                defineParams({
+                  api: featureFlagsApiRef,
+                  deps: {},
+                  factory: () => featureFlagsApi,
+                }),
+            }),
+          ],
+        }),
+        createFrontendPlugin({
+          pluginId: 'test',
+          featureFlags: [{ name: 'test-flag' }],
+          extensions: [
+            PageBlueprint.make({
+              if: { featureFlags: { $contains: 'test-flag' } },
+              params: {
+                path: '/',
+                loader: async () => <div>Flagged Page</div>,
+              },
+            }),
+          ],
+        }),
+      ],
+    });
+
+    await renderWithEffects(app.createRoot());
+
+    await expect(
+      screen.findByText('Flagged Page'),
+    ).resolves.toBeInTheDocument();
+    expect(featureFlagsApi.isActive).toHaveBeenCalledWith('test-flag');
+  });
+
   it('should make the app structure available through the AppTreeApi', async () => {
     let appTreeApi: AppTreeApi | undefined = undefined;
 

packages/frontend-defaults/src/createApp.tsx

@@ -133,6 +133,8 @@ export function createApp(options?: CreateAppOptions): {
       };
     }
 
+    await preparedApp.buildPredicateContext();
+
     return {
       default: () => renderFinalizedApp(preparedApp.finalize()),
     };
@@ -164,12 +166,15 @@ function PreparedAppRoot(props: {
     let cancelled = false;
     const runFinalize = async () => {
       try {
-        const predicateContext =
+        if (signIn) {
+          await signIn.complete;
+        } else {
           await props.preparedApp.buildPredicateContext();
+        }
         if (cancelled) {
           return;
         }
-        setFinalizedApp(props.preparedApp.finalize(predicateContext));
+        setFinalizedApp(props.preparedApp.finalize());
       } catch (error) {
         if (cancelled) {
           return;
@@ -177,23 +182,7 @@ function PreparedAppRoot(props: {
         setFinalizeError(error as Error);
       }
     };
-    if (signIn) {
-      void signIn.complete
-        .then(() => {
-          if (cancelled) {
-            return;
-          }
-          void runFinalize();
-        })
-        .catch(error => {
-          if (cancelled) {
-            return;
-          }
-          setFinalizeError(error);
-        });
-    } else {
-      setFinalizedApp(props.preparedApp.finalize());
-    }
+    void runFinalize();
     return () => {
       cancelled = true;
     };