handle http response 403 forbiden error (#522)

- Add interceptors for 'Axios' to handle error responses 403 automatically
- Navigate to error page with message details when receiving 403 forbidden response

ui/src/api/api.tsx

@@ -212,11 +212,25 @@ export const getIdToken = async (
 
 export const authAxios = async (msalInstance: PublicClientApplication) => {
   const token = await getIdToken(msalInstance);
-  return Axios.create({
+  const axios = Axios.create({
     headers: {
       Authorization: "Bearer " + token,
       "Content-Type": "application/json",
     },
     baseURL: getApiBaseUrl(),
   });
+
+  axios.interceptors.response.use(
+    (response) => {
+      return response;
+    },
+    (error) => {
+      if (error.response?.status === 403) {
+        const detail = error.response.data.detail;
+        window.location.href = "/responseErrors/403/" + detail;
+      }
+      //TODO: handle other response errors
+    }
+  );
+  return axios;
 };

ui/src/app.tsx

@@ -14,6 +14,7 @@ import Jobs from "./pages/jobs/jobs";
 import Monitoring from "./pages/monitoring/monitoring";
 import LineageGraph from "./pages/feature/lineageGraph";
 import Management from "./pages/management/management";
+import ResponseErrors from "./pages/responseErrors/responseErrors";
 import RoleManagement from "./pages/management/roleManagement";
 import { getMsalConfig } from "./utils/utils";
 
@@ -46,6 +47,10 @@ const App: React.FC = () => {
                   <Route path="/monitoring" element={<Monitoring />} />
                   <Route path="/management" element={<Management />} />
                   <Route path="/role-management" element={<RoleManagement />} />
+                  <Route
+                    path="/responseErrors/:status/:detail"
+                    element={<ResponseErrors />}
+                  />
                 </Routes>
               </Layout>
             </Layout>

ui/src/pages/responseErrors/responseErrors.tsx

@@ -0,0 +1,31 @@
+import { Card, Typography } from "antd";
+import { useParams } from "react-router-dom";
+
+const { Title } = Typography;
+
+const ResponseErrors: React.FC = () => {
+  const { status, detail } = useParams();
+  switch (status) {
+    case "403":
+      return (
+        <div className="page">
+          <Card style={{ minWidth: "1000px" }}>
+            <Title level={3}> ERROR 403</Title>
+            ACCESS NOT GRANTED
+            <Card>{detail}</Card>
+          </Card>
+        </div>
+      );
+
+    default:
+      return (
+        <div className="page">
+          <Card style={{ minWidth: "1000px" }}>
+            <Title level={3}>Unknown Error</Title>
+          </Card>
+        </div>
+      );
+  }
+};
+
+export default ResponseErrors;