fix: [UIE-9245] - EntitiesSelect performance on large accounts (#13168)

* save progress

* Cleanup

* handle search

* handle search

* handle search

* Added changeset: EntitiesSelect performance on large accounts

* fix select all

* deselect all

Author: abailly-akamai

packages/manager/.changeset/pr-13168-fixed-1765192706974.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+EntitiesSelect performance on large accounts ([#13168](https://github.com/linode/manager/pull/13168))

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Link } from 'src/components/Link';
 
 import { ROLES_LEARN_MORE_LINK } from '../constants';
-import { Entities } from '../Entities/Entities';
+import { EntitiesSelect } from '../Entities/EntitiesSelect';
 import { Permissions } from '../Permissions/Permissions';
 import { type ExtendedRole, getFacadeRoleDescription } from '../utilities';
 import {
@@ -62,7 +62,7 @@ export const AssignedPermissionsPanel = ({
       )}
       {mode !== 'change-role-for-entity' && (
         <StyledEntityBox hideDetails={hideDetails}>
-          <Entities
+          <EntitiesSelect
             access={role.access}
             errorText={errorText}
             mode={mode}

…es/IAM/Shared/Entities/Entities.test.tsx …/Shared/Entities/EntitiesSelect.test.tsxpackages/manager/src/features/IAM/Shared/Entities/Entities.test.tsx renamed to packages/manager/src/features/IAM/Shared/Entities/EntitiesSelect.test.tsx packages/manager/src/features/IAM/Shared/Entities/Entities.test.tsx renamed to packages/manager/src/features/IAM/Shared/Entities/EntitiesSelect.test.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { accountEntityFactory } from 'src/factories/accountEntities';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import { Entities } from './Entities';
+import { EntitiesSelect } from './EntitiesSelect';
 
 import type { EntitiesOption } from '../types';
 
@@ -40,7 +40,7 @@ const mockValue: EntitiesOption[] = [];
 describe('Entities', () => {
   it('renders correct data when it is an account access and type is an account', () => {
     renderWithTheme(
-      <Entities
+      <EntitiesSelect
         access="account_access"
         mode="assign-role"
         onChange={mockOnChange}
@@ -61,7 +61,7 @@ describe('Entities', () => {
 
   it('renders correct data when it is an account access and type is not an account', () => {
     renderWithTheme(
-      <Entities
+      <EntitiesSelect
         access="account_access"
         mode="assign-role"
         onChange={mockOnChange}
@@ -86,7 +86,7 @@ describe('Entities', () => {
     });
 
     renderWithTheme(
-      <Entities
+      <EntitiesSelect
         access="entity_access"
         mode="assign-role"
         onChange={mockOnChange}
@@ -112,7 +112,7 @@ describe('Entities', () => {
     });
 
     renderWithTheme(
-      <Entities
+      <EntitiesSelect
         access="entity_access"
         mode="assign-role"
         onChange={mockOnChange}
@@ -138,7 +138,7 @@ describe('Entities', () => {
     });
 
     renderWithTheme(
-      <Entities
+      <EntitiesSelect
         access="entity_access"
         mode="assign-role"
         onChange={mockOnChange}
@@ -160,7 +160,7 @@ describe('Entities', () => {
     });
 
     renderWithTheme(
-      <Entities
+      <EntitiesSelect
         access="entity_access"
         mode="assign-role"
         onChange={mockOnChange}
@@ -176,7 +176,7 @@ describe('Entities', () => {
 
   it('renders Autocomplete as readonly when mode is "change-role"', () => {
     renderWithTheme(
-      <Entities
+      <EntitiesSelect
         access="entity_access"
         mode="change-role"
         onChange={mockOnChange}
@@ -194,7 +194,7 @@ describe('Entities', () => {
     const errorMessage = 'Entities are required.';
 
     renderWithTheme(
-      <Entities
+      <EntitiesSelect
         access="entity_access"
         errorText={errorMessage}
         mode="assign-role"

…eatures/IAM/Shared/Entities/Entities.tsx …s/IAM/Shared/Entities/EntitiesSelect.tsxpackages/manager/src/features/IAM/Shared/Entities/Entities.tsx renamed to packages/manager/src/features/IAM/Shared/Entities/EntitiesSelect.tsx packages/manager/src/features/IAM/Shared/Entities/Entities.tsx renamed to packages/manager/src/features/IAM/Shared/Entities/EntitiesSelect.tsx

@@ -26,17 +26,23 @@ interface Props {
   value: EntitiesOption[];
 }
 
-export const Entities = ({
+// For large entity lists, we want to display the initial 100 results and then load more as the user scrolls.
+const INITIAL_DISPLAY_COUNT = 100;
+
+export const EntitiesSelect = ({
   access,
   errorText,
   mode,
   onChange,
   type,
   value,
 }: Props) => {
-  const { data: entities } = useAllAccountEntities({});
+  const { data: entities, isLoading } = useAllAccountEntities({});
   const theme = useTheme();
 
+  const [displayCount, setDisplayCount] = React.useState(INITIAL_DISPLAY_COUNT);
+  const [inputValue, setInputValue] = React.useState('');
+
   const memoizedEntities = React.useMemo(() => {
     if (access !== 'entity_access' || !entities) {
       return [];
@@ -46,6 +52,30 @@ export const Entities = ({
     return typeEntities ? mapEntitiesToOptions(typeEntities) : [];
   }, [entities, access, type]);
 
+  const filteredEntities = React.useMemo(() => {
+    if (!inputValue) {
+      return memoizedEntities;
+    }
+
+    return memoizedEntities.filter((option) =>
+      option.label.toLowerCase().includes(inputValue.toLowerCase())
+    );
+  }, [memoizedEntities, inputValue]);
+
+  const visibleOptions = React.useMemo(() => {
+    const slice = filteredEntities.slice(0, displayCount);
+
+    const selectedNotVisible = value.filter(
+      (selected) => !slice.some((opt) => opt.value === selected.value)
+    );
+
+    return [...slice, ...selectedNotVisible];
+  }, [filteredEntities, displayCount, value]);
+
+  React.useEffect(() => {
+    setDisplayCount(INITIAL_DISPLAY_COUNT);
+  }, [filteredEntities]);
+
   if (access === 'account_access') {
     return (
       <>
@@ -75,16 +105,28 @@ export const Entities = ({
         getOptionLabel={(option) => option.label}
         isOptionEqualToValue={(option, value) => option.value === value.value}
         label="Entities"
+        loading={isLoading}
         multiple
         noMarginTop
-        onChange={(_, newValue) => {
-          onChange(newValue || []);
+        onChange={(_, newValue, reason) => {
+          if (
+            reason === 'selectOption' &&
+            newValue.length === displayCount &&
+            filteredEntities.length > displayCount
+          ) {
+            onChange(filteredEntities);
+          } else {
+            onChange(newValue || []);
+          }
         }}
-        options={memoizedEntities}
+        onInputChange={(_, value) => {
+          setInputValue(value);
+        }}
+        options={visibleOptions}
         placeholder={getPlaceholder(
           type,
           value.length,
-          memoizedEntities.length
+          filteredEntities.length
         )}
         readOnly={mode === 'change-role'}
         renderInput={(params) => (
@@ -97,10 +139,22 @@ export const Entities = ({
             placeholder={getPlaceholder(
               type,
               value.length,
-              memoizedEntities.length
+              filteredEntities.length
             )}
           />
         )}
+        slotProps={{
+          listbox: {
+            onScroll: (e) => {
+              const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+              if (scrollHeight - scrollTop <= clientHeight * 1.5) {
+                setDisplayCount((prev) =>
+                  Math.min(prev + 200, filteredEntities.length)
+                );
+              }
+            },
+          },
+        }}
         sx={{
           marginTop: 0,
           '& .MuiChip-root': {