MIGENG-324: MA - Prototype RBAC / Add 403 Error Page

src/Routes.js

@@ -31,14 +31,17 @@ const ReportView = asyncComponent(() =>
     import(/* webpackChunkName: "ReportView" */ './pages/ReportView'));
 const ErrorPage = asyncComponent(() =>
     import(/* webpackChunkName: "ErrorPage" */ './pages/ErrorPage'));
+const ErrorPage403 = asyncComponent(() =>
+    import(/* webpackChunkName: "ErrorPage403" */ './pages/ErrorPage403'));
 
 const paths = {
     gettingStarted: '/getting-started',
     reports: '/reports',
     noReports: '/no-reports',
     reportsUpload: '/reports/upload',
     reportView: '/reports/:reportId',
-    error: '/error'
+    error: '/error',
+    error403: '/error403'
 };
 
 type Props = {
@@ -83,6 +86,7 @@ export const Routes = (props: Props) => {
             <InsightsRoute component={ ReportsUpload } rootClass='reports-upload' path={ paths.reportsUpload } />
             <InsightsRoute component={ ReportView } rootClass='report-view' path={ paths.reportView } />
             <InsightsRoute component={ ErrorPage } rootClass='error' path={ paths.error } skipLoadUser={ true }/>
+            <InsightsRoute component={ ErrorPage403 } rootClass='error403' path={ paths.error403 } skipLoadUser={ true }/>
 
             { /* Finally, catch all unmatched routes */ }
             <Route render={ () => some(paths, p => p === path) ? null : (<Redirect to={ paths.gettingStarted }/>) }/>

src/api/apiInit.tsx

@@ -1,4 +1,5 @@
-import axios, { AxiosRequestConfig } from 'axios';
+import axios, { AxiosRequestConfig, AxiosError } from 'axios';
+import getBaseName from '../Utilities/getBaseName';
 
 export const API_BASE_URL = '/api/xavier';
 declare var insights: any;
@@ -12,4 +13,11 @@ export const authInterceptor = (reqConfig: AxiosRequestConfig): AxiosRequestConf
 export const initApi = () => {
     axios.defaults.baseURL = `${API_BASE_URL}`;
     axios.interceptors.request.use(authInterceptor);
+
+    axios.interceptors.response.use(undefined, (error: AxiosError) => {
+        if (error && error.response && (error.response.status === 403)) {
+            window.location.href = getBaseName(window.location.pathname) + '/error403';
+        }
+        return Promise.reject(error);
+    });
 };

src/pages/ErrorPage403/ErrorPage.test.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { shallow } from "enzyme";
+import ErrorPage from "./ErrorPage403";
+
+describe("ErrorPage403", () => {
+
+  it("expect to render", () => {
+    const wrapper = shallow(
+      <ErrorPage />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+});

src/pages/ErrorPage403/ErrorPage403.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Main, PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components';
+import {
+    Bullseye,
+    EmptyState,
+    EmptyStateVariant,
+    EmptyStateIcon,
+    Title,
+    TitleLevel,
+    EmptyStateBody
+} from '@patternfly/react-core';
+import { PrivateIcon } from '@patternfly/react-icons';
+import { Link } from 'react-router-dom';
+
+interface StateToProps {}
+
+interface DispatchToProps {}
+
+interface Props extends StateToProps, DispatchToProps {}
+
+interface State {}
+
+class ErrorPage403 extends React.Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+    }
+
+    public render() {
+        return (
+            <React.Fragment>
+                <PageHeader>
+                    <PageHeaderTitle title={'Error: 403 Forbidden'} />
+                </PageHeader>
+                <Main>
+                    <Bullseye>
+                        <EmptyState variant={EmptyStateVariant.large}>
+                            <EmptyStateIcon icon={PrivateIcon} />
+                            <Title headingLevel={TitleLevel.h5} size="lg">
+                                Error: 403 Forbidden
+                            </Title>
+                            <EmptyStateBody>You tried to access a forbidden resource!.</EmptyStateBody>
+                            <Link to={'/'} className="pf-c-button pf-m-primary" target="_self">
+                                Home
+                            </Link>
+                        </EmptyState>
+                    </Bullseye>
+                </Main>
+            </React.Fragment>
+        );
+    }
+}
+
+export default ErrorPage403;

src/pages/ErrorPage403/__snapshots__/ErrorPage.test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ErrorPage403 expect to render 1`] = `
+<Fragment>
+  <PageHeader>
+    <PageHeaderTitle
+      title="Error: 403 Forbidden"
+    />
+  </PageHeader>
+  <Connect(Main)>
+    <Bullseye>
+      <EmptyState
+        variant="large"
+      >
+        <EmptyStateIcon
+          icon={[Function]}
+        />
+        <Title
+          headingLevel="h5"
+          size="lg"
+        >
+          Error: 403 Forbidden
+        </Title>
+        <EmptyStateBody>
+          You tried to access a forbidden resource!.
+        </EmptyStateBody>
+        <Link
+          className="pf-c-button pf-m-primary"
+          replace={false}
+          target="_self"
+          to="/"
+        >
+          Home
+        </Link>
+      </EmptyState>
+    </Bullseye>
+  </Connect(Main)>
+</Fragment>
+`;

src/pages/ErrorPage403/index.tsx

@@ -0,0 +1,3 @@
+import ErrorPage403 from './ErrorPage403';
+
+export default ErrorPage403;