feat: [UIE-8136] - IAM RBAC: add new users table component (part 2)

[aaleksee-akamai]

Description 📝

IAM RBAC - users table component.
Includes the table for proxy users and the logic for deleting and filtering them, and an adding a new user.

Changes 🔄

List any change(s) relevant to the reviewer.

• Table for proxy users
• Deleting users
• Adding user

Target release date 🗓️

1/14/25 (dev)

Preview 📷

Include a screenshot or screen recording of the change.

🔒 Use the Mask Sensitive Data setting for security.

💡 Use <video src="" /> tag when including recordings in table.

Before	After
📷	📷

How to test 🧪

Prerequisites

(How to setup test environment)

• Ensure the Identity and Access Beta flag is enabled in dev tools

Verification steps

(How to verify changes)

• Confirm table renders.
• Confirm adding a new user
• Confirm deleting an user

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All unit tests are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[github-actions]

Coverage Report: ✅
Base Coverage: 87.19%
Current Coverage: 87.2%

[cpathipa]

Confirming on the functionality adding / deleting the user.
@aaleksee-akamai Can we make this as CreateUserDrawer functional component instead of class component. It's recommended (CM development guide) to have functional component instead class components.

[cpathipa]

Can we make this a functional component?

[aaleksee-akamai]

sure, thanks @cpathipa

[github-actions]

This PR is stale because it has been open 15 days with no activity. Please attend to this PR or it will be closed in 5 days

[jaalah-akamai]

Suggested change

	label={
	restricted
	? `This user will have limited access to account features.
	This can be changed later.`
	: `This user will have full access to account features.
	This can be changed later.`
	}
	label={`This user will have ${restricted ? 'limited' : 'full'} access to account features.
	This can be changed later.`}

[aaleksee-akamai]

cool, thanks @jaalah-akamai !

[jaalah-akamai]

Please use a <Box> with sx prop - we want to avoid using style attributes

[jaalah-akamai]

Same here, please use sx

[jaalah-akamai]

There appears to be an extra Paper around the user settings. I didn't see mocks for this in the Figma file, can we confirm this is accurate?

Prod	This

[jaalah-akamai]

This entire handleSearch function is not how this should be done and should probably be re-written. Look at some examples from the LinodeCreate flow. We should be using our query for a lot of this. isSearching should be isFetching which comes from the useAccountUsers

[bnussman-akamai]

There are many better ways to handle searching here. This is unmaintainable and confusing.

Some issues I see are

• Unnecessary state (filteredUsers)
  • We can derive this from existing state rather than having extra state
• A fake loading state is implemented???
• Lots of one-off logic for field searching that will be difficult to maintain

I recommend using our nice API filtering utils. It uses the API to perform the actual filtering so no client side filtering is needed. This will clean things up a ton and give users the full capability of @linode/search

Full Code Example

import { getAPIFilterFromQuery } from '@linode/search';
import { Box, Button, Paper, Typography } from '@linode/ui';
import { useMediaQuery } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import React, { useState } from 'react';

import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
import { DocumentTitleSegment } from 'src/components/DocumentTitle';
import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
import { Table } from 'src/components/Table';
import { TableBody } from 'src/components/TableBody';
import { useOrder } from 'src/hooks/useOrder';
import { usePagination } from 'src/hooks/usePagination';
import { useAccountUsers } from 'src/queries/account/users';
import { useProfile } from 'src/queries/profile/profile';

import { UserDeleteConfirmation } from '../../Shared/UserDeleteConfirmation';
import CreateUserDrawer from './CreateUserDrawer';
import { ProxyUserTable } from './ProxyUserTable';
import { UsersLandingTableBody } from './UsersLandingTableBody';
import { UsersLandingTableHead } from './UsersLandingTableHead';

import type { Filter } from '@linode/api-v4';

