fix: [M3-8193] - Check account access for disabling add tags button (#10583)

Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>

Author: jaalah-akamai

packages/manager/.changeset/pr-10583-fixed-1718375225734.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Users must be an unrestricted User in order to add or modify tags on Linodes ([#10583](https://github.com/linode/manager/pull/10583))

packages/manager/src/components/TagCell/TagCell.test.tsx

@@ -0,0 +1,41 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { TagCell } from './TagCell';
+
+describe('TagCell Component', () => {
+  const tags = ['tag1', 'tag2'];
+  const updateTags = vi.fn(() => Promise.resolve());
+
+  describe('Disabled States', () => {
+    it('does not allow adding a new tag when disabled', async () => {
+      const { getByTestId } = renderWithTheme(
+        <TagCell disabled tags={tags} updateTags={updateTags} />
+      );
+      const disabledButton = getByTestId('Button');
+      expect(disabledButton).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('should display the tooltip if disabled and tooltipText is true', async () => {
+      const { getByTestId } = renderWithTheme(
+        <TagCell disabled tags={tags} updateTags={updateTags} />
+      );
+      const disabledButton = getByTestId('Button');
+      expect(disabledButton).toBeInTheDocument();
+
+      fireEvent.mouseOver(disabledButton);
+
+      await waitFor(() => {
+        expect(screen.getByRole('tooltip')).toBeInTheDocument();
+      });
+
+      expect(
+        screen.getByText(
+          'You must be an unrestricted User in order to add or modify tags on Linodes.'
+        )
+      ).toBeVisible();
+    });
+  });
+});

packages/manager/src/components/TagCell/TagCell.tsx

@@ -1,7 +1,6 @@
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
-import { SxProps } from '@mui/system';
 import * as React from 'react';
 
 import { IconButton } from 'src/components/IconButton';
@@ -13,6 +12,8 @@ import { StyledPlusIcon, StyledTagButton } from '../Button/StyledTagButton';
 import { CircleProgress } from '../CircleProgress';
 import { AddTag } from './AddTag';
 
+import type { SxProps } from '@mui/system';
+
 export interface TagCellProps {
   /**
    * Disable adding or deleting tags.
@@ -83,6 +84,11 @@ export const TagCell = (props: TagCellProps) => {
 
   const AddButton = (props: { panel?: boolean }) => (
     <StyledTagButton
+      tooltipText={`${
+        disabled
+          ? 'You must be an unrestricted User in order to add or modify tags on Linodes.'
+          : ''
+      }`}
       buttonType="outlined"
       disabled={disabled}
       endIcon={<StyledPlusIcon disabled={disabled} />}

packages/manager/src/features/Linodes/LinodeEntityDetailFooter.tsx

@@ -4,6 +4,7 @@ import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { TagCell } from 'src/components/TagCell/TagCell';
+import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useLinodeUpdateMutation } from 'src/queries/linodes/linodes';
 import { useProfile } from 'src/queries/profile/profile';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
@@ -16,8 +17,8 @@ import {
   sxLastListItem,
   sxListItemFirstChild,
 } from './LinodeEntityDetail.styles';
-import { LinodeHandlers } from './LinodesLanding/LinodesLanding';
 
+import type { LinodeHandlers } from './LinodesLanding/LinodesLanding';
 import type { Linode } from '@linode/api-v4/lib/linodes/types';
 import type { TypographyProps } from 'src/components/Typography';
 
@@ -59,6 +60,11 @@ export const LinodeEntityDetailFooter = React.memo((props: FooterProps) => {
     openTagDrawer,
   } = props;
 
+  const isReadOnlyAccountAccess = useRestrictedGlobalGrantCheck({
+    globalGrantType: 'account_access',
+    permittedGrantLevel: 'read_write',
+  });
+
   const { mutateAsync: updateLinode } = useLinodeUpdateMutation(linodeId);
 
   const { enqueueSnackbar } = useSnackbar();
@@ -157,7 +163,7 @@ export const LinodeEntityDetailFooter = React.memo((props: FooterProps) => {
           sx={{
             width: '100%',
           }}
-          disabled={isLinodesGrantReadOnly}
+          disabled={isLinodesGrantReadOnly || isReadOnlyAccountAccess}
           listAllTags={openTagDrawer}
           tags={linodeTags}
           updateTags={updateTags}