Added placeholder when user not authorized

dashboard/src/main/home/project-settings/roles-admin/RolesAdmin.tsx

@@ -1,5 +1,8 @@
+import Helper from "components/form-components/Helper";
+import Placeholder from "components/Placeholder";
 import React, { useContext, useEffect, useState } from "react";
 import { Context } from "shared/Context";
+import styled from "styled-components";
 import CreateRole from "./pages/CreateRole";
 import EditRole from "./pages/EditRole";
 import ListRoles from "./pages/ListRoles";
@@ -12,12 +15,30 @@ type AVAILABLE_PAGES_TYPE = typeof AVAILABLE_PAGES[number];
 export type Navigate = (page: AVAILABLE_PAGES_TYPE) => void;
 
 export const RolesAdmin = () => {
+  const { currentProject } = useContext(Context);
   const [page, setPage] = useState<AVAILABLE_PAGES_TYPE>("index");
 
   const navigate: Navigate = (page) => {
     setPage(page);
   };
 
+  if (!currentProject.advanced_rbac_enabled) {
+    return (
+      <Placeholder height="250px">
+        <PlaceHolderContent>
+          <h2>Advanced RBAC is not enabled for this project.</h2>
+          <Helper>
+            Please{" "}
+            <a target="_blank" href="mailto:contact@porter.run">
+              contact us
+            </a>{" "}
+            to view plans.
+          </Helper>
+        </PlaceHolderContent>
+      </Placeholder>
+    );
+  }
+
   return (
     <>
       <RolesAdminProvider>
@@ -28,3 +49,10 @@ export const RolesAdmin = () => {
     </>
   );
 };
+
+const PlaceHolderContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;