Skip to content

Commit

Permalink
fix: [M3-7574] - Fix missing labels for User Permission radio buttons (…
Browse files Browse the repository at this point in the history 
…#10908)

* fix: [M3-7574] - Fix missing label for user permission radio btns

* Add changeset
  • Loading branch information
@carrillo-erik
carrillo-erik authored Sep 13, 2024
1 parent 7c105de commit 46da3e1
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 111 deletions.
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-10908-fixed-1726091771498.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Fixed
---

Fix missing radio button labels for User Permissions ([#10908](https://github.com/linode/manager/pull/10908))
85 changes: 40 additions & 45 deletions packages/manager/src/features/Users/UserPermissions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,19 @@
import {
GlobalGrantTypes,
Grant,
GrantLevel,
GrantType,
Grants,
User,
getGrants,
getUser,
updateGrants,
updateUser,
} from '@linode/api-v4/lib/account';
import { APIError } from '@linode/api-v4/lib/types';
import { Paper } from '@mui/material';
import Grid from '@mui/material/Unstable_Grid2';
import { QueryClient } from '@tanstack/react-query';
import { enqueueSnackbar } from 'notistack';
import { compose, flatten, lensPath, omit, set } from 'ramda';
import * as React from 'react';

import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
import { Box } from 'src/components/Box';
import { CircleProgress } from 'src/components/CircleProgress';
// import { Button } from 'src/components/Button/Button';
import { DocumentTitleSegment } from 'src/components/DocumentTitle';
import { Item } from 'src/components/EnhancedSelect/Select';
import { FormControlLabel } from 'src/components/FormControlLabel';
import { Notice } from 'src/components/Notice/Notice';
import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
Expand All @@ -34,14 +24,8 @@ import { TabPanels } from 'src/components/Tabs/TabPanels';
import { Tabs } from 'src/components/Tabs/Tabs';
import { Toggle } from 'src/components/Toggle/Toggle';
import { Typography } from 'src/components/Typography';
import {
WithFeatureFlagProps,
withFeatureFlags,
} from 'src/containers/flags.container';
import {
WithQueryClientProps,
withQueryClient,
} from 'src/containers/withQueryClient.container';
import { withFeatureFlags } from 'src/containers/flags.container';
import { withQueryClient } from 'src/containers/withQueryClient.container';
import { PARENT_USER, grantTypeMap } from 'src/features/Account/constants';
import { accountQueries } from 'src/queries/account/queries';
import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
Expand All @@ -59,6 +43,20 @@ import {
StyledUnrestrictedGrid,
} from './UserPermissions.styles';
import { UserPermissionsEntitySection } from './UserPermissionsEntitySection';

import type {
GlobalGrantTypes,
Grant,
GrantLevel,
GrantType,
Grants,
User,
} from '@linode/api-v4/lib/account';
import type { APIError } from '@linode/api-v4/lib/types';
import type { QueryClient } from '@tanstack/react-query';
import type { Item } from 'src/components/EnhancedSelect/Select';
import type { WithFeatureFlagProps } from 'src/containers/flags.container';
import type { WithQueryClientProps } from 'src/containers/withQueryClient.container';
interface Props {
accountUsername?: string;
currentUsername?: string;
Expand Down Expand Up @@ -91,30 +89,6 @@ interface State {
type CombinedProps = Props & WithQueryClientProps & WithFeatureFlagProps;

class UserPermissions extends React.Component<CombinedProps, State> {
componentDidMount() {
this.getUserGrants();
this.getUserType();
}

componentDidUpdate(prevProps: CombinedProps) {
if (prevProps.currentUsername !== this.props.currentUsername) {
this.getUserGrants();
this.getUserType();
}
}

render() {
const { loading } = this.state;
const { currentUsername } = this.props;

return (
<div ref={this.formContainerRef}>
<DocumentTitleSegment segment={`${currentUsername} - Permissions`} />
{loading ? <CircleProgress /> : this.renderBody()}
</div>
);
}

billingPermOnClick = (value: null | string) => () => {
const lp = lensPath(['grants', 'global', 'account_access']);
this.setState(set(lp, value));
Expand Down Expand Up @@ -679,9 +653,6 @@ class UserPermissions extends React.Component<CombinedProps, State> {
<Typography data-qa-unrestricted-msg>
This user has unrestricted access to the account.
</Typography>
{/* <Button buttonType="primary" onClick={this.onChangeRestricted}>
Save
</Button> */}
</StyledUnrestrictedGrid>
</Paper>
);
Expand Down Expand Up @@ -823,6 +794,30 @@ class UserPermissions extends React.Component<CombinedProps, State> {
setAllPerm: 'null',
userType: null,
};

componentDidMount() {
this.getUserGrants();
this.getUserType();
}

componentDidUpdate(prevProps: CombinedProps) {
if (prevProps.currentUsername !== this.props.currentUsername) {
this.getUserGrants();
this.getUserType();
}
}

render() {
const { loading } = this.state;
const { currentUsername } = this.props;

return (
<div ref={this.formContainerRef}>
<DocumentTitleSegment segment={`${currentUsername} - Permissions`} />
{loading ? <CircleProgress /> : this.renderBody()}
</div>
);
}
}

export default withQueryClient(withFeatureFlags(UserPermissions));
163 changes: 97 additions & 66 deletions packages/manager/src/features/Users/UserPermissionsEntitySection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,37 @@
* I'll create a tech debt ticket in jira to keep track of this issue.
*/

import { useTheme } from '@mui/material/styles';
import React from 'react';
import { Grant, GrantLevel, GrantType } from '@linode/api-v4/lib/account';

import { Box } from 'src/components/Box';
import { Theme } from '@mui/material/styles';
import { TableHead } from 'src/components/TableHead';
import { TableRow } from 'src/components/TableRow';
import { TableCell } from 'src/components/TableCell';
import { FormControlLabel } from 'src/components/FormControlLabel';
import { createDisplayPage } from 'src/components/Paginate';
import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
import { Radio } from 'src/components/Radio/Radio';
import { TableBody } from 'src/components/TableBody';
import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
import { usePagination } from 'src/hooks/usePagination';
import { createDisplayPage } from 'src/components/Paginate';
import { TableCell } from 'src/components/TableCell';
import { TableHead } from 'src/components/TableHead';
import { TableRow } from 'src/components/TableRow';
import { Typography } from 'src/components/Typography';
import { useTheme } from '@mui/material/styles';
import { StyledGrantsTable } from './UserPermissionsEntitySection.styles';
import { grantTypeMap } from 'src/features/Account/constants';
import { usePagination } from 'src/hooks/usePagination';

import { StyledGrantsTable } from './UserPermissionsEntitySection.styles';

import type { Grant, GrantLevel, GrantType } from '@linode/api-v4/lib/account';
import type { Theme } from '@mui/material/styles';

interface Props {
entity: GrantType;
entitySetAllTo: (entity: GrantType, value: GrantLevel) => () => void;
grants: Grant[] | undefined;
setGrantTo: (entity: string, idx: number, value: GrantLevel) => () => void;
entitySetAllTo: (entity: GrantType, value: GrantLevel) => () => void;
showHeading?: boolean;
}

export const UserPermissionsEntitySection = React.memo(
({ entity, grants, setGrantTo, entitySetAllTo, showHeading }: Props) => {
({ entity, entitySetAllTo, grants, setGrantTo, showHeading }: Props) => {
const theme: Theme = useTheme();
const pagination = usePagination(1);

Expand All @@ -54,61 +58,79 @@ export const UserPermissionsEntitySection = React.memo(
};

return (
<Box key={entity} paddingBottom="0" marginTop={`${theme.spacing(2)}`}>
<Box key={entity} marginTop={`${theme.spacing(2)}`} paddingBottom="0">
{showHeading && (
<Typography
variant="h3"
sx={{
marginTop: theme.spacing(3),
marginBottom: theme.spacing(2),
marginTop: theme.spacing(3),
}}
data-qa-permissions-header={entity}
variant="h3"
>
{grantTypeMap[entity]}
</Typography>
)}
<StyledGrantsTable aria-label="User Permissions" noBorder>
<TableHead data-qa-table-head>
<TableRow>
<TableRow
sx={(theme) => ({
'span.MuiFormControlLabel-label': {
fontFamily: theme.font.bold,
},
})}
>
<TableCell>Label</TableCell>
<TableCell padding="checkbox">
{/* eslint-disable-next-line */}
<label style={{ marginLeft: -35, cursor: 'pointer' }}>
None
<Radio
name={`${entity}-select-all`}
checked={entityIsAll(null)}
value="null"
onChange={entitySetAllTo(entity, null)}
data-qa-permission-header="None"
/>
</label>
<FormControlLabel
control={
<Radio
inputProps={{
'aria-label': `${entity}s, set-all-permissions-to-none`,
}}
checked={entityIsAll(null)}
data-qa-permission-header="None"
name={`${entity}-select-all`}
onChange={entitySetAllTo(entity, null)}
value="null"
/>
}
label="None"
/>
</TableCell>
<TableCell padding="checkbox">
{/* eslint-disable-next-line */}
<label style={{ marginLeft: -65, cursor: 'pointer' }}>
Read Only
<Radio
name={`${entity}-select-all`}
checked={entityIsAll('read_only')}
value="read_only"
onChange={entitySetAllTo(entity, 'read_only')}
data-qa-permission-header="Read Only"
/>
</label>
<FormControlLabel
control={
<Radio
inputProps={{
'aria-label': `${entity}s, set-all-permissions-to-read-only`,
}}
checked={entityIsAll('read_only')}
data-qa-permission-header="Read Only"
name={`${entity}-select-all`}
onChange={entitySetAllTo(entity, 'read_only')}
value="read_only"
/>
}
label="Read Only"
/>
</TableCell>
<TableCell padding="checkbox">
{/* eslint-disable-next-line */}
<label style={{ marginLeft: -73, cursor: 'pointer' }}>
Read-Write
<Radio
name={`${entity}-select-all`}
checked={entityIsAll('read_write')}
value="read_write"
onChange={entitySetAllTo(entity, 'read_write')}
data-qa-permission-header="Read-Write"
/>
</label>
<FormControlLabel
control={
<Radio
inputProps={{
'aria-label': `${entity}s, set-all-permissions-to-read-write`,
}}
checked={entityIsAll('read_write')}
data-qa-permission-header="Read-Write"
name={`${entity}-select-all`}
onChange={entitySetAllTo(entity, 'read_write')}
value="read_write"
/>
}
label="Read-Write"
/>
</TableCell>
</TableRow>
</TableHead>
Expand All @@ -117,7 +139,7 @@ export const UserPermissionsEntitySection = React.memo(
// Index must be corrected to account for pagination
const idx = (pagination.page - 1) * pagination.pageSize + _idx;
return (
<TableRow key={grant.id} data-qa-specific-grant={grant.label}>
<TableRow data-qa-specific-grant={grant.label} key={grant.id}>
<TableCell
sx={{
'& div': {
Expand All @@ -130,34 +152,43 @@ export const UserPermissionsEntitySection = React.memo(
>
{grant.label}
</TableCell>
<TableCell parentColumn="None" padding="checkbox">
<TableCell padding="checkbox" parentColumn="None">
<Radio
aria-label={`Disallow access for ${grant.label}`}
name={`${grant.id}-perms`}
inputProps={{
'aria-label': `Disallow access for ${grant.label}`,
name: `${grant.label}-permissions`,
}}
checked={grant.permissions === null}
value="null"
onChange={setGrantTo(entity, idx, null)}
data-qa-permission="None"
edge="start"
onChange={setGrantTo(entity, idx, null)}
value="null"
/>
</TableCell>
<TableCell parentColumn="Read Only" padding="checkbox">
<TableCell padding="checkbox" parentColumn="Read Only">
<Radio
aria-label={`Allow read-only access for ${grant.label}`}
name={`${grant.id}-perms`}
inputProps={{
'aria-label': `Allow read-only access for ${grant.label}`,
name: `${grant.label}-permissions`,
}}
checked={grant.permissions === 'read_only'}
value="read_only"
onChange={setGrantTo(entity, idx, 'read_only')}
data-qa-permission="Read Only"
edge="start"
onChange={setGrantTo(entity, idx, 'read_only')}
value="read_only"
/>
</TableCell>
<TableCell parentColumn="Read-Write" padding="checkbox">
<TableCell padding="checkbox" parentColumn="Read-Write">
<Radio
aria-label={`Allow read-write access for ${grant.label}`}
name={`${grant.id}-perms`}
inputProps={{
'aria-label': `Allow read-write access for ${grant.label}`,
name: `${grant.label}-permissions`,
}}
checked={grant.permissions === 'read_write'}
value="read_write"
onChange={setGrantTo(entity, idx, 'read_write')}
data-qa-permission="Read-Write"
edge="start"
onChange={setGrantTo(entity, idx, 'read_write')}
value="read_write"
/>
</TableCell>
</TableRow>
Expand All @@ -167,11 +198,11 @@ export const UserPermissionsEntitySection = React.memo(
</StyledGrantsTable>
<PaginationFooter
count={grants.length}
eventCategory={`User Permissions for ${entity}`}
handlePageChange={pagination.handlePageChange}
handleSizeChange={pagination.handlePageSizeChange}
page={pagination.page}
pageSize={pagination.pageSize}
eventCategory={`User Permissions for ${entity}`}
/>
</Box>
);
Expand Down

0 comments on commit 46da3e1

Please sign in to comment.