diff --git a/packages/manager/.changeset/pr-10931-fixed-1726172174760.md b/packages/manager/.changeset/pr-10931-fixed-1726172174760.md new file mode 100644 index 00000000000..8cdf45b748a --- /dev/null +++ b/packages/manager/.changeset/pr-10931-fixed-1726172174760.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Fixed +--- + +Missing label for Full Account Toggle ([#10931](https://github.com/linode/manager/pull/10931)) diff --git a/packages/manager/cypress/e2e/core/account/user-permissions.spec.ts b/packages/manager/cypress/e2e/core/account/user-permissions.spec.ts index 53be928aded..7d97c8251f5 100644 --- a/packages/manager/cypress/e2e/core/account/user-permissions.spec.ts +++ b/packages/manager/cypress/e2e/core/account/user-permissions.spec.ts @@ -216,7 +216,7 @@ describe('User permission management', () => { // Restrict account access, confirm page updates to reflect change. mockUpdateUser(mockUser.username, mockUserUpdated); mockGetUserGrants(mockUser.username, mockUserGrantsUpdated); - cy.findByLabelText('Toggle Full Account Access') + cy.get('[data-qa="toggle-full-account-access"]') .should('be.visible') .click(); @@ -250,7 +250,7 @@ describe('User permission management', () => { // Re-enable unrestricted account access, confirm page updates to reflect change. mockUpdateUser(mockUser.username, mockUser); mockGetUserGrantsUnrestrictedAccess(mockUser.username); - cy.findByLabelText('Toggle Full Account Access') + cy.get('[data-qa="toggle-full-account-access"]') .should('be.visible') .click(); diff --git a/packages/manager/src/features/Users/UserPermissions.styles.ts b/packages/manager/src/features/Users/UserPermissions.styles.ts index a5bc3241b98..fc2a46a9b90 100644 --- a/packages/manager/src/features/Users/UserPermissions.styles.ts +++ b/packages/manager/src/features/Users/UserPermissions.styles.ts @@ -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 { CircleProgress } from 'src/components/CircleProgress'; import Select from 'src/components/EnhancedSelect/Select'; @@ -41,16 +41,17 @@ export const StyledHeaderGrid = styled(Grid, { [theme.breakpoints.down('sm')]: { marginLeft: theme.spacing(2), marginTop: theme.spacing(1), - width: '100%', }, + width: '100%', })); -export const StyledSubHeaderGrid = styled(Grid, { - label: 'StyledSubHeaderGrid', +export const StyledFullAccountAccessToggleGrid = styled(Grid, { + label: 'StyledFullAccountAccessToggleGrid', })(({ theme }) => ({ + marginTop: theme.spacing(2), + padding: 0, [theme.breakpoints.down('sm')]: { - margin: theme.spacing(0.5), - padding: 0, + paddingLeft: theme.spacing(2), }, })); @@ -68,7 +69,6 @@ export const StyledPaper = styled(Paper, { label: 'StyledPaper', })(({ theme }) => ({ paddingBottom: 0, - paddingTop: 0, [theme.breakpoints.down('sm')]: { padding: 0, }, diff --git a/packages/manager/src/features/Users/UserPermissions.tsx b/packages/manager/src/features/Users/UserPermissions.tsx index e4433f6cdee..ec85b41df06 100644 --- a/packages/manager/src/features/Users/UserPermissions.tsx +++ b/packages/manager/src/features/Users/UserPermissions.tsx @@ -35,11 +35,11 @@ import { scrollErrorIntoViewV2 } from 'src/utilities/scrollErrorIntoViewV2'; import { StyledCircleProgress, StyledDivWrapper, + StyledFullAccountAccessToggleGrid, StyledHeaderGrid, StyledPaper, StyledPermPaper, StyledSelect, - StyledSubHeaderGrid, StyledUnrestrictedGrid, } from './UserPermissions.styles'; import { UserPermissionsEntitySection } from './UserPermissionsEntitySection'; @@ -424,27 +424,37 @@ class UserPermissions extends React.Component { {isProxyUser ? PARENT_USER : 'General'} Permissions - - + } - aria-label="Toggle Full Account Access" - checked={!restricted} - disabled={currentUsername === accountUsername} - onChange={this.onChangeRestricted} + slotProps={{ + typography: { + sx: (theme) => ({ + fontFamily: theme.font.bold, + fontSize: '16px', + }), + }, + }} + data-qa="toggle-full-account-access" + label="Full Account Access" + labelPlacement="end" + value={restricted} /> - - - theme.font.bold }} - variant="subtitle2" - > - Full Account Access - - + {restricted ? this.renderPermissions() : this.renderUnrestricted()} @@ -505,7 +515,7 @@ class UserPermissions extends React.Component { Configure the specific rights and privileges this user has within the account.{
}Remember that permissions related to actions with the @@ -585,7 +595,6 @@ class UserPermissions extends React.Component { Specific Permissions
-