export const UsersLanding = () => {
  const [isCreateDrawerOpen, setIsCreateDrawerOpen] = React.useState<boolean>(
    false
  );
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = React.useState(false);
  const [selectedUsername, setSelectedUsername] = React.useState('');

  const [query, setQuery] = useState<string>();

  const { data: profile } = useProfile();
  const theme = useTheme();
  const pagination = usePagination(1, 'account-users');
  const order = useOrder();

  const isProxyUser =
    profile?.user_type === 'child' || profile?.user_type === 'proxy';

  const { error: searchError, filter } = getAPIFilterFromQuery(query, {
    searchableFieldsWithoutOperator: ['username', 'email'],
  });

  const usersFilter: Filter = {
    ['+order']: order.order,
    ['+order_by']: order.orderBy,
    ...filter,
  };

  // Since this query is disabled for restricted users, use isLoading.
  const { data: users, error, isFetching, isLoading } = useAccountUsers({
    filters: usersFilter,
    params: {
      page: pagination.page,
      page_size: pagination.pageSize,
    },
  });

  const isRestrictedUser = profile?.restricted;

  const isSmDown = useMediaQuery(theme.breakpoints.down('sm'));
  const isLgDown = useMediaQuery(theme.breakpoints.up('lg'));

  const numColsLg = isLgDown ? 4 : 3;

  const numCols = isSmDown ? 2 : numColsLg;

  const handleDelete = (username: string) => {
    setIsDeleteDialogOpen(true);
    setSelectedUsername(username);
  };

  return (
    <React.Fragment>
      <DocumentTitleSegment segment="Users & Grants" />
      {isProxyUser && (
        <ProxyUserTable
          handleDelete={handleDelete}
          isProxyUser={isProxyUser}
          isRestrictedUser={isRestrictedUser}
          order={order}
        />
      )}
      <Paper sx={(theme) => ({ marginTop: theme.spacing(2) })}>
        <Box
          sx={(theme) => ({
            alignItems: 'center',
            display: 'flex',
            justifyContent: 'space-between',
            marginBottom: theme.spacing(2),
          })}
        >
          {isProxyUser && (
            <Typography
              sx={(theme) => ({
                [theme.breakpoints.down('md')]: {
                  marginLeft: theme.spacing(1),
                },
              })}
              variant="h3"
            >
              User Settings
            </Typography>
          )}
          {!isProxyUser && (
            <DebouncedSearchTextField
              clearable
              debounceTime={250}
              errorText={searchError?.message}
              hideLabel
              isSearching={isFetching}
              label="Filter"
              onSearch={setQuery}
              placeholder="Filter"
              sx={{ width: 320 }}
              value=""
            />
          )}
          <Button
            tooltipText={
              isRestrictedUser
                ? 'You cannot create other users as a restricted user.'
                : undefined
            }
            buttonType="primary"
            disabled={isRestrictedUser}
            onClick={() => setIsCreateDrawerOpen(true)}
          >
            Add a User
          </Button>
        </Box>
        <Table aria-label="List of Users">
          <UsersLandingTableHead order={order} />
          <TableBody>
            <UsersLandingTableBody
              error={error}
              isLoading={isLoading}
              numCols={numCols}
              onDelete={handleDelete}
              users={users?.data ?? []}
            />
          </TableBody>
        </Table>
        <PaginationFooter
          count={users?.results ?? 0}
          eventCategory="users landing"
          handlePageChange={pagination.handlePageChange}
          handleSizeChange={pagination.handlePageSizeChange}
          page={pagination.page}
          pageSize={pagination.pageSize}
        />
      </Paper>
      <CreateUserDrawer
        onClose={() => setIsCreateDrawerOpen(false)}
        open={isCreateDrawerOpen}
      />
      <UserDeleteConfirmation
        onClose={() => setIsDeleteDialogOpen(false)}
        open={isDeleteDialogOpen}
        username={selectedUsername}
      />
    </React.Fragment>
  );
};

[aaleksee-akamai]

@bnussman-akamai , I understand your point, and I see that I got it wrong — thank you for suggesting the correct implementation. However, it seems something might still be missing from my side, as it seems the filter works on its own but doesn’t apply the filtered data to the table

[bnussman-akamai]

Seems to be working nicely for me!

Screen.Recording.2025-01-13.at.12.33.36.PM.mov

Screen.Recording.2025-01-13.at.12.36.50.PM.mov

[aaleksee-akamai]

@bnussman-akamai , that's interesting. so it doesn't work with mock data then?

[bnussman-akamai]

That's correct. Our mock service worker don't fully support X-filtering but the real API does

[bnussman-akamai]

Once we create useCreateUserMutation, we can use the onSuccess option of that mutation to handle query invalidation/refetching

[aaleksee-akamai]

@bnussman-akamai , I’m not sure if I’ve done this correctly. This is new to me, so please let me know if I’ve made any mistakes

[bnussman-akamai]

Looks great!

[aaleksee-akamai]

@bnussman-akamai , I understand your point, and I see that I got it wrong — thank you for suggesting the correct implementation. However, it seems something might still be missing from my side, as it seems the filter works on its own but doesn’t apply the filtered data to the table

[aaleksee-akamai]

There appears to be an extra Paper around the user settings. I didn't see mocks for this in the Figma file, can we confirm this is accurate?

Prod This

@jaalah-akamai , Thank you for noticing this. This happens because we add Paper for non-proxy users (you can find it here). The design for proxy users hasn’t been implemented, as it wasn’t expected to change. Currently, I don’t see an easy way to ensure that Paper is only for non-proxy users without duplications. I can confirm this with the design team, but it won’t be earlier than Monday.

[cpathipa]

Confirming on the functionality, Approving pending changes suggested by Banks and Jaalah.

• Table for proxy users
• Deleting users
• Adding user

[bnussman-akamai]

I can't seem to toggle this

Screen.Recording.2025-01-13.at.12.36.03.PM.mov

[aaleksee-akamai]

thanks @bnussman-akamai , I've changed on that, it seems working, let me know if there is another way to do it better

[bnussman-akamai]

Change looks good. I recommend moving the onChange and checked to the FormControlLabel component rather than the Toggle directly. That's how it is intended to be used

[jaalah-akamai]

@aaleksee-akamai This is looking great! 👏

[linode-gh-bot]

Cloud Manager UI test results

🔺 2 failing tests on test run #7 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
2 Failing	472 Passing	2 Skipped	106m 48s

Details

Failing Tests
	Spec	Test
❌	smoke-linode-landing-table.spec.ts	linode landing checks » checks the landing page side menu items
❌	cloudpulse-navigation.spec.ts	CloudPulse navigation » can navigate to Cloudpulse landing page

Troubleshooting

Use this command to re-run the failing tests:

yarn cy:run -s "cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts,cypress/e2e/core/cloudpulse/cloudpulse-navigation.spec.ts"

[bnussman-akamai]

Change looks good. I recommend moving the onChange and checked to the FormControlLabel component rather than the Toggle directly. That's how it is intended to be used

[cpathipa]

@aaleksee-akamaiThank you for addressing all the feedback. This PR is good to go with the above recommendation.

[cypress]

Cloud Manager E2E    Run #7094

Run Properties:   Passed #7094  •  7123228f33: feat: [UIE-8136] - add new users table component (part 2) (#11402)

Project	Cloud Manager E2E
Branch Review	develop
Run status	Passed #7094
Run duration	27m 06s
Commit	7123228f33: feat: [UIE-8136] - add new users table component (part 2) (#11402)
Committer	aaleksee-akamai
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	2
Skipped	0
Passing	474
View all changes introduced in this branch ↗︎