refactor: more review refinements

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

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

@@ -16,9 +16,9 @@
 
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
-import { AppMode } from './AppMode';
-import { discoveryApiRef, fetchApiRef } from '@backstage/core-plugin-api';
 import { componentsApiRef } from '@backstage/frontend-plugin-api';
+import { discoveryApiRef, fetchApiRef } from '@backstage/core-plugin-api';
+import { AppAuthProvider } from './AppAuthProvider';
 
 const now = 1710316886171;
 const tenMinutesInMilliseconds = 10 * 60 * 1000;
@@ -60,7 +60,7 @@ jest.mock('@backstage/core-plugin-api', () => {
   };
 });
 
-describe('AppMode', () => {
+describe('AppAuthProvider', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     jest.useFakeTimers({ now });
@@ -71,7 +71,7 @@ describe('AppMode', () => {
   });
 
   it('should render the children when app mode is undefined', async () => {
-    render(<AppMode>Test content</AppMode>);
+    render(<AppAuthProvider>Test content</AppAuthProvider>);
     await waitFor(() =>
       expect(screen.getByText('Test content')).toBeInTheDocument(),
     );
@@ -81,7 +81,7 @@ describe('AppMode', () => {
     render(
       <>
         <meta name="backstage-app-mode" content="public" />
-        <AppMode>Test content</AppMode>
+        <AppAuthProvider>Test content</AppAuthProvider>
       </>,
     );
     await waitFor(() =>
@@ -93,7 +93,7 @@ describe('AppMode', () => {
     render(
       <>
         <meta name="backstage-app-mode" content="protected" />
-        <AppMode>Test content</AppMode>
+        <AppAuthProvider>Test content</AppAuthProvider>
       </>,
     );
     await waitFor(() =>

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

@@ -14,29 +14,18 @@
  * limitations under the License.
  */
 
-import React, { ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode } from 'react';
 import { CookieAuthRefreshProvider } from '@backstage/plugin-auth-react';
-import { CompatAppProgress } from '../CompatAppProgress';
+import { isProtectedApp } from './isProtectedApp';
 
 /**
  * @public
  * A provider that will protect the app when running in protected experimental mode.
  */
-export function AppMode(props: { children: ReactNode }): JSX.Element {
+export function AppAuthProvider(props: { children: ReactNode }): JSX.Element {
   const { children } = props;
 
-  const [appMode, setAppMode] = useState<string | null>(null);
-
-  useEffect(() => {
-    const element = document.querySelector('meta[name="backstage-app-mode"]');
-    setAppMode(element?.getAttribute('content') ?? 'public');
-  }, [setAppMode]);
-
-  if (!appMode) {
-    return <CompatAppProgress />;
-  }
-
-  if (appMode === 'protected') {
+  if (isProtectedApp()) {
     return (
       <CookieAuthRefreshProvider pluginId="app">
         {children}

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

@@ -14,4 +14,5 @@
  * limitations under the License.
  */
 
-export { CookieAuthRootRedirect } from './CookieAuthRootRedirect';
+export { isProtectedApp } from './isProtectedApp';
+export { AppAuthProvider } from './AppAuthProvider';

plugins/auth-react/src/components/AppAuthProvider/isProtectedApp.tsx

@@ -14,4 +14,12 @@
  * limitations under the License.
  */
 
-export { CompatAppProgress } from './CompatAppProgress';
+/**
+ * @public
+ * An utility function that detects whether the app is operating in protected mode.
+ */
+export function isProtectedApp() {
+  const element = document.querySelector('meta[name="backstage-app-mode"]');
+  const appMode = element?.getAttribute('content') ?? 'public';
+  return appMode === 'protected';
+}

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

@@ -18,9 +18,9 @@ import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import { TestApiProvider, renderInTestApp } from '@backstage/test-utils';
 import { identityApiRef } from '@backstage/core-plugin-api';
-import { CookieAuthRootRedirect } from './CookieAuthRootRedirect';
+import { CookieAuthRedirect } from './CookieAuthRedirect';
 
-describe('CookieAuthRootRedirect', () => {
+describe('CookieAuthRedirect', () => {
   const identityApiMock = { getCredentials: jest.fn() };
 
   beforeEach(() => {
@@ -32,7 +32,7 @@ describe('CookieAuthRootRedirect', () => {
 
     await renderInTestApp(
       <TestApiProvider apis={[[identityApiRef, identityApiMock]]}>
-        <CookieAuthRootRedirect />
+        <CookieAuthRedirect />
       </TestApiProvider>,
     );
 
@@ -50,7 +50,7 @@ describe('CookieAuthRootRedirect', () => {
 
     await renderInTestApp(
       <TestApiProvider apis={[[identityApiRef, identityApiMock]]}>
-        <CookieAuthRootRedirect />
+        <CookieAuthRedirect />
       </TestApiProvider>,
     );
 

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

@@ -20,9 +20,9 @@ import { useAsync, useMountEffect } from '@react-hookz/web';
 
 /**
  * @public
- * A component that redirects to the root of the app after a successful sign-in.
+ * A component that redirects to the page an user was trying to access before sign-in.
  */
-export function CookieAuthRootRedirect() {
+export function CookieAuthRedirect() {
   const identityApi = useApi(identityApiRef);
 
   const [state, actions] = useAsync(async () => {

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

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { AppMode } from './AppMode';
+export { CookieAuthRedirect } from './CookieAuthRedirect';

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

@@ -18,7 +18,7 @@ import React, { ReactNode } from 'react';
 import { ErrorPanel } from '@backstage/core-components';
 import { Button } from '@material-ui/core';
 import { useCookieAuthRefresh } from '../../hooks';
-import { CompatAppProgress } from '../CompatAppProgress/CompatAppProgress';
+import { CompatAppProgress } from './CompatAppProgress';
 
 /**
  * @public
@@ -45,6 +45,7 @@ export function CookieAuthRefreshProvider(
   const result = useCookieAuthRefresh(options);
 
   if (result.status === 'loading') {
+    // This component should be compatible with both old and new frontend systems
     return <CompatAppProgress />;
   }
 

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

@@ -17,6 +17,6 @@
 // The index file in ./components/ is typically responsible for selecting
 // which components are public API and should be exported from the package.
 
-export * from './CookieAuthRootRedirect';
+export * from './AppAuthProvider';
+export * from './CookieAuthRedirect';
 export * from './CookieAuthRefreshProvider';
-export * from './AppMode';