Merge pull request #1183 from Infisical/stv3-permissioning

Move ST sections to members page (now access control)
Infisical · Nov 18, 2023 · 9d2a08d · 9d2a08d
2 parents 085ddb2 + 87c2e41
commit 9d2a08d
Show file tree

Hide file tree

Showing 21 changed files with 1,622 additions and 84 deletions.
diff --git a/backend/src/models/serviceTokenDataV3.ts b/backend/src/models/serviceTokenDataV3.ts
@@ -100,7 +100,7 @@ const serviceTokenDataV3Schema = new Schema(
             default: 7200,
             required: true
         },
-        scopes: {
+        scopes: { // TODO: consider switching this out for roles instead
             type: [
                 {
                     environment: {

diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -505,7 +505,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                             }
                             icon="system-outline-96-groups"
                           >
-                            {t("nav.menu.members")}
+                            Access Control
                           </MenuItem>
                         </a>
                       </Link>
@@ -548,19 +548,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
                           </MenuItem>
                         </a>
                       </Link>
-
-                      {/* <Link href={`/project/${currentWorkspace?._id}/allowlist`} passHref>
-                        <a>
-                          <MenuItem
-                            isSelected={
-                              router.asPath === `/project/${currentWorkspace?._id}/allowlist`
-                            }
-                            icon="system-outline-126-verified"
-                          >
-                            IP Allowlist
-                          </MenuItem>
-                        </a>
-                      </Link> */}
                       <Link href={`/project/${currentWorkspace?._id}/audit-logs`} passHref>
                         <a>
                           <MenuItem

diff --git a/frontend/src/views/Project/MembersPage/MembersPage.tsx b/frontend/src/views/Project/MembersPage/MembersPage.tsx
@@ -1,42 +1,32 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { useTranslation } from "react-i18next";
 import { motion } from "framer-motion";
 
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
-import { useGetRoles } from "@app/hooks/api";
-import { TRole } from "@app/hooks/api/roles/types";
 
 import { MemberListTab } from "./components/MemberListTab";
 import { ProjectRoleListTab } from "./components/ProjectRoleListTab";
+import { ServiceTokenTab } from "./components/ServiceTokenTab";
 
 enum TabSections {
   Member = "members",
-  Roles = "roles"
+  Roles = "roles",
+  ServiceTokens = "service-tokens"
 }
 
 export const MembersPage = withProjectPermission(
   () => {
-    const { t } = useTranslation();
-    const { currentWorkspace } = useWorkspace();
-    const workspaceId = currentWorkspace?._id || "";
-    const orgId = currentWorkspace?.organization || "";
-
-    const { data: roles, isLoading: isRolesLoading } = useGetRoles({
-      orgId,
-      workspaceId
-    });
-
     return (
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mb-6 w-full py-6 px-6 max-w-7xl mx-auto">
           <p className="mr-4 mb-4 text-3xl font-semibold text-white">
-            {t("settings.members.title")}
+            Access Control
           </p>
           <Tabs defaultValue={TabSections.Member}>
             <TabList>
               <Tab value={TabSections.Member}>Members</Tab>
+              <Tab value={TabSections.ServiceTokens}>Service Tokens</Tab>
               <Tab value={TabSections.Roles}>Roles</Tab>
             </TabList>
             <TabPanel value={TabSections.Member}>
@@ -47,14 +37,14 @@ export const MembersPage = withProjectPermission(
                 animate={{ opacity: 1, translateX: 0 }}
                 exit={{ opacity: 0, translateX: 30 }}
               >
-                <MemberListTab roles={roles as TRole<string>[]} isRolesLoading={isRolesLoading} />
+                <MemberListTab />
               </motion.div>
             </TabPanel>
+            <TabPanel value={TabSections.ServiceTokens}>
+              <ServiceTokenTab />
+            </TabPanel>
             <TabPanel value={TabSections.Roles}>
-              <ProjectRoleListTab
-                roles={roles as TRole<string>[]}
-                isRolesLoading={isRolesLoading}
-              />
+              <ProjectRoleListTab />
             </TabPanel>
           </Tabs>
         </div>

diff --git a/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx b/frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx
@@ -46,25 +46,19 @@ import {
   useAddUserToWs,
   useDeleteUserFromWorkspace,
   useGetOrgUsers,
+  useGetRoles,
   useGetUserWsKey,
   useGetWorkspaceUsers,
   useUpdateUserWorkspaceRole,
-  useUploadWsKey
-} from "@app/hooks/api";
-import { TRole } from "@app/hooks/api/roles/types";
-
-type Props = {
-  roles?: TRole<string>[];
-  isRolesLoading?: boolean;
-};
+  useUploadWsKey} from "@app/hooks/api";
 
 const addMemberFormSchema = z.object({
   orgMembershipId: z.string().trim()
 });
 
 type TAddMemberForm = z.infer<typeof addMemberFormSchema>;
 
-export const MemberListTab = ({ roles = [], isRolesLoading }: Props) => {
+export const MemberListTab = () => {
   const { createNotification } = useNotificationContext();
   const { t } = useTranslation();
 
@@ -76,6 +70,10 @@ export const MemberListTab = ({ roles = [], isRolesLoading }: Props) => {
   const orgId = currentOrg?._id || "";
   const workspaceId = currentWorkspace?._id || "";
 
+  const { data: roles, isLoading: isRolesLoading } = useGetRoles({
+    orgId,
+    workspaceId
+  });
   const { data: wsKey } = useGetUserWsKey(workspaceId);
   const { data: members, isLoading: isMembersLoading } = useGetWorkspaceUsers(workspaceId);
   const { data: orgUsers } = useGetOrgUsers(orgId);
@@ -162,7 +160,7 @@ export const MemberListTab = ({ roles = [], isRolesLoading }: Props) => {
 
   const findRoleFromId = useCallback(
     (roleId: string) => {
-      return roles.find(({ _id: id }) => id === roleId);
+      return (roles || []).find(({ _id: id }) => id === roleId);
     },
     [roles]
   );
@@ -307,7 +305,7 @@ export const MemberListTab = ({ roles = [], isRolesLoading }: Props) => {
                                     onRoleChange(membershipId, selectedRole)
                                   }
                                 >
-                                  {roles
+                                  {(roles || [])
                                     .filter(({ slug }) =>
                                       slug === "owner" ? isIamOwner || role === "owner" : true
                                     )

diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/ProjectRoleListTab.tsx b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/ProjectRoleListTab.tsx
@@ -8,13 +8,8 @@ import { TRole } from "@app/hooks/api/roles/types";
 import { ProjectRoleList } from "./components/ProjectRoleList";
 import { ProjectRoleModifySection } from "./components/ProjectRoleModifySection";
 
-type Props = {
-  roles?: TRole<string>[];
-  isRolesLoading?: boolean;
-};
-
 export const ProjectRoleListTab = withProjectPermission(
-  ({ roles = [], isRolesLoading }: Props) => {
+  () => {
     const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["editRole"] as const);
 
     return popUp.editRole.isOpen ? (
@@ -38,11 +33,7 @@ export const ProjectRoleListTab = withProjectPermission(
         animate={{ opacity: 1, translateX: 0 }}
         exit={{ opacity: 0, translateX: -30 }}
       >
-        <ProjectRoleList
-          roles={roles}
-          isRolesLoading={isRolesLoading}
-          onSelectRole={(role) => handlePopUpOpen("editRole", role)}
-        />
+        <ProjectRoleList onSelectRole={(role) => handlePopUpOpen("editRole", role)} />
       </motion.div>
     );
   },

diff --git a/.../MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx b/.../MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
@@ -25,24 +25,26 @@ import {
   useWorkspace
 } from "@app/context";
 import { usePopUp } from "@app/hooks";
-import { useDeleteRole } from "@app/hooks/api";
+import { useDeleteRole, useGetRoles } from "@app/hooks/api";
 import { TRole } from "@app/hooks/api/roles/types";
 
 type Props = {
-  isRolesLoading?: boolean;
-  roles?: TRole<string>[];
   onSelectRole: (role?: TRole<string>) => void;
 };
 
-export const ProjectRoleList = ({ isRolesLoading, roles = [], onSelectRole }: Props) => {
+export const ProjectRoleList = ({ onSelectRole }: Props) => {
   const [searchRoles, setSearchRoles] = useState("");
+  const { createNotification } = useNotificationContext();
+  const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
   const { currentOrg } = useOrganization();
   const { currentWorkspace } = useWorkspace();
   const orgId = currentOrg?._id || "";
   const workspaceId = currentWorkspace?._id || "";
-
-  const { createNotification } = useNotificationContext();
-  const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
+
+  const { data: roles, isLoading: isRolesLoading } = useGetRoles({
+    orgId,
+    workspaceId
+  });
 
   const { mutateAsync: deleteRole } = useDeleteRole();
 
@@ -62,6 +64,8 @@ export const ProjectRoleList = ({ isRolesLoading, roles = [], onSelectRole }: Pr
     }
   };
 
+  // roles={roles as TRole<string>[]}
+
   return (
     <div className="w-full">
       <div className="mb-4 flex">
@@ -97,7 +101,7 @@ export const ProjectRoleList = ({ isRolesLoading, roles = [], onSelectRole }: Pr
             </THead>
             <TBody>
               {isRolesLoading && <TableSkeleton columns={4} innerKey="org-roles" />}
-              {roles?.map((role) => {
+              {(roles as TRole<string>[])?.map((role) => {
                 const { _id: id, name, slug } = role;
                 const isNonMutatable = ["admin", "member", "viewer"].includes(slug);
 

diff --git a/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/ServiceTokenTab.tsx b/frontend/src/views/Project/MembersPage/components/ServiceTokenTab/ServiceTokenTab.tsx
@@ -0,0 +1,21 @@
+import { motion } from "framer-motion";
+
+import { 
+    ServiceTokenSection, 
+    // ServiceTokenV3Section 
+} from "./components";
+
+export const ServiceTokenTab = () => {
+    return (
+        <motion.div
+            key="panel-service-token"
+            transition={{ duration: 0.15 }}
+            initial={{ opacity: 0, translateX: 30 }}
+            animate={{ opacity: 1, translateX: 0 }}
+            exit={{ opacity: 0, translateX: 30 }}
+        >
+            {/* <ServiceTokenV3Section /> */}
+            <ServiceTokenSection />
+        </motion.div>
+    );
+}