integrated api for getting the policy document

dashboard/src/main/home/Home.tsx

@@ -34,6 +34,9 @@ import AccountSettingsModal from "./modals/AccountSettingsModal";
 const GuardedProjectSettings = fakeGuardedRoute("settings", "", [
   "get",
   "list",
+  "update",
+  "create",
+  "delete",
 ])(ProjectSettings);
 
 const GuardedIntegrations = fakeGuardedRoute("integrations", "", [

dashboard/src/main/home/navbar/Navbar.tsx

@@ -64,22 +64,6 @@ class Navbar extends Component<PropsType, StateType> {
   render() {
     return (
       <StyledNavbar>
-        <AuthContext.Consumer>
-          {(value) => (
-            <PolicySelector
-              value={this.state.currentPolicy}
-              onChange={(e) => {
-                value.setPolicy(e.target.value as any);
-                this.setState({ currentPolicy: e.target.value as string });
-              }}
-            >
-              <MenuItem value={"admin"}>Admin</MenuItem>
-              <MenuItem value={"dev"}>Dev</MenuItem>
-              <MenuItem value={"viewer"}>Viewer</MenuItem>
-            </PolicySelector>
-          )}
-        </AuthContext.Consumer>
-
         {this.renderFeedbackButton()}
         <NavButton
           selected={this.state.showDropdown}

dashboard/src/main/home/project-settings/ProjectSettings.tsx

@@ -7,31 +7,43 @@ import InvitePage from "./InviteList";
 import TabRegion from "components/TabRegion";
 import Heading from "components/values-form/Heading";
 import Helper from "components/values-form/Helper";
+import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
 
-type PropsType = {};
+type PropsType = WithAuthProps & {};
 
 type StateType = {
   projectName: string;
   currentTab: string;
+  tabOptions: { value: string; label: string }[];
 };
 
-const tabOptions = [
-  { value: "manage-access", label: "Manage Access" },
-  { value: "additional-settings", label: "Additional Settings" },
-];
-
-export default class ProjectSettings extends Component<PropsType, StateType> {
+class ProjectSettings extends Component<PropsType, StateType> {
   state = {
     projectName: "",
     currentTab: "manage-access",
+    tabOptions: [] as { value: string; label: string }[],
   };
 
   componentDidMount() {
     let { currentProject } = this.context;
     this.setState({ projectName: currentProject.name });
+    const tabOptions = [];
+    tabOptions.push({ value: "manage-access", label: "Manage Access" });
+    if (this.props.isAuthorized("settings", "", ["get", "delete"])) {
+      tabOptions.push({
+        value: "additional-settings",
+        label: "Additional Settings",
+      });
+    }
+
+    this.setState({ tabOptions });
   }
 
   renderTabContents = () => {
+    if (!this.props.isAuthorized("settings", "", ["get", "delete"])) {
+      return <InvitePage />;
+    }
+
     if (this.state.currentTab === "manage-access") {
       return <InvitePage />;
     } else {
@@ -85,7 +97,7 @@ export default class ProjectSettings extends Component<PropsType, StateType> {
         <TabRegion
           currentTab={this.state.currentTab}
           setCurrentTab={(x: string) => this.setState({ currentTab: x })}
-          options={tabOptions}
+          options={this.state.tabOptions}
         >
           {this.renderTabContents()}
         </TabRegion>
@@ -96,6 +108,8 @@ export default class ProjectSettings extends Component<PropsType, StateType> {
 
 ProjectSettings.contextType = Context;
 
+export default withAuth(ProjectSettings);
+
 const Warning = styled.div`
   font-size: 13px;
   color: ${(props: { highlight: boolean; makeFlush?: boolean }) =>

dashboard/src/shared/api.tsx

@@ -954,6 +954,11 @@ const removeCollaborator = baseApi<{}, { project_id: number; user_id: number }>(
   ({ project_id, user_id }) => `/api/projects/${project_id}/roles/${user_id}`
 );
 
+const getPolicyDocument = baseApi<{}, { project_id: number }>(
+  "GET",
+  ({ project_id }) => `/api/projects/${project_id}/policy`
+);
+
 // Bundle export to allow default api import (api.<method> is more readable)
 export default {
   checkAuth,
@@ -1052,4 +1057,5 @@ export default {
   getCollaborators,
   updateCollaborator,
   removeCollaborator,
+  getPolicyDocument,
 };

dashboard/src/shared/auth/AuthContext.tsx

@@ -1,83 +1,49 @@
 import React, { useContext, useEffect, useState } from "react";
+import api from "shared/api";
 import { Context } from "shared/Context";
-import {
-  VIEWER_POLICY_MOCK,
-  POLICY_HIERARCHY_TREE,
-  populatePolicy,
-  DEV_POLICY_MOCK,
-  ADMIN_POLICY_MOCK,
-} from "./authorization-helpers";
+import { POLICY_HIERARCHY_TREE, populatePolicy } from "./authorization-helpers";
 import { PolicyDocType } from "./types";
 
 type AuthContext = {
   currentPolicy: PolicyDocType;
-  setPolicy: (pol: "admin" | "dev" | "viewer") => void;
 };
 
 export const AuthContext = React.createContext<AuthContext>({} as AuthContext);
 
 const AuthProvider: React.FC = ({ children }) => {
-  const { user } = useContext(Context);
+  const { user, currentProject } = useContext(Context);
   const [currentPolicy, setCurrentPolicy] = useState(null);
 
-  // useEffect(() => {
-  //   if (!user) {
-  //     setCurrentPolicy(null);
-  //   } else {
-  //     // TODO: GET POLICY FROM ENDPOINT
-  //     setCurrentPolicy(
-  //       populatePolicy(
-  //         VIEWER_POLICY_MOCK,
-  //         POLICY_HIERARCHY_TREE,
-  //         VIEWER_POLICY_MOCK.scope,
-  //         VIEWER_POLICY_MOCK.verbs
-  //       )
-  //     );
-  //   }
-  // }, [user]);
-
   useEffect(() => {
-    setPolicy("admin");
-  }, []);
-
-  // This is just for test case, should be deleted before merged with master
-  const setPolicy = (pol: "admin" | "dev" | "viewer") => {
-    switch (pol) {
-      case "viewer":
-        setCurrentPolicy(
-          populatePolicy(
-            VIEWER_POLICY_MOCK,
-            POLICY_HIERARCHY_TREE,
-            VIEWER_POLICY_MOCK.scope,
-            VIEWER_POLICY_MOCK.verbs
-          )
-        );
-        break;
-      case "dev":
-        setCurrentPolicy(
-          populatePolicy(
-            DEV_POLICY_MOCK,
-            POLICY_HIERARCHY_TREE,
-            DEV_POLICY_MOCK.scope,
-            DEV_POLICY_MOCK.verbs
-          )
-        );
-        break;
-      default:
-        setCurrentPolicy(
-          populatePolicy(
-            ADMIN_POLICY_MOCK,
-            POLICY_HIERARCHY_TREE,
-            ADMIN_POLICY_MOCK.scope,
-            ADMIN_POLICY_MOCK.verbs
-          )
-        );
-        break;
+    let isSubscribed = true;
+    if (!user) {
+      setCurrentPolicy(null);
+    } else {
+      api
+        .getPolicyDocument("<token>", {}, { project_id: currentProject?.id })
+        .then((res) => {
+          if (!isSubscribed) {
+            return;
+          }
+          const currentPolicy = res.data[0];
+          console.log(currentPolicy);
+          setCurrentPolicy(
+            populatePolicy(
+              currentPolicy,
+              POLICY_HIERARCHY_TREE,
+              currentPolicy.scope,
+              currentPolicy.verbs
+            )
+          );
+        });
     }
-  };
+    return () => {
+      isSubscribed = false;
+    };
+  }, [user, currentProject?.id]);
 
   return (
-    <AuthContext.Provider value={{ currentPolicy, setPolicy }}>
+    <AuthContext.Provider value={{ currentPolicy }}>
       {children}
     </AuthContext.Provider>
   );

dashboard/src/shared/auth/RouteGuard.tsx

@@ -39,9 +39,12 @@ export const fakeGuardedRoute = <ComponentProps extends object>(
   resource: string,
   verb: Verbs | Array<Verbs>
 ) => (Component: any) => (props: ComponentProps) => {
-  const authContext = useContext(AuthContext);
+  const { currentPolicy } = useContext(AuthContext);
+  const auth = useMemo(() => {
+    return isAuthorized(currentPolicy, scope, resource, verb);
+  }, [currentPolicy, scope, resource, verb]);
 
-  if (isAuthorized(authContext.currentPolicy, scope, resource, verb)) {
+  if (auth) {
     return <Component {...props} />;
   }
 

dashboard/src/shared/auth/authorization-helpers.ts

@@ -98,7 +98,6 @@ export const populatePolicy = (
   parentVerbs: Array<Verbs>
 ) => {
   const currTree = tree[currScope];
-
   const treeKeys = Object.keys(currTree) as Array<ScopeType>;
 
   currPolicy.children = currPolicy?.children || {};