Merge pull request #115 from Pearson-Advance/vue/PADV-1533

PADV-1533 feat: add unauthorized page

src/features/Main/UnauthorizedPage/__test__/index.test.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import UnauthorizedPage from 'features/Main/UnauthorizedPage';
+
+import { unauthorizedText } from 'features/constants';
+
+describe('Unauthorized Component', () => {
+  test('should render message', async () => {
+    const { container } = render(<UnauthorizedPage />);
+
+    expect(container).toHaveTextContent(unauthorizedText);
+  });
+});

src/features/Main/UnauthorizedPage/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Container } from '@edx/paragon';
+
+import { unauthorizedText } from 'features/constants';
+
+const UnauthorizedPage = () => (
+  <Container className="px-0 container-pages">
+    <Container size="md" className="p-4 my-4 page-content-container text-center font-weight-bold">
+      <p>{unauthorizedText}</p>
+    </Container>
+  </Container>
+);
+
+export default UnauthorizedPage;

src/features/Main/index.jsx

@@ -29,6 +29,7 @@ import InstructorsDetailPage from 'features/Instructors/InstructorsDetailPage';
 import ActiveTabUpdater from 'features/Main//ActiveTabUpdater';
 import ManageInstructors from 'features/Instructors/ManageInstructors';
 import InstitutionSelector from 'features/Main/InstitutionSelector';
+import UnauthorizedPage from 'features/Main/UnauthorizedPage';
 
 import { fetchInstitutionData } from 'features/Main/data/thunks';
 import { updateSelectedInstitution } from 'features/Main/data/slice';
@@ -81,29 +82,34 @@ const Main = () => {
       <Header />
       <div className="pageWrapper">
         <main className="d-flex">
-          <Sidebar />
-          <Container className="px-0 container-pages">
-            <Container size="xl" className="px-4">
-              {institutions.length > 1 && (<InstitutionSelector />)}
-            </Container>
-            <Switch>
-              <Route exact path="/">
-                <Redirect to={addQueryParam('/dashboard')} />
-              </Route>
-              {routes.map(({ path, exact, component: Component }) => (
-                <Route
-                  key={path}
-                  path={path}
-                  exact={exact}
-                  render={() => (
-                    <ActiveTabUpdater path={path}>
-                      <Component />
-                    </ActiveTabUpdater>
-                  )}
-                />
-              ))}
-            </Switch>
-          </Container>
+          {institutions.length < 1 && <UnauthorizedPage />}
+          {institutions.length > 0 && (
+            <>
+              <Sidebar />
+              <Container className="px-0 container-pages">
+                <Container size="xl" className="px-4">
+                  {institutions.length > 1 && (<InstitutionSelector />)}
+                </Container>
+                <Switch>
+                  <Route exact path="/">
+                    <Redirect to={addQueryParam('/dashboard')} />
+                  </Route>
+                  {routes.map(({ path, exact, component: Component }) => (
+                    <Route
+                      key={path}
+                      path={path}
+                      exact={exact}
+                      render={() => (
+                        <ActiveTabUpdater path={path}>
+                          <Component />
+                        </ActiveTabUpdater>
+                      )}
+                    />
+                  ))}
+                </Switch>
+              </Container>
+            </>
+          )}
         </main>
         <Footer />
       </div>

src/features/constants.js

@@ -76,3 +76,9 @@ export const INSTITUTION_QUERY_ID = 'institutionId';
  * @constant {string}
  */
 export const cookieText = 'This website uses cookies to ensure you get the best experience on our website. If you continue browsing this site, we understand that you accept the use of cookies.';
+
+/**
+ * Text for unauthorized user.
+ * @constant {string}
+ */
+export const unauthorizedText = 'You do not have access to CertPREP Manager. If you believe you should have access then please contact your sales rep.';