From 72584d8353997764a633d7472bd024a4b309f25b Mon Sep 17 00:00:00 2001
From: Piyush Gupta <piyushguptaa2z123@gmail.com>
Date: Sat, 6 Dec 2025 19:35:29 +0530
Subject: [PATCH] fix: sub-org labels

---
 .../AccessManagementPage.tsx                  |   2 +-
 .../OrgGroupsSection/OrgGroupsSection.tsx     |  14 +-
 .../OrgGroupsSection/OrgGroupsTable.tsx       |  10 +-
 .../IdentitySection/IdentitySection.tsx       | 161 +++++++++---------
 .../OrgMembersSection/OrgMembersSection.tsx   |   4 +-
 .../OrgMembersSection/OrgMembersTable.tsx     |  10 +-
 .../OrgRoleTabSection/OrgRoleTable.tsx        |   4 +-
 .../GroupDetailsByIDPage.tsx                  |   2 +-
 .../UserDetailsByIDPage.tsx                   |   2 +-
 9 files changed, 111 insertions(+), 98 deletions(-)

diff --git a/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx b/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx
index ca15b5bf7..cde27cb3c 100644
--- a/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx
@@ -85,7 +85,7 @@ export const AccessManagementPage = () => {
         <PageHeader
           scope={isSubOrganization ? "namespace" : "org"}
           title={`${isSubOrganization ? "Sub-Organization" : "Organization"} Access Control`}
-          description="Manage fine-grained access for users, groups, roles, and machine identities within your organization resources."
+          description={`Manage fine-grained access for users, groups, roles, and machine identities within your ${isSubOrganization ? "sub-" : ""}organization resources.`}
         >
           {isSubOrganization && (
             <Link
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
index 2f66c6644..4d6a45da3 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
@@ -6,7 +6,12 @@ import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
 import { DocumentationLinkBadge } from "@app/components/v3";
-import { OrgPermissionGroupActions, OrgPermissionSubjects, useSubscription } from "@app/context";
+import {
+  OrgPermissionGroupActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useSubscription
+} from "@app/context";
 import { useDeleteGroup } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
@@ -15,6 +20,7 @@ import { OrgGroupsTable } from "./OrgGroupsTable";
 
 export const OrgGroupsSection = () => {
   const { subscription } = useSubscription();
+  const { isSubOrganization } = useOrganization();
   const { mutateAsync: deleteMutateAsync } = useDeleteGroup();
 
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
@@ -51,7 +57,9 @@ export const OrgGroupsSection = () => {
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
         <div className="flex items-center gap-x-2">
-          <p className="text-xl font-medium text-mineshaft-100">Organization Groups</p>
+          <p className="text-xl font-medium text-mineshaft-100">
+            {isSubOrganization ? "Sub-" : ""}Organization Groups
+          </p>
           <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/groups" />
         </div>
         <OrgPermissionCan I={OrgPermissionGroupActions.Create} a={OrgPermissionSubjects.Groups}>
@@ -63,7 +71,7 @@ export const OrgGroupsSection = () => {
               onClick={() => handleAddGroupModal()}
               isDisabled={!isAllowed}
             >
-              Create Organization Group
+              Create {isSubOrganization ? "Sub-" : ""}Organization Group
             </Button>
           )}
         </OrgPermissionCan>
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx
index e0cd09d83..3f77466a3 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx
@@ -71,7 +71,7 @@ enum GroupsOrderBy {
 
 export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
   const navigate = useNavigate();
-  const { currentOrg } = useOrganization();
+  const { currentOrg, isSubOrganization } = useOrganization();
   const orgId = currentOrg?.id || "";
   const { isPending, data: groups = [] } = useGetOrganizationGroups(orgId);
   const { mutateAsync: updateMutateAsync } = useUpdateGroup();
@@ -159,7 +159,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
         value={search}
         onChange={(e) => setSearch(e.target.value)}
         leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search organization groups..."
+        placeholder={`Search ${isSubOrganization ? "sub-" : ""}organization groups...`}
       />
       <TableContainer className="mt-4">
         <Table>
@@ -205,7 +205,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
               </Th>
               <Th>
                 <div className="flex items-center">
-                  Organization Role
+                  {isSubOrganization ? "Sub-" : ""}Organization Role
                   <IconButton
                     variant="plain"
                     className={`ml-2 ${orderBy === GroupsOrderBy.Role ? "" : "opacity-30"}`}
@@ -389,8 +389,8 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
           <EmptyState
             title={
               groups.length
-                ? "No organization groups match search..."
-                : "No organization groups found"
+                ? `No ${isSubOrganization ? "sub-" : ""}organization groups match search...`
+                : `No ${isSubOrganization ? "sub-" : ""}organization groups found`
             }
             icon={groups.length ? faSearch : faUsers}
           />
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx
index c71dc8055..6b6086b0b 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx
@@ -1,13 +1,13 @@
 import { useState } from "react";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { AnimatePresence, motion } from "framer-motion";
-import { LinkIcon, PlusIcon } from "lucide-react";
+import { InfoIcon } from "lucide-react";
+import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
-import { Button, DeleteActionModal, Modal, ModalContent } from "@app/components/v2";
+import { Button, DeleteActionModal, Modal, ModalContent, Tooltip } from "@app/components/v2";
 import { DocumentationLinkBadge } from "@app/components/v3";
 import {
   OrgPermissionIdentityActions,
@@ -30,9 +30,8 @@ import { OrgIdentityLinkForm } from "./OrgIdentityLinkForm";
 import { OrgIdentityModal } from "./OrgIdentityModal";
 
 enum IdentityWizardSteps {
-  SelectAction = "select-action",
-  LinkIdentity = "link-identity",
-  OrganizationIdentity = "project-identity"
+  CreateIdentity = "create-identity",
+  LinkIdentity = "link-identity"
 }
 
 export const IdentitySection = withPermission(
@@ -41,7 +40,7 @@ export const IdentitySection = withPermission(
     const { currentOrg, isSubOrganization } = useOrganization();
     const orgId = currentOrg?.id || "";
 
-    const [wizardStep, setWizardStep] = useState(IdentityWizardSteps.SelectAction);
+    const [wizardStep, setWizardStep] = useState(IdentityWizardSteps.CreateIdentity);
 
     const { mutateAsync: deleteMutateAsync } = useDeleteOrgIdentity();
     const { mutateAsync: deleteTemplateMutateAsync } = useDeleteIdentityAuthTemplate();
@@ -100,7 +99,7 @@ export const IdentitySection = withPermission(
           <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
             <div className="flex flex-1 items-center gap-x-2">
               <p className="text-xl font-medium text-mineshaft-100">
-                Organization Machine Identities
+                {isSubOrganization ? "Sub-" : ""}Organization Machine Identities
               </p>
               <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/machine-identities" />
             </div>
@@ -124,7 +123,7 @@ export const IdentitySection = withPermission(
                       }
 
                       if (!isSubOrganization) {
-                        setWizardStep(IdentityWizardSteps.OrganizationIdentity);
+                        setWizardStep(IdentityWizardSteps.CreateIdentity);
                       }
 
                       handlePopUpOpen("identity");
@@ -197,7 +196,7 @@ export const IdentitySection = withPermission(
           onOpenChange={(open) => {
             handlePopUpToggle("identity", open);
             if (!open) {
-              setWizardStep(IdentityWizardSteps.SelectAction);
+              setWizardStep(IdentityWizardSteps.CreateIdentity);
             }
           }}
         >
@@ -214,80 +213,84 @@ export const IdentitySection = withPermission(
                 : undefined
             }
           >
-            <AnimatePresence mode="wait">
-              {wizardStep === IdentityWizardSteps.SelectAction && (
-                <motion.div
-                  key="select-type-step"
-                  transition={{ duration: 0.1 }}
-                  initial={{ opacity: 0, translateX: 30 }}
-                  animate={{ opacity: 1, translateX: 0 }}
-                  exit={{ opacity: 0, translateX: -30 }}
-                >
-                  <div
-                    className="cursor-pointer rounded-md border border-mineshaft-600 p-4 transition-all hover:bg-mineshaft-700"
-                    role="button"
-                    tabIndex={0}
-                    onClick={() => setWizardStep(IdentityWizardSteps.OrganizationIdentity)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") {
-                        setWizardStep(IdentityWizardSteps.OrganizationIdentity);
-                      }
+            {isSubOrganization && (
+              <div className="mb-4 flex items-center justify-center gap-x-2">
+                <div className="flex w-3/4 gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
+                  <Button
+                    variant="outline_bg"
+                    onClick={() => {
+                      setWizardStep(IdentityWizardSteps.CreateIdentity);
                     }}
+                    size="xs"
+                    className={twMerge(
+                      "min-w-[2.4rem] flex-1 rounded border-none hover:bg-mineshaft-600",
+                      wizardStep === IdentityWizardSteps.CreateIdentity
+                        ? "bg-mineshaft-500"
+                        : "bg-transparent"
+                    )}
                   >
-                    <div className="flex items-center gap-2">
-                      <PlusIcon size="1rem" />
-                      <div>Create Machine Identity</div>
-                    </div>
-                    <div className="mt-2 text-xs text-mineshaft-300">
-                      Create a new machine identity specifically for this sub-organization. This
-                      machine identity will be managed at the sub-organization level.
-                    </div>
-                  </div>
-                  <div
-                    className="mt-4 cursor-pointer rounded-md border border-mineshaft-600 p-4 transition-all hover:bg-mineshaft-700"
-                    role="button"
-                    tabIndex={0}
-                    onClick={() => setWizardStep(IdentityWizardSteps.LinkIdentity)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") {
-                        setWizardStep(IdentityWizardSteps.LinkIdentity);
-                      }
+                    Create New
+                  </Button>
+                  <Button
+                    variant="outline_bg"
+                    onClick={() => {
+                      setWizardStep(IdentityWizardSteps.LinkIdentity);
                     }}
+                    size="xs"
+                    className={twMerge(
+                      "min-w-[2.4rem] flex-1 rounded border-none hover:bg-mineshaft-600",
+                      wizardStep === IdentityWizardSteps.LinkIdentity
+                        ? "bg-mineshaft-500"
+                        : "bg-transparent"
+                    )}
                   >
-                    <div className="flex items-center gap-2">
-                      <LinkIcon size="1rem" />
-                      <div>Assign Existing Machine Identity</div>
-                    </div>
-                    <div className="mt-2 text-xs text-mineshaft-300">
-                      Assign an existing machine identity from your parent organization. The machine
-                      identity will continue to be managed at its original scope.
-                    </div>
-                  </div>
-                </motion.div>
-              )}
-              {wizardStep === IdentityWizardSteps.OrganizationIdentity && (
-                <motion.div
-                  key="identity-step"
-                  transition={{ duration: 0.1 }}
-                  initial={{ opacity: 0, translateX: 30 }}
-                  animate={{ opacity: 1, translateX: 0 }}
-                  exit={{ opacity: 0, translateX: -30 }}
+                    Assign Existing
+                  </Button>
+                </div>
+                <Tooltip
+                  className="max-w-sm"
+                  position="right"
+                  align="start"
+                  content={
+                    <>
+                      <p className="mb-2 text-mineshaft-300">
+                        You can add machine identities to your sub-organization in one of two ways:
+                      </p>
+                      <ul className="ml-3.5 flex list-disc flex-col gap-y-4">
+                        <li className="text-mineshaft-200">
+                          <strong className="font-medium text-mineshaft-100">Create New</strong> -
+                          Create a new machine identity specifically for this sub-organization. This
+                          machine identity will be managed at the sub-organization level.
+                          <p className="mt-2">
+                            This method is recommended for autonomous teams that need to manage
+                            machine identity authentication.
+                          </p>
+                        </li>
+                        <li>
+                          <strong className="font-medium text-mineshaft-100">
+                            Assign Existing
+                          </strong>{" "}
+                          Assign an existing machine identity from your parent organization. The
+                          machine identity will continue to be managed at its original scope.
+                          <p className="mt-2">
+                            This method is recommended for organizations that need to maintain
+                            centralized control.
+                          </p>
+                        </li>
+                      </ul>
+                    </>
+                  }
                 >
-                  <OrgIdentityModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-                </motion.div>
-              )}
-              {wizardStep === IdentityWizardSteps.LinkIdentity && (
-                <motion.div
-                  key="link-step"
-                  transition={{ duration: 0.1 }}
-                  initial={{ opacity: 0, translateX: 30 }}
-                  animate={{ opacity: 1, translateX: 0 }}
-                  exit={{ opacity: 0, translateX: -30 }}
-                >
-                  <OrgIdentityLinkForm onClose={() => handlePopUpClose("identity")} />
-                </motion.div>
-              )}
-            </AnimatePresence>
+                  <InfoIcon size={16} className="text-mineshaft-400" />
+                </Tooltip>
+              </div>
+            )}
+            {wizardStep === IdentityWizardSteps.CreateIdentity && (
+              <OrgIdentityModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+            )}
+            {wizardStep === IdentityWizardSteps.LinkIdentity && (
+              <OrgIdentityLinkForm onClose={() => handlePopUpClose("identity")} />
+            )}
           </ModalContent>
         </Modal>
         <DeleteActionModal
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
index 3946a3859..926032ecc 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
@@ -205,7 +205,9 @@ export const OrgMembersSection = () => {
       <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
           <div className="flex items-center gap-x-2">
-            <p className="text-xl font-medium text-mineshaft-100">Organization Users</p>
+            <p className="text-xl font-medium text-mineshaft-100">
+              {isSubOrganization ? "Sub-" : ""}Organization Users
+            </p>
             <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/user-identities" />
           </div>
           <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Member}>
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
index 55b593ffe..6238e1308 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
@@ -336,7 +336,7 @@ export const OrgMembersTable = ({
               </DropdownSubMenuTrigger>
               <DropdownSubMenuContent className="max-h-80 thin-scrollbar overflow-y-auto rounded-l-none">
                 <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
-                  Filter Organization Users by Role
+                  Filter {isSubOrganization ? "Sub-" : ""}Organization Users by Role
                 </DropdownMenuLabel>
                 {roles?.map(({ id, slug, name }) => (
                   <DropdownMenuItem
@@ -365,7 +365,7 @@ export const OrgMembersTable = ({
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-          placeholder="Search organization users..."
+          placeholder={`Search ${isSubOrganization ? "sub-" : ""}organization users...`}
         />
       </div>
       <TableContainer className="mt-4">
@@ -434,7 +434,7 @@ export const OrgMembersTable = ({
               </Th>
               <Th className="w-1/3">
                 <div className="flex items-center">
-                  Organization Role
+                  {isSubOrganization ? "Sub-" : ""}Organization Role
                   <IconButton
                     variant="plain"
                     className={`ml-2 ${orderBy === OrgMembersOrderBy.Role ? "" : "opacity-30"}`}
@@ -727,8 +727,8 @@ export const OrgMembersTable = ({
           <EmptyState
             title={
               members.length
-                ? "No organization users match search..."
-                : "No organization users found"
+                ? `No ${isSubOrganization ? "sub-" : ""}organization users match search...`
+                : `No ${isSubOrganization ? "sub-" : ""}organization users found`
             }
             icon={members.length ? faSearch : faUsers}
           />
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx
index 63b4284f1..890196348 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx
@@ -207,7 +207,7 @@ export const OrgRoleTable = () => {
               }}
               isDisabled={!isAllowed}
             >
-              Add Organization Role
+              Add {isSubOrganization ? "Sub-" : ""}Organization Role
             </Button>
           )}
         </OrgPermissionCan>
@@ -216,7 +216,7 @@ export const OrgRoleTable = () => {
         value={search}
         onChange={(e) => setSearch(e.target.value)}
         leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search organization roles..."
+        placeholder={`Search ${isSubOrganization ? "sub-" : ""}organization roles...`}
         className="flex-1"
         containerClassName="mb-4"
       />
diff --git a/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx b/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
index 8c606f07c..0b12fdb75 100644
--- a/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
+++ b/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
@@ -88,7 +88,7 @@ const Page = () => {
             className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
           >
             <FontAwesomeIcon icon={faChevronLeft} />
-            Organization Groups
+            {isSubOrganization ? "Sub-" : ""}Organization Groups
           </Link>
           <PageHeader
             scope={isSubOrganization ? "namespace" : "org"}
diff --git a/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx b/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
index 608348029..c4198c72b 100644
--- a/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
+++ b/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
@@ -112,7 +112,7 @@ const Page = withPermission(
               className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
             >
               <FontAwesomeIcon icon={faChevronLeft} />
-              Organization Users
+              {isSubOrganization ? "Sub-" : ""}Organization Users
             </Link>
             <PageHeader
               scope={isSubOrganization ? "namespace" : "org"}