From 9a8dff91bdfc6f5bf4035608e5ca52b9af661a4a Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Fri, 28 Nov 2025 10:37:39 -0800
Subject: [PATCH 1/3] improvement: update project identity creation flow

---
 .../IdentitySection/IdentitySection.tsx       |   6 +-
 .../components/IdentityTab/IdentityTab.tsx    | 140 ++++++++++++------
 .../components/ProjectLinkIdentityModal.tsx   |  13 +-
 3 files changed, 103 insertions(+), 56 deletions(-)

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 3d503d372..c71dc8055 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
@@ -203,7 +203,11 @@ export const IdentitySection = withPermission(
         >
           <ModalContent
             bodyClassName="overflow-visible"
-            title="Add Machine Identity"
+            title={
+              isSubOrganization
+                ? "Add Machine Identity to Sub-Organization"
+                : "Create Organization Machine Identity"
+            }
             subTitle={
               isSubOrganization
                 ? "Create a new machine identity or assign an existing one"
diff --git a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx
index 14c402c6f..60a60efe2 100644
--- a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx
@@ -12,8 +12,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "@tanstack/react-router";
-import { AnimatePresence, motion } from "framer-motion";
-import { LinkIcon, PlusIcon } from "lucide-react";
+import { InfoIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
@@ -83,19 +82,15 @@ import { ProjectLinkIdentityModal } from "./components/ProjectLinkIdentityModal"
 
 const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
 
-enum WizardSteps {
-  SelectAction = "select-action",
-  LinkIdentity = "link-identity",
-  ProjectIdentity = "project-identity"
-}
-
 export const IdentityTab = withProjectPermission(
   () => {
     const { currentProject, projectId } = useProject();
     const navigate = useNavigate();
     const { isSubOrganization, currentOrg } = useOrganization();
 
-    const [wizardStep, setWizardStep] = useState(WizardSteps.SelectAction);
+    const [addMachineIdentityType, setAddMachineIdentityType] = useState<
+      "create-new" | "assign-existing"
+    >("create-new");
 
     const {
       offset,
@@ -510,16 +505,87 @@ export const IdentityTab = withProjectPermission(
           isOpen={popUp.createIdentity.isOpen}
           onOpenChange={(open) => {
             handlePopUpToggle("createIdentity", open);
-            if (!open) setWizardStep(WizardSteps.SelectAction);
           }}
         >
           <ModalContent
             bodyClassName="overflow-visible"
-            title="Add Project Machine Identity"
+            title="Add Machine Identity to Project"
             subTitle="Create a new machine identity or assign an existing one"
           >
-            <AnimatePresence mode="wait">
-              {wizardStep === WizardSteps.SelectAction && (
+            <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={() => {
+                    setAddMachineIdentityType("create-new");
+                  }}
+                  size="xs"
+                  className={`${
+                    addMachineIdentityType === "create-new" ? "bg-mineshaft-500" : "bg-transparent"
+                  } min-w-[2.4rem] flex-1 rounded border-none hover:bg-mineshaft-600`}
+                >
+                  Create New
+                </Button>
+                <Button
+                  variant="outline_bg"
+                  onClick={() => {
+                    setAddMachineIdentityType("assign-existing");
+                  }}
+                  size="xs"
+                  className={`${
+                    addMachineIdentityType === "assign-existing"
+                      ? "bg-mineshaft-500"
+                      : "bg-transparent"
+                  } min-w-[2.4rem] flex-1 rounded border-none hover:bg-mineshaft-600`}
+                >
+                  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 project 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 dedicated machine identity managed at the project-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 organization.
+                        <p className="mt-2">
+                          This method is recommended for organizations that need to maintain
+                          centralized control.
+                        </p>
+                      </li>
+                    </ul>
+                  </>
+                }
+              >
+                <InfoIcon size={16} className="text-mineshaft-400" />
+              </Tooltip>
+            </div>
+            {/* <p className="mb-4 text-sm text-bunker-300">
+              {addType === "create-new" ? (
+                <>
+
+                </>
+              ) : (
+                <>
+
+                </>
+              )}
+            </p> */}
+            {/* {addType === WizardSteps.SelectAction && (
                 <motion.div
                   key="select-type-step"
                   transition={{ duration: 0.1 }}
@@ -531,10 +597,10 @@ export const IdentityTab = withProjectPermission(
                     className="cursor-pointer rounded-md border border-mineshaft-600 p-4 transition-all hover:bg-mineshaft-700"
                     role="button"
                     tabIndex={0}
-                    onClick={() => setWizardStep(WizardSteps.ProjectIdentity)}
+                    onClick={() => setAddType(WizardSteps.ProjectIdentity)}
                     onKeyDown={(e) => {
                       if (e.key === "Enter") {
-                        setWizardStep(WizardSteps.ProjectIdentity);
+                        setAddType(WizardSteps.ProjectIdentity);
                       }
                     }}
                   >
@@ -551,10 +617,10 @@ export const IdentityTab = withProjectPermission(
                     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(WizardSteps.LinkIdentity)}
+                    onClick={() => setAddType(WizardSteps.LinkIdentity)}
                     onKeyDown={(e) => {
                       if (e.key === "Enter") {
-                        setWizardStep(WizardSteps.LinkIdentity);
+                        setAddType(WizardSteps.LinkIdentity);
                       }
                     }}
                   >
@@ -568,35 +634,17 @@ export const IdentityTab = withProjectPermission(
                     </div>
                   </div>
                 </motion.div>
-              )}
-              {wizardStep === WizardSteps.ProjectIdentity && (
-                <motion.div
-                  key="identity-step"
-                  transition={{ duration: 0.1 }}
-                  initial={{ opacity: 0, translateX: 30 }}
-                  animate={{ opacity: 1, translateX: 0 }}
-                  exit={{ opacity: 0, translateX: -30 }}
-                >
-                  <ProjectIdentityModal
-                    onClose={() => {
-                      handlePopUpClose("createIdentity");
-                      setWizardStep(WizardSteps.SelectAction);
-                    }}
-                  />
-                </motion.div>
-              )}
-              {wizardStep === WizardSteps.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 }}
-                >
-                  <ProjectLinkIdentityModal handlePopUpToggle={handlePopUpToggle} />
-                </motion.div>
-              )}
-            </AnimatePresence>
+              )} */}
+            {addMachineIdentityType === "create-new" && (
+              <ProjectIdentityModal
+                onClose={() => {
+                  handlePopUpClose("createIdentity");
+                }}
+              />
+            )}
+            {addMachineIdentityType === "assign-existing" && (
+              <ProjectLinkIdentityModal handlePopUpToggle={handlePopUpToggle} />
+            )}
           </ModalContent>
         </Modal>
         <DeleteActionModal
diff --git a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/components/ProjectLinkIdentityModal.tsx b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/components/ProjectLinkIdentityModal.tsx
index f12c0a4d5..8e00c8e3b 100644
--- a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/components/ProjectLinkIdentityModal.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/components/ProjectLinkIdentityModal.tsx
@@ -5,7 +5,7 @@ import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FilterableSelect, FormControl, ModalClose, Spinner } from "@app/components/v2";
+import { Button, FilterableSelect, FormControl, ModalClose } from "@app/components/v2";
 import { useProject } from "@app/context";
 import {
   projectIdentityMembershipQuery,
@@ -101,13 +101,6 @@ export const ProjectLinkIdentityModal = ({ handlePopUpToggle }: Props) => {
     handlePopUpToggle("createIdentity", false);
   };
 
-  if (isMembershipsLoading || isRolesLoading)
-    return (
-      <div className="flex w-full items-center justify-center py-10">
-        <Spinner className="text-mineshaft-400" />
-      </div>
-    );
-
   return (
     <form onSubmit={handleSubmit(onFormSubmit)}>
       <Controller
@@ -118,6 +111,7 @@ export const ProjectLinkIdentityModal = ({ handlePopUpToggle }: Props) => {
             <FilterableSelect
               value={value}
               onChange={onChange}
+              isLoading={isMembershipsLoading}
               placeholder="Select machine identity..."
               // onInputChange={setSearchValue}
               options={filteredIdentityMembershipOrgs.map((membership) => ({
@@ -142,6 +136,7 @@ export const ProjectLinkIdentityModal = ({ handlePopUpToggle }: Props) => {
           >
             <FilterableSelect
               value={value}
+              isLoading={isRolesLoading}
               onChange={onChange}
               options={roles}
               placeholder="Select role..."
@@ -159,7 +154,7 @@ export const ProjectLinkIdentityModal = ({ handlePopUpToggle }: Props) => {
           isLoading={isSubmitting}
           isDisabled={isSubmitting}
         >
-          Link
+          Assign to Project
         </Button>
         <ModalClose asChild>
           <Button colorSchema="secondary" variant="plain">

From 83b8c9f14a35fbc29c504816c6dc2aaa70b5d550 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Fri, 28 Nov 2025 10:43:59 -0800
Subject: [PATCH 2/3] chore: remove commented out previous code

---
 .../components/IdentityTab/IdentityTab.tsx    | 61 -------------------
 1 file changed, 61 deletions(-)

diff --git a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx
index 60a60efe2..1fa5d29c7 100644
--- a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx
@@ -574,67 +574,6 @@ export const IdentityTab = withProjectPermission(
                 <InfoIcon size={16} className="text-mineshaft-400" />
               </Tooltip>
             </div>
-            {/* <p className="mb-4 text-sm text-bunker-300">
-              {addType === "create-new" ? (
-                <>
-
-                </>
-              ) : (
-                <>
-
-                </>
-              )}
-            </p> */}
-            {/* {addType === WizardSteps.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={() => setAddType(WizardSteps.ProjectIdentity)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") {
-                        setAddType(WizardSteps.ProjectIdentity);
-                      }
-                    }}
-                  >
-                    <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 project. This machine
-                      identity will be managed at the project-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={() => setAddType(WizardSteps.LinkIdentity)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") {
-                        setAddType(WizardSteps.LinkIdentity);
-                      }
-                    }}
-                  >
-                    <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 organization. The machine
-                      identity will continue to be managed at its original scope.
-                    </div>
-                  </div>
-                </motion.div>
-              )} */}
             {addMachineIdentityType === "create-new" && (
               <ProjectIdentityModal
                 onClose={() => {

From a62305550b0cc6828aa51d6ea61c93378a8fd7e7 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Fri, 28 Nov 2025 11:49:19 -0800
Subject: [PATCH 3/3] chore: address feedback

---
 .../components/IdentityTab/IdentityTab.tsx    | 35 ++++++++++++-------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx
index 1fa5d29c7..2fd8bfb62 100644
--- a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx
@@ -82,15 +82,20 @@ import { ProjectLinkIdentityModal } from "./components/ProjectLinkIdentityModal"
 
 const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
 
+enum AddIdentityType {
+  CreateNew,
+  AssignExisting
+}
+
 export const IdentityTab = withProjectPermission(
   () => {
     const { currentProject, projectId } = useProject();
     const navigate = useNavigate();
     const { isSubOrganization, currentOrg } = useOrganization();
 
-    const [addMachineIdentityType, setAddMachineIdentityType] = useState<
-      "create-new" | "assign-existing"
-    >("create-new");
+    const [addMachineIdentityType, setAddMachineIdentityType] = useState<AddIdentityType>(
+      AddIdentityType.CreateNew
+    );
 
     const {
       offset,
@@ -517,26 +522,30 @@ export const IdentityTab = withProjectPermission(
                 <Button
                   variant="outline_bg"
                   onClick={() => {
-                    setAddMachineIdentityType("create-new");
+                    setAddMachineIdentityType(AddIdentityType.CreateNew);
                   }}
                   size="xs"
-                  className={`${
-                    addMachineIdentityType === "create-new" ? "bg-mineshaft-500" : "bg-transparent"
-                  } min-w-[2.4rem] flex-1 rounded border-none hover:bg-mineshaft-600`}
+                  className={twMerge(
+                    "min-w-[2.4rem] flex-1 rounded border-none hover:bg-mineshaft-600",
+                    addMachineIdentityType === AddIdentityType.CreateNew
+                      ? "bg-mineshaft-500"
+                      : "bg-transparent"
+                  )}
                 >
                   Create New
                 </Button>
                 <Button
                   variant="outline_bg"
                   onClick={() => {
-                    setAddMachineIdentityType("assign-existing");
+                    setAddMachineIdentityType(AddIdentityType.AssignExisting);
                   }}
                   size="xs"
-                  className={`${
-                    addMachineIdentityType === "assign-existing"
+                  className={twMerge(
+                    "min-w-[2.4rem] flex-1 rounded border-none hover:bg-mineshaft-600",
+                    addMachineIdentityType === AddIdentityType.AssignExisting
                       ? "bg-mineshaft-500"
                       : "bg-transparent"
-                  } min-w-[2.4rem] flex-1 rounded border-none hover:bg-mineshaft-600`}
+                  )}
                 >
                   Assign Existing
                 </Button>
@@ -574,14 +583,14 @@ export const IdentityTab = withProjectPermission(
                 <InfoIcon size={16} className="text-mineshaft-400" />
               </Tooltip>
             </div>
-            {addMachineIdentityType === "create-new" && (
+            {addMachineIdentityType === AddIdentityType.CreateNew && (
               <ProjectIdentityModal
                 onClose={() => {
                   handlePopUpClose("createIdentity");
                 }}
               />
             )}
-            {addMachineIdentityType === "assign-existing" && (
+            {addMachineIdentityType === AddIdentityType.AssignExisting && (
               <ProjectLinkIdentityModal handlePopUpToggle={handlePopUpToggle} />
             )}
           </ModalContent>