feat: added project settings and access management

frontend/src/layouts/ProjectGeneralLayout/ProjectGeneralLayout.tsx

@@ -1,137 +1,54 @@
-import { useTranslation } from "react-i18next";
-import { faMobile } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, Outlet } from "@tanstack/react-router";
 import { motion } from "framer-motion";
 
-import { Badge, Menu, MenuItem } from "@app/components/v2";
+import { Menu, MenuItem } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
-import {
-  useGetAccessRequestsCount,
-  useGetSecretApprovalRequestCount,
-  useGetSecretRotations
-} from "@app/hooks/api";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
-// This is a generic layout shared by all types of projects.
-// If the product layout differs significantly, create a new layout as needed.
 export const ProjectGeneralLayout = () => {
   const { currentWorkspace } = useWorkspace();
 
-  const { t } = useTranslation();
-  const workspaceId = currentWorkspace?.id || "";
-  const projectSlug = currentWorkspace?.slug || "";
-
-  const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({
-    workspaceId
-  });
-  const { data: accessApprovalRequestCount } = useGetAccessRequestsCount({
-    projectSlug
-  });
-
-  // we only show the secret rotations v1 tab if they have existing rotations
-  const { data: secretRotations } = useGetSecretRotations({
-    workspaceId,
-    options: {
-      refetchOnMount: false
-    }
-  });
-
-  const pendingRequestsCount =
-    (secretApprovalReqCount?.open || 0) + (accessApprovalRequestCount?.pendingCount || 0);
-
   return (
-    <>
-      <div className="dark hidden h-full w-full flex-col overflow-x-hidden md:flex">
-        <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
-          <motion.div
-            key="menu-project-items"
-            initial={{ x: -150 }}
-            animate={{ x: 0 }}
-            exit={{ x: -150 }}
-            transition={{ duration: 0.2 }}
-            className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
-          >
-            <nav className="items-between flex h-full flex-col overflow-y-auto dark:[color-scheme:dark]">
-              <div className="border-b border-mineshaft-600 px-4 pb-2 pt-3 text-lg text-white">
-                Project General
-              </div>
-              <div className="mt-2 flex-grow">
-                <Menu>
-                  <Link
-                    to={`/projects/$projectId/${ProjectType.SecretManager}/overview` as const}
-                    params={{
-                      projectId: currentWorkspace.id
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>{t("nav.menu.secrets")}</MenuItem>
-                    )}
-                  </Link>
-                  <Link
-                    to={`/projects/$projectId/${ProjectType.SecretManager}/integrations` as const}
-                    params={{
-                      projectId: currentWorkspace.id
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>{t("nav.menu.integrations")}</MenuItem>
-                    )}
-                  </Link>
-                  {Boolean(secretRotations?.length) && (
-                    <Link
-                      to={`/${ProjectType.SecretManager}/$projectId/secret-rotation` as const}
-                      params={{
-                        projectId: currentWorkspace.id
-                      }}
-                    >
-                      {({ isActive }) => <MenuItem isSelected={isActive}>Secret Rotation</MenuItem>}
-                    </Link>
-                  )}
-                  <Link
-                    to={`/projects/$projectId/${ProjectType.SecretManager}/approval` as const}
-                    params={{
-                      projectId: currentWorkspace.id
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
-                        Approvals
-                        {Boolean(
-                          secretApprovalReqCount?.open || accessApprovalRequestCount?.pendingCount
-                        ) && (
-                          <Badge variant="primary" className="ml-1.5">
-                            {pendingRequestsCount}
-                          </Badge>
-                        )}
-                      </MenuItem>
-                    )}
-                  </Link>
-                  <Link
-                    to={`/${currentWorkspace.type}/$projectId/settings` as const}
-                    params={{
-                      projectId: currentWorkspace.id
-                    }}
-                  >
-                    {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>{t("nav.menu.project-settings")}</MenuItem>
-                    )}
-                  </Link>
-                </Menu>
-              </div>
-            </nav>
-          </motion.div>
-          <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 p-4 dark:[color-scheme:dark]">
-            <Outlet />
-          </div>
+    <div className="dark hidden h-full w-full flex-col overflow-x-hidden md:flex">
+      <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
+        <motion.div
+          key="menu-project-items"
+          initial={{ x: -150 }}
+          animate={{ x: 0 }}
+          exit={{ x: -150 }}
+          transition={{ duration: 0.2 }}
+          className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
+        >
+          <nav className="items-between flex h-full flex-col overflow-y-auto dark:[color-scheme:dark]">
+            <div className="border-b border-mineshaft-600 px-4 pb-2 pt-3 text-lg text-white">
+              Project General
+            </div>
+            <div className="mt-2 flex-grow">
+              <Menu>
+                <Link
+                  to="/projects/$projectId/access-management"
+                  params={{
+                    projectId: currentWorkspace.id
+                  }}
+                >
+                  {({ isActive }) => <MenuItem isSelected={isActive}>Access Control</MenuItem>}
+                </Link>
+                <Link
+                  to="/projects/$projectId/settings"
+                  params={{
+                    projectId: currentWorkspace.id
+                  }}
+                >
+                  {({ isActive }) => <MenuItem isSelected={isActive}>Project Settings</MenuItem>}
+                </Link>
+              </Menu>
+            </div>
+          </nav>
+        </motion.div>
+        <div className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 p-4 dark:[color-scheme:dark]">
+          <Outlet />
         </div>
       </div>
-      <div className="z-[200] flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
-        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
-        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
-          {` ${t("common.no-mobile")} `}
-        </p>
-      </div>
-    </>
+    </div>
   );
