From 81b8456ff06f43bdaaa29cb0dd5d350a97bd6958 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Wed, 29 Oct 2025 12:01:02 +0100
Subject: [PATCH 1/3] UIE-9456 & UIE-9457

---
 .../RolesTable/AssignSelectedRolesDrawer.tsx  |  2 +-
 .../IAM/Roles/RolesTable/RolesTable.tsx       | 25 +++++++++++++------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/manager/src/features/IAM/Roles/RolesTable/AssignSelectedRolesDrawer.tsx b/packages/manager/src/features/IAM/Roles/RolesTable/AssignSelectedRolesDrawer.tsx
index 40fec42a1ea..9194cfd11b1 100644
--- a/packages/manager/src/features/IAM/Roles/RolesTable/AssignSelectedRolesDrawer.tsx
+++ b/packages/manager/src/features/IAM/Roles/RolesTable/AssignSelectedRolesDrawer.tsx
@@ -179,7 +179,7 @@ export const AssignSelectedRolesDrawer = ({
             })}
           >
             <Typography mb={theme.spacingFunction(8)} variant="h3">
-              Users
+              User
             </Typography>
 
             <Controller
diff --git a/packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.tsx b/packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.tsx
index 29abe650844..c5698da5077 100644
--- a/packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.tsx
+++ b/packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.tsx
@@ -3,6 +3,7 @@ import { capitalizeAllWords } from '@linode/utilities';
 import { useTheme } from '@mui/material';
 import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
