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

web/packages/shared/components/Search/SearchPanel.tsx

@@ -36,8 +36,8 @@ export function SearchPanel({
   hideAdvancedSearch,
   extraChildren,
 }: {
-  updateQuery(s: string): void;
-  updateSearch(s: string): void;
+  updateQuery?: (s: string) => void;
+  updateSearch: (s: string) => void;
   pageIndicators?: { from: number; to: number; total: number };
   filter: ResourceFilter;
   disableSearch: boolean;
@@ -60,11 +60,11 @@ export function SearchPanel({
     setQuery(newQuery);
 
     if (isAdvancedSearch) {
-      updateQuery(newQuery);
+      updateQuery?.(newQuery);
       return;
     }
 
-    updateSearch(newQuery);
+    updateSearch?.(newQuery);
   }
 
   return (

web/packages/teleport/src/BotInstances/List/BotInstancesList.tsx

@@ -83,7 +83,6 @@ export function BotInstancesList({
         serversideSearchPanel: (
           <SearchPanel
             updateSearch={onSearchChange}
-            updateQuery={null}
             hideAdvancedSearch={true}
             filter={{ search: searchTerm }}
             disableSearch={fetchStatus !== ''}

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

@@ -0,0 +1,134 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ReactElement } from 'react';
+
+import { Cell, LabelCell } from 'design/DataTable/Cells';
+import Table from 'design/DataTable/Table';
+import { FetchingConfig, SortType } from 'design/DataTable/types';
+import Flex from 'design/Flex';
+import Text from 'design/Text';
+import { CopyButton } from 'shared/components/CopyButton/CopyButton';
+import { SearchPanel } from 'shared/components/Search/SearchPanel';
+
+import { WorkloadIdentity } from 'teleport/services/workloadIdentity/types';
+
+export function WorkloadIdetitiesList({
+  data,
+  fetchStatus,
+  onFetchNext,
+  onFetchPrev,
+  sortType,
+  onSortChanged,
+  searchTerm,
+  onSearchChange,
+}: {
+  data: WorkloadIdentity[];
+  sortType: SortType;
+  onSortChanged: (sortType: SortType) => void;
+  searchTerm: string;
+  onSearchChange: (term: string) => void;
+} & Omit<FetchingConfig, 'onFetchMore'>) {
+  const tableData = data.map(d => ({
+    ...d,
+    spiffe_hint: valueOrEmpty(d.spiffe_hint),
+  }));
+
+  return (
+    <Table<(typeof tableData)[number]>
+      data={tableData}
+      fetching={{
+        fetchStatus,
+        onFetchNext,
+        onFetchPrev,
+        disableLoadingIndicator: true,
+      }}
+      serversideProps={{
+        sort: sortType,
+        setSort: onSortChanged,
+        serversideSearchPanel: (
+          <SearchPanel
+            updateSearch={onSearchChange}
+            hideAdvancedSearch={true}
+            filter={{ search: searchTerm }}
+            disableSearch={fetchStatus !== ''}
+          />
+        ),
+      }}
+      columns={[
+        {
+          key: 'name',
+          headerText: 'Name',
+          isSortable: true,
+        },
+        {
+          key: 'spiffe_id',
+          headerText: 'SPIFFE ID',
+          isSortable: true,
+          render: ({ spiffe_id }) => {
+            return spiffe_id ? (
+              <Cell>
+                <Flex inline alignItems={'center'} gap={1} mr={0}>
+                  <Text>
+                    {spiffe_id
+                      .split('/')
+                      .reduce<(ReactElement | string)[]>((acc, cur, i) => {
+                        if (i === 0) {
+                          acc.push(cur);
+                        } else {
+                          // Add break opportunities after each slash
+                          acc.push('/', <wbr key={cur} />, cur);
+                        }
+                        return acc;
+                      }, [])}
+                  </Text>
+                  <CopyButton value={spiffe_id} />
+                </Flex>
+              </Cell>
+            ) : (
+              <Cell>{valueOrEmpty(spiffe_id)}</Cell>
+            );
+          },
+        },
+        {
+          key: 'labels',
+          headerText: 'Labels',
+          isSortable: false,
+          render: ({ labels: labelsMap }) => {
+            const labels = labelsMap ? Object.entries(labelsMap) : undefined;
+            return labels?.length ? (
+              <LabelCell data={labels.map(([k, v]) => `${k}: ${v || '-'}`)} />
+            ) : (
+              <Cell>{valueOrEmpty('')}</Cell>
+            );
+          },
+        },
+        {
+          key: 'spiffe_hint',
+          headerText: 'Hint',
+          isSortable: false,
+        },
+      ]}
+      emptyText="No workload identities found"
+    />
+  );
+}
+
+function valueOrEmpty(value: string | null | undefined, empty = '-') {
+  return value || empty;
+}

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

@@ -0,0 +1,167 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createMemoryHistory } from 'history';
+import { MemoryRouter, Route, Router } from 'react-router';
+
+import cfg from 'teleport/config';
+import { createTeleportContext } from 'teleport/mocks/contexts';
+import { TeleportProviderBasic } from 'teleport/mocks/providers';
+import { defaultAccess, makeAcl } from 'teleport/services/user/makeAcl';
+import {
+  listWorkloadIdentitiesError,
+  listWorkloadIdentitiesForever,
+  listWorkloadIdentitiesSuccess,
+} from 'teleport/test/helpers/workloadIdentities';
+
+import { WorkloadIdentities } from './WorkloadIdentities';
+
+const meta = {
+  title: 'Teleport/WorkloadIdentity',
+  component: Wrapper,
+  beforeEach: () => {
+    queryClient.clear(); // Prevent cached data sharing between stories
+  },
+} satisfies Meta<typeof Wrapper>;
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+
+export const Happy: Story = {
+  parameters: {
+    msw: {
+      handlers: [listWorkloadIdentitiesSuccess()],
+    },
+  },
+};
+
+export const Empty: Story = {
+  parameters: {
+    msw: {
+      handlers: [
+        listWorkloadIdentitiesSuccess({
+          items: [],
+          next_page_token: null,
+        }),
+      ],
+    },
+  },
+};
+
+export const NoListPermission: Story = {
+  args: { hasListPermission: false },
+  parameters: {
+    msw: {
+      handlers: [
+        /* should never make a call */
+      ],
+    },
+  },
+};
+
+export const Error: Story = {
+  parameters: {
+    msw: {
+      handlers: [listWorkloadIdentitiesError(500, 'something went wrong')],
+    },
+  },
+};
+
+export const OutdatedProxy: Story = {
+  parameters: {
+    msw: {
+      handlers: [
+        listWorkloadIdentitiesError(404, 'path not found', {
+          proxyVersion: {
+            major: 18,
+            minor: 0,
+            patch: 0,
+            preRelease: '',
+            string: '18.0.0',
+          },
+        }),
+      ],
+    },
+  },
+};
+
+export const UnsupportedSort: Story = {
+  parameters: {
+    msw: {
+      handlers: [
+        listWorkloadIdentitiesError(
+          400,
+          'unsupported sort, with some more info'
+        ),
+      ],
+    },
+  },
+};
+
+export const Loading: Story = {
+  parameters: {
+    msw: {
+      handlers: [listWorkloadIdentitiesForever()],
+    },
+  },
+};
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+});
+
+function Wrapper(props?: { hasListPermission?: boolean }) {
+  const { hasListPermission = true } = props ?? {};
+
+  const history = createMemoryHistory({
+    initialEntries: [cfg.routes.workloadIdentities],
+  });
+
+  const customAcl = makeAcl({
+    workloadIdentity: {
+      ...defaultAccess,
+      list: hasListPermission,
+    },
+  });
+
+  const ctx = createTeleportContext({
+    customAcl,
+  });
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        <TeleportProviderBasic teleportCtx={ctx}>
+          <Router history={history}>
+            <Route path={cfg.routes.workloadIdentities}>
+              <WorkloadIdentities />
+            </Route>
+          </Router>
+        </TeleportProviderBasic>
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+}