feat: [M3-7683] - Disable Create Image button with tooltiptext on Lan…

…ding Page for restricted users (#10671)

* feat: [M3-7683] - Disable Create Image button with tooltiptext on Landing Page for restricted users

* Added changeset: Disable Create Image button with tooltiptext on Landing Page for restricted users

* refactor: [M3-7683] Making variables more descriptive

packages/manager/.changeset/pr-10671-added-1720708134201.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Disable Create Image button with tooltiptext on Landing Page for restricted users ([#10671](https://github.com/linode/manager/pull/10671))

packages/manager/src/features/Images/ImagesLanding/ImagesLanding.test.tsx

@@ -2,7 +2,7 @@ import { waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
-import { imageFactory } from 'src/factories';
+import { grantsFactory, imageFactory, profileFactory } from 'src/factories';
 import { makeResourcePage } from 'src/mocks/serverHandlers';
 import { HttpResponse, http, server } from 'src/mocks/testServer';
 import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
@@ -252,4 +252,41 @@ describe('Images Landing Table', () => {
 
     getByText(`Delete Image ${images[0].label}`);
   });
+
+  it('disables the create button if the user does not have permission to create images', async () => {
+    const images = imageFactory.buildList(3, {
+      regions: [
+        { region: 'us-east', status: 'available' },
+        { region: 'us-southeast', status: 'pending' },
+      ],
+    });
+    server.use(
+      http.get('*/v4/profile', () => {
+        const profile = profileFactory.build({ restricted: true });
+        return HttpResponse.json(profile);
+      }),
+      http.get('*/v4/profile/grants', () => {
+        const grants = grantsFactory.build({ global: { add_images: false } });
+        return HttpResponse.json(grants);
+      }),
+      http.get('*/v4/images', () => {
+        return HttpResponse.json(makeResourcePage(images));
+      })
+    );
+
+    const { getByTestId, getByText } = renderWithTheme(<ImagesLanding />);
+
+    // Loading state should render
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    const createImageButton = getByText('Create Image').closest('button');
+
+    expect(createImageButton).toBeDisabled();
+    expect(createImageButton).toHaveAttribute(
+      'data-qa-tooltip',
+      "You don't have permissions to create Images. Please contact your account administrator to request the necessary permissions."
+    );
+  });
 });

packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx

@@ -31,6 +31,7 @@ import { Typography } from 'src/components/Typography';
 import { useFlags } from 'src/hooks/useFlags';
 import { useOrder } from 'src/hooks/useOrder';
 import { usePagination } from 'src/hooks/usePagination';
+import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import {
   isEventImageUpload,
   isEventInProgressDiskImagize,
@@ -42,6 +43,7 @@ import {
   useImagesQuery,
 } from 'src/queries/images';
 import { getErrorStringOrDefault } from 'src/utilities/errorUtils';
+import { getRestrictedResourceText } from 'src/features/Account/utils';
 
 import { getEventsForImages } from '../utils';
 import { EditImageDrawer } from './EditImageDrawer';
@@ -93,6 +95,9 @@ export const ImagesLanding = () => {
   const { enqueueSnackbar } = useSnackbar();
   const flags = useFlags();
   const location = useLocation();
+  const isImagesReadOnly = useRestrictedGlobalGrantCheck({
+    globalGrantType: 'add_images',
+  });
   const queryParams = new URLSearchParams(location.search);
   const imageLabelFromParam = queryParams.get(searchQueryKey) ?? '';
 
@@ -379,6 +384,14 @@ export const ImagesLanding = () => {
         docsLink="https://www.linode.com/docs/platform/disk-images/linode-images/"
         entity="Image"
         onButtonClick={() => history.push('/images/create')}
+        buttonDataAttrs={{
+          tooltipText: getRestrictedResourceText({
+            action: 'create',
+            isSingular: false,
+            resourceType: 'Images',
+          }),
+        }}
+        disabledCreateButton={isImagesReadOnly}
         title="Images"
       />
       <TextField