feat: completed org admin based project access feature

frontend/src/components/v2/Pagination/Pagination.tsx

@@ -50,7 +50,7 @@ export const Pagination = ({
     >
       <div className="mr-6 flex items-center space-x-2">
         <div className="text-xs">
-          {(page - 1) * perPage} - {(page - 1) * perPage + perPage} of {count}
+          {(page - 1) * perPage} - {Math.min((page - 1) * perPage + perPage, count)} of {count}
         </div>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>

frontend/src/hooks/api/auditLogs/constants.tsx

@@ -56,7 +56,8 @@ export const eventToNameMap: { [K in EventType]: string } = {
   [EventType.GET_CERT]: "Get certificate",
   [EventType.DELETE_CERT]: "Delete certificate",
   [EventType.REVOKE_CERT]: "Revoke certificate",
-  [EventType.GET_CERT_BODY]: "Get certificate body"
+  [EventType.GET_CERT_BODY]: "Get certificate body",
+  [EventType.ORG_ADMIN_ACCESS_PROJECT]: "Org admin accessed project"
 };
 
 export const userAgentTTypeoNameMap: { [K in UserAgentType]: string } = {

frontend/src/hooks/api/auditLogs/enums.tsx

@@ -70,5 +70,6 @@ export enum EventType {
   GET_CERT = "get-cert",
   DELETE_CERT = "delete-cert",
   REVOKE_CERT = "revoke-cert",
-  GET_CERT_BODY = "get-cert-body"
+  GET_CERT_BODY = "get-cert-body",
+  ORG_ADMIN_ACCESS_PROJECT = "org-admin-accessed-project"
 }

frontend/src/hooks/api/auditLogs/types.tsx

@@ -579,6 +579,16 @@ interface GetCertBody {
   };
 }
 
+interface OrgAdminAccessProjectEvent {
+  type: EventType.ORG_ADMIN_ACCESS_PROJECT;
+  metadata: {
+    userId: string;
+    username: string;
+    email: string;
+    projectId: string;
+  }; // no metadata yet
+}
+
 export type Event =
   | GetSecretsEvent
   | GetSecretEvent
@@ -635,7 +645,8 @@ export type Event =
   | GetCert
   | DeleteCert
   | RevokeCert
-  | GetCertBody;
+  | GetCertBody
+  | OrgAdminAccessProjectEvent;
 
 export type AuditLog = {
   id: string;

frontend/src/hooks/api/index.tsx

@@ -19,6 +19,7 @@ export * from "./keys";
 export * from "./kms";
 export * from "./ldapConfig";
 export * from "./oidcConfig";
+export * from "./orgAdmin";
 export * from "./organization";
 export * from "./projectUserAdditionalPrivilege";
 export * from "./rateLimit";

frontend/src/hooks/api/orgAdmin/index.tsx

@@ -0,0 +1,2 @@
+export { useOrgAdminAccessProject } from "./mutation";
+export { useOrgAdminGetProjects } from "./queries";

frontend/src/hooks/api/orgAdmin/mutation.tsx

@@ -0,0 +1,13 @@
+import { useMutation } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TOrgAdminAccessProjectDTO } from "./types";
+
+export const useOrgAdminAccessProject = () =>
+  useMutation({
+    mutationFn: async ({ projectId }: TOrgAdminAccessProjectDTO) => {
+      const { data } = await apiRequest.post(`/api/v1/org-admin/projects/${projectId}/access`);
+      return data;
+    }
+  });

frontend/src/hooks/api/orgAdmin/queries.tsx

@@ -0,0 +1,30 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { Workspace } from "../types";
+import { TOrgAdminGetProjectsDTO } from "./types";
+
+export const orgAdminQueryKeys = {
+  getProjects: (filter: TOrgAdminGetProjectsDTO) => ["org-admin-projects", filter] as const
+};
+
+export const useOrgAdminGetProjects = ({ search, offset, limit = 50 }: TOrgAdminGetProjectsDTO) => {
+  return useQuery({
+    queryKey: orgAdminQueryKeys.getProjects({ search, offset, limit }),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ projects: Workspace[]; count: number }>(
+        "/api/v1/org-admin/projects",
+        {
+          params: {
+            limit,
+            offset,
+            search
+          }
+        }
+      );
+
+      return data;
+    }
+  });
+};

frontend/src/hooks/api/orgAdmin/types.ts