+import { useLocation, useNavigate, useSearch } from '@tanstack/react-router';
 import { Pagination } from 'akamai-cds-react-components/Pagination';
 import {
   sortRows,
@@ -59,8 +60,12 @@ const DEFAULT_PAGE_SIZE = 10;
 
 export const RolesTable = ({ roles = [] }: Props) => {
   const theme = useTheme();
-  // Filter string for the search bar
-  const [filterString, setFilterString] = React.useState('');
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { query } = useSearch({
+    strict: false,
+  });
+
   const [filterableEntityType, setFilterableEntityType] =
     useState<null | SelectOption>(ALL_ROLES_OPTION);
   const [sort, setSort] = useState<
@@ -94,10 +99,11 @@ export const RolesTable = ({ roles = [] }: Props) => {
     );
   };
 
-  const filteredRows = React.useMemo(
-    () => getFilteredRows(filterString, filterableEntityType?.value),
-    [roles, filterString, filterableEntityType]
-  );
+  const filteredRows = React.useMemo(() => {
+    if (!query) return roles;
+
+    return getFilteredRows(query, filterableEntityType?.value);
+  }, [roles, query, filterableEntityType]);
 
   // Get just the list of entity types from this list of roles, to be used in the selection filter
   const filterableOptions = React.useMemo(() => {
@@ -137,7 +143,10 @@ export const RolesTable = ({ roles = [] }: Props) => {
   };
 
   const handleTextFilter = (fs: string) => {
-    setFilterString(fs);
+    navigate({
+      to: location.pathname,
+      search: { query: fs !== '' ? fs : undefined },
+    });
     pagination.handlePageChange(1);
   };
 
@@ -199,7 +208,7 @@ export const RolesTable = ({ roles = [] }: Props) => {
               label="Search"
               onSearch={handleTextFilter}
               placeholder="Search"
-              value={filterString}
+              value={query ?? ''}
             />
             <Select
               hideLabel

From 29d4f3dd96542495a0dec56241d8347a35eb1a46 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Wed, 29 Oct 2025 16:47:26 +0100
Subject: [PATCH 2/3] test

---
 .../IAM/Roles/RolesTable/RolesTable.test.tsx  | 81 ++++++++++---------
 1 file changed, 44 insertions(+), 37 deletions(-)

diff --git a/packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.test.tsx b/packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.test.tsx
index ea0def51cc7..141e3916268 100644
--- a/packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.test.tsx
+++ b/packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import React from 'react';
 
 import { renderWithTheme, resizeScreenSize } from 'src/utilities/testHelpers';
@@ -7,14 +7,13 @@ import { RolesTable } from './RolesTable';
 
 import type { RoleView } from '../../Shared/types';
 
-const queryMocks = {
+const queryMocks = vi.hoisted(() => ({
   usePermissions: vi.fn(),
-};
+  useSearch: vi.fn(),
+}));
 
 vi.mock('src/features/IAM/Shared/utilities', async () => {
-  const actual = await vi.importActual<any>(
-    'src/features/IAM/Shared/utilities'
-  );
+  const actual = await vi.importActual('src/features/IAM/Shared/utilities');
   return {
     ...actual,
     mapAccountPermissionsToRoles: vi.fn(),
@@ -22,15 +21,21 @@ vi.mock('src/features/IAM/Shared/utilities', async () => {
 });
 
 vi.mock('src/features/IAM/hooks/usePermissions', async () => {
-  const actual = await vi.importActual<any>(
-    'src/features/IAM/hooks/usePermissions'
-  );
+  const actual = await vi.importActual('src/features/IAM/hooks/usePermissions');
   return {
     ...actual,
     usePermissions: vi.fn().mockReturnValue({}),
   };
 });
 
+vi.mock('@tanstack/react-router', async () => {
+  const actual = await vi.importActual('@tanstack/react-router');
+  return {
+    ...actual,
+    useSearch: queryMocks.useSearch,
+  };
+});
+
 const mockRoles: RoleView[] = [
   {
     access: 'account_access',
@@ -63,52 +68,54 @@ beforeEach(() => {
 });
 
 describe('RolesTable', () => {
+  beforeEach(() => {
+    queryMocks.useSearch.mockReturnValue({
+      query: '',
+    });
+  });
+
   it('renders no roles when roles array is empty', async () => {
-    const { getByText, getByTestId } = renderWithTheme(
-      <RolesTable roles={[]} />
-    );
+    renderWithTheme(<RolesTable roles={[]} />);
 
-    expect(getByTestId('roles-table')).toBeInTheDocument();
-    expect(getByText('No items to display.')).toBeInTheDocument();
+    screen.getByTestId('roles-table');
+    screen.getByText('No items to display.');
   });
 
   it('renders roles correctly when roles array is provided', async () => {
-    const { getByText, getByTestId, getAllByRole } = renderWithTheme(
-      <RolesTable roles={mockRoles} />
-    );
+    const { getAllByRole } = renderWithTheme(<RolesTable roles={mockRoles} />);
 
-    expect(getByTestId('roles-table')).toBeInTheDocument();
+    screen.getByTestId('roles-table');
     expect(getAllByRole('combobox').length).toEqual(1);
-    expect(getByText('Account linode admin')).toBeInTheDocument();
+    screen.getByText('Account linode admin');
   });
 
   it('filters roles to warranted results based on search input', async () => {
+    queryMocks.useSearch.mockReturnValue({
+      query: 'Account',
+    });
+
     renderWithTheme(<RolesTable roles={mockRoles} />);
+
     const searchInput: HTMLInputElement = screen.getByPlaceholderText('Search');
-    fireEvent.change(searchInput, { target: { value: 'Account' } });
-
-    await waitFor(() => {
-      expect(screen.getByTestId('roles-table')).toBeInTheDocument();
-      expect(searchInput.value).toBe('Account');
-      // TODO - if there is a way to pierce the shadow DOM, we can check these results, but these tests fail currently
-      // expect(screen.getByText('Account')).toBeInTheDocument();
-      // expect(screen.queryByText('Database')).not.toBeInTheDocument();
-      // expect(screen.getByText('No items to display.')).not.toBeInTheDocument();
-    });
+
+    screen.getByTestId('roles-table');
+
+    expect(searchInput.value).toBe('Account');
+    expect(screen.queryByText('Database')).not.toBeInTheDocument();
+    expect(screen.queryByText('No items to display.')).not.toBeInTheDocument();
   });
 
   it('filters roles to no results based on search input if warranted', async () => {
+    queryMocks.useSearch.mockReturnValue({
+      query: 'NonsenseThatWontMatchAnything',
+    });
+
     renderWithTheme(<RolesTable roles={mockRoles} />);
 
     const searchInput: HTMLInputElement = screen.getByPlaceholderText('Search');
-    fireEvent.change(searchInput, {
-      target: { value: 'NonsenseThatWontMatchAnything' },
-    });
 
-    await waitFor(() => {
-      expect(screen.getByTestId('roles-table')).toBeInTheDocument();
-      expect(searchInput.value).toBe('NonsenseThatWontMatchAnything');
-      expect(screen.getByText('No items to display.')).toBeInTheDocument();
-    });
+    screen.getByTestId('roles-table');
+    expect(searchInput.value).toBe('NonsenseThatWontMatchAnything');
+    screen.getByText('No items to display.');
   });
 });

From d6ea2fe80f80a698e064536ae25d228502e864e4 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Wed, 29 Oct 2025 17:16:03 +0100
Subject: [PATCH 3/3] Added changeset: Typo + expose search filters on
 /iam/roles route

---
 packages/manager/.changeset/pr-13034-fixed-1761754563010.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-13034-fixed-1761754563010.md

diff --git a/packages/manager/.changeset/pr-13034-fixed-1761754563010.md b/packages/manager/.changeset/pr-13034-fixed-1761754563010.md
new file mode 100644
index 00000000000..3526073b2e0
--- /dev/null
+++ b/packages/manager/.changeset/pr-13034-fixed-1761754563010.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Typo + expose search filters on /iam/roles route ([#13034](https://github.com/linode/manager/pull/13034))