change: [M3-8151] - Allow Linode Select options to be disabled on a per-option basis (#12585)

* Allow Linode Select options to be disabled on a per-option basis

* Added changeset: Allow Linode Select options to be disabled on a per-option basis

* Update LinodeSelect.tsx

* PR feedback - @HanaXu

Author: cpathipa

packages/shared/.changeset/pr-12585-changed-1753475926906.md

@@ -0,0 +1,5 @@
+---
+"@linode/shared": Changed
+---
+
+Allow Linode Select options to be disabled on a per-option basis ([#12585](https://github.com/linode/manager/pull/12585))

packages/shared/src/components/LinodeSelect/LinodeSelect.test.tsx

@@ -147,4 +147,31 @@ describe('LinodeSelect', () => {
       ).not.toBeInTheDocument();
     });
   });
+
+  test('should display disabled reason when a Linode is disabled', async () => {
+    const linode = linodeFactory.build({ id: 123, label: 'My Linode' });
+    const disabledReason = 'You do not have access to this Linode';
+
+    const screen = renderWithWrappers(
+      <LinodeSelect
+        disabledLinodes={{ 123: disabledReason }}
+        multiple={false}
+        onSelectionChange={vi.fn()}
+        options={[linode]}
+        value={null}
+      />,
+      [QueryClientWrapper(), ThemeWrapper()],
+    );
+
+    const input = screen.getByTestId(TEXTFIELD_ID);
+    await userEvent.click(input);
+
+    await waitFor(() => {
+      // Ensure the label is in the dropdown
+      expect(screen.getByText('My Linode')).toBeInTheDocument();
+
+      // Ensure the disabled reason is displayed
+      expect(screen.getByText(disabledReason)).toBeInTheDocument();
+    });
+  });
 });

packages/shared/src/components/LinodeSelect/LinodeSelect.tsx

@@ -1,5 +1,11 @@
 import { useAllLinodesQuery } from '@linode/queries';
-import { Autocomplete, CloseIcon, CustomPopper } from '@linode/ui';
+import {
+  Autocomplete,
+  CloseIcon,
+  CustomPopper,
+  ListItemOption,
+  Typography,
+} from '@linode/ui';
 import { mapIdsToDevices } from '@linode/utilities';
 import React from 'react';
 
@@ -16,6 +22,8 @@ interface LinodeSelectProps {
   clearable?: boolean;
   /** Disable editing the input value. */
   disabled?: boolean;
+  /** Map of Linode IDs to be disabled with a reason. */
+  disabledLinodes?: Record<number, string>;
   /** Hint displayed with error styling. */
   errorText?: string;
   /** Filter sent to the API when retrieving account Linodes. */
@@ -76,6 +84,7 @@ export const LinodeSelect = (
     checkIsOptionEqualToValue,
     clearable = true,
     disabled,
+    disabledLinodes,
     errorText,
     filter,
     getOptionDisabled,
@@ -121,7 +130,9 @@ export const LinodeSelect = (
       disabled={disabled}
       disablePortal={true}
       errorText={error?.[0].reason ?? errorText}
-      getOptionDisabled={getOptionDisabled}
+      getOptionDisabled={(linode) =>
+        !!disabledLinodes?.[linode.id] || getOptionDisabled?.(linode) || false
+      }
       helperText={helperText}
       id={id}
       inputValue={inputValue}
@@ -153,6 +164,24 @@ export const LinodeSelect = (
             : 'Select a Linode'
       }
       PopperComponent={CustomPopper}
+      renderOption={(props, linode, { selected }) => {
+        const { key, ...restProps } = props; // Avoids passing `key` via props, which triggers React console warnings.
+        return (
+          <ListItemOption
+            disabledOptions={
+              disabledLinodes?.[linode.id]
+                ? { reason: disabledLinodes[linode.id] }
+                : undefined
+            }
+            item={linode}
+            key={key}
+            props={restProps}
+            selected={selected}
+          >
+            <Typography>{linode.label}</Typography>
+          </ListItemOption>
+        );
+      }}
       slotProps={{ chip: { deleteIcon: <CloseIcon /> } }}
       sx={sx}
       value={