feat(webui): Add Workload Identities list by nicholasmarais1158 · Pull Request #58971 · gravitational/teleport

nicholasmarais1158 · 2025-09-10T11:43:23Z

Summary

This change adds a Workload Identities list to the web UI. It's a loose clone of the existing Bot Instances list. It is paginated, can be server-side sorted by name or SPIFFE ID, and supports filtering by search term contained in the name, SPIFFE ID or SPIFFE hint fields.

There are a few differences compared to the Bot Instances implementation;

There are separate sorting params for field and direction, instead of name:asc. This is mimicked by the server-side implementation (see feat(webapi): Add GET /webapi/sites/:site/workload-identity #58917).
There's an empty/welcome component that's shown when there are zero records, not including when a search/filter return zero hits.

Updates: #53582
Changelog: Added a Workload Identities page to the web UI to list workload identities

Changes

Add workload identities list
Add stories

Demo

Screen.Recording.2025-09-11.at.17.34.29.mov

Reviewer notes

Create a few Workload Identities using tctl create (instructions here).

Alternatively, I've used a sql script to insert many; workload-identities.sql.

$ sqlite3 <your cluster dir>/data/backend/sqlite.db

sqlite> .read workload-identities.sql

Check storybook to see the edge-cases, such as no permissions, errors and welcome empty state.

# Conflicts: # lib/cache/workload_identity_test.go

This reverts commit 842b9cb.

bl-nero · 2025-09-12T14:00:23Z

web/packages/teleport/src/WorkloadIdentity/List/WorkloadIdentitiesList.tsx

+        serversideSearchPanel: (
+          <SearchPanel
+            updateSearch={onSearchChange}
+            hideAdvancedSearch={true}


Why do we hide advanced search?

It is not implemented for this endpoint. Only a text-contains search is supported.

bl-nero · 2025-09-12T14:12:23Z

web/packages/teleport/src/WorkloadIdentity/List/WorkloadIdentitiesList.tsx

+  );
+}
+
+function valueOrEmpty(value: string | null | undefined, empty = '-') {


Is the empty parameter actually used anywhere?

No, but I felt the function was more complete this way and self-documenting.

bl-nero · 2025-09-12T14:16:36Z

web/packages/teleport/src/WorkloadIdentity/WorkloadIdentities.test.tsx

+      sortField: 'name',
+      sortDir: 'ASC',
+    });
+  });


Am I right that most of these tests don't actually verify what's been rendered? It may be prudent to verify that apart from calling API endpoints, the test verifies that the response has been used to rerender the UI.

Many don't, that's correct.

Given some of the tests verify the list is rendered correctly (such as "Shows a list") and the list just shows exactly what the API returns, I didn't think it was necessary to validate rendering the list for every case. Can you see an edge-case that I'm not covering?

ravicious · 2025-09-12T16:21:07Z

web/packages/teleport/src/WorkloadIdentity/WorkloadIdentities.tsx

