feat: [UIE-10166] - IAM: url params for tables

packages/manager/.changeset/pr-13397-added-1770981264750.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+IAM: adds the URL params to Assigned Roles and Assigned Entities tables ([#13397](https://github.com/linode/manager/pull/13397))

packages/manager/src/features/IAM/Roles/Defaults/DefaultRoles.test.tsx

@@ -14,6 +14,8 @@ const loadingTestId = 'circle-progress';
 const queryMocks = vi.hoisted(() => ({
   useGetDefaultDelegationAccessQuery: vi.fn().mockReturnValue({}),
   useLocation: vi.fn().mockReturnValue({}),
+  useSearch: vi.fn().mockReturnValue({}),
+  useNavigate: vi.fn(() => vi.fn()),
   useIsDefaultDelegationRolesForChildAccount: vi
     .fn()
     .mockReturnValue({ isDefaultDelegationRolesForChildAccount: true }),
@@ -24,6 +26,8 @@ vi.mock('@tanstack/react-router', async () => {
   return {
     ...actual,
     useLocation: queryMocks.useLocation,
+    useSearch: queryMocks.useSearch,
+    useNavigate: queryMocks.useNavigate,
   };
 });
 
@@ -53,7 +57,6 @@ describe('DefaultRoles', () => {
       isLoading: false,
     });
     const { queryByTestId } = renderWithTheme(<DefaultRoles />);
-
     await waitForElementToBeRemoved(queryByTestId(loadingTestId));
     expect(screen.getByText('Default Roles for Delegate Users')).toBeVisible();
     expect(screen.getByRole('table')).toBeVisible();

packages/manager/src/features/IAM/Shared/AssignedEntitiesTable/AssignedEntitiesTable.test.tsx

@@ -12,6 +12,7 @@ const queryMocks = vi.hoisted(() => ({
   useAllAccountEntities: vi.fn().mockReturnValue({}),
   useParams: vi.fn().mockReturnValue({}),
   useSearch: vi.fn().mockReturnValue({}),
+  useNavigate: vi.fn(() => vi.fn()),
   useUserRoles: vi.fn().mockReturnValue({}),
 }));
 
@@ -37,6 +38,7 @@ vi.mock('@tanstack/react-router', async () => {
     ...actual,
     useParams: queryMocks.useParams,
     useSearch: queryMocks.useSearch,
+    useNavigate: queryMocks.useNavigate,
   };
 });
 
@@ -102,14 +104,11 @@ describe('AssignedEntitiesTable', () => {
       data: mockEntities,
     });
 
-    renderWithTheme(<AssignedEntitiesTable />);
+    queryMocks.useSearch.mockReturnValue({ query: 'NonExistentRole' });
 
-    const searchInput = screen.getByPlaceholderText('Search');
-    await userEvent.type(searchInput, 'NonExistentRole');
+    renderWithTheme(<AssignedEntitiesTable />);
 
-    await waitFor(() => {
-      expect(screen.getByText('No items to display.')).toBeVisible();
-    });
+    expect(screen.getByText('No items to display.')).toBeVisible();
   });
 
   it('should filter roles based on search query', async () => {

packages/manager/src/features/IAM/Shared/AssignedEntitiesTable/AssignedEntitiesTable.tsx

@@ -4,7 +4,7 @@ import {
 } from '@linode/queries';
 import { Select, Typography, useTheme } from '@linode/ui';
 import Grid from '@mui/material/Grid';
-import { useSearch } from '@tanstack/react-router';
+import { useNavigate, useSearch } from '@tanstack/react-router';
 import React from 'react';
 
 import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
@@ -55,38 +55,61 @@ interface Props {
   username?: string;
 }
 
+const DEFAULTS_ENTITIES_URL = '/iam/roles/defaults/entity-access';
+const USER_ENTITIES_URL = '/iam/users/$username/entities';
+
 export const AssignedEntitiesTable = ({ username }: Props) => {
   const theme = useTheme();
   const { data: permissions } = usePermissions('account', [
     'is_account_admin',
     'update_default_delegate_access',
     'list_entities',
   ]);
+  const navigate = useNavigate();
 
   const { isDefaultDelegationRolesForChildAccount } =
     useIsDefaultDelegationRolesForChildAccount();
 
-  const { selectedRole: selectedRoleSearchParam } = useSearch({
-    strict: false,
+  const {
+    query: queryParam,
+    entityType: entityTypeParam,
+    order: orderParam,
+    selectedRole: selectedRoleSearchParam,
+    orderBy: orderByParam,
+  } = useSearch({
+    from: isDefaultDelegationRolesForChildAccount
+      ? DEFAULTS_ENTITIES_URL
+      : USER_ENTITIES_URL,
   });
 
-  const [order, setOrder] = React.useState<'asc' | 'desc'>('asc');
-  const [orderBy, setOrderBy] = React.useState<OrderByKeys>('entity_name');
+  const order: 'asc' | 'desc' = orderParam === 'desc' ? 'desc' : 'asc';
+  const ORDERABLE_KEYS = ['entity_name', 'entity_type', 'role_name'] as const;
+  const isValidOrderBy = (v: unknown): v is OrderByKeys =>
+    ORDERABLE_KEYS.includes(v as OrderByKeys);
+  const orderBy: OrderByKeys = isValidOrderBy(orderByParam)
+    ? orderByParam
+    : 'entity_name';
 
   const handleOrderChange = (newOrderBy: OrderByKeys) => {
-    if (orderBy === newOrderBy) {
-      setOrder(order === 'asc' ? 'desc' : 'asc');
-    } else {
-      setOrderBy(newOrderBy);
-      setOrder('asc');
-    }
+    const nextOrder: 'asc' | 'desc' =
+      orderBy === newOrderBy ? (order === 'asc' ? 'desc' : 'asc') : 'asc';
+    navigate({
+      to: isDefaultDelegationRolesForChildAccount
+        ? DEFAULTS_ENTITIES_URL
+        : USER_ENTITIES_URL,
+      params: isDefaultDelegationRolesForChildAccount
+        ? undefined
+        : { username: username || '' },
+      search: (prev) => ({
+        ...prev,
+        order: nextOrder,
+        orderBy: newOrderBy,
+      }),
+    });
   };
 
-  const [query, setQuery] = React.useState(selectedRoleSearchParam ?? '');
-
-  const [entityType, setEntityType] = React.useState<null | SelectOption>(
-    ALL_ENTITIES_OPTION
-  );
+  // Use the router `query` param, falling back to `selectedRole` for initial value
+  const appliedQuery = queryParam ?? selectedRoleSearchParam ?? '';
 
   const [drawerMode, setDrawerMode] =
     React.useState<DrawerModes>('assign-role');
@@ -149,6 +172,14 @@ export const AssignedEntitiesTable = ({ username }: Props) => {
     return { filterableOptions, roles };
   }, [assignedRoles, entities]);
 
+  const selectedEntityTypeOption = React.useMemo<null | SelectOption>(() => {
+    const value = entityTypeParam ?? ALL_ENTITIES_OPTION.value;
+    return (
+      filterableOptions.find((opt) => opt.value === value) ||
+      ALL_ENTITIES_OPTION
+    );
+  }, [filterableOptions, entityTypeParam]);
+
   const handleChangeRole = (role: EntitiesRole, mode: DrawerModes) => {
     setIsChangeRoleForEntityDrawerOpen(true);
     setSelectedRole(role);
@@ -176,9 +207,9 @@ export const AssignedEntitiesTable = ({ username }: Props) => {
   };
 
   const filteredRoles = getFilteredRoles({
-    entityType: entityType?.value as 'all' | EntityType,
+    entityType: entityTypeParam ?? 'all',
     getSearchableFields,
-    query,
+    query: appliedQuery,
     roles,
   }) as EntitiesRole[];
 
@@ -197,8 +228,8 @@ export const AssignedEntitiesTable = ({ username }: Props) => {
 
   const pagination = usePaginationV2({
     currentRoute: isDefaultDelegationRolesForChildAccount
-      ? '/iam/roles/defaults/entity-access'
-      : `/iam/users/$username/entities`,
+      ? DEFAULTS_ENTITIES_URL
+      : USER_ENTITIES_URL,
     initialPage: 1,
     preferenceKey: ENTITIES_TABLE_PREFERENCE_KEY,
     clientSidePaginationData: filteredAndSortedRoles,
@@ -309,24 +340,48 @@ export const AssignedEntitiesTable = ({ username }: Props) => {
           hideLabel
           label="Filter"
           onSearch={(value) => {
-            pagination.handlePageChange(1);
-            setQuery(value);
+            navigate({
+              to: isDefaultDelegationRolesForChildAccount
+                ? DEFAULTS_ENTITIES_URL
+                : USER_ENTITIES_URL,
+              params: isDefaultDelegationRolesForChildAccount
+                ? undefined
+                : { username: username || '' },
+              search: (prev) => ({
+                ...prev,
+                page: 1,
+                query: value !== '' ? value : undefined,
+              }),
+            });
           }}
           placeholder="Search"
           sx={{ height: 34 }}
-          value={query}
+          value={appliedQuery}
         />
         <Select
           hideLabel
           label="Select type"
           onChange={(_, selected) => {
-            pagination.handlePageChange(1);
-            setEntityType(selected ?? null);
+            const nextEntityType = (selected?.value ??
+              ALL_ENTITIES_OPTION.value) as 'all' | EntityType;
+            navigate({
+              to: isDefaultDelegationRolesForChildAccount
+                ? DEFAULTS_ENTITIES_URL
+                : USER_ENTITIES_URL,
+              params: isDefaultDelegationRolesForChildAccount
+                ? undefined
+                : { username: username || '' },
+              search: (prev) => ({
+                ...prev,
+                page: 1,
+                entityType: nextEntityType,
+              }),
+            });
           }}
           options={filterableOptions}
           placeholder="All Entities"
           sx={{ minWidth: 250 }}
-          value={entityType}
+          value={selectedEntityTypeOption}
         />
       </Grid>
       <Table aria-label="Assigned Entities">

packages/manager/src/features/IAM/Shared/AssignedRolesTable/AssignedRolesTable.test.tsx

@@ -12,6 +12,8 @@ import { AssignedRolesTable } from './AssignedRolesTable';
 const queryMocks = vi.hoisted(() => ({
   useAllAccountEntities: vi.fn().mockReturnValue({}),
   useParams: vi.fn().mockReturnValue({}),
+  useNavigate: vi.fn(() => vi.fn()),
+  useSearch: vi.fn().mockReturnValue({}),
   useAccountRoles: vi.fn().mockReturnValue({}),
   useUserRoles: vi.fn().mockReturnValue({}),
   useGetDefaultDelegationAccessQuery: vi.fn().mockReturnValue({}),
@@ -44,6 +46,8 @@ vi.mock('@tanstack/react-router', async () => {
   return {
     ...actual,
     useParams: queryMocks.useParams,
+    useNavigate: queryMocks.useNavigate,
+    useSearch: queryMocks.useSearch,
   };
 });
 
@@ -125,14 +129,11 @@ describe('AssignedRolesTable', () => {
       data: mockEntities,
     });
 
-    renderWithTheme(<AssignedRolesTable />);
+    queryMocks.useSearch.mockReturnValue({ query: 'NonExistentRole' });
 
-    const searchInput = screen.getByPlaceholderText('Search');
-    await userEvent.type(searchInput, 'NonExistentRole');
+    renderWithTheme(<AssignedRolesTable />);
 
-    await waitFor(() => {
-      expect(screen.getByText('No items to display.')).toBeVisible();
-    });
+    expect(screen.getByText('No items to display.')).toBeVisible();
   });
 
   it('should filter roles based on search query', async () => {
@@ -150,8 +151,7 @@ describe('AssignedRolesTable', () => {
 
     renderWithTheme(<AssignedRolesTable />);
 
-    const searchInput = screen.getByPlaceholderText('Search');
-    await userEvent.type(searchInput, 'account_linode_admin');
+    queryMocks.useSearch.mockReturnValue({ query: 'account_linode_admin' });
 
     await waitFor(() => {
       expect(screen.queryByText('account_linode_admin')).toBeVisible();
@@ -173,9 +173,7 @@ describe('AssignedRolesTable', () => {
 
     renderWithTheme(<AssignedRolesTable />);
 
-    const autocomplete = screen.getByPlaceholderText('All Assigned Roles');
-    await userEvent.type(autocomplete, 'Firewall Roles');
-
+    queryMocks.useSearch.mockReturnValue({ roleType: 'firewall' });
     await waitFor(() => {
       expect(screen.queryByText('account_firewall_creator')).toBeVisible();
     });