fix: [M3-7862] - Fix display of TagsPanel in read-only entities

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

@@ -6,7 +6,7 @@ import { TagsPanel } from 'src/components/TagsPanel/TagsPanel';
 export type OpenTagDrawer = (id: number, label: string, tags: string[]) => void;
 
 export interface TagDrawerProps {
-  entityID: number;
+  disabled?: boolean;
   entityLabel: string;
   onClose: () => void;
   open: boolean;
@@ -15,11 +15,11 @@ export interface TagDrawerProps {
 }
 
 const TagDrawer = (props: TagDrawerProps) => {
-  const { entityID, entityLabel, onClose, open, tags, updateTags } = props;
+  const { disabled, entityLabel, onClose, open, tags, updateTags } = props;
 
   return (
     <Drawer onClose={onClose} open={open} title={`Tags (${entityLabel})`}>
-      <TagsPanel entityId={entityID} tags={tags} updateTags={updateTags} />
+      <TagsPanel disabled={disabled} tags={tags} updateTags={updateTags} />
     </Drawer>
   );
 };

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import * as React from 'react';
 
 import {
   StyledPlusIcon,
@@ -9,7 +9,6 @@ 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';
@@ -34,10 +33,6 @@ 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.
    */
@@ -50,7 +45,7 @@ export interface TagsPanelProps {
 
 export const TagsPanel = (props: TagsPanelProps) => {
   const { classes, cx } = useStyles();
-  const { disabled, entityId, tags, updateTags } = props;
+  const { disabled, tags, updateTags } = props;
 
   const queryClient = useQueryClient();
 
@@ -66,12 +61,6 @@ 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
@@ -176,7 +165,7 @@ export const TagsPanel = (props: TagsPanelProps) => {
           className={classes.selectTag}
           creatable
           createOptionPosition="first"
-          disabled={disabled || isLinodesGrantReadOnly}
+          disabled={disabled}
           escapeClearsValue
           hideLabel
           isLoading={userTagsLoading}
@@ -195,7 +184,7 @@ export const TagsPanel = (props: TagsPanelProps) => {
         >
           <StyledTagButton
             buttonType="outlined"
-            disabled={disabled || isLinodesGrantReadOnly}
+            disabled={disabled}
             endIcon={<StyledPlusIcon disabled={disabled} />}
             onClick={toggleTagInput}
           >
@@ -217,7 +206,7 @@ export const TagsPanel = (props: TagsPanelProps) => {
                 [classes.tag]: true,
               })}
               colorVariant="lightBlue"
-              disabled={disabled || isLinodesGrantReadOnly}
+              disabled={disabled}
               key={`tag-item-${thisTag}`}
               label={thisTag}
               maxLength={30}

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

@@ -1,5 +1,5 @@
-import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 
@@ -10,6 +10,7 @@ import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
 import { TagsPanel } from 'src/components/TagsPanel/TagsPanel';
 import { Typography } from 'src/components/Typography';
+import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 import {
   useDomainQuery,
   useDomainRecordsQuery,
@@ -36,6 +37,12 @@ export const DomainDetail = () => {
     refetch: refetchRecords,
   } = useDomainRecordsQuery(domainId);
 
+  const isDomainReadOnly = useIsResourceRestricted({
+    grantLevel: 'read_only',
+    grantType: 'domain',
+    id: domainId,
+  });
+
   const [updateError, setUpdateError] = React.useState<string | undefined>();
 
   const handleLabelChange = (label: string) => {
@@ -124,7 +131,7 @@ export const DomainDetail = () => {
               Tags
             </StyledTypography>
             <TagsPanel
-              entityId={domain.id}
+              disabled={isDomainReadOnly}
               tags={domain.tags}
               updateTags={handleUpdateTags}
             />

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

@@ -1,7 +1,7 @@
 import { KubernetesCluster } from '@linode/api-v4/lib/kubernetes';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import Grid from '@mui/material/Unstable_Grid2';
 import { Theme } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
@@ -13,6 +13,7 @@ import { ConfirmationDialog } from 'src/components/ConfirmationDialog/Confirmati
 import { Paper } from 'src/components/Paper';
 import { TagsPanel } from 'src/components/TagsPanel/TagsPanel';
 import KubeClusterSpecs from 'src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs';
+import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 import {
   useKubernetesClusterMutation,
   useKubernetesDashboardQuery,
@@ -121,6 +122,12 @@ export const KubeSummaryPanel = (props: Props) => {
     mutateAsync: resetKubeConfig,
   } = useResetKubeConfigMutation();
 
+  const isClusterReadOnly = useIsResourceRestricted({
+    grantLevel: 'read_only',
+    grantType: 'linode',
+    id: cluster.id,
+  });
+
   const [
     resetKubeConfigDialogOpen,
     setResetKubeConfigDialogOpen,
@@ -198,7 +205,7 @@ export const KubeSummaryPanel = (props: Props) => {
             </Grid>
             <Grid className={classes.tags}>
               <TagsPanel
-                entityId={cluster.id}
+                disabled={isClusterReadOnly}
                 tags={cluster.tags}
                 updateTags={handleUpdateTags}
               />

packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx

@@ -16,6 +16,7 @@ import {
 import { useAccountManagement } from 'src/hooks/useAccountManagement';
 import { useEditableLabelState } from 'src/hooks/useEditableLabelState';
 import { useFlags } from 'src/hooks/useFlags';
+import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 import {
   useLinodeQuery,
   useLinodeUpdateMutation,
@@ -75,6 +76,12 @@ const LinodeDetailHeader = () => {
     account?.capabilities ?? []
   );
 
+  const isLinodesGrantReadOnly = useIsResourceRestricted({
+    grantLevel: 'read_only',
+    grantType: 'linode',
+    id: matchedLinodeId,
+  });
+
   const [powerAction, setPowerAction] = React.useState<Action>('Reboot');
   const [powerDialogOpen, setPowerDialogOpen] = React.useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(
@@ -293,7 +300,7 @@ const LinodeDetailHeader = () => {
         open={isUpgradeVolumesDialogOpen}
       />
       <TagDrawer
-        entityID={linode.id}
+        disabled={isLinodesGrantReadOnly}
         entityLabel={linode.label}
         onClose={closeTagDrawer}
         open={tagDrawer.open}

packages/manager/src/features/Linodes/LinodesLanding/CardView.tsx

@@ -1,10 +1,11 @@
-import Grid from '@mui/material/Unstable_Grid2';
 import { keyframes, styled } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
 import { TagDrawer, TagDrawerProps } from 'src/components/TagCell/TagDrawer';
 import { Typography } from 'src/components/Typography';
 import { LinodeEntityDetail } from 'src/features/Linodes/LinodeEntityDetail';
+import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 import { useLinodeUpdateMutation } from 'src/queries/linodes/linodes';
 import { useProfile } from 'src/queries/profile';
 
@@ -14,7 +15,7 @@ export const CardView = (props: RenderLinodesProps) => {
   const { data: profile } = useProfile();
 
   const [tagDrawer, setTagDrawer] = React.useState<
-    Omit<TagDrawerProps, 'onClose' | 'updateTags'>
+    Omit<TagDrawerProps, 'onClose' | 'updateTags'> & { entityID: number }
   >({
     entityID: 0,
     entityLabel: '',
@@ -26,6 +27,12 @@ export const CardView = (props: RenderLinodesProps) => {
     tagDrawer.entityID
   );
 
+  const isLinodesGrantReadOnly = useIsResourceRestricted({
+    grantLevel: 'read_only',
+    grantType: 'linode',
+    id: tagDrawer.entityID,
+  });
+
   const closeTagDrawer = () => {
     setTagDrawer({ ...tagDrawer, open: false });
   };
@@ -68,7 +75,7 @@ export const CardView = (props: RenderLinodesProps) => {
       <Grid className="m0" container style={{ width: '100%' }}>
         {data.map((linode, idx: number) => (
           <React.Fragment key={`linode-card-${idx}`}>
-            <StyledSummaryGrid xs={12} data-qa-linode-card={linode.id}>
+            <StyledSummaryGrid data-qa-linode-card={linode.id} xs={12}>
               <LinodeEntityDetail
                 handlers={{
                   onOpenDeleteDialog: () =>
@@ -96,7 +103,7 @@ export const CardView = (props: RenderLinodesProps) => {
         ))}
       </Grid>
       <TagDrawer
-        entityID={tagDrawer.entityID}
+        disabled={isLinodesGrantReadOnly}
         entityLabel={tagDrawer.entityLabel}
         onClose={closeTagDrawer}
         open={tagDrawer.open}
@@ -123,7 +130,7 @@ const StyledSummaryGrid = styled(Grid, { label: 'StyledSummaryGrid' })(
     },
     backgroundColor: theme.palette.background.paper,
     marginBottom: 20,
-    paddingTop: 0, // from .py0 css class
     paddingBottom: 0,
+    paddingTop: 0, // from .py0 css class
   })
 );

packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/SummaryPanel.tsx

@@ -135,7 +135,6 @@ export const SummaryPanel = () => {
         </StyledTitle>
         <TagsPanel
           disabled={isNodeBalancerReadOnly}
-          entityId={nodebalancer.id}
           tags={nodebalancer?.tags}
           updateTags={(tags) => updateNodeBalancer({ tags })}
         />