refactor: move app mode provider to auth react

Signed-off-by: Camila Belo <camilaibs@gmail.com>

plugins/auth-react/api-report.md

@@ -18,6 +18,11 @@ export type CookieAuthRefreshProviderProps = {
   children: ReactNode;
 };
 
+// @public
+export function ExperimentalAppProtection(props: {
+  children: ReactNode;
+}): JSX.Element;
+
 // @public
 export function RedirectToRoot(): React_2.JSX.Element | null;
 

plugins/auth-react/package.json

@@ -44,7 +44,8 @@
     "@backstage/test-utils": "workspace:^",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.0.0"
+    "@testing-library/user-event": "^14.0.0",
+    "msw": "^1.0.0"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0"

plugins/auth-react/src/components/ExperimentalAppProtection/ExperimentalAppProtection.test.tsx

@@ -0,0 +1,150 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import {
+  MockConfigApi,
+  TestApiProvider,
+  renderInTestApp,
+  setupRequestMockHandlers,
+} from '@backstage/test-utils';
+import { ExperimentalAppProtection } from './ExperimentalAppProtection';
+import {
+  configApiRef,
+  discoveryApiRef,
+  fetchApiRef,
+} from '@backstage/core-plugin-api';
+
+describe('ExperimentalAppProtection', () => {
+  const worker = setupServer();
+  setupRequestMockHandlers(worker);
+
+  const configApiMock = new MockConfigApi({
+    backend: {
+      baseUrl: 'http://localhost:7000',
+    },
+  });
+
+  const fetchApiMock = {
+    fetch: jest.fn(),
+  };
+
+  const discoveryApiMock = {
+    getBaseUrl: jest.fn().mockResolvedValue('http://localhost:7000/app'),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the progress component while loading', async () => {
+    fetchApiMock.fetch.mockReturnValueOnce(new Promise(() => {}));
+    await renderInTestApp(
+      <TestApiProvider
+        apis={[
+          [configApiRef, configApiMock],
+          [fetchApiRef, fetchApiMock],
+        ]}
+      >
+        <ExperimentalAppProtection>Test content</ExperimentalAppProtection>
+      </TestApiProvider>,
+    );
+    expect(screen.getByTestId('progress')).toBeVisible();
+    expect(screen.queryByText('Test Content')).not.toBeInTheDocument();
+  });
+
+  it('should render the children even when there is an error', async () => {
+    const error = new Error('Failed to fetch');
+    fetchApiMock.fetch.mockRejectedValueOnce(error);
+    await renderInTestApp(
+      <TestApiProvider
+        apis={[
+          [configApiRef, configApiMock],
+          [fetchApiRef, fetchApiMock],
+        ]}
+      >
+        <ExperimentalAppProtection>Test content</ExperimentalAppProtection>
+      </TestApiProvider>,
+    );
+    await waitFor(() =>
+      expect(screen.getByText('Test content')).toBeInTheDocument(),
+    );
+    expect(screen.queryByTestId('progress')).not.toBeInTheDocument();
+    expect(screen.queryByText('Failed to fetch')).not.toBeInTheDocument();
+  });
+
+  it('should render the children even when the public index is not available', async () => {
+    fetchApiMock.fetch.mockResolvedValueOnce({ ok: false });
+    await renderInTestApp(
+      <TestApiProvider
+        apis={[
+          [configApiRef, configApiMock],
+          [fetchApiRef, fetchApiMock],
+        ]}
+      >
+        <ExperimentalAppProtection>Test content</ExperimentalAppProtection>
+      </TestApiProvider>,
+    );
+    await waitFor(() =>
+      expect(screen.getByText('Test content')).toBeInTheDocument(),
+    );
+    expect(screen.queryByTestId('progress')).not.toBeInTheDocument();
+  });
+
+  it('should render the children also when the public index is available', async () => {
+    fetchApiMock.fetch.mockResolvedValueOnce({ ok: true });
+    await renderInTestApp(
+      <ExperimentalAppProtection>Test content</ExperimentalAppProtection>,
+    );
+    await waitFor(() =>
+      expect(screen.getByText('Test content')).toBeInTheDocument(),
+    );
+    expect(screen.queryByTestId('progress')).not.toBeInTheDocument();
+  });
+
+  it('should render the children wrapped in the CookieAuthRefreshProvider', async () => {
+    worker.use(
+      rest.get('http://localhost:7000/public/index.html', (_, res, ctx) => {
+        return res(ctx.status(200));
+      }),
+      rest.get(
+        'http://localhost:7000/app/.backstage/v1-cookie',
+        (_, res, ctx) => {
+          return res(
+            ctx.status(200),
+            ctx.json({ expiresAt: Date.now() + 10 * 60 * 1000 }),
+          );
+        },
+      ),
+    );
+    await renderInTestApp(
+      <TestApiProvider
+        apis={[
+          [configApiRef, configApiMock],
+          [discoveryApiRef, discoveryApiMock],
+        ]}
+      >
+        <ExperimentalAppProtection>Test content</ExperimentalAppProtection>
+      </TestApiProvider>,
+    );
+    await waitFor(() =>
+      expect(screen.getByText('Test content')).toBeInTheDocument(),
+    );
+  });
+});

plugins/auth-react/src/components/ExperimentalAppProtection/ExperimentalAppProtection.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { ReactNode } from 'react';
+import {
+  configApiRef,
+  fetchApiRef,
+  useApi,
+  useApp,
+} from '@backstage/core-plugin-api';
+import { CookieAuthRefreshProvider } from '@backstage/plugin-auth-react';
+import { useAsync, useMountEffect } from '@react-hookz/web';
+
+/**
+ * @public
+ * A provider that will protect the app when running in public experimental mode.
+ */
+export function ExperimentalAppProtection(props: {
+  children: ReactNode;
+}): JSX.Element {
+  const { children } = props;
+  const fetchApi = useApi(fetchApiRef);
+  const configApi = useApi(configApiRef);
+  const Components = useApp().getComponents();
+
+  const [state, actions] = useAsync(async () => {
+    const baseUrl = configApi.getString('backend.baseUrl');
+    const response = await fetchApi.fetch(`${baseUrl}/public/index.html`);
+    return response.ok;
+  });
+
+  useMountEffect(actions.execute);
+
+  if (state.status === 'not-executed' || state.status === 'loading') {
+    return <Components.Progress />;
+  }
+
+  // Request failed, or the public index is not available
+  if (state.status === 'error' || !state.result) {
+    return <>{children}</>;
+  }
+
+  // The public index is available
+  // That means the app is running in public experimental mode
+  return (
+    <CookieAuthRefreshProvider pluginId="app">
+      {children}
+    </CookieAuthRefreshProvider>
+  );
+}

plugins/auth-react/src/components/ExperimentalAppProtection/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { ExperimentalAppProtection } from './ExperimentalAppProtection';

plugins/auth-react/src/components/index.ts

@@ -19,3 +19,4 @@
 
 export * from './RedirectToRoot';
 export * from './CookieAuthRefreshProvider';
+export * from './ExperimentalAppProtection';