@@ -0,0 +1,9 @@
+export type TOrgAdminGetProjectsDTO = {
+  limit?: number;
+  offset?: number;
+  search?: string;
+};
+
+export type TOrgAdminAccessProjectDTO = {
+  projectId: string;
+};

frontend/src/hooks/api/workspace/queries.tsx

@@ -317,6 +317,7 @@ export const useDeleteWorkspace = () => {
     },
     onSuccess: () => {
       queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+      queryClient.invalidateQueries(["org-admin-projects"]);
     }
   });
 };

frontend/src/hooks/api/workspace/types.ts

@@ -21,6 +21,7 @@ export type Workspace = {
   pitVersionLimit: number;
   auditLogsRetentionDays: number;
   slug: string;
+  createdAt: string;
 };
 
 export type WorkspaceEnv = {

frontend/src/hooks/usePopUp.tsx

@@ -13,7 +13,7 @@ interface UsePopUpProps {
 export type UsePopUpState<T extends Readonly<string[]> | UsePopUpProps[]> = {
   [P in T extends UsePopUpProps[] ? T[number]["name"] : T[number]]: {
     isOpen: boolean;
-    data?: unknown;
+    data?: any;
   };
 };
 

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -59,6 +59,7 @@ import {
   OrgPermissionActions,
   OrgPermissionSubjects,
   useOrganization,
+  useOrgPermission,
   useSubscription,
   useUser,
   useWorkspace
@@ -131,6 +132,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
 
   const { workspaces, currentWorkspace } = useWorkspace();
   const { orgs, currentOrg } = useOrganization();
+  const { membership } = useOrgPermission();
+  const isOrgAdmin = membership?.role === "admin";
 
   const { data: projectFavorites } = useGetUserProjectFavorites(currentOrg?.id!);
   const { mutateAsync: updateUserProjectFavorites } = useUpdateUserProjectFavorites();
@@ -748,6 +751,18 @@ export const AppLayout = ({ children }: LayoutProps) => {
                           </a>
                         </Link>
                       )}
+                      {isOrgAdmin && (
+                        <Link href={`/org/${currentOrg?.id}/admin`} passHref>
+                          <a>
+                            <MenuItem
+                              isSelected={router.asPath === `/org/${currentOrg?.id}/admin`}
+                              icon="system-outline-109-slider-toggle-settings"
+                            >
+                              Admin
+                            </MenuItem>
+                          </a>
+                        </Link>
+                      )}
                       <Link href={`/org/${currentOrg?.id}/settings`} passHref>
                         <a>
                           <MenuItem

frontend/src/pages/org/[id]/admin/index.tsx

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+
+import { OrgAdminPage } from "@app/views/OrgAdminPage";
+
+export default function SettingsOrg() {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Head>
+        <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <OrgAdminPage />
+    </>
+  );
+}
+
+SettingsOrg.requireAuth = true;

frontend/src/views/OrgAdminPage/OrgAdminPage.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+
+import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+
+import { OrgAdminProjects } from "./components/OrgAdminProjects";
+
+enum TabSections {
+  Projects = "projects"
+}
+
+export const OrgAdminPage = () => {
+  const [activeTab, setActiveTab] = useState<TabSections>(TabSections.Projects);
+  return (
+    <div className="flex w-full justify-center bg-bunker-800 py-6 text-white">
+      <div className="w-full max-w-6xl px-6">
+        <div className="mb-4">
+          <p className="text-3xl font-semibold text-gray-200">Admin Panel</p>
+        </div>
+        <Tabs value={activeTab} onValueChange={(el) => setActiveTab(el as TabSections)}>
+          <TabList>
+            <Tab value={TabSections.Projects}>Projects</Tab>
+          </TabList>
+          <TabPanel value={TabSections.Projects}>
+            <OrgAdminProjects />
+          </TabPanel>
+        </Tabs>
+      </div>
+    </div>
+  );
+};

frontend/src/views/OrgAdminPage/components/OrgAdminProjects/OrgAdminProjects.tsx

@@ -0,0 +1,155 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { faEllipsis, faMagnifyingGlass, faSignIn } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+import { motion } from "framer-motion";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Input,
+  Pagination,
+  Spinner,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr} from "@app/components/v2";
+import { useDebounce } from "@app/hooks";
+import { useOrgAdminAccessProject, useOrgAdminGetProjects } from "@app/hooks/api";
+
+export const OrgAdminProjects = () => {
+  const [page, setPage] = useState(1);
+  const [search, setSearch] = useState("");
+  const debouncedSearch = useDebounce(search);
+  const [perPage, setPerPage] = useState(25);
+  const router = useRouter();
+  const orgAdminAccessProject = useOrgAdminAccessProject();
+
+  const { data, isLoading: isProjectsLoading } = useOrgAdminGetProjects({
+    offset: (page - 1) * perPage,
+    limit: perPage,
+    search: debouncedSearch || undefined
+  });
+
+  const projects = data?.projects || [];
+  const projectCount = data?.count || 0;
+  const isEmpty = !isProjectsLoading && projects.length === 0;
+
+  const handleAccessProject = async (projectId: string) => {
+    try {
+      await orgAdminAccessProject.mutateAsync({
+        projectId
+      });
+      await router.push({
+        pathname: "/project/[projectId]/secrets/overview",
+        query: {
+          projectId
+        }
+      });
+    } catch {
+      createNotification({
+        text: "Failed to access project",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <motion.div
+      key="panel-projects"
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
+      animate={{ opacity: 1, translateX: 0 }}
+      exit={{ opacity: 0, translateX: 30 }}
+    >
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="mb-4 flex justify-between">
+          <p className="text-xl font-semibold text-mineshaft-100">Projects</p>
+        </div>
+        <div>
+          <Input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+            placeholder="Search by project name"
+          />
+          <TableContainer className="mt-4">
+            <Table>
+              <THead>
+                <Tr>
+                  <Th>Name</Th>
+                  <Th>Slug</Th>
+                  <Th>Created At</Th>
+                  <Th className="w-5" />
+                </Tr>
+              </THead>
+              <TBody>
+                {isProjectsLoading && <TableSkeleton columns={4} innerKey="projects" />}
+                {!isProjectsLoading &&
+                  projects?.map(({ name, slug, createdAt, id }) => (
+                    <Tr key={`project-${id}`} className="group w-full">
+                      <Td>{name}</Td>
+                      <Td>{slug}</Td>
+                      <Td>{format(new Date(createdAt), "yyyy-MM-dd, hh:mm aaa")}</Td>
+                      <Td>
+                        <div>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild className="rounded-lg">
+                              <Button
+                                variant="link"
+                                className="text-bunker-300 hover:text-primary-400 data-[state=open]:text-primary-400"
+                              >
+                                <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="start" className="p-1">
+                              <DropdownMenuItem
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  e.preventDefault();
+                                  handleAccessProject(id);
+                                }}
+                                icon={<FontAwesomeIcon icon={faSignIn} />}
+                                disabled={
+                                  orgAdminAccessProject.variables?.projectId === id &&
+                                  orgAdminAccessProject.isLoading
+                                }
+                              >
+                                Access{" "}
+                                {orgAdminAccessProject.variables?.projectId === id &&
+                                  orgAdminAccessProject.isLoading && <Spinner size="xs" />}
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
+                      </Td>
+                    </Tr>
+                  ))}
+              </TBody>
+            </Table>
+            {!isProjectsLoading && (
+              <Pagination
+                count={projectCount}
+                page={page}
+                perPage={perPage}
+                onChangePage={(newPage) => setPage(newPage)}
+                onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+              />
+            )}
+            {isEmpty && <EmptyState title="No projects found" />}
+          </TableContainer>
+        </div>
+      </div>
+    </motion.div>
+  );
+};

frontend/src/views/OrgAdminPage/components/OrgAdminProjects/index.tsx

@@ -0,0 +1 @@
+export { OrgAdminProjects } from "./OrgAdminProjects";

frontend/src/views/OrgAdminPage/index.tsx

@@ -0,0 +1 @@
+export { OrgAdminPage } from "./OrgAdminPage";

frontend/src/views/Project/AuditLogsPage/components/LogsTableRow.tsx

@@ -317,6 +317,12 @@ export const LogsTableRow = ({ auditLog }: Props) => {
             })}
           </Td>
         );
+      case EventType.ORG_ADMIN_ACCESS_PROJECT:
+        return (
+          <Td>
+            <p>{`Email: ${event.metadata.email}`}</p>
+          </Td>
+        );
       case EventType.CREATE_CA:
       case EventType.GET_CA:
       case EventType.UPDATE_CA: