Move ST sections to members page (now access control)

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>