feat: fixed review comments

frontend/src/components/v2/projects/NewProjectModal.tsx

@@ -32,7 +32,7 @@ import {
   useSubscription,
   useUser
 } from "@app/context";
-import { getWorkspaceHomePage } from "@app/helpers/workspace";
+import { getProjectHomePage } from "@app/helpers/project";
 import {
   fetchOrgUsers,
   useAddUserToWsNonE2EE,
@@ -120,9 +120,7 @@ const NewProjectForm = ({ onOpenChange, projectType }: NewProjectFormProps) => {
     if (!user) return;
     try {
       const {
-        data: {
-          project
-        }
+        data: { project }
       } = await createWs.mutateAsync({
         projectName: name,
         projectDescription: description,
@@ -130,7 +128,7 @@ const NewProjectForm = ({ onOpenChange, projectType }: NewProjectFormProps) => {
         template,
         type: projectType
       });
-      const { id: newProjectId } = project
+      const { id: newProjectId } = project;
 
       if (addMembers) {
         const orgUsers = await fetchOrgUsers(currentOrg.id);
@@ -150,7 +148,7 @@ const NewProjectForm = ({ onOpenChange, projectType }: NewProjectFormProps) => {
       createNotification({ text: "Project created", type: "success" });
       reset();
       onOpenChange(false);
-      router.push(getWorkspaceHomePage(project));
+      router.push(getProjectHomePage(project));
     } catch (err) {
       console.error(err);
       createNotification({ text: "Failed to create project", type: "error" });

frontend/src/helpers/project.ts

@@ -1,6 +1,6 @@
 import { apiRequest } from "@app/config/request";
 import { createWorkspace } from "@app/hooks/api/workspace/queries";
-import { ProjectType } from "@app/hooks/api/workspace/types";
+import { ProjectType, Workspace } from "@app/hooks/api/workspace/types";
 
 const secretsToBeAdded = [
   {
@@ -37,7 +37,7 @@ const secretsToBeAdded = [
  * Create and initialize a new project in organization with id [organizationId]
  * Note: current user should be a member of the organization
  */
-const initProjectHelper = async ({ projectName }: { projectName: string }) => {
+export const initProjectHelper = async ({ projectName }: { projectName: string }) => {
   // create new project
   const {
     data: { project }
@@ -61,4 +61,22 @@ const initProjectHelper = async ({ projectName }: { projectName: string }) => {
   return project;
 };
 
-export { initProjectHelper };
+export const getProjectHomePage = (workspace: Workspace) => {
+  if (workspace.type === ProjectType.SecretManager) {
+    return `/${workspace.type}/${workspace.id}/secrets/overview`;
+  }
+  if (workspace.type === ProjectType.CertificateManager) {
+    return `/${workspace.type}/${workspace.id}/certificates`;
+  }
+
+  return `/${workspace.type}/${workspace.id}/kms`;
+};
+
+export const getProjectTitle = (type: ProjectType) => {
+  const titleConvert = {
+    [ProjectType.SecretManager]: "Secret Management",
+    [ProjectType.KMS]: "Key Management",
+    [ProjectType.CertificateManager]: "Cert Management"
+  };
+  return titleConvert[type];
+};

frontend/src/helpers/workspace.ts

@@ -1,12 +0,0 @@
-import { Workspace } from "@app/hooks/api/types";
-import { ProjectType } from "@app/hooks/api/workspace/types";
-
-export const getWorkspaceHomePage = (workspace: Workspace) => {
-  if (workspace.type === ProjectType.SecretManager) {
-    return `/${workspace.type}/${workspace.id}/secrets/overview`;
-  }
-  if (workspace.type === ProjectType.CertificateManager) {
-    return `/${workspace.type}/${workspace.id}/certificates`;
-  }
-  return `/${workspace.type}/${workspace.id}/kms`;
-};

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

@@ -47,7 +47,7 @@ export type IdentityMembershipOrg = {
 export type IdentityMembership = {
   id: string;
   identity: Identity;
-  project: Pick<Workspace, "id" | "name">;
+  project: Pick<Workspace, "id" | "name" | "type">;
   roles: Array<
     {
       id: string;

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

@@ -1,6 +1,6 @@
 import { MfaMethod } from "../auth/types";
 import { UserWsKeyPair } from "../keys/types";
-import { ProjectUserMembershipTemporaryMode } from "../workspace/types";
+import { ProjectType, ProjectUserMembershipTemporaryMode } from "../workspace/types";
 
 export enum AuthMethod {
   EMAIL = "email",
@@ -95,6 +95,7 @@ export type TWorkspaceUser = {
   project: {
     id: string;
     name: string;
+    type: ProjectType;
   };
   inviteEmail: string;
   organization: string;

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

@@ -11,7 +11,7 @@ export enum ProjectVersion {
 export enum ProjectType {
   SecretManager = "secret-manager",
   CertificateManager = "cert-manager",
-  Cmek = "cmek"
+  KMS = "kms"
 }
 
 export enum ProjectUserMembershipTemporaryMode {

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -352,7 +352,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                             )}
                             icon="system-outline-165-view-carousel"
                           >
-                            Secret Manager
+                            Secret Management
                           </MenuItem>
                         </a>
                       </Link>
@@ -367,17 +367,17 @@ export const AppLayout = ({ children }: LayoutProps) => {
                             )}
                             icon="system-outline-165-view-carousel"
                           >
-                            Cert Manager
+                            Cert Management
                           </MenuItem>
                         </a>
                       </Link>
-                      <Link href={`/org/${currentOrg?.id}/${ProjectType.Cmek}/overview`} passHref>
+                      <Link href={`/org/${currentOrg?.id}/${ProjectType.KMS}/overview`} passHref>
                         <a>
                           <MenuItem
-                            isSelected={router.asPath.includes(`/${ProjectType.Cmek}/overview`)}
+                            isSelected={router.asPath.includes(`/${ProjectType.KMS}/overview`)}
                             icon="system-outline-165-view-carousel"
                           >
-                            Cmek
+                            Key Management
                           </MenuItem>
                         </a>
                       </Link>

frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx

@@ -16,7 +16,7 @@ import {
   useSubscription,
   useWorkspace
 } from "@app/context";
-import { getWorkspaceHomePage } from "@app/helpers/workspace";
+import { getProjectHomePage } from "@app/helpers/project";
 import { usePopUp } from "@app/hooks";
 import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation";
 import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
@@ -191,7 +191,7 @@ export const ProjectSelect = () => {
           // todo(akhi): this is not using react query because react query in overview is throwing error when envs are not exact same count
           // to reproduce change this back to router.push and switch between two projects with different env count
           // look into this on dashboard revamp
-          window.location.assign(getWorkspaceHomePage(project));
+          window.location.assign(getProjectHomePage(project));
         }}
         options={options}
         components={{

frontend/src/layouts/AppLayout/components/ProjectSidebarItems/ProjectSidebarItems.tsx

@@ -31,7 +31,7 @@ export const ProjectSidebarItem = () => {
 
   const isSecretManager = currentWorkspace?.type === ProjectType.SecretManager;
   const isCertManager = currentWorkspace?.type === ProjectType.CertificateManager;
-  const isCmek = currentWorkspace?.type === ProjectType.Cmek;
+  const isCmek = currentWorkspace?.type === ProjectType.KMS;
 
   return (
     <Menu>
@@ -71,10 +71,10 @@ export const ProjectSidebarItem = () => {
         </Link>
       )}
       {isCmek && (
-        <Link href={`/${ProjectType.Cmek}/${currentWorkspace?.id}/kms`} passHref>
+        <Link href={`/${ProjectType.KMS}/${currentWorkspace?.id}/kms`} passHref>
           <a>
             <MenuItem
-              isSelected={router.asPath === `/${ProjectType.Cmek}/${currentWorkspace?.id}/kms`}
+              isSelected={router.asPath === `/${ProjectType.KMS}/${currentWorkspace?.id}/kms`}
               icon="system-outline-90-lock-closed"
             >
               Key Management

frontend/src/pages/org/[id]/kms/overview.tsx

@@ -2,7 +2,7 @@ import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { ProductOverview } from "../secret-manager/overview";
 
-const CmekManagerOverviewPage = () => <ProductOverview type={ProjectType.Cmek} />;
+const CmekManagerOverviewPage = () => <ProductOverview type={ProjectType.KMS} />;
 
 Object.assign(CmekManagerOverviewPage, { requireAuth: true });
 

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

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 
 import { useOrganization } from "@app/context";
+import { ProjectType } from "@app/hooks/api/workspace/types";
 
 // #TODO: Update all the workspaceIds
 const OrganizationPage = () => {
@@ -9,7 +10,7 @@ const OrganizationPage = () => {
   const { currentOrg } = useOrganization();
   useEffect(() => {
     if (router.isReady && currentOrg?.id) {
-      router.push(`/org/${currentOrg?.id}/secret-manager/overview`);
+      router.push(`/org/${currentOrg?.id}/${ProjectType.SecretManager}/overview`);
     }
   }, [router.isReady, currentOrg?.id]);
 

frontend/src/pages/org/[id]/secret-manager/overview.tsx

@@ -38,7 +38,7 @@ import {
   useOrganization,
   useSubscription
 } from "@app/context";
-import { getWorkspaceHomePage } from "@app/helpers/workspace";
+import { getProjectHomePage } from "@app/helpers/project";
 import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetUserWorkspaces } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
@@ -60,9 +60,17 @@ enum ProjectOrderBy {
 }
 
 const formatTitle = (type: ProjectType) => {
-  if (type === ProjectType.SecretManager) return "Secret Managers";
-  if (type === ProjectType.CertificateManager) return "Cert Managers";
-  return "Cmek";
+  if (type === ProjectType.SecretManager) return "Secret Management";
+  if (type === ProjectType.CertificateManager) return "Cert Management";
+  return "Key Management";
+};
+
+const formatDescription = (type: ProjectType) => {
+  if (type === ProjectType.SecretManager)
+    return "Securely store, manage, and rotate various application secrets, such as database credentials, API keys, etc.";
+  if (type === ProjectType.CertificateManager)
+    return "Manage your PKI infrastructure and issue digital certificates for services, applications, and devices.";
+  return "Centralize the management of keys for cryptographic operations, such as encryption and decryption.";
 };
 
 type Props = {
@@ -182,7 +190,7 @@ export const ProductOverview = ({ type }: Props) => {
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
     <div
       onClick={() => {
-        router.push(getWorkspaceHomePage(workspace));
+        router.push(getProjectHomePage(workspace));
         localStorage.setItem("projectData.id", workspace.id);
       }}
       key={workspace.id}
@@ -246,7 +254,7 @@ export const ProductOverview = ({ type }: Props) => {
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
     <div
       onClick={() => {
-        router.push(getWorkspaceHomePage(workspace));
+        router.push(getProjectHomePage(workspace));
         localStorage.setItem("projectData.id", workspace.id);
       }}
       key={workspace.id}
@@ -382,9 +390,12 @@ export const ProductOverview = ({ type }: Props) => {
           </div>
         </div>
       )}
-      <div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl">
+      <div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-0">
         <div className="flex w-full justify-between">
-          <p className="mr-4 font-semibold text-white">{formatTitle(type)}</p>
+          <p className="mr-4 text-3xl font-semibold  text-white">{formatTitle(type)}</p>
+        </div>
+        <div>
+          <p className="mr-4 mt-2 text-gray-400">{formatDescription(type)}</p>
         </div>
         <div className="mt-6 flex w-full flex-row">
           <Input

frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectRow.tsx

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
 import { createNotification } from "@app/components/notifications";
-import { IconButton, Td, Tooltip, Tr } from "@app/components/v2";
+import { IconButton, Tag, Td, Tooltip, Tr } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { IdentityMembership } from "@app/hooks/api/identities/types";
 import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
@@ -33,7 +33,7 @@ export const IdentityProjectRow = ({
   membership: { id, createdAt, identity, project, roles },
   handlePopUpOpen
 }: Props) => {
-  const { workspaces,currentWorkspace } = useWorkspace();
+  const { workspaces, currentWorkspace } = useWorkspace();
   const router = useRouter();
 
   const isAccessible = useMemo(() => {
@@ -52,7 +52,9 @@ export const IdentityProjectRow = ({
       key={`identity-project-membership-${id}`}
       onClick={() => {
         if (isAccessible) {
-          router.push(`/${currentWorkspace?.type}/${project.id}/members?selectedTab=${TabSections.Identities}`);
+          router.push(
+            `/${currentWorkspace?.type}/${project.id}/members?selectedTab=${TabSections.Identities}`
+          );
           return;
         }
 
@@ -63,6 +65,9 @@ export const IdentityProjectRow = ({
       }}
     >
       <Td className="max-w-0 truncate">{project.name}</Td>
+      <Td>
+        <Tag size="xs">{project.type}</Tag>
+      </Td>
       <Td>{`${formatRoleName(roles[0].role, roles[0].customRoleName)}${
         roles.length > 1 ? ` (+${roles.length - 1})` : ""
       }`}</Td>

frontend/src/views/Org/IdentityPage/components/IdentityProjectsSection/IdentityProjectsTable.tsx

@@ -106,6 +106,7 @@ export const IdentityProjectsTable = ({ identityId, handlePopUpOpen }: Props) =>
                 </div>
               </Th>
 
+              <Th>Type</Th>
               <Th>Role</Th>
               <Th>Added On</Th>
               <Th className="w-5" />

frontend/src/views/Org/UserPage/components/UserProjectsSection/UserProjectRow.tsx

@@ -4,7 +4,7 @@ import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { createNotification } from "@app/components/notifications";
-import { IconButton, Td, Tooltip, Tr } from "@app/components/v2";
+import { IconButton, Tag, Td, Tooltip, Tr } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
 import { TWorkspaceUser } from "@app/hooks/api/types";
@@ -59,6 +59,9 @@ export const UserProjectRow = ({
       }}
     >
       <Td className="max-w-0 truncate">{project.name}</Td>
+      <Td>
+        <Tag size="xs">{project.type}</Tag>
+      </Td>
       <Td>{`${formatRoleName(roles[0].role, roles[0].customRoleName)}${
         roles.length > 1 ? ` (+${roles.length - 1})` : ""
       }`}</Td>

frontend/src/views/Org/UserPage/components/UserProjectsSection/UserProjectsTable.tsx

@@ -108,6 +108,7 @@ export const UserProjectsTable = ({ membershipId, handlePopUpOpen }: Props) => {
                   </IconButton>
                 </div>
               </Th>
+              <Th>Type</Th>
               <Th>Role</Th>
               <Th className="w-5" />
             </Tr>

frontend/src/views/Project/IdentityDetailsPage/IdentityDetailPage.tsx

@@ -8,6 +8,7 @@ import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal, EmptyState, Spinner } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { getProjectTitle } from "@app/helpers/project";
 import { withProjectPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
 import {
@@ -77,11 +78,14 @@ export const IdentityDetailsPage = withProjectPermission(
             type="submit"
             leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
             onClick={() => {
-              router.push(`/${currentWorkspace?.type}/${workspaceId}/members?selectedTab=identities`);
+              router.push(
+                `/${currentWorkspace?.type}/${workspaceId}/members?selectedTab=identities`
+              );
             }}
             className="mb-4"
           >
-            Project Access Control
+            {currentWorkspace?.type ? getProjectTitle(currentWorkspace?.type) : "Project"} Access
+            Access Control
           </Button>
         </div>
         {identityMembershipDetails ? (

frontend/src/views/Project/MemberDetailsPage/MemberDetailPage.tsx

@@ -18,6 +18,7 @@ import {
   useOrganization,
   useWorkspace
 } from "@app/context";
+import { getProjectTitle } from "@app/helpers/project";
 import { withProjectPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
 import { useDeleteUserFromWorkspace, useGetWorkspaceUserDetails } from "@app/hooks/api";
@@ -89,7 +90,8 @@ export const MemberDetailsPage = withProjectPermission(
             }}
             className="mb-4"
           >
-            Project Access Control
+            {currentWorkspace?.type ? getProjectTitle(currentWorkspace?.type) : "Project"} Access
+            Control
           </Button>
         </div>
         {membershipDetails ? (

frontend/src/views/Project/MembersPage/MembersPage.tsx

@@ -3,8 +3,10 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { getProjectTitle } from "@app/helpers/project";
 import { withProjectPermission } from "@app/hoc";
+import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { isTabSection, TabSections } from "../Types";
 import {
@@ -18,6 +20,7 @@ import {
 export const MembersPage = withProjectPermission(
   () => {
     const router = useRouter();
+    const { currentWorkspace } = useWorkspace();
     const { query } = router;
     const selectedTab = query.selectedTab as string;
     const [activeTab, setActiveTab] = useState<TabSections>(TabSections.Member);
@@ -38,7 +41,10 @@ export const MembersPage = withProjectPermission(
     return (
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
-          <p className="mr-4 mb-4 text-3xl font-semibold text-white">Project Access Control</p>
+          <p className="mr-4 mb-4 text-3xl font-semibold text-white">
+            {currentWorkspace?.type ? getProjectTitle(currentWorkspace?.type) : "Project"} Access
+            Access Control
+          </p>
           <Tabs value={activeTab} onValueChange={updateSelectedTab}>
             <TabList>
               <Tab value={TabSections.Member}>Users</Tab>
@@ -60,9 +66,11 @@ export const MembersPage = withProjectPermission(
             <TabPanel value={TabSections.Identities}>
               <IdentityTab />
             </TabPanel>
-            <TabPanel value={TabSections.ServiceTokens}>
-              <ServiceTokenTab />
-            </TabPanel>
+            {currentWorkspace?.type === ProjectType.SecretManager && (
+              <TabPanel value={TabSections.ServiceTokens}>
+                <ServiceTokenTab />
+              </TabPanel>
+            )}
             <TabPanel value={TabSections.Roles}>
               <ProjectRoleListTab />
             </TabPanel>

frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx

@@ -23,7 +23,11 @@ export const ProjectSettingsPage = () => {
         currentWorkspace?.type !== ProjectType.SecretManager
     },
     { name: "Workflow Integrations", key: "tab-workflow-integrations" },
-    { name: "Webhooks", key: "tab-project-webhooks" }
+    {
+      name: "Webhooks",
+      key: "tab-project-webhooks",
+      isHidden: currentWorkspace?.type !== ProjectType.SecretManager
+    }
   ];
 
   return (
@@ -64,9 +68,11 @@ export const ProjectSettingsPage = () => {
             <Tab.Panel>
               <WorkflowIntegrationTab />
             </Tab.Panel>
-            <Tab.Panel>
-              <WebhooksTab />
-            </Tab.Panel>
+            {currentWorkspace?.type === ProjectType.SecretManager && (
+              <Tab.Panel>
+                <WebhooksTab />
+              </Tab.Panel>
+            )}
           </Tab.Panels>
         </Tab.Group>
       </div>