UI: Display names for related identity groups and entities

ui/app/components/identity/item-groups.hbs

@@ -8,13 +8,15 @@
 }}
   {{#each @model.direct_group_ids as |gid|}}
     <LinkTo @route="vault.cluster.access.identity.show" @models={{array "groups" gid "details"}} class="list-item-row">
-      <Icon @name="folder" class="has-text-grey-light" />{{gid}}
+      <Icon @name="folder" class="has-text-grey-light" />
+      <Identity::ItemName @id={{gid}} @items={{@model.groups}} />
     </LinkTo>
   {{/each}}
   {{#each @model.inherited_group_ids as |gid|}}
     <LinkedBlock @params={{array "vault.cluster.access.identity.show" "groups" gid "details"}} class="list-item-row">
       <LinkTo @route="vault.cluster.access.identity.show" @models={{array "groups" gid "details"}} class="has-text-black">
-        <Icon @name="folder" class="has-text-grey-light" />{{gid}}
+        <Icon @name="folder" class="has-text-grey-light" />
+        <Identity::ItemName @id={{gid}} @items={{@model.groups}} />
       </LinkTo>
       <Hds::Badge @text="inherited" />
     </LinkedBlock>

ui/app/components/identity/item-members.hbs

@@ -13,7 +13,8 @@
             @models={{array "groups" gid "details"}}
             class="is-block has-text-black has-text-weight-semibold"
           >
-            <Icon @name="folder" class="has-text-grey-light" />{{gid}}
+            <Icon @name="folder" class="has-text-grey-light" />
+            <Identity::ItemName @id={{gid}} @items={{@model.groups}} />
           </LinkTo>
         </LF.Item>
         <LF.Item>
@@ -33,7 +34,8 @@
             @models={{array "entities" gid "details"}}
             class="is-block has-text-black has-text-weight-semibold"
           >
-            <Icon @name="user" class="has-text-grey-light" />{{gid}}
+            <Icon @name="user" class="has-text-grey-light" />
+            <Identity::ItemName @id={{gid}} @items={{@model.entities}} />
           </LinkTo>
         </LF.Item>
         <LF.Item>

ui/app/components/identity/item-name.hbs

@@ -0,0 +1,8 @@
+{{!
+  Copyright IBM Corp. 2016, 2026
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+{{#let (find-by "id" @id @items) as |item|}}
+  <span title={{if item.name @id}} data-test-identity-item-name={{@id}}>{{or item.name @id}}</span>
+{{/let}}

ui/app/components/identity/item-parent-groups.hbs

@@ -13,7 +13,8 @@
             @models={{array "groups" gid "details"}}
             class="is-block has-text-black has-text-weight-semibold"
           >
-            <Icon @name="folder" class="has-text-grey-light" />{{gid}}
+            <Icon @name="folder" class="has-text-grey-light" />
+            <Identity::ItemName @id={{gid}} @items={{@model.groups}} />
           </LinkTo>
         </LF.Item>
       </Hds::Layout::Flex>

ui/app/routes/vault/cluster/access/identity/show.js

@@ -7,6 +7,26 @@ import { hash } from 'rsvp';
 import Route from '@ember/routing/route';
 import { TABS } from 'vault/helpers/tabs-for-identity-show';
 import { service } from '@ember/service';
+import { fetchIdentityItems } from 'vault/utils/identity-helpers';
+
+const RELATED_IDENTITIES = {
+  entity: {
+    groups: [
+      {
+        identityType: 'group',
+        modelKey: 'groups',
+        idKeys: ['group_ids', 'direct_group_ids', 'inherited_group_ids'],
+      },
+    ],
+  },
+  group: {
+    members: [
+      { identityType: 'group', modelKey: 'groups', idKeys: ['member_group_ids'] },
+      { identityType: 'entity', modelKey: 'entities', idKeys: ['member_entity_ids'] },
+    ],
+    'parent-groups': [{ identityType: 'group', modelKey: 'groups', idKeys: ['parent_group_ids'] }],
+  },
+};
 
 export default class IdentityShowRoute extends Route {
   @service router;
@@ -25,15 +45,38 @@ export default class IdentityShowRoute extends Route {
     }
 
     const methodType = itemType === 'entity' ? 'entityReadById' : 'groupReadById';
-    const { data } = await this.api.identity[methodType](params.item_id);
-    const canAddAlias = (await this.capabilities.for('groupAlias').canCreate) || false;
+    const [response, canAddAlias] = await Promise.all([
+      this.api.identity[methodType](params.item_id),
+      this.capabilities.for('groupAlias').canCreate,
+    ]);
+    const relatedIdentities = await this.fetchRelatedIdentities(itemType, section, response.data);
 
     return hash({
-      model: { ...data, identityType: itemType, canAddAlias },
+      model: {
+        ...response.data,
+        ...relatedIdentities,
+        identityType: itemType,
+        canAddAlias: canAddAlias || false,
+      },
       section,
     });
   }
 
+  async fetchRelatedIdentities(itemType, section, model) {
+    const identities = (RELATED_IDENTITIES[itemType]?.[section] || []).filter(({ idKeys }) =>
+      idKeys.some((key) => model[key]?.length)
+    );
+    const results = await Promise.allSettled(
+      identities.map(({ identityType }) => fetchIdentityItems({ identityType, api: this.api }))
+    );
+
+    return identities.reduce((related, { modelKey }, index) => {
+      const result = results[index];
+      related[modelKey] = result.status === 'fulfilled' ? result.value : [];
+      return related;
+    }, {});
+  }
+
   afterModel(resolvedModel) {
     const { section, model } = resolvedModel;
 

ui/tests/acceptance/access/identity/shared-identity-test.js

@@ -13,6 +13,7 @@ import { GENERAL } from 'vault/tests/helpers/general-selectors';
 import { capitalize } from '@ember/string';
 import { singularize } from 'ember-inflector';
 import { setupMirage } from 'ember-cli-mirage/test-support';
+import { Response } from 'miragejs';
 
 // Helper to create an entity or group
 async function createEntityOrGroup(itemType, name) {
@@ -148,4 +149,111 @@ module('Acceptance | Create groups and entities alias test', function (hooks) {
       assert.dom(GENERAL.latestFlashContent).includesText('Successfully deleted');
     });
   }
+
+  test('entity groups: it displays group names and keeps IDs in tooltips', async function (assert) {
+    const entityId = 'entity-id';
+    const directGroupId = 'direct-group-id';
+    const inheritedGroupId = 'inherited-group-id';
+    let groupListRequests = 0;
+
+    this.server.get(`/identity/entity/id/${entityId}`, () => ({
+      data: {
+        id: entityId,
+        name: 'example entity',
+        direct_group_ids: [directGroupId],
+        inherited_group_ids: [inheritedGroupId],
+      },
+    }));
+    this.server.get('/identity/group/id', () => {
+      groupListRequests++;
+      return {
+        data: {
+          keys: [directGroupId, inheritedGroupId],
+          key_info: {
+            [directGroupId]: { name: 'direct group' },
+            [inheritedGroupId]: { name: 'inherited group' },
+          },
+        },
+      };
+    });
+
+    await visit(`/vault/access/identity/entities/${entityId}/groups`);
+
+    assert
+      .dom(`[data-test-identity-item-name="${directGroupId}"]`)
+      .hasText('direct group')
+      .hasAttribute('title', directGroupId);
+    assert
+      .dom(`[data-test-identity-item-name="${inheritedGroupId}"]`)
+      .hasText('inherited group')
+      .hasAttribute('title', inheritedGroupId);
+    assert.strictEqual(groupListRequests, 1, 'loads all group names with one list request');
+  });
+
+  test('group members: it displays names for member groups and entities', async function (assert) {
+    const groupId = 'group-id';
+    const memberGroupId = 'member-group-id';
+    const memberEntityId = 'member-entity-id';
+    let groupListRequests = 0;
+    let entityListRequests = 0;
+
+    this.server.get(`/identity/group/id/${groupId}`, () => ({
+      data: {
+        id: groupId,
+        name: 'example group',
+        type: 'internal',
+        member_group_ids: [memberGroupId],
+        member_entity_ids: [memberEntityId],
+      },
+    }));
+    this.server.get('/identity/group/id', () => {
+      groupListRequests++;
+      return {
+        data: {
+          keys: [memberGroupId],
+          key_info: { [memberGroupId]: { name: 'member group' } },
+        },
+      };
+    });
+    this.server.get('/identity/entity/id', () => {
+      entityListRequests++;
+      return {
+        data: {
+          keys: [memberEntityId],
+          key_info: { [memberEntityId]: { name: 'member entity' } },
+        },
+      };
+    });
+
+    await visit(`/vault/access/identity/groups/${groupId}/members`);
+
+    assert
+      .dom(`[data-test-identity-item-name="${memberGroupId}"]`)
+      .hasText('member group')
+      .hasAttribute('title', memberGroupId);
+    assert
+      .dom(`[data-test-identity-item-name="${memberEntityId}"]`)
+      .hasText('member entity')
+      .hasAttribute('title', memberEntityId);
+    assert.strictEqual(groupListRequests, 1, 'loads all member group names with one list request');
+    assert.strictEqual(entityListRequests, 1, 'loads all member entity names with one list request');
+  });
+
+  test('related identity names: it falls back to IDs when the list request fails', async function (assert) {
+    const entityId = 'entity-id';
+    const groupId = 'group-id';
+
+    this.server.get(`/identity/entity/id/${entityId}`, () => ({
+      data: {
+        id: entityId,
+        name: 'example entity',
+        direct_group_ids: [groupId],
+      },
+    }));
+    this.server.get('/identity/group/id', () => new Response(403, {}, { errors: ['permission denied'] }));
+
+    await visit(`/vault/access/identity/entities/${entityId}/groups`);
+
+    assert.dom(`[data-test-identity-item-name="${groupId}"]`).hasText(groupId);
+  });
 });