From 1dabc83a8a0f2b9079fe2c94d2799bd00ce848ee Mon Sep 17 00:00:00 2001
From: Boli Guan <ifendoe@gmail.com>
Date: Thu, 15 Dec 2022 14:15:16 +0800
Subject: [PATCH] Disable auth if Feathr is deployed with RBAC set to off

Signed-off-by: Boli Guan <ifendoe@gmail.com>
---
 ui/src/app.tsx                        | 96 +++++++++++++--------------
 ui/src/components/AzureMsal/index.tsx | 28 ++++++++
 2 files changed, 74 insertions(+), 50 deletions(-)
 create mode 100644 ui/src/components/AzureMsal/index.tsx

diff --git a/ui/src/app.tsx b/ui/src/app.tsx
index b3d2b317a..20b219a7b 100644
--- a/ui/src/app.tsx
+++ b/ui/src/app.tsx
@@ -2,8 +2,6 @@ import React from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { Layout } from "antd";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { InteractionType } from "@azure/msal-browser";
-import { MsalAuthenticationTemplate, MsalProvider } from "@azure/msal-react";
 import Header from "./components/header/header";
 import SideMenu from "./components/sidemenu/siteMenu";
 import Features from "./pages/feature/features";
@@ -19,61 +17,59 @@ import ResponseErrors from "./pages/responseErrors/responseErrors";
 import RoleManagement from "./pages/management/roleManagement";
 import Home from "./pages/home/home";
 import Projects from "./pages/project/projects";
-import { getMsalConfig } from "./utils/utils";
+
+import AzureMsal from "./components/AzureMsal";
 
 const queryClient = new QueryClient();
 
-const msalClient = getMsalConfig();
+const enableRBAC = window.environment?.enableRBAC;
+const authEnable: boolean =
+  (enableRBAC ? enableRBAC : process.env.REACT_APP_ENABLE_RBAC) === "true";
 
 const App = () => {
   return (
-    <MsalProvider instance={msalClient}>
-      <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
-        <QueryClientProvider client={queryClient}>
-          <BrowserRouter>
-            <Layout style={{ minHeight: "100vh", position: "relative" }}>
-              <SideMenu />
-              <Layout style={{ position: "relative" }}>
-                <Header />
-                <Layout.Content>
-                  <Routes>
-                    <Route index element={<Home />} />
-                    <Route path="/home" element={<Home />} />
-                    <Route path="/projects" element={<Projects />} />
-                    <Route path="/dataSources" element={<DataSources />} />
-                    <Route path="/features" element={<Features />} />
-                    <Route path="/new-feature" element={<NewFeature />} />
-                    <Route
-                      path="/projects/:project/features/:featureId"
-                      element={<FeatureDetails />}
-                    />
-                    <Route
-                      path="/projects/:project/dataSources/:dataSourceId"
-                      element={<DataSourceDetails />}
-                    />
-                    <Route
-                      path="/projects/:project/lineage"
-                      element={<LineageGraph />}
-                    />
-                    <Route path="/jobs" element={<Jobs />} />
-                    <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.Content>
-              </Layout>
+    <AzureMsal enable={authEnable}>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <Layout style={{ minHeight: "100vh", position: "relative" }}>
+            <SideMenu />
+            <Layout style={{ position: "relative" }}>
+              <Header />
+              <Layout.Content>
+                <Routes>
+                  <Route index element={<Home />} />
+                  <Route path="/home" element={<Home />} />
+                  <Route path="/projects" element={<Projects />} />
+                  <Route path="/dataSources" element={<DataSources />} />
+                  <Route path="/features" element={<Features />} />
+                  <Route path="/new-feature" element={<NewFeature />} />
+                  <Route
+                    path="/projects/:project/features/:featureId"
+                    element={<FeatureDetails />}
+                  />
+                  <Route
+                    path="/projects/:project/dataSources/:dataSourceId"
+                    element={<DataSourceDetails />}
+                  />
+                  <Route
+                    path="/projects/:project/lineage"
+                    element={<LineageGraph />}
+                  />
+                  <Route path="/jobs" element={<Jobs />} />
+                  <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.Content>
             </Layout>
-          </BrowserRouter>
-        </QueryClientProvider>
-      </MsalAuthenticationTemplate>
-    </MsalProvider>
+          </Layout>
+        </BrowserRouter>
+      </QueryClientProvider>
+    </AzureMsal>
   );
 };
 
diff --git a/ui/src/components/AzureMsal/index.tsx b/ui/src/components/AzureMsal/index.tsx
new file mode 100644
index 000000000..40ca6c4d5
--- /dev/null
+++ b/ui/src/components/AzureMsal/index.tsx
@@ -0,0 +1,28 @@
+import React, { ReactNode } from "react";
+
+import { InteractionType } from "@azure/msal-browser";
+import { MsalAuthenticationTemplate, MsalProvider } from "@azure/msal-react";
+
+import { getMsalConfig } from "@/utils/utils";
+
+const msalInstance = getMsalConfig();
+
+export interface AzureMsalProps {
+  children?: ReactNode;
+  enable?: boolean;
+}
+
+const AzureMsal = (props: AzureMsalProps) => {
+  const { children, enable } = props;
+  return enable ? (
+    <MsalProvider instance={msalInstance}>
+      <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
+        {children}
+      </MsalAuthenticationTemplate>
+    </MsalProvider>
+  ) : (
+    <>{children}</>
+  );
+};
+
+export default AzureMsal;