Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

upcoming: [M3-7835] - Adjust user table column count #10252

Merged
merged 5 commits into from
Mar 5, 2024
Merged

upcoming: [M3-7835] - Adjust user table column count #10252

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
551531b
fix: [M3-7835] - Adjust user table column count
jaalah Mar 4, 2024
efad3df
fix: [M3-7835] - Adjust user table column count
jaalah Mar 4, 2024
99fd19c
Minor update
jaalah Mar 4, 2024
bc97769
Only run proxy table query if there's a possibility to show it
jaalah Mar 4, 2024
bb3122f
Add some code comments
jaalah Mar 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-10252-upcoming-features-1709581147040.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Upcoming Features
---

Adjust user table column count for parent/child ([#10252](https://github.com/linode/manager/pull/10252))
24 changes: 19 additions & 5 deletions packages/manager/src/features/Users/UsersLanding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import * as React from 'react';

import AddNewLink from 'src/components/AddNewLink';
Expand All @@ -22,13 +24,16 @@ import { UsersLandingTableHead } from './UsersLandingTableHead';
import type { Filter } from '@linode/api-v4';

export const UsersLanding = () => {
const theme = useTheme();
const [isCreateDrawerOpen, setIsCreateDrawerOpen] = React.useState<boolean>(
false
);
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = React.useState(false);
const [selectedUsername, setSelectedUsername] = React.useState('');
const flags = useFlags();
const { data: profile } = useProfile();
const matchesSmDown = useMediaQuery(theme.breakpoints.down('sm'));
const matchesLgUp = useMediaQuery(theme.breakpoints.up('lg'));

const pagination = usePagination(1, 'account-users');
const order = useOrder();
Expand All @@ -51,22 +56,31 @@ export const UsersLanding = () => {
},
});

const isRestrictedUser = profile?.restricted;

const {
data: proxyUser,
error: proxyUserError,
isLoading: isLoadingProxyUser,
} = useAccountUsers({
enabled: flags.parentChildAccountAccess,
enabled:
flags.parentChildAccountAccess && showProxyUserTable && !isRestrictedUser,
Copy link
Contributor Author

@jaalah-akamai jaalah-akamai Mar 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was previously being run for parent user types when it was never used, and restricted accounts.

filters: { user_type: 'proxy' },
});

const isRestrictedUser = profile?.restricted;

const showChildAccountAccessCol = Boolean(
flags.parentChildAccountAccess && profile?.user_type === 'parent'
);

const numCols = showChildAccountAccessCol ? 6 : 5;
const numCols = matchesLgUp
? showChildAccountAccessCol
? 6
: 5
: matchesSmDown
? 3
: 4;

const proxyNumCols = matchesLgUp ? 4 : numCols;

const handleDelete = (username: string) => {
setIsDeleteDialogOpen(true);
Expand Down Expand Up @@ -97,7 +111,7 @@ export const UsersLanding = () => {
<UsersLandingTableBody
error={proxyUserError}
isLoading={isLoadingProxyUser}
numCols={4}
numCols={proxyNumCols}
onDelete={handleDelete}
users={proxyUser?.data}
/>
Expand Down
6 changes: 5 additions & 1 deletion packages/manager/src/features/Users/UsersLandingProxyTableHead.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ interface Props {

export const UsersLandingProxyTableHead = ({ order }: Props) => {
return (
<TableHead>
<TableHead
sx={{
whiteSpace: 'nowrap',
}}
>
<TableRow>
<TableSortCell
active={order.orderBy === 'username'}
Expand Down
8 changes: 1 addition & 7 deletions packages/manager/src/features/Users/UsersLandingTableBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,7 @@ export const UsersLandingTableBody = (props: Props) => {
const { error, isLoading, numCols, onDelete, users } = props;

if (isLoading) {
return (
<TableRowLoading
columns={numCols}
responsive={{ 1: { smDown: true }, 3: { lgDown: true } }}
rows={1}
/>
);
return <TableRowLoading columns={numCols} rows={1} />;
}

if (error) {
Expand Down
6 changes: 5 additions & 1 deletion packages/manager/src/features/Users/UsersLandingTableHead.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,11 @@ export const UsersLandingTableHead = ({
showChildAccountAccessCol,
}: Props) => {
return (
<TableHead>
<TableHead
sx={{
whiteSpace: 'nowrap',
}}
>
<TableRow>
<TableSortCell
active={order.orderBy === 'username'}
Expand Down
Loading