feat: [UIE-9722] - IAM: disable cards for linode create (#13142)

* feat: [UIE-9722] - IAM: disable cards

* Added changeset: IAM: disable/enable fields based on create_linode permission

Author: aaleksee-akamai

packages/manager/.changeset/pr-13142-fixed-1764342267912.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+IAM: disable/enable fields based on create_linode permission ([#13142](https://github.com/linode/manager/pull/13142))

packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSelect.tsx

@@ -11,6 +11,7 @@ import React, { useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
 
 import { AppsList } from './AppsList';
 import { categoryOptions } from './utilities';
@@ -37,6 +38,8 @@ export const AppSelect = (props: Props) => {
   const [query, setQuery] = useState('');
   const [category, setCategory] = useState<AppCategory>();
 
+  const { data: permissions } = usePermissions('account', ['create_linode']);
+
   return (
     <Paper>
       <Stack spacing={2}>
@@ -47,7 +50,7 @@ export const AppSelect = (props: Props) => {
         <Stack direction="row" flexWrap="wrap" gap={1}>
           <DebouncedSearchTextField
             containerProps={{ flexGrow: 1 }}
-            disabled={isLoading}
+            disabled={isLoading || !permissions?.create_linode}
             fullWidth
             hideLabel
             inputSlotProps={{ sx: { maxWidth: 'unset !important' } }}
@@ -59,7 +62,7 @@ export const AppSelect = (props: Props) => {
             value={query}
           />
           <Autocomplete
-            disabled={isLoading}
+            disabled={isLoading || !permissions?.create_linode}
             label="Select category"
             onChange={(e, value) => setCategory(value?.label)}
             options={categoryOptions}

packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSelectionCard.test.tsx

@@ -5,6 +5,17 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { AppSelectionCard } from './AppSelectionCard';
 
+const queryMocks = vi.hoisted(() => ({
+  userPermissions: vi.fn(() => ({
+    data: {
+      create_linode: true,
+    },
+  })),
+}));
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.userPermissions,
+}));
+
 describe('AppSelectionCard', () => {
   it('Should render an a label', () => {
     const { getByText } = renderWithTheme(
@@ -56,4 +67,38 @@ describe('AppSelectionCard', () => {
     expect(onOpenDetailsDrawer).toHaveBeenCalled();
     expect(onSelect).not.toHaveBeenCalled();
   });
+
+  it('should enable the card when user has create_linode permission', async () => {
+    const { getByTestId } = renderWithTheme(
+      <AppSelectionCard
+        checked={false}
+        iconUrl={''}
+        label="MySQL"
+        onOpenDetailsDrawer={vi.fn()}
+        onSelect={vi.fn()}
+      />
+    );
+
+    expect(getByTestId('selection-card')).toBeEnabled();
+  });
+
+  it('should disable the card when user does not have create_linode permission', async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      data: {
+        create_linode: false,
+      },
+    });
+
+    const { getByTestId } = renderWithTheme(
+      <AppSelectionCard
+        checked={false}
+        iconUrl={''}
+        label="MySQL"
+        onOpenDetailsDrawer={vi.fn()}
+        onSelect={vi.fn()}
+      />
+    );
+
+    expect(getByTestId('selection-card')).toBeDisabled();
+  });
 });

packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSelectionCard.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import Info from 'src/assets/icons/info.svg';
 import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
 
 import { getMarketplaceAppLabel } from './utilities';
 
@@ -34,6 +35,8 @@ interface Props {
 export const AppSelectionCard = (props: Props) => {
   const { checked, iconUrl, label, onOpenDetailsDrawer, onSelect } = props;
 
+  const { data: permissions } = usePermissions('account', ['create_linode']);
+
   const handleInfoClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     e.preventDefault();
@@ -73,6 +76,7 @@ export const AppSelectionCard = (props: Props) => {
   return (
     <SelectionCard
       checked={checked}
+      disabled={!permissions?.create_linode}
       heading={displayLabel}
       headingDecoration={headingDecoration}
       onClick={onSelect}