-};
+};
+

frontend/src/layouts/ProjectGeneralLayout/index.tsx

@@ -1 +1,2 @@
-export { ProjectGeneralLayout } from "./ProjectGeneralLayout";
+export { ProjectGeneralLayout } from "./ProjectGeneralLayout";
+

frontend/src/layouts/ProjectLayout/ProjectLayout.tsx

@@ -189,6 +189,32 @@ export const ProjectLayout = () => {
               </Menu>
               <Divider />
               <Menu>
+                <ShouldWrap
+                  wrapper={Tooltip}
+                  isWrapped={sidebarStyle === SidebarStyle.Collapsed}
+                  content="Access Control"
+                  position="right"
+                >
+                  <Link
+                    to="/projects/$projectId/access-management"
+                    params={{ projectId: currentWorkspace.id }}
+                  >
+                    {({ isActive }) => (
+                      <MenuItem
+                        className="relative flex items-center gap-2 overflow-hidden"
+                        isSelected={isActive}
+                        leftIcon={
+                          <Lottie className="inline-block h-6 w-6 shrink-0" icon="groups" />
+                        }
+                      >
+                        {isActive && (
+                          <div className="absolute left-0 top-0 h-full w-0.5 bg-primary" />
+                        )}
+                        Access Control
+                      </MenuItem>
+                    )}
+                  </Link>
+                </ShouldWrap>
                 <ShouldWrap
                   wrapper={Tooltip}
                   isWrapped={sidebarStyle === SidebarStyle.Collapsed}
@@ -196,7 +222,7 @@ export const ProjectLayout = () => {
                   position="right"
                 >
                   <Link
-                    to="/projects/$projectId/secret-manager/overview"
+                    to="/projects/$projectId/settings"
                     params={{ projectId: currentWorkspace.id }}
                   >
                     {({ isActive }) => (

frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx

@@ -51,7 +51,7 @@ export const SecretManagerLayout = () => {
           >
             <nav className="items-between flex h-full flex-col overflow-y-auto dark:[color-scheme:dark]">
               <div className="border-b border-mineshaft-600 px-4 pb-2 pt-3 text-lg text-white">
-                Secret Manager
+                Project Overview
               </div>
               <div className="mt-2 flex-grow">
                 <Menu>