improvements: address feedback 1

2026-10-21 01:16:49 +00:00 · 2025-10-17 13:12:46 -07:00
parent f4b8177496
commit 04828214a4
14 changed files with 58 additions and 44 deletions
@@ -25,7 +25,7 @@ export const BillingTabGroup = withPermission(
      <Tabs orientation="vertical" defaultValue={tabs[0].key}>
        <TabList>
          {tabs.map((tab) => (
-            <Tab variant="org" value={tab.key}>
+            <Tab variant="org" key={tab.key} value={tab.key}>
              {tab.name}
            </Tab>
          ))}
@@ -12,7 +12,6 @@ import { ROUTE_PATHS } from "@app/const/routes";
 import { OrgPermissionIdentityActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useDeleteIdentity, useGetIdentityById } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
-import { TabSections } from "@app/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage";
 import { ViewIdentityAuthModal } from "@app/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAuthModal";
 import { OrgAccessControlTabSections } from "@app/types/org";

@@ -81,7 +80,7 @@ const Page = () => {
          <Link
            to="/organization/access-management"
            search={{
-              selectedTab: TabSections.Identities
+              selectedTab: OrgAccessControlTabSections.Identities
            }}
            className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
          >
@@ -19,7 +19,6 @@ import { ROUTE_PATHS } from "@app/const/routes";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useDeleteOrgRole, useGetOrgRole } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
-import { TabSections } from "@app/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage";
 import { DuplicateOrgRoleModal } from "@app/pages/organization/RoleByIDPage/components/DuplicateOrgRoleModal";
 import { OrgAccessControlTabSections } from "@app/types/org";

@@ -84,7 +83,7 @@ export const Page = () => {
          <Link
            to="/organization/access-management"
            search={{
-              selectedTab: TabSections.Roles
+              selectedTab: OrgAccessControlTabSections.Roles
            }}
            className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
          >
@@ -32,7 +32,6 @@ import {
  useUpdateOrgMembership
 } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
-import { TabSections } from "@app/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage";
 import { OrgAccessControlTabSections } from "@app/types/org";

 import { UserAuditLogsSection } from "./components/UserProjectsSection/UserAuditLogsSection";
@@ -124,7 +123,7 @@ const Page = withPermission(
            <Link
              to="/organization/access-management"
              search={{
-                selectedTab: TabSections.Member
+                selectedTab: OrgAccessControlTabSections.Member
              }}
              className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
            >
@@ -8,7 +8,7 @@ type Props = {

 export const FolderBreadCrumbs = ({ path = "/" }: Props) => {
  const navigate = useNavigate({
-    from: "/projects/secret-management/$projectId/overview"
+    from: "/projects/pam/$projectId/accounts"
  });

  const onFolderCrumbClick = (index: number) => {
@@ -29,7 +29,12 @@ export const FolderBreadCrumbs = ({ path = "/" }: Props) => {
      <div
        className="breadcrumb relative z-20 border-solid border-mineshaft-600 bg-mineshaft-800 py-1 pr-2 pl-5 text-sm hover:bg-mineshaft-600"
        onClick={() => onFolderCrumbClick(0)}
-        onKeyDown={() => null}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onFolderCrumbClick(0);
+          }
+        }}
        role="button"
        tabIndex={0}
      >
@@ -45,7 +50,12 @@ export const FolderBreadCrumbs = ({ path = "/" }: Props) => {
              index + 1 === arr.length ? "cursor-default" : "cursor-pointer"
            } border-solid border-mineshaft-600 py-1 pr-2 pl-5 text-sm text-mineshaft-200`}
            onClick={() => onFolderCrumbClick(index + 1)}
-            onKeyDown={() => null}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onFolderCrumbClick(index + 1);
+              }
+            }}
            role="button"
            tabIndex={0}
          >
@@ -55,7 +55,7 @@ const Page = () => {
          <PageHeader
            scope={currentProject.type}
            title={groupMembership.group.name}
-            description={`Group joined on ${groupMembership?.createdAt && formatRelative(new Date(groupMembership?.createdAt || ""), new Date())}`}
+            description={`Group joined on ${formatRelative(new Date(groupMembership.createdAt || ""), new Date())}`}
          />
          <div className="flex">
            <div className="mr-4 w-96">
@@ -35,7 +35,7 @@ export const DeleteProjectProtection = () => {
      <p className="mb-3 text-xl font-medium">Delete Protection</p>
      <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
        {(isAllowed) => (
-          <div className="w-max">
+          <div>
            <Checkbox
              id="hasDeleteProtection"
              isDisabled={!isAllowed}
@@ -43,6 +43,7 @@ export const DeleteProjectProtection = () => {
              onCheckedChange={(state) => {
                handleToggleDeleteProjectProtection(state as boolean);
              }}
+              allowMultilineLabel
            >
              Protects the project from being deleted accidentally. While this option is enabled,
              you can&apos;t delete the project.
@@ -40,7 +40,7 @@ export const AutoCapitalizationSection = () => {
      <p className="mb-3 text-xl font-medium">{t("settings.project.enforce-capitalization")}</p>
      <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
        {(isAllowed) => (
-          <div className="w-max">
+          <div>
            <Checkbox
              id="autoCapitalization"
              isDisabled={!isAllowed}
@@ -48,6 +48,7 @@ export const AutoCapitalizationSection = () => {
              onCheckedChange={(state) => {
                handleToggleCapitalizationToggle(state as boolean);
              }}
+              allowMultilineLabel
            >
              {t("settings.project.enforce-capitalization-description")}
            </Checkbox>
@@ -1,5 +1,11 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link } from "@tanstack/react-router";
+
+import { WishForm } from "@app/components/features/WishForm";
+import { PageHeader } from "@app/components/v2";

 import { PersonalTabGroup } from "./components/PersonalTabGroup";

@@ -7,16 +13,30 @@ export const PersonalSettingsPage = () => {
  const { t } = useTranslation();

  return (
-    <div className="h-full bg-bunker-800 text-white">
+    <div className="h-full bg-bunker-800 pt-10 text-white">
      <Helmet>
        <title>{t("common.head-title", { title: t("settings.personal.title") })}</title>
        <link rel="icon" href="/infisical.ico" />
      </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 px-6 text-white">
-        <div className="w-full max-w-6xl">
-          <div className="mt-6 mb-6">
-            <p className="text-3xl font-medium text-gray-200">{t("settings.personal.title")}</p>
-          </div>
+      <div className="flex w-full justify-center px-6 text-white">
+        <div className="w-full max-w-8xl">
+          <Link
+            to="/organization/projects"
+            className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
+          >
+            <FontAwesomeIcon icon={faChevronLeft} />
+            Back to Organization
+          </Link>
+          <PageHeader
+            title="Personal Settings"
+            scope={null}
+            description="Configure settings for your account"
+          >
+            <div>
+              {window.location.origin.includes("https://app.infisical.com") ||
+                window.location.origin.includes("https://gamma.infisical.com") || <WishForm />}
+            </div>
+          </PageHeader>
          <PersonalTabGroup />
        </div>
      </div>
@@ -15,10 +15,12 @@ const tabs = [

 export const PersonalTabGroup = () => {
  return (
-    <Tabs defaultValue={tabs[0].key}>
+    <Tabs orientation="vertical" defaultValue={tabs[0].key}>
      <TabList>
        {tabs.map((tab) => (
-          <Tab value={tab.key}>{tab.name}</Tab>
+          <Tab value={tab.key} key={tab.key} variant="instance">
+            {tab.name}
+          </Tab>
        ))}
      </TabList>
      <TabPanel value={tabs[0].key}>