feat: added manageby and conditional rendering more items

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx

@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
 import {
   faArrowDown,
   faArrowUp,
+  faBuilding,
   faCheckCircle,
   faChevronRight,
   faEdit,
@@ -78,7 +79,7 @@ type Filter = {
 
 export const IdentityTable = ({ handlePopUpOpen }: Props) => {
   const navigate = useNavigate();
-  const { currentOrg } = useOrganization();
+  const { currentOrg, isSubOrganization } = useOrganization();
 
   const {
     offset,
@@ -286,15 +287,18 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                   </IconButton>
                 </div>
               </Th>
+              {isSubOrganization && <Th>Managed By</Th>}
               <Th className="w-16">{isFetching ? <Spinner size="xs" /> : null}</Th>
             </Tr>
           </THead>
           <TBody>
-            {isPending && <TableSkeleton columns={3} innerKey="org-identities" />}
+            {isPending && (
+              <TableSkeleton columns={isSubOrganization ? 4 : 3} innerKey="org-identities" />
+            )}
             {!isPending &&
               data?.identities?.map(
                 ({
-                  identity: { id, name },
+                  identity: { id, name, orgId },
                   role,
                   customRole,
                   lastLoginAuthMethod,
@@ -362,6 +366,14 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                           }}
                         </OrgPermissionCan>
                       </Td>
+                      {isSubOrganization && (
+                        <Td>
+                          <p className="truncate">
+                            <FontAwesomeIcon size="sm" className="mr-1.5" icon={faBuilding} />
+                            {currentOrg.id === orgId ? "Organization" : "Root Organization"}
+                          </p>
+                        </Td>
+                      )}
                       <Td>
                         <DropdownMenu>
                           <DropdownMenuTrigger asChild>

frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx

@@ -91,7 +91,11 @@ const Page = () => {
           <PageHeader scope="org" description="Organization Identity" title={data.identity.name} />
           <div className="flex">
             <div className="mr-4 w-96">
-              <IdentityDetailsSection identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
+              <IdentityDetailsSection
+                isOrgIdentity={data.identity.orgId === currentOrg.id}
+                identityId={identityId}
+                handlePopUpOpen={handlePopUpOpen}
+              />
               {!isAuthHidden && (
                 <IdentityAuthenticationSection
                   identityId={identityId}

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityDetailsSection.tsx

@@ -21,7 +21,7 @@ import {
   Tag,
   Tooltip
 } from "@app/components/v2";
-import { OrgPermissionIdentityActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionIdentityActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useTimedReset } from "@app/hooks";
 import { identityAuthToNameMap, useGetIdentityById } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -39,6 +39,7 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen, isOrgIdent
   const [copyTextId, isCopyingId, setCopyTextId] = useTimedReset<string>({
     initialState: "Copy ID to clipboard"
   });
+  const { isSubOrganization } = useOrganization();
 
   const { data } = useGetIdentityById(identityId);
   return data ? (
@@ -142,6 +143,14 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen, isOrgIdent
           <p className="text-sm font-medium text-mineshaft-300">Name</p>
           <p className="text-sm text-mineshaft-300">{data.identity.name}</p>
         </div>
+        {isSubOrganization && (
+          <div className="mb-4">
+            <p className="text-sm font-medium text-mineshaft-300">Manage By</p>
+            <p className="text-sm text-mineshaft-300">
+              {isOrgIdentity ? "Organization" : "Root Organization"}
+            </p>
+          </div>
+        )}
         {isOrgIdentity && (
           <div className="mb-4">
             <p className="text-sm font-medium text-mineshaft-300">Last Login Auth Method</p>