fix: fix apiFlags being undefined resulting in a crash (#617)

* fix: fix apiFlags being undefined resulting in a crash

* refactor: undo unnecessary ts null safety check

* test: remove unnecessary tests

Author: cspath1

packages/toolbar/src/core/tests/FlagsProvider.test.tsx

@@ -415,6 +415,126 @@ describe('FlagsProvider', () => {
     });
   });
 
+  describe('Malformed API Response Resilience', () => {
+    test('handles API response missing items property', async () => {
+      // GIVEN: API returns a response without an items property (e.g. unexpected iframe response)
+      mockGetFlags.mockResolvedValue({});
+
+      // WHEN: Flags are loaded
+      render(
+        <TestWrapper>
+          <FlagsProvider>
+            <TestConsumer />
+          </FlagsProvider>
+        </TestWrapper>,
+      );
+
+      // THEN: Falls back to empty array instead of crashing
+      await waitFor(() => {
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+      expect(screen.getByTestId('flags-count')).toHaveTextContent('0');
+    });
+
+    test('handles API response with undefined items', async () => {
+      // GIVEN: API returns { items: undefined }
+      mockGetFlags.mockResolvedValue({ items: undefined });
+
+      // WHEN: Flags are loaded
+      render(
+        <TestWrapper>
+          <FlagsProvider>
+            <TestConsumer />
+          </FlagsProvider>
+        </TestWrapper>,
+      );
+
+      // THEN: Falls back to empty array
+      await waitFor(() => {
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+      expect(screen.getByTestId('flags-count')).toHaveTextContent('0');
+    });
+
+    test('handles null API response', async () => {
+      // GIVEN: API returns null (e.g. network issue or iframe communication failure)
+      mockGetFlags.mockResolvedValue(null);
+
+      // WHEN: Flags are loaded
+      render(
+        <TestWrapper>
+          <FlagsProvider>
+            <TestConsumer />
+          </FlagsProvider>
+        </TestWrapper>,
+      );
+
+      // THEN: Falls back to empty array
+      await waitFor(() => {
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+      expect(screen.getByTestId('flags-count')).toHaveTextContent('0');
+    });
+
+    test('handles undefined API response', async () => {
+      // GIVEN: API returns undefined
+      mockGetFlags.mockResolvedValue(undefined);
+
+      // WHEN: Flags are loaded
+      render(
+        <TestWrapper>
+          <FlagsProvider>
+            <TestConsumer />
+          </FlagsProvider>
+        </TestWrapper>,
+      );
+
+      // THEN: Falls back to empty array
+      await waitFor(() => {
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+      expect(screen.getByTestId('flags-count')).toHaveTextContent('0');
+    });
+
+    test('recovers from malformed response when valid response follows', async () => {
+      // GIVEN: First API call returns malformed response
+      mockGetFlags.mockResolvedValue({});
+
+      const { rerender } = render(
+        <TestWrapper>
+          <FlagsProvider>
+            <TestConsumer />
+          </FlagsProvider>
+        </TestWrapper>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+      expect(screen.getByTestId('flags-count')).toHaveTextContent('0');
+
+      // WHEN: Project changes and the next API call returns valid data
+      (useProjectContext as any).mockReturnValue({ projectKey: 'new-project' });
+      mockGetFlags.mockResolvedValue(
+        createFlagsResponse([{ key: 'flag-1', name: 'Flag 1', kind: 'boolean' } as ApiFlag]),
+      );
+
+      rerender(
+        <TestWrapper>
+          <FlagsProvider>
+            <TestConsumer />
+          </FlagsProvider>
+        </TestWrapper>,
+      );
+
+      // THEN: Flags load correctly after recovery
+      await waitFor(() => {
+        expect(screen.getByTestId('flags-count')).toHaveTextContent('1');
+      });
+      expect(screen.getByTestId('flag-flag-1')).toHaveTextContent('Flag 1');
+    });
+  });
+
   describe('Context Hook - useFlagsContext', () => {
     test('throws error when used without FlagsProvider', () => {
       // GIVEN: Component uses context without provider

packages/toolbar/src/core/ui/Toolbar/context/FlagSdkOverrideProvider.tsx

@@ -63,7 +63,6 @@ export function FlagSdkOverrideProvider({ children, flagOverridePlugin }: FlagSd
     (allFlags: Record<string, any>, apiFlags: ApiFlag[]): Record<string, LocalFlag> => {
       const overrides = flagOverridePlugin.getAllOverrides();
 
-      // Create a map of API flags for quick lookup
       const apiFlagsMap = new Map<string, ApiFlag>();
       apiFlags.forEach((apiFlag) => {
         apiFlagsMap.set(apiFlag.key, apiFlag);

packages/toolbar/src/core/ui/Toolbar/context/api/FlagsProvider.tsx

@@ -48,7 +48,7 @@ export const FlagsProvider = ({ children }: { children: React.ReactNode }) => {
     setLoading(true);
     try {
       const flagsResponse = await getProjectFlags(projectKey);
-      setFlags(flagsResponse.items);
+      setFlags(flagsResponse?.items ?? []);
       setLoadedProjectKey(projectKey);
     } catch (error) {
       console.error('Error refreshing flags:', error);
@@ -82,9 +82,9 @@ export const FlagsProvider = ({ children }: { children: React.ReactNode }) => {
     let isMounted = true;
     setLoading(true);
     setFlags([]);
-    getProjectFlags(projectKey).then((flags) => {
+    getProjectFlags(projectKey).then((response) => {
       if (isMounted) {
-        setFlags(flags.items);
+        setFlags(response?.items ?? []);
         setLoadedProjectKey(projectKey);
         setHasInitialLoad(true);
         setLoading(false);