improvements: address feedback

backend/src/ee/routes/v1/user-additional-privilege-router.ts

@@ -142,6 +142,7 @@ export const registerUserAdditionalPrivilegeRouter = async (server: FastifyZodPr
         data: {
           ...req.body,
           ...req.body.type,
+          name: req.body.slug,
           permissions: req.body.permissions
             ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
               // @ts-ignore-error this is valid ts

frontend/src/components/v3/generic/Alert/Alert.tsx

@@ -11,8 +11,9 @@ const alertVariants = cva(
     variants: {
       variant: {
         default: "bg-container text-card-foreground",
-        info: "bg-info/10 text-info border-info/20",
+        info: "bg-info/5 text-info border-info/20",
-        org: "bg-org/10 text-org border-org/20"
+        org: "bg-org/5 text-org border-org/20",
+        "sub-org": "bg-sub-org/5 text-sub-org border-sub-org/20"
       }
     },
     defaultVariants: {

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuth/IdentityAuthFieldDisplay.tsx

@@ -16,7 +16,7 @@ export const IdentityAuthFieldDisplay = ({ label, children, className }: Props)
         {children ? (
           <p className="break-words">{children}</p>
         ) : (
-          <p className="text-muted italic">Not set</p>
+          <p className="text-muted">Not set</p>
         )}
       </DetailValue>
     </Detail>

frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx

@@ -16,6 +16,7 @@ import {
 } from "@app/components/v2";
 import {
   OrgIcon,
+  SubOrgIcon,
   UnstableAlert,
   UnstableAlertDescription,
   UnstableAlertTitle,
@@ -164,6 +165,10 @@ const Page = () => {
     return <UnstablePageLoader />;
   }
 
+  const isOrgIdentity = !isProjectIdentity;
+  const isSubOrgIdentity =
+    isOrgIdentity && currentOrg.rootOrgId !== identityMembershipDetails?.identity.orgId;
+
   return (
     <div className="mx-auto flex max-w-8xl flex-col">
       {identityMembershipDetails ? (
@@ -255,7 +260,8 @@ const Page = () => {
           <div className="flex flex-col gap-5 lg:flex-row">
             <ProjectIdentityDetailsSection
               identity={identity || { ...identityMembershipDetails?.identity, projectId: "" }}
-              isOrgIdentity={!isProjectIdentity}
+              isOrgIdentity={isOrgIdentity}
+              isSubOrgIdentity={isSubOrgIdentity}
               membership={identityMembershipDetails!}
             />
 
@@ -274,15 +280,15 @@ const Page = () => {
                     </UnstableCardDescription>
                   </UnstableCardHeader>
                   <UnstableCardContent>
-                    <UnstableAlert variant="org">
+                    <UnstableAlert variant={isSubOrgIdentity ? "sub-org" : "org"}>
-                      <OrgIcon />
+                      {isSubOrgIdentity ? <SubOrgIcon /> : <OrgIcon />}
                       <UnstableAlertTitle>
-                        Machine identity managed by organization
+                        Machine identity managed by {isSubOrgIdentity ? "sub-" : ""}organization
                       </UnstableAlertTitle>
                       <UnstableAlertDescription>
                         <p>
-                          This machine identity&apos;s authentication methods are controlled by your
+                          This machine identity&apos;s authentication methods are managed by your
-                          organization. <br /> To make changes,{" "}
+                          {isSubOrgIdentity ? "sub-" : ""}organization. <br /> To make changes,{" "}
                           <OrgPermissionCan
                             I={OrgPermissionIdentityActions.Read}
                             an={OrgPermissionSubjects.Identity}
@@ -294,10 +300,10 @@ const Page = () => {
                                   className="inline-block cursor-pointer text-foreground underline underline-offset-2"
                                   params={{
                                     identityId,
-                                    orgId: currentOrg.id
+                                    orgId: identityMembershipDetails.identity.orgId
                                   }}
                                 >
-                                  go to organization access control
+                                  go to {isSubOrgIdentity ? "sub-" : ""}organization access control
                                 </Link>
                               ) : null
                             }

frontend/src/pages/project/IdentityDetailsByIDPage/components/ProjectIdentityDetailsSection.tsx

@@ -12,6 +12,7 @@ import {
   DetailValue,
   OrgIcon,
   ProjectIcon,
+  SubOrgIcon,
   UnstableButtonGroup,
   UnstableCard,
   UnstableCardAction,
@@ -30,10 +31,16 @@ import { ProjectIdentityModal } from "@app/pages/project/AccessControlPage/compo
 type Props = {
   identity: TProjectIdentity;
   isOrgIdentity?: boolean;
+  isSubOrgIdentity?: boolean;
   membership: IdentityProjectMembershipV1;
 };
 
-export const ProjectIdentityDetailsSection = ({ identity, isOrgIdentity, membership }: Props) => {
+export const ProjectIdentityDetailsSection = ({
+  identity,
+  isOrgIdentity,
+  isSubOrgIdentity,
+  membership
+}: Props) => {
   // eslint-disable-next-line @typescript-eslint/naming-convention,@typescript-eslint/no-unused-vars
   const [_, isCopyingId, setCopyTextId] = useTimedReset<string>({
     initialState: "Copy ID to clipboard"
@@ -90,7 +97,7 @@ export const ProjectIdentityDetailsSection = ({ identity, isOrgIdentity, members
                     variant="ghost"
                     size="xs"
                   >
-                    {/* TODO(scott): color this should be a button variant */}
+                    {/* TODO(scott): color this should be a button variant and create re-usable copy button */}
                     {isCopyingId ? <CheckIcon /> : <ClipboardListIcon className="text-label" />}
                   </UnstableIconButton>
                 </Tooltip>
@@ -100,9 +107,9 @@ export const ProjectIdentityDetailsSection = ({ identity, isOrgIdentity, members
               <DetailLabel>Managed by</DetailLabel>
               <DetailValue>
                 {isOrgIdentity ? (
-                  <Badge variant="org">
+                  <Badge variant={isSubOrgIdentity ? "sub-org" : "org"}>
-                    <OrgIcon />
+                    {isSubOrgIdentity ? <SubOrgIcon /> : <OrgIcon />}
-                    Organization
+                    {isSubOrgIdentity ? "Sub-" : ""}Organization
                   </Badge>
                 ) : (
                   <Badge variant="project">
@@ -127,7 +134,7 @@ export const ProjectIdentityDetailsSection = ({ identity, isOrgIdentity, members
                     </UnstableButtonGroup>
                   ))
                 ) : (
-                  <span className="text-muted italic">No metadata</span>
+                  <span className="text-muted">No metadata</span>
                 )}
               </DetailValue>
             </Detail>
@@ -143,7 +150,7 @@ export const ProjectIdentityDetailsSection = ({ identity, isOrgIdentity, members
                     {membership.lastLoginAuthMethod ? (
                       identityAuthToNameMap[membership.lastLoginAuthMethod]
                     ) : (
-                      <span className="text-muted italic">N/A</span>
+                      <span className="text-muted">N/A</span>
                     )}
                   </DetailValue>
                 </Detail>
@@ -153,7 +160,7 @@ export const ProjectIdentityDetailsSection = ({ identity, isOrgIdentity, members
                     {membership.lastLoginTime ? (
                       format(membership.lastLoginTime, "PPpp")
                     ) : (
-                      <span className="text-muted italic">N/A</span>
+                      <span className="text-muted">N/A</span>
                     )}
                   </DetailValue>
                 </Detail>

frontend/src/pages/project/MemberDetailsByIDPage/components/ProjectMemberDetailsSection.tsx

@@ -48,7 +48,7 @@ export const ProjectMemberDetailsSection = ({ membership }: Props) => {
         <DetailGroup>
           <Detail>
             <DetailLabel>Name</DetailLabel>
-            <DetailValue>{name || <span className="text-muted italic">Not set</span>}</DetailValue>
+            <DetailValue>{name || <span className="text-muted">Not set</span>}</DetailValue>
           </Detail>
           <Detail>
             <DetailLabel>ID</DetailLabel>
@@ -63,7 +63,7 @@ export const ProjectMemberDetailsSection = ({ membership }: Props) => {
                   variant="ghost"
                   size="xs"
                 >
-                  {/* TODO(scott): color this should be a button variant */}
+                  {/* TODO(scott): color this should be a button variant and create re-usable copy button */}
                   {isCopyingId ? <CheckIcon /> : <ClipboardListIcon className="text-label" />}
                 </UnstableIconButton>
               </Tooltip>
@@ -82,7 +82,7 @@ export const ProjectMemberDetailsSection = ({ membership }: Props) => {
                   variant="ghost"
                   size="xs"
                 >
-                  {/* TODO(scott): color this should be a button variant */}
+                  {/* TODO(scott): color this should be a button variant and create re-usable copy button */}
                   {isCopyingEmail ? <CheckIcon /> : <ClipboardListIcon className="text-label" />}
                 </UnstableIconButton>
               </Tooltip>
@@ -91,9 +91,7 @@ export const ProjectMemberDetailsSection = ({ membership }: Props) => {
           {username !== email && (
             <Detail>
               <DetailLabel>Username</DetailLabel>
-              <DetailValue>
+              <DetailValue>{username || <span className="text-muted">Not set</span>}</DetailValue>
-                {email || <span className="text-muted italic">Not set</span>}
-              </DetailValue>
             </Detail>
           )}
           <Detail>