refactor: [M3-7687] - Linodes Restricted User Experience 2/2

packages/manager/.changeset/pr-10227-tech-stories-1708986866364.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Improve the Linodes restricted user experience ([#10227](https://github.com/linode/manager/pull/10227))

packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx

@@ -24,7 +24,9 @@ import type {
 
 interface ButtonProps {
   children: string;
+  disabled?: boolean;
   onClick: () => void;
+  tooltipText?: string;
 }
 
 interface ResourcesSectionProps {

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

@@ -13,6 +13,7 @@ import { StyledPlusIcon, StyledTagButton } from '../Button/StyledTagButton';
 import { AddTag } from './AddTag';
 
 interface TagCellProps {
+  disabled?: boolean;
   listAllTags: (tags: string[]) => void;
   sx?: SxProps;
   tags: string[];
@@ -35,7 +36,7 @@ const checkOverflow = (el: any) => {
 };
 
 const TagCell = (props: TagCellProps) => {
-  const { sx, tags, updateTags } = props;
+  const { disabled, sx, tags, updateTags } = props;
 
   const [hasOverflow, setOverflow] = React.useState<boolean>(false);
   const [addingTag, setAddingTag] = React.useState<boolean>(false);
@@ -90,6 +91,7 @@ const TagCell = (props: TagCellProps) => {
             {tags.map((thisTag) => (
               <StyledTag
                 colorVariant="lightBlue"
+                disabled={disabled}
                 key={`tag-item-${thisTag}`}
                 label={thisTag}
                 loading={loading}
@@ -110,6 +112,7 @@ const TagCell = (props: TagCellProps) => {
           ) : null}
           <StyledTagButton
             buttonType="outlined"
+            disabled={disabled}
             endIcon={<StyledPlusIcon />}
             onClick={() => setAddingTag(true)}
             title="Add a tag"

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

@@ -15,11 +15,11 @@ export interface TagDrawerProps {
 }
 
 const TagDrawer = (props: TagDrawerProps) => {
-  const { entityLabel, onClose, open, tags, updateTags } = props;
+  const { entityID, entityLabel, onClose, open, tags, updateTags } = props;
 
   return (
     <Drawer onClose={onClose} open={open} title={`Tags (${entityLabel})`}>
-      <TagsPanel tags={tags} updateTags={updateTags} />
+      <TagsPanel entityId={entityID} tags={tags} updateTags={updateTags} />
     </Drawer>
   );
 };

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

@@ -6,12 +6,17 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { TagsPanel } from './TagsPanel';
 
+const tagsPanelProps = {
+  entityId: 123,
+  tags: ['Tag1', 'Tag2'],
+};
+
 describe('TagsPanel', () => {
   it('renders TagsPanel component with existing tags', async () => {
     const updateTagsMock = vi.fn(() => Promise.resolve());
 
     const { getByLabelText, getByText } = renderWithTheme(
-      <TagsPanel tags={['Tag1', 'Tag2']} updateTags={updateTagsMock} />
+      <TagsPanel {...tagsPanelProps} updateTags={updateTagsMock} />
     );
 
     expect(getByText('Tag1')).toBeInTheDocument();
@@ -30,7 +35,7 @@ describe('TagsPanel', () => {
     const updateTagsMock = vi.fn(() => Promise.resolve());
 
     const { getByLabelText, getByText } = renderWithTheme(
-      <TagsPanel tags={['Tag1', 'Tag2']} updateTags={updateTagsMock} />
+      <TagsPanel {...tagsPanelProps} updateTags={updateTagsMock} />
     );
 
     await userEvent.click(getByText('Add a tag'));
@@ -51,7 +56,7 @@ describe('TagsPanel', () => {
     const updateTagsMock = vi.fn(() => Promise.resolve());
 
     const { getByLabelText, getByText } = renderWithTheme(
-      <TagsPanel tags={['Tag1', 'Tag2']} updateTags={updateTagsMock} />
+      <TagsPanel {...tagsPanelProps} updateTags={updateTagsMock} />
     );
 
     await userEvent.click(getByText('Add a tag'));
@@ -75,7 +80,7 @@ describe('TagsPanel', () => {
     const updateTagsMock = vi.fn(() => Promise.resolve());
 
     const { getByLabelText, getByText, queryByLabelText } = renderWithTheme(
-      <TagsPanel tags={['Tag1', 'Tag2']} updateTags={updateTagsMock} />
+      <TagsPanel {...tagsPanelProps} updateTags={updateTagsMock} />
     );
 
     expect(getByText('Tag1')).toBeInTheDocument();
@@ -93,7 +98,7 @@ describe('TagsPanel', () => {
     const updateTagsMock = vi.fn(() => Promise.resolve());
 
     const { getByText, queryByLabelText, queryByText } = renderWithTheme(
-      <TagsPanel disabled tags={['Tag1', 'Tag2']} updateTags={updateTagsMock} />
+      <TagsPanel disabled {...tagsPanelProps} updateTags={updateTagsMock} />
     );
 
     expect(getByText('Tag1')).toBeInTheDocument();

packages/manager/src/components/TagsPanel/TagsPanel.tsx

@@ -9,6 +9,7 @@ import { CircleProgress } from 'src/components/CircleProgress';
 import Select from 'src/components/EnhancedSelect/Select';
 import { Tag } from 'src/components/Tag/Tag';
 import { Typography } from 'src/components/Typography';
+import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 import { useProfile } from 'src/queries/profile';
 import { updateTagsSuggestionsData, useTagSuggestions } from 'src/queries/tags';
 import { getErrorStringOrDefault } from 'src/utilities/errorUtils';
@@ -33,6 +34,10 @@ export interface TagsPanelProps {
    * If true, the input will be disabled and no tags can be added or removed.
    */
   disabled?: boolean;
+  /**
+   * The ID of the entity to which the tags belong.
+   */
+  entityId: number;
   /**
    * The tags to display.
    */
@@ -45,7 +50,7 @@ export interface TagsPanelProps {
 
 export const TagsPanel = (props: TagsPanelProps) => {
   const { classes, cx } = useStyles();
-  const { disabled, tags, updateTags } = props;
+  const { disabled, entityId, tags, updateTags } = props;
 
   const queryClient = useQueryClient();
 
@@ -61,6 +66,12 @@ export const TagsPanel = (props: TagsPanelProps) => {
     isLoading: userTagsLoading,
   } = useTagSuggestions(!profile?.restricted);
 
+  const isLinodesGrantReadOnly = useIsResourceRestricted({
+    grantLevel: 'read_only',
+    grantType: 'linode',
+    id: entityId,
+  });
+
   const tagsToSuggest = React.useMemo<Item[] | undefined>(
     () =>
       userTags
@@ -165,7 +176,7 @@ export const TagsPanel = (props: TagsPanelProps) => {
           className={classes.selectTag}
           creatable
           createOptionPosition="first"
-          disabled={disabled}
+          disabled={disabled || isLinodesGrantReadOnly}
           escapeClearsValue
           hideLabel
           isLoading={userTagsLoading}
@@ -184,7 +195,7 @@ export const TagsPanel = (props: TagsPanelProps) => {
         >
           <StyledTagButton
             buttonType="outlined"
-            disabled={disabled}
+            disabled={disabled || isLinodesGrantReadOnly}
             endIcon={<StyledPlusIcon disabled={disabled} />}
             onClick={toggleTagInput}
           >
@@ -206,6 +217,7 @@ export const TagsPanel = (props: TagsPanelProps) => {
                 [classes.tag]: true,
               })}
               colorVariant="lightBlue"
+              disabled={disabled || isLinodesGrantReadOnly}
               key={`tag-item-${thisTag}`}
               label={thisTag}
               maxLength={30}

packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx

@@ -107,7 +107,7 @@ export const DomainDetail = () => {
         title="Domain Details"
       />
       {location.state && location.state.recordError && (
-        <StyledNotice variant="error" text={location.state.recordError} />
+        <StyledNotice text={location.state.recordError} variant="error" />
       )}
       <StyledRootGrid container>
         <StyledMainGrid xs={12}>
@@ -123,7 +123,11 @@ export const DomainDetail = () => {
             <StyledTypography data-qa-title variant="h3">
               Tags
             </StyledTypography>
-            <TagsPanel tags={domain.tags} updateTags={handleUpdateTags} />
+            <TagsPanel
+              entityId={domain.id}
+              tags={domain.tags}
+              updateTags={handleUpdateTags}
+            />
           </StyledPaper>
           <StyledDiv>
             <DeleteDomain

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx

@@ -197,7 +197,11 @@ export const KubeSummaryPanel = (props: Props) => {
               </Button>
             </Grid>
             <Grid className={classes.tags}>
-              <TagsPanel tags={cluster.tags} updateTags={handleUpdateTags} />
+              <TagsPanel
+                entityId={cluster.id}
+                tags={cluster.tags}
+                updateTags={handleUpdateTags}
+              />
             </Grid>
           </Grid>
         </Grid>

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

@@ -1,7 +1,10 @@
 import * as React from 'react';
 
 import { EntityDetail } from 'src/components/EntityDetail/EntityDetail';
+import { Notice } from 'src/components/Notice/Notice';
+import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { notificationContext as _notificationContext } from 'src/features/NotificationCenter/NotificationContext';
+import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 import { useVPCConfigInterface } from 'src/hooks/useVPCConfigInterface';
 import { useInProgressEvents } from 'src/queries/events/events';
 import { useAllImagesQuery } from 'src/queries/images';
@@ -64,6 +67,12 @@ export const LinodeEntityDetail = (props: Props) => {
     vpcLinodeIsAssignedTo,
   } = useVPCConfigInterface(linode.id);
 
+  const isLinodesGrantReadOnly = useIsResourceRestricted({
+    grantLevel: 'read_only',
+    grantType: 'linode',
+    id: linode.id,
+  });
+
   const imageVendor =
     images?.find((i) => i.id === linode.image)?.vendor ?? null;
 
@@ -83,55 +92,67 @@ export const LinodeEntityDetail = (props: Props) => {
   const trimmedIPv6 = linode.ipv6?.replace('/128', '') || null;
 
   return (
-    <EntityDetail
-      body={
-        <LinodeEntityDetailBody
-          configInterfaceWithVPC={configInterfaceWithVPC}
-          displayVPCSection={showVPCs}
-          gbRAM={linode.specs.memory / 1024}
-          gbStorage={linode.specs.disk / 1024}
-          ipv4={linode.ipv4}
-          ipv6={trimmedIPv6}
-          isVPCOnlyLinode={isVPCOnlyLinode}
-          linodeId={linode.id}
-          linodeLabel={linode.label}
-          numCPUs={linode.specs.vcpus}
-          numVolumes={numberOfVolumes}
-          region={linode.region}
-          vpcLinodeIsAssignedTo={vpcLinodeIsAssignedTo}
-        />
-      }
-      footer={
-        <LinodeEntityDetailFooter
-          linodeCreated={linode.created}
-          linodeId={linode.id}
-          linodeLabel={linode.label}
-          linodePlan={linodePlan}
-          linodeRegionDisplay={linodeRegionDisplay}
-          linodeTags={linode.tags}
-          openTagDrawer={openTagDrawer}
-        />
-      }
-      header={
-        <LinodeEntityDetailHeader
-          backups={linode.backups}
-          configs={configs}
-          enableVPCLogic={showVPCs}
-          handlers={handlers}
-          image={linode.image ?? 'Unknown Image'}
-          imageVendor={imageVendor}
-          isSummaryView={isSummaryView}
-          linodeId={linode.id}
-          linodeLabel={linode.label}
-          linodeRegionDisplay={linodeRegionDisplay}
-          linodeStatus={linode.status}
-          openNotificationMenu={notificationContext.openMenu}
-          progress={progress}
-          transitionText={transitionText}
-          type={type ?? null}
-          variant={variant}
+    <>
+      {isLinodesGrantReadOnly && (
+        <Notice
+          text={getRestrictedResourceText({
+            resourceType: 'Linodes',
+          })}
+          important
+          variant="warning"
         />
-      }
-    />
+      )}
+      <EntityDetail
+        body={
+          <LinodeEntityDetailBody
+            configInterfaceWithVPC={configInterfaceWithVPC}
+            displayVPCSection={showVPCs}
+            gbRAM={linode.specs.memory / 1024}
+            gbStorage={linode.specs.disk / 1024}
+            ipv4={linode.ipv4}
+            ipv6={trimmedIPv6}
+            isVPCOnlyLinode={isVPCOnlyLinode}
+            linodeId={linode.id}
+            linodeLabel={linode.label}
+            numCPUs={linode.specs.vcpus}
+            numVolumes={numberOfVolumes}
+            region={linode.region}
+            vpcLinodeIsAssignedTo={vpcLinodeIsAssignedTo}
+          />
+        }
+        footer={
+          <LinodeEntityDetailFooter
+            isLinodesGrantReadOnly={isLinodesGrantReadOnly}
+            linodeCreated={linode.created}
+            linodeId={linode.id}
+            linodeLabel={linode.label}
+            linodePlan={linodePlan}
+            linodeRegionDisplay={linodeRegionDisplay}
+            linodeTags={linode.tags}
+            openTagDrawer={openTagDrawer}
+          />
+        }
+        header={
+          <LinodeEntityDetailHeader
+            backups={linode.backups}
+            configs={configs}
+            enableVPCLogic={showVPCs}
+            handlers={handlers}
+            image={linode.image ?? 'Unknown Image'}
+            imageVendor={imageVendor}
+            isSummaryView={isSummaryView}
+            linodeId={linode.id}
+            linodeLabel={linode.label}
+            linodeRegionDisplay={linodeRegionDisplay}
+            linodeStatus={linode.status}
+            openNotificationMenu={notificationContext.openMenu}
+            progress={progress}
+            transitionText={transitionText}
+            type={type ?? null}
+            variant={variant}
+          />
+        }
+      />
+    </>
   );
 };

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

@@ -1,5 +1,5 @@
-import Grid from '@mui/material/Unstable_Grid2';
 import { useTheme } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
@@ -34,6 +34,7 @@ export type Props = LinodeEntityDetailProps & {
 };
 
 interface FooterProps {
+  isLinodesGrantReadOnly: boolean;
   linodeCreated: string;
   linodeId: number;
   linodeLabel: string;
@@ -49,6 +50,7 @@ export const LinodeEntityDetailFooter = React.memo((props: FooterProps) => {
   const { data: profile } = useProfile();
 
   const {
+    isLinodesGrantReadOnly,
     linodeCreated,
     linodeId,
     linodePlan,
@@ -160,6 +162,7 @@ export const LinodeEntityDetailFooter = React.memo((props: FooterProps) => {
               flexDirection: 'row-reverse',
             },
           }}
+          disabled={isLinodesGrantReadOnly}
           listAllTags={openTagDrawer}
           tags={linodeTags}
           updateTags={updateTags}