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

Jump to bottom

User Management Screen improvements #4454

Merged
merged 20 commits into from
Apr 8, 2024
Merged

User Management Screen improvements #4454

Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
cf2c348
pagination added
kartikaysaxena Feb 20, 2024
ff89499
Merge branch 'master' into usermanagment_improvements
Saranya-jena Feb 23, 2024
b0973f1
manual itemsPerPage limit options
kartikaysaxena Mar 6, 2024
4f4862c
Merge branch 'master' into usermanagment_improvements
SarthakJain26 Mar 7, 2024
ef3b1cb
manual itemsPerPage limit options
kartikaysaxena Mar 6, 2024
f9d1e01
Merge branch 'usermanagment_improvements' of https://github.com/karti…
kartikaysaxena Mar 7, 2024
c16e21e
Merge branch 'master' into usermanagment_improvements
kartikaysaxena Mar 9, 2024
c84ef98
Merge branch 'master' into usermanagment_improvements
Saranya-jena Mar 12, 2024
e728166
Merge branch 'master' into usermanagment_improvements
kartikaysaxena Mar 12, 2024
7c2ffaf
Merge branch 'master' into usermanagment_improvements
hrishavjha Mar 14, 2024
3ff1ee4
Merge branch 'master' into usermanagment_improvements
Saranya-jena Mar 14, 2024
23fcb96
Merge branch 'master' into usermanagment_improvements
Saranya-jena Mar 15, 2024
ead0e01
Merge branch 'master' into usermanagment_improvements
kartikaysaxena Mar 28, 2024
4b839e2
Update chaoscenter/web/src/views/AccountSettingsUserManagement/Accoun…
kartikaysaxena Apr 1, 2024
b0d93e4
Update chaoscenter/web/src/views/AccountSettingsUserManagement/Accoun…
kartikaysaxena Apr 1, 2024
08800f9
Update chaoscenter/web/src/views/AccountSettingsUserManagement/Accoun…
kartikaysaxena Mar 6, 2024
b18c29c
suggestion implemented
kartikaysaxena Apr 6, 2024
372378b
Merge branch 'usermanagment_improvements' of https://github.com/karti…
kartikaysaxena Apr 6, 2024
88c8348
Merge branch 'master' into usermanagment_improvements
kartikaysaxena Apr 7, 2024
6253636
Merge branch 'master' into usermanagment_improvements
Saranya-jena Apr 8, 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
22 changes: 19 additions & 3 deletions chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,12 @@ import {
Checkbox,
Container,
Layout,
Pagination,
TableV2,
Text,
useToggleOpen
} from '@harnessio/uicore';
import React from 'react';
import React, { useState } from 'react';
import type { Column, Row } from 'react-table';
import { Classes, Dialog, Menu, Popover, PopoverInteractionKind, Position } from '@blueprintjs/core';
import { Icon } from '@harnessio/icons';
Expand Down Expand Up @@ -190,6 +191,13 @@ export default function AccountSettingsUserManagementView(
const { isOpen: isCreateUserModalOpen, open: openCreateUserModal, close: closeCreateUserModal } = useToggleOpen();
const { getString } = useStrings();

const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 5;
Copy link
Member

Choose a reason for hiding this comment

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

Users can manually set limits too, you can do something like src/controllers/ExperimentDashboardV2/ExperimentDashboardV2.tsx what done here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Actually I have my minors this week, would continue from next week. Apologies for delay.

Copy link
Member

Choose a reason for hiding this comment

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

Sure no problems @kartikaysaxena, all the best for your exams.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I have added options for the user to select the number of itemsPerPage. Should I add more options or change it into an input field or does it look fine? PTAL @hrishavjha

Screen.Recording.2024-03-06.at.7.06.21.PM.mov

Copy link
Member

@hrishavjha hrishavjha Mar 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

If you pass pageSizeOptions: [...new Set([10 , 20, itemsPerPage])].sort() prop to the pagination component it will render the dropdown. Rest changes looks good to me 🚀


const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = usersData?.slice(indexOfFirstItem, indexOfLastItem);

return (
<Layout.Vertical height={'100%'}>
<Layout.Horizontal
Expand Down Expand Up @@ -230,16 +238,24 @@ export default function AccountSettingsUserManagementView(
small
loading={useUsersQueryLoading}
noData={{
when: () => !usersData?.length,
when: () => !currentItems?.length,
kartikaysaxena marked this conversation as resolved.
Show resolved Hide resolved
message: getString('noUserAddUsers')
}}
>
<Text font={{ variation: FontVariation.H4 }}>
{getString('totalUsers')}: {usersData?.length ?? 0}
</Text>
<Container style={{ flexGrow: 1 }}>
{usersData && <MemoizedUsersTable users={usersData} getUsersRefetch={getUsersRefetch} />}
{currentItems && <MemoizedUsersTable users={currentItems} getUsersRefetch={getUsersRefetch} />}
</Container>
<Pagination
pageSize={itemsPerPage}
pageCount={Math.ceil(usersData?.length / itemsPerPage)}
itemCount={usersData?.length ?? 0}
pageIndex={currentPage - 1}
gotoPage={pageIndex => setCurrentPage(pageIndex + 1)}
showPagination={true}
/>
</Loader>
</Layout.Vertical>
</Layout.Vertical>
Expand Down
Loading