+
+export function WorkloadIdentities() {
+  const history = useHistory();
+  const location = useLocation<{ prevPageTokens?: readonly string[] }>();


Where does the need for maintaining prevPageTokens come from? Isn't it enough to update the page query param?

Relying on the query param and paging backwards using the browser back, presents it own set of problems. Namely, you can't know if there is a previous page to go back to.

Do you know an alternate approach?

Oh I forgot that this must not only work with browser navigation buttons but also when you manually click on the button within the table that gets you to the previous page. In which case you need to maintain some kind of list of the page query params somewhere.

I think I was also confused as this might've been the first time I saw the use of a location state! Connect doesn't use React Router so I didn't have to pay attention to that. I also don't intuitively understand why we need to store prevPageTokens on the location rather than in a separate piece of state. Is this because React Router hooks into browser's history so that if I hold the back button in the browser and jump three pages back, React Router will know the exact prevPageTokens at that point in the navigation history?

Location state is part of the History API, if I'm not mistaken. Navigating using the browser back/forward will recall the location state at that point including the prevPageTokens supplied when originally navigating to that location.

web/packages/teleport/src/WorkloadIdentity/WorkloadIdentities.tsx

web/packages/teleport/src/WorkloadIdentity/List/WorkloadIdentitiesList.tsx

…arais1158/mwi-workload-id-list-ui

ravicious · 2025-09-15T14:22:41Z

web/packages/teleport/src/WorkloadIdentity/WorkloadIdentities.tsx

+
+export function WorkloadIdentities() {
+  const history = useHistory();
+  const location = useLocation<{ prevPageTokens?: readonly string[] }>();


Oh I forgot that this must not only work with browser navigation buttons but also when you manually click on the button within the table that gets you to the previous page. In which case you need to maintain some kind of list of the page query params somewhere.

I think I was also confused as this might've been the first time I saw the use of a location state! Connect doesn't use React Router so I didn't have to pay attention to that. I also don't intuitively understand why we need to store prevPageTokens on the location rather than in a separate piece of state. Is this because React Router hooks into browser's history so that if I hold the back button in the browser and jump three pages back, React Router will know the exact prevPageTokens at that point in the navigation history?

web/packages/teleport/src/WorkloadIdentity/WorkloadIdentities.tsx

web/packages/teleport/src/WorkloadIdentity/List/WorkloadIdentitiesList.tsx

# Conflicts: # lib/cache/workload_identity.go # lib/cache/workload_identity_test.go # web/packages/teleport/src/services/workloadIdentity/workloadIdentity.ts # web/packages/teleport/src/test/helpers/workloadIdentities.ts

backport-bot-workflows · 2025-09-19T17:27:11Z

@nicholasmarais1158 See the table below for backport results.

Branch	Result
branch/v17	Failed
branch/v18	Failed

* Add ACLs for workload identity * Add list workload identities to webapi * Add `newWebPackWithOptions` * Add sorting by name and spiffe id * Add filter by search term * Use `require.ErrorContains` * Refactor `newWebPackWithOptions` * Use `t.Context()` * Add context to uses of `require.NoError` in loops * Tidy-up * Un-deprecate `newWebPack` * Rename `KindWorkloadIdentity` * Add client-side API support for sort and filter * Handle endpoint not supported scenario * Fix cache keys for spiffe id index * Add and use `ListWorkloadIdentitiesV2` RPC * Return `CompareFailedError` for sorting unavailable * Split sort into two fields (field and direction) * Update unsupported sort tests * Make `updateQuery` callback optional on `SearchPanel` * Add workload identities list * Add tests * Add stories * Rename nav item to "Workload Identities" Co-authored-by: Zac Bergquist <zac.bergquist@goteleport.com> * Revert change to conditional render (SearchPanel) * Remove mono-spaced text * Suggested code refinements * Join spiffe_id page keys with a pipe * Join spiffe_id page keys with a pipe * Revert "Join spiffe_id page keys with a pipe" This reverts commit 842b9cb. * Base32 hex encode id for cache key * Add missing useCallback dep * Fix word break opportunities on Firefox --------- Co-authored-by: Zac Bergquist <zac.bergquist@goteleport.com>

* feat(webui): Add Workload Identities list (#58971) * Add ACLs for workload identity * Add list workload identities to webapi * Add `newWebPackWithOptions` * Add sorting by name and spiffe id * Add filter by search term * Use `require.ErrorContains` * Refactor `newWebPackWithOptions` * Use `t.Context()` * Add context to uses of `require.NoError` in loops * Tidy-up * Un-deprecate `newWebPack` * Rename `KindWorkloadIdentity` * Add client-side API support for sort and filter * Handle endpoint not supported scenario * Fix cache keys for spiffe id index * Add and use `ListWorkloadIdentitiesV2` RPC * Return `CompareFailedError` for sorting unavailable * Split sort into two fields (field and direction) * Update unsupported sort tests * Make `updateQuery` callback optional on `SearchPanel` * Add workload identities list * Add tests * Add stories * Rename nav item to "Workload Identities" Co-authored-by: Zac Bergquist <zac.bergquist@goteleport.com> * Revert change to conditional render (SearchPanel) * Remove mono-spaced text * Suggested code refinements * Join spiffe_id page keys with a pipe * Join spiffe_id page keys with a pipe * Revert "Join spiffe_id page keys with a pipe" This reverts commit 842b9cb. * Base32 hex encode id for cache key * Add missing useCallback dep * Fix word break opportunities on Firefox --------- Co-authored-by: Zac Bergquist <zac.bergquist@goteleport.com> * Fix `CopyButton` conflict --------- Co-authored-by: Zac Bergquist <zac.bergquist@goteleport.com>

* Add ACLs for workload identity * Add list workload identities to webapi * Add `newWebPackWithOptions` * Add sorting by name and spiffe id * Add filter by search term * Use `require.ErrorContains` * Refactor `newWebPackWithOptions` * Use `t.Context()` * Add context to uses of `require.NoError` in loops * Tidy-up * Un-deprecate `newWebPack` * Rename `KindWorkloadIdentity` * Add client-side API support for sort and filter * Handle endpoint not supported scenario * Fix cache keys for spiffe id index * Add and use `ListWorkloadIdentitiesV2` RPC * Return `CompareFailedError` for sorting unavailable * Split sort into two fields (field and direction) * Update unsupported sort tests * Make `updateQuery` callback optional on `SearchPanel` * Add workload identities list * Add tests * Add stories * Rename nav item to "Workload Identities" * Revert change to conditional render (SearchPanel) * Remove mono-spaced text * Suggested code refinements * Join spiffe_id page keys with a pipe * Join spiffe_id page keys with a pipe * Revert "Join spiffe_id page keys with a pipe" This reverts commit 842b9cb. * Base32 hex encode id for cache key * Add missing useCallback dep * Fix word break opportunities on Firefox --------- Co-authored-by: Zac Bergquist <zac.bergquist@goteleport.com>

nicholasmarais1158 added 16 commits September 9, 2025 11:01

Add ACLs for workload identity

ad276a8

Add list workload identities to webapi

4ae65c0

Add newWebPackWithOptions

ec33356

Add sorting by name and spiffe id

9f81a86

Add filter by search term

07f4139

Use require.ErrorContains

8e7628d

Refactor newWebPackWithOptions

d217a5f

Merge branch 'master' into nicholasmarais1158/mwi-workload-id-list

f1207b3

# Conflicts: # lib/cache/workload_identity_test.go

Use t.Context()

c684522

Add context to uses of require.NoError in loops

b75965e

Tidy-up

7b2f320

Un-deprecate newWebPack

77bc7fc

Rename KindWorkloadIdentity

732294c

Add client-side API support for sort and filter

93553af

Handle endpoint not supported scenario

01c837a

Fix cache keys for spiffe id index

d0479ac

nicholasmarais1158 self-assigned this Sep 10, 2025

nicholasmarais1158 added machine-id backport/branch/v17 backport/branch/v18 labels Sep 10, 2025

nicholasmarais1158 added 5 commits September 10, 2025 15:37

Add and use ListWorkloadIdentitiesV2 RPC

e5de35c

Return CompareFailedError for sorting unavailable

90541bb

Split sort into two fields (field and direction)

2c01c6d

Update unsupported sort tests

ac445a2

Make updateQuery callback optional on SearchPanel

a90cb3d

nicholasmarais1158 force-pushed the nicholasmarais1158/mwi-workload-id-list-ui branch from cebc88f to f1502fa Compare September 11, 2025 16:06

nicholasmarais1158 added 3 commits September 11, 2025 18:06

Add workload identities list

5dd7740

Add tests

aaa84a1

Add stories

4156c27

nicholasmarais1158 force-pushed the nicholasmarais1158/mwi-workload-id-list-ui branch from f1502fa to 4156c27 Compare September 11, 2025 17:07

nicholasmarais1158 requested a review from zmb3 September 12, 2025 08:23

nicholasmarais1158 added 4 commits September 12, 2025 09:39

Suggested code refinements

5e8c224

Join spiffe_id page keys with a pipe

842b9cb

Join spiffe_id page keys with a pipe

0a417d2

Revert "Join spiffe_id page keys with a pipe"

4da26de

This reverts commit 842b9cb.

bl-nero approved these changes Sep 12, 2025

View reviewed changes

ravicious reviewed Sep 12, 2025

View reviewed changes

nicholasmarais1158 added 4 commits September 15, 2025 10:21

Base32 hex encode id for cache key

9495c8a

Merge branch 'nicholasmarais1158/mwi-workload-id-list' into nicholasm…

036084d

…arais1158/mwi-workload-id-list-ui

Add missing useCallback dep

1265ced

Fix word break opportunities on Firefox

b3d80cc

nicholasmarais1158 requested review from bl-nero and ravicious September 15, 2025 11:56

ravicious mentioned this pull request Sep 15, 2025

Turn off react-hooks/preserve-manual-memoization ESLint rule #59134

Merged

ravicious approved these changes Sep 15, 2025

View reviewed changes

Base automatically changed from nicholasmarais1158/mwi-workload-id-list to master September 19, 2025 16:43

nicholasmarais1158 added this pull request to the merge queue Sep 19, 2025

Merged via the queue into master with commit c943e0e Sep 19, 2025
42 checks passed

nicholasmarais1158 deleted the nicholasmarais1158/mwi-workload-id-list-ui branch September 19, 2025 17:25

This was referenced Sep 23, 2025

[v17] feat(webui): Add Workload Identities list #59478

Merged

[v18] feat(webui): Add Workload Identities list #59479

Merged

strideynet mentioned this pull request Sep 24, 2025

MWI UI: Workload Identity List #53582

Closed

Conversation

nicholasmarais1158 commented Sep 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Demo

Reviewer notes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

backport-bot-workflows bot commented Sep 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

nicholasmarais1158 commented Sep 10, 2025 •

edited

Loading