[OSDEV-1747] Check auth for SLC pages.

doc/release/RELEASE-NOTES.md

@@ -25,6 +25,7 @@ This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html
 * *Describe architecture/environment changes here.*
 
 ### Bugfix
+* [OSDEV-1747](https://opensupplyhub.atlassian.net/browse/OSDEV-1747) - All SLC pages have been made accessible only to authorized users.
 * [OSDEV-1777](https://opensupplyhub.atlassian.net/browse/OSDEV-1777) - A consistent URL style was established across all pages of the SLC workflow. After the changes, the URL begins from `/contribute/single-location/`.
 * [OSDEV-1678](https://opensupplyhub.atlassian.net/browse/OSDEV-1678) - Added asterisks next to each required form field (Name, Address, and Country) on the "Production Location Information" page. Highlighted an empty field and displayed an error message if it loses focus.
 

src/react/src/__tests__/components/ContributeProductionLocation.test.js

@@ -8,32 +8,75 @@ jest.mock('../../components/Contribute/SearchByOsIdTab', () => () => <div>Mocked
 jest.mock('../../components/Contribute/SearchByNameAndAddressTab', () => () => <div>Mocked SearchByNameAndAddressTab</div>);
 
 describe('ContributeProductionLocation component', () => {
-    const renderComponent = (queryParams = '') => 
+    const mockAuthorizedState = {
+        auth: {
+            user: { user: { isAnon: false } },
+            session: { fetching: false },
+        },
+    };
+
+    const mockNotAuthorizedState = {
+        auth: {
+            user: { user: { isAnon: true } },
+            session: { fetching: false },
+        },
+    };
+
+    const renderComponent = (preloadedState = {}, queryParams = '') =>
         renderWithProviders(
             <MemoryRouter initialEntries={[`/contribute/single-location${queryParams}`]}>
                 <ContributeProductionLocation />
-            </MemoryRouter>
+            </MemoryRouter>,
+            { preloadedState }
         );
 
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('renders for the unauthorized user', () => {
+        const  expectedTitle = 'Production Location Search'
+        const { getByText, getByRole } = renderComponent(mockNotAuthorizedState);
+        const linkElement = getByRole('link', { name: /Log in to contribute to Open Supply Hub/i });
+
+        expect(linkElement).toBeInTheDocument();
+        expect(linkElement).toHaveAttribute('href', '/auth/login');
+        expect(getByText('Log in to contribute to Open Supply Hub')).toBeInTheDocument();
+        expect(getByText(expectedTitle)).toBeInTheDocument();
+    });
+
+    it('renders for the authorized user', () => {
+        const  expectedTitle = 'Production Location Search'
+        const { getByText, getByRole } = renderComponent(mockAuthorizedState);
+        const title = getByText(expectedTitle);
+        const nameAddressTab = getByRole('tab', { name: /Search by name and address/i });
+        const osIdTab = getByRole('tab', { name: /Search by OS ID/i });
+
+        expect(title).toBeInTheDocument();
+        expect(nameAddressTab).toBeInTheDocument();
+        expect(osIdTab).toBeInTheDocument();
+    });
+
     it('renders with the correct title', () => {
-        const { getByText } = renderComponent();
+        const { getByText } = renderComponent(mockAuthorizedState);
         expect(getByText('Production Location Search')).toBeInTheDocument();
     });
 
     it('renders the Name and Address tab as selected by default', () => {
-        const { getByRole } = renderComponent();
+        const { getByRole } = renderComponent(mockAuthorizedState);
         const nameAddressTab = getByRole('tab', { name: /Search by name and address/i });
         expect(nameAddressTab).toHaveAttribute('aria-selected', 'true');
     });
 
     it('renders the OS ID tab as unselected by default', () => {
-        const { getByRole } = renderComponent();
+        const { getByRole } = renderComponent(mockAuthorizedState);
         const osIdTab = getByRole('tab', { name: /Search by OS ID/i });
         expect(osIdTab).toHaveAttribute('aria-selected', 'false');
     });
 
     it('changes the tab when clicked and updates the URL', () => {
-        const { getByRole } = renderComponent();
+        const { getByRole } = renderComponent(mockAuthorizedState);
+
         const nameAddressTab = getByRole('tab', { name: /Search by name and address/i });
         const osIdTab = getByRole('tab', { name: /Search by OS ID/i });
 
@@ -44,22 +87,33 @@ describe('ContributeProductionLocation component', () => {
     });
 
     it('renders SearchByNameAndAddressTab when Name and Address tab is selected', () => {
-        const { getByText } = renderComponent();
+        const { getByText } = renderComponent(mockAuthorizedState);
         expect(getByText('Mocked SearchByNameAndAddressTab')).toBeInTheDocument();
     });
 
     it('renders SearchByOsIdTab when OS ID tab is selected', () => {
-        const { getByText, getByRole } = renderComponent();
+        const { getByText, getByRole } = renderComponent(mockAuthorizedState);
         const osIdTab = getByRole('tab', { name: /Search by OS ID/i });
-        
+
         fireEvent.click(osIdTab);
         expect(getByText('Mocked SearchByOsIdTab')).toBeInTheDocument();
     });
 
     it('handles invalid tab and defaults to Name and Address tab', () => {
-        const { getByRole } = renderComponent('?tab=invalid-tab');
+        const { getByRole } = renderComponent(mockAuthorizedState,'?tab=invalid-tab');
         const nameAddressTab = getByRole('tab', { name: /Search by name and address/i });
 
         expect(nameAddressTab).toHaveAttribute('aria-selected', 'true');
     });
+
+    it('renders loading indicator when fetching session', () => {
+        const loadingState = {
+            auth: {
+                user: { user: { isAnon: true } },
+                session: { fetching: true },
+            },
+        };
+        const { getByRole } = renderComponent(loadingState);
+        expect(getByRole('progressbar')).toBeInTheDocument();
+    });
 });

src/react/src/__tests__/components/ProductionLocationInfo.test.js

@@ -43,13 +43,17 @@ describe("ProductionLocationInfo component", () => {
                 fetching: false,
             },
         },
+        auth: {
+            user: { user: { isAnon: false } },
+            session: { fetching: false },
+        },
     };
 
     const defaultProps = {
         submitMethod: "POST",
     };
 
-    const renderComponent = (props = {}) => 
+    const renderComponent = (props = {}) =>
         renderWithProviders(
             <Router>
                 <ProductionLocationInfo {...defaultProps} {...props} />

src/react/src/__tests__/components/RequireAuthNotice.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Router } from "react-router-dom";
+import { fireEvent } from '@testing-library/react';
+import history from '../../util/history';
+import renderWithProviders from '../../util/testUtils/renderWithProviders';
+import {
+    authLoginFormRoute,
+} from '../../util/constants';
+import RequireAuthNotice from '../../components/RequireAuthNotice';
+
+describe('RequireAuthNotice component', () => {
+    const renderComponent = (preloadedState = {}) =>
+        renderWithProviders(
+            <Router history={history}>
+               <RequireAuthNotice {...preloadedState}/>
+            </Router>
+        );
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test("renders component with default params", () => {
+        const defaultTitle = 'Unauthorized Access';
+        const defaultText = 'Log in to contribute to Open Supply Hub';
+
+        const { getByText, getByRole } = renderComponent();
+        const titleEl = getByRole("heading", { level: 2 });
+        const titleText = titleEl.textContent.trim();
+        const linkEl = getByRole("link", { name: defaultText });
+
+        expect(titleEl).toBeInTheDocument();
+        expect(defaultTitle).toBe(titleText);
+        expect(getByText(defaultText)).toBeInTheDocument();
+
+        fireEvent.click(linkEl);
+        expect(history.location.pathname).toBe(authLoginFormRoute);
+    });
+
+    test("renders component with set params", () => {
+        const expectedTitle = "Test title";
+        const expectedText = "Test text";
+        const preloadedState = {
+            title: expectedTitle,
+            text: expectedText,
+        }
+        const { getByText } = renderComponent(preloadedState);
+
+        expect(getByText(expectedTitle)).toBeInTheDocument();
+        expect(getByText(expectedText)).toBeInTheDocument();
+    });
+})

src/react/src/__tests__/components/SearchByOsIdResult.test.js

@@ -6,26 +6,38 @@ import renderWithProviders from '../../util/testUtils/renderWithProviders';
 
 
 describe('SearchByOsIdResult component', () => {
-
-    const renderComponent = (detailOverride) => {
+    const mockNotAuthorizedState = {
+        auth: {
+            user: { user: { isAnon: true } },
+            session: { fetching: false },
+        },
+    };
+
+    const renderComponent = (detailOverride, authOverride) => {
         const preloadedState = {
             contributeProductionLocation: {
-                singleProductionLocation: { 
-                    data: {}, 
-                    fetching: false, 
+
+                singleProductionLocation: {
+                    data: {},
+                    fetching: false,
                     ...detailOverride,
                 },
             },
+            auth: {
+                user: { user: { isAnon: false } },
+                session: { fetching: false },
+            },
+            ...authOverride,
         };
-    
+
         return renderWithProviders(
             <Router history={history}>
                 <SearchByOsIdResult />
             </Router>,
             { preloadedState }
         );
     };
-    
+
     beforeEach(() => {
         jest.clearAllMocks();
     });
@@ -36,6 +48,32 @@ describe('SearchByOsIdResult component', () => {
         expect(getByText('Production Location Search')).toBeInTheDocument();
     });
 
+    it('renders for the unauthorized user', () => {
+        const  expectedTitle = 'Production Location Search'
+        const { getByText, getByRole } = renderComponent({}, mockNotAuthorizedState);
+        const linkElement = getByRole('link', { name: /Log in to contribute to Open Supply Hub/i });
+
+        expect(linkElement).toBeInTheDocument();
+        expect(linkElement).toHaveAttribute('href', '/auth/login');
+        expect(getByText('Log in to contribute to Open Supply Hub')).toBeInTheDocument();
+        expect(getByText(expectedTitle)).toBeInTheDocument();
+    });
+
+    it('renders for the authorized user', () => {
+        const  expectedTitle = 'Production Location Search'
+        const { getByText, getByRole } = renderComponent();
+        const title = getByText(expectedTitle);
+        const backToIdBtn = getByRole('button', { name: /Back to ID search/i });
+        const byNameAndIdBtn = getByRole('button', { name: /Search by Name and Address/i });
+        const anotherIdBtn = getByRole('button', { name: /Search for another ID/i });
+
+
+        expect(title).toBeInTheDocument();
+        expect(backToIdBtn).toBeInTheDocument();
+        expect(byNameAndIdBtn).toBeInTheDocument();
+        expect(anotherIdBtn).toBeInTheDocument();
+    });
+
     it('shows loading spinner when fetching is true', () => {
         const {getByRole} = renderComponent({ fetching: true });
 

src/react/src/components/AddLocationData.jsx

@@ -10,10 +10,10 @@ import Grid from '@material-ui/core/Grid';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 import AppGrid from './AppGrid';
+import RequireAuthNotice from './RequireAuthNotice';
 
 import { openInNewTab } from '../util/util';
 import {
-    authLoginFormRoute,
     InfoLink,
     InfoPaths,
     contributeProductionLocationRoute,
@@ -30,9 +30,10 @@ import SliceMessyFigure from './SliceMessyFigure';
 import SliceMessyDuoFigure from './SliceMessyDuoFigure';
 
 function AddLocationData({ classes, userHasSignedIn, fetchingSessionSignIn }) {
+    const TITLE = 'Contribute';
     if (fetchingSessionSignIn) {
         return (
-            <AppGrid title="Contribute">
+            <AppGrid title={TITLE}>
                 <Grid container className="margin-bottom-64">
                     <Grid item xs={12}>
                         <CircularProgress />
@@ -43,17 +44,7 @@ function AddLocationData({ classes, userHasSignedIn, fetchingSessionSignIn }) {
     }
 
     if (!userHasSignedIn) {
-        return (
-            <AppGrid title="Contribute">
-                <Grid container className="margin-bottom-64">
-                    <Grid item xs={12}>
-                        <Link to={authLoginFormRoute} href={authLoginFormRoute}>
-                            Log in to contribute to Open Supply Hub
-                        </Link>
-                    </Grid>
-                </Grid>
-            </AppGrid>
-        );
+        return <RequireAuthNotice title={TITLE} />;
     }
 
     return (

src/react/src/components/Contribute.jsx

@@ -9,18 +9,16 @@ import Paper from '@material-ui/core/Paper';
 import AppGrid from './AppGrid';
 import AppOverflow from './AppOverflow';
 import ContributeForm from './ContributeForm';
+import RequireAuthNotice from './RequireAuthNotice';
 
-import {
-    listsRoute,
-    authLoginFormRoute,
-    InfoLink,
-    InfoPaths,
-} from '../util/constants';
+import { listsRoute, InfoLink, InfoPaths } from '../util/constants';
 
 function ContributeList({ userHasSignedIn, fetchingSessionSignIn }) {
+    const TITLE = 'Contribute';
+
     if (fetchingSessionSignIn) {
         return (
-            <AppGrid title="Contribute">
+            <AppGrid title={TITLE}>
                 <Grid container className="margin-bottom-64">
                     <Grid item xs={12}>
                         <CircularProgress />
@@ -31,17 +29,7 @@ function ContributeList({ userHasSignedIn, fetchingSessionSignIn }) {
     }
 
     if (!userHasSignedIn) {
-        return (
-            <AppGrid title="Contribute">
-                <Grid container className="margin-bottom-64">
-                    <Grid item xs={12}>
-                        <Link to={authLoginFormRoute} href={authLoginFormRoute}>
-                            Log in to contribute to Open Supply Hub
-                        </Link>
-                    </Grid>
-                </Grid>
-            </AppGrid>
-        );
+        return <RequireAuthNotice title={TITLE} />;
     }
 
     return (