upcoming: [M3-7613] - Grants and Permissions for Placement Groups

packages/manager/.changeset/pr-10257-upcoming-features-1710177497998.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Set up grants and permissions for Placement Groups ([#10257](https://github.com/linode/manager/pull/10257))

packages/manager/src/components/Breadcrumb/Breadcrumb.tsx

@@ -13,6 +13,10 @@ export interface BreadcrumbProps {
    * An array of objects that can be used to customize any crumb.
    */
   crumbOverrides?: CrumbOverridesProps[];
+  /**
+   * A boolean that if true will disable the pencil icon button.
+   */
+  disableEditButton?: boolean;
   /**
    * A boolean that if true will only show the first and last crumb.
    */
@@ -48,6 +52,7 @@ export const Breadcrumb = (props: BreadcrumbProps) => {
   const {
     breadcrumbDataAttrs,
     crumbOverrides,
+    disableEditButton,
     firstAndLastOnly,
     labelOptions,
     labelTitle,
@@ -75,6 +80,7 @@ export const Breadcrumb = (props: BreadcrumbProps) => {
       >
         <Crumbs
           crumbOverrides={crumbOverrides}
+          disableEditButton={disableEditButton}
           firstAndLastOnly={firstAndLastOnly}
           labelOptions={labelOptions}
           labelTitle={labelTitle}

packages/manager/src/components/Breadcrumb/Crumbs.tsx

@@ -20,6 +20,7 @@ export interface CrumbOverridesProps {
 
 interface Props {
   crumbOverrides?: CrumbOverridesProps[];
+  disableEditButton?: boolean;
   firstAndLastOnly?: boolean;
   labelOptions?: LabelProps;
   labelTitle?: string;
@@ -30,6 +31,7 @@ interface Props {
 export const Crumbs = React.memo((props: Props) => {
   const {
     crumbOverrides,
+    disableEditButton,
     firstAndLastOnly,
     labelOptions,
     labelTitle,
@@ -92,6 +94,7 @@ export const Crumbs = React.memo((props: Props) => {
       {/* the final crumb has the possibility of being a link, editable text or just static text */}
       <FinalCrumb
         crumb={labelTitle || lastCrumb}
+        disableEditButton={disableEditButton}
         labelOptions={labelOptions}
         onEditHandlers={onEditHandlers}
       />

packages/manager/src/components/Breadcrumb/FinalCrumb.tsx

@@ -9,17 +9,19 @@ import { EditableProps, LabelProps } from './types';
 
 interface Props {
   crumb: string;
+  disableEditButton?: boolean;
   labelOptions?: LabelProps;
   onEditHandlers?: EditableProps;
 }
 
 export const FinalCrumb = React.memo((props: Props) => {
-  const { crumb, labelOptions, onEditHandlers } = props;
+  const { crumb, disableEditButton, labelOptions, onEditHandlers } = props;
 
   if (onEditHandlers) {
     return (
       <StyledEditableText
         data-qa-editable-text
+        disableEditButton={disableEditButton}
         errorText={onEditHandlers.errorText}
         handleAnalyticsEvent={onEditHandlers.handleAnalyticsEvent}
         labelLink={labelOptions && labelOptions.linkTo}

packages/manager/src/components/Drawer.tsx

@@ -1,7 +1,7 @@
 import Close from '@mui/icons-material/Close';
 import _Drawer, { DrawerProps } from '@mui/material/Drawer';
-import Grid from '@mui/material/Unstable_Grid2';
 import { Theme } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 

packages/manager/src/components/EditableText/EditableText.tsx

@@ -103,6 +103,7 @@ const useStyles = makeStyles<void, 'editIcon' | 'icon'>()(
 
 interface Props {
   className?: string;
+  disableEditButton?: boolean;
   errorText?: string;
   /**
    * Send event analytics
@@ -139,6 +140,7 @@ export const EditableText = (props: PassThroughProps) => {
   const [text, setText] = React.useState(props.text);
   const {
     className,
+    disableEditButton,
     errorText,
     handleAnalyticsEvent,
     labelLink,
@@ -228,6 +230,7 @@ export const EditableText = (props: PassThroughProps) => {
         aria-label={`Edit ${text}`}
         className={`${classes.button} ${classes.editIcon}`}
         data-qa-edit-button
+        disabled={disableEditButton}
         onClick={openEdit}
       >
         <Edit className={classes.icon} />

packages/manager/src/components/LandingHeader/LandingHeader.tsx

@@ -1,5 +1,5 @@
-import Grid from '@mui/material/Unstable_Grid2';
 import { Theme, styled, useTheme } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
 
@@ -19,6 +19,7 @@ export interface LandingHeaderProps {
   buttonDataAttrs?: { [key: string]: boolean | string };
   createButtonText?: string;
   disabledCreateButton?: boolean;
+  disableEditButton?: boolean;
   docsLabel?: string;
   docsLink?: string;
   entity?: string;
@@ -44,6 +45,7 @@ export const LandingHeader = ({
   buttonDataAttrs,
   createButtonText,
   disabledCreateButton,
+  disableEditButton,
   docsLabel,
   docsLink,
   entity,
@@ -89,6 +91,7 @@ export const LandingHeader = ({
           removeCrumbX={removeCrumbX}
           {...breadcrumbDataAttrs}
           {...breadcrumbProps}
+          disableEditButton={disableEditButton}
         />
       </Grid>
       {!shouldHideDocsAndCreateButtons && (

packages/manager/src/features/Account/constants.ts

@@ -10,6 +10,7 @@ export const grantTypeMap = {
   linode: 'Linodes',
   longview: 'Longview Clients',
   nodebalancer: 'NodeBalancers',
+  placementGroups: 'Placement Groups',
   stackscript: 'StackScripts',
   volume: 'Volumes',
   vpc: 'VPCs',

packages/manager/src/features/PlacementGroups/PlacementGroupsAffinityEnforcementRadioGroup.tsx

@@ -11,13 +11,14 @@ import { Typography } from 'src/components/Typography';
 import type { FormikHelpers } from 'formik';
 
 interface Props {
+  disabledCreateButton: boolean;
   handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   setFieldValue: FormikHelpers<any>['setFieldValue'];
   value: boolean;
 }
 
 export const PlacementGroupsAffinityEnforcementRadioGroup = (props: Props) => {
-  const { handleChange, setFieldValue, value } = props;
+  const { disabledCreateButton, handleChange, setFieldValue, value } = props;
   return (
     <Box sx={{ pt: 2 }}>
       <Notice
@@ -45,6 +46,7 @@ export const PlacementGroupsAffinityEnforcementRadioGroup = (props: Props) => {
             </Typography>
           }
           control={<Radio />}
+          disabled={disabledCreateButton}
           value={true}
         />
         <FormControlLabel
@@ -56,6 +58,7 @@ export const PlacementGroupsAffinityEnforcementRadioGroup = (props: Props) => {
             </Typography>
           }
           control={<Radio />}
+          disabled={disabledCreateButton}
           sx={{ mt: 2 }}
           value={false}
         />

packages/manager/src/features/PlacementGroups/PlacementGroupsAffinityTypeSelect.tsx

@@ -11,12 +11,13 @@ import { affinityTypeOptions } from './utils';
 import type { FormikHelpers } from 'formik';
 
 interface Props {
+  disabledCreateButton: boolean;
   error: string | undefined;
   setFieldValue: FormikHelpers<any>['setFieldValue'];
 }
 
 export const PlacementGroupsAffinityTypeSelect = (props: Props) => {
-  const { error, setFieldValue } = props;
+  const { disabledCreateButton, error, setFieldValue } = props;
   return (
     <Autocomplete
       defaultValue={affinityTypeOptions.find(
@@ -82,6 +83,7 @@ export const PlacementGroupsAffinityTypeSelect = (props: Props) => {
         ),
       }}
       disableClearable={true}
+      disabled={disabledCreateButton}
       errorText={error}
       label="Affinity Type"
       options={affinityTypeOptions}

packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.test.tsx

@@ -7,6 +7,7 @@ import { PlacementGroupsCreateDrawer } from './PlacementGroupsCreateDrawer';
 
 const commonProps = {
   allPlacementGroups: [],
+  disabledCreateButton: false,
   onClose: vi.fn(),
   open: true,
 };

packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx

@@ -11,6 +11,7 @@ import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
 import { Stack } from 'src/components/Stack';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
+import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { useFormValidateOnChange } from 'src/hooks/useFormValidateOnChange';
 import { useCreatePlacementGroup } from 'src/queries/placementGroups';
 import { useRegionsQuery } from 'src/queries/regions';
@@ -30,6 +31,7 @@ export const PlacementGroupsCreateDrawer = (
 ) => {
   const {
     allPlacementGroups,
+    disabledCreateButton,
     onClose,
     onPlacementGroupCreate,
     open,
@@ -131,6 +133,17 @@ export const PlacementGroupsCreateDrawer = (
       open={open}
       title="Create Placement Group"
     >
+      {disabledCreateButton && (
+        <Notice
+          text={getRestrictedResourceText({
+            action: 'edit',
+            resourceType: 'Placement Groups',
+          })}
+          important
+          spacingTop={16}
+          variant="error"
+        />
+      )}
       <form onSubmit={handleSubmit}>
         <Stack spacing={1}>
           {generalError && <Notice text={generalError} variant="error" />}
@@ -146,7 +159,7 @@ export const PlacementGroupsCreateDrawer = (
               autoFocus: true,
             }}
             aria-label="Label for the Placement Group"
-            disabled={false}
+            disabled={disabledCreateButton || false}
             errorText={errors.label}
             label="Label"
             name="label"
@@ -165,25 +178,30 @@ export const PlacementGroupsCreateDrawer = (
                 handleRegionSelect(selection);
               }}
               currentCapability="Placement Group"
-              disabled={Boolean(selectedRegionId)}
+              disabled={Boolean(selectedRegionId) || disabledCreateButton}
               helperText="Only regions supporting Placement Groups are listed."
               regions={regions ?? []}
               selectedId={selectedRegionId ?? values.region}
             />
           )}
           <PlacementGroupsAffinityTypeSelect
+            disabledCreateButton={disabledCreateButton}
             error={errors.affinity_type}
             setFieldValue={setFieldValue}
           />
           <PlacementGroupsAffinityEnforcementRadioGroup
+            disabledCreateButton={disabledCreateButton}
             handleChange={handleChange}
             setFieldValue={setFieldValue}
             value={values.is_strict}
           />
           <ActionsPanel
             primaryButtonProps={{
               'data-testid': 'submit',
-              disabled: isSubmitting || hasRegionReachedPGCapacity,
+              disabled:
+                isSubmitting ||
+                hasRegionReachedPGCapacity ||
+                disabledCreateButton,
               label: 'Create Placement Group',
               loading: isSubmitting,
               onClick: () => setHasFormBeenSubmitted(true),

packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx

@@ -7,11 +7,14 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { NotFound } from 'src/components/NotFound';
+import { Notice } from 'src/components/Notice/Notice';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { TabLinkList } from 'src/components/Tabs/TabLinkList';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
+import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { useFlags } from 'src/hooks/useFlags';
+import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import {
   useMutatePlacementGroup,
   usePlacementGroupQuery,
@@ -37,6 +40,10 @@ export const PlacementGroupsDetail = () => {
     Boolean(flags.placementGroups?.enabled)
   );
 
+  const isLinodeReadOnly = useRestrictedGlobalGrantCheck({
+    globalGrantType: 'add_linodes',
+  });
+
   const {
     error: updatePlacementGroupError,
     mutateAsync: updatePlacementGroup,
@@ -105,10 +112,22 @@ export const PlacementGroupsDetail = () => {
           },
           pathname: `/placement-groups/${label}`,
         }}
+        disableEditButton={isLinodeReadOnly}
         docsLabel="Docs"
         docsLink="TODO VM_Placement: add doc link"
         title="Placement Group Detail"
       />
+      {isLinodeReadOnly && (
+        <Notice
+          text={getRestrictedResourceText({
+            action: 'edit',
+            resourceType: 'Placement Groups',
+          })}
+          important
+          spacingTop={16}
+          variant="warning"
+        />
+      )}
       <Tabs
         index={tabIndex === -1 ? 0 : tabIndex}
         onChange={(i: number) => history.push(tabs[i].routeName)}
@@ -119,7 +138,10 @@ export const PlacementGroupsDetail = () => {
             <PlacementGroupsSummary placementGroup={placementGroup} />
           </SafeTabPanel>
           <SafeTabPanel index={1}>
-            <PlacementGroupsLinodes placementGroup={placementGroup} />
+            <PlacementGroupsLinodes
+              isLinodeReadOnly={isLinodeReadOnly}
+              placementGroup={placementGroup}
+            />
           </SafeTabPanel>
         </TabPanels>
       </Tabs>

packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.test.tsx

@@ -9,7 +9,10 @@ import { PlacementGroupsLinodes } from './PlacementGroupsLinodes';
 describe('PlacementGroupsLinodes', () => {
   it('renders an error state if placement groups are undefined', () => {
     const { getByText } = renderWithTheme(
-      <PlacementGroupsLinodes placementGroup={undefined} />
+      <PlacementGroupsLinodes
+        isLinodeReadOnly={false}
+        placementGroup={undefined}
+      />
     );
 
     expect(
@@ -28,7 +31,10 @@ describe('PlacementGroupsLinodes', () => {
     });
 
     const { getByPlaceholderText, getByRole } = renderWithTheme(
-      <PlacementGroupsLinodes placementGroup={placementGroup} />
+      <PlacementGroupsLinodes
+        isLinodeReadOnly={false}
+        placementGroup={placementGroup}
+      />
     );
 
     expect(getByPlaceholderText('Search Linodes')).toBeInTheDocument();