From e0f5d2c600d08ddc2f69a84063555b4ba88257dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Fri, 7 Jul 2023 11:24:09 +0100 Subject: [PATCH] feat: show username and email in name column (users tables) (#4180) https://linear.app/unleash/issue/2-1197/merge-columns-name-and-username-in-one-column-for-all-the-tables Shows `email` and/or `username` in the `name` column of users tables. This provides a more consistent look across the UI while saving some space for other columns. Before: ![image](https://github.com/Unleash/unleash/assets/14320932/b97b39ba-f5ae-4c39-aed5-d2f7574360c1) After: ![image](https://github.com/Unleash/unleash/assets/14320932/ef79b6a8-c494-42b3-aef8-7012631e3dbd) --- .../component/admin/groups/Group/Group.tsx | 29 +++++++++------ .../GroupFormUsersTable.tsx | 34 ++++++++++++------ .../ProjectAccessTable/ProjectAccessTable.tsx | 35 +++++++++++-------- .../ProjectGroupView/ProjectGroupView.tsx | 25 ++++++++----- 4 files changed, 79 insertions(+), 44 deletions(-) diff --git a/frontend/src/component/admin/groups/Group/Group.tsx b/frontend/src/component/admin/groups/Group/Group.tsx index 7fe13965f6..a3e994047a 100644 --- a/frontend/src/component/admin/groups/Group/Group.tsx +++ b/frontend/src/component/admin/groups/Group/Group.tsx @@ -78,15 +78,12 @@ export const Group: VFC = () => { id: 'name', Header: 'Name', accessor: (row: IGroupUser) => row.name || '', - Cell: HighlightCell, - minWidth: 100, - searchable: true, - }, - { - id: 'username', - Header: 'Username', - accessor: (row: IGroupUser) => row.username || row.email, - Cell: HighlightCell, + Cell: ({ value, row: { original: row } }: any) => ( + + ), minWidth: 100, searchable: true, }, @@ -146,6 +143,18 @@ export const Group: VFC = () => { maxWidth: 100, disableSortBy: true, }, + // Always hidden -- for search + { + accessor: (row: IGroupUser) => row.username || '', + Header: 'Username', + searchable: true, + }, + // Always hidden -- for search + { + accessor: (row: IGroupUser) => row.email || '', + Header: 'Email', + searchable: true, + }, ], [setSelectedUser, setRemoveUserOpen] ); @@ -160,7 +169,7 @@ export const Group: VFC = () => { : storedParams.desc, }, ], - hiddenColumns: ['description'], + hiddenColumns: ['Username', 'Email'], globalFilter: searchParams.get('search') || '', })); const [searchValue, setSearchValue] = useState(initialState.globalFilter); diff --git a/frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx b/frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx index 1dec51ade5..726994d49b 100644 --- a/frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx +++ b/frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx @@ -1,4 +1,4 @@ -import { useMemo, VFC } from 'react'; +import { useMemo, useState, VFC } from 'react'; import { IconButton, Tooltip, useMediaQuery } from '@mui/material'; import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; import { IGroupUser } from 'interfaces/group'; @@ -43,15 +43,12 @@ export const GroupFormUsersTable: VFC = ({ id: 'name', Header: 'Name', accessor: (row: IGroupUser) => row.name || '', - Cell: HighlightCell, - minWidth: 100, - searchable: true, - }, - { - id: 'username', - Header: 'Username', - accessor: (row: IGroupUser) => row.username || row.email, - Cell: HighlightCell, + Cell: ({ value, row: { original: row } }: any) => ( + + ), minWidth: 100, searchable: true, }, @@ -83,14 +80,31 @@ export const GroupFormUsersTable: VFC = ({ maxWidth: 100, disableSortBy: true, }, + // Always hidden -- for search + { + accessor: (row: IGroupUser) => row.username || '', + Header: 'Username', + searchable: true, + }, + // Always hidden -- for search + { + accessor: (row: IGroupUser) => row.email || '', + Header: 'Email', + searchable: true, + }, ], [setUsers] ); + const [initialState] = useState(() => ({ + hiddenColumns: ['Username', 'Email'], + })); + const { headerGroups, rows, prepareRow, setHiddenColumns } = useTable( { columns: columns as any[], data: users as any[], + initialState, sortTypes, autoResetHiddenColumns: false, autoResetSortBy: false, diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx index 572f3320e2..f4fd627e27 100644 --- a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx +++ b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx @@ -138,7 +138,7 @@ export const ProjectAccessTable: VFC = () => { } @@ -147,20 +147,6 @@ export const ProjectAccessTable: VFC = () => { minWidth: 100, searchable: true, }, - { - id: 'username', - Header: 'Username', - accessor: (row: IProjectAccess) => { - if (row.type !== ENTITY_TYPE.GROUP) { - const userRow = row.entity as IUser; - return userRow.username || userRow.email; - } - return ''; - }, - Cell: HighlightCell, - minWidth: 100, - searchable: true, - }, { id: 'role', Header: 'Role', @@ -259,6 +245,24 @@ export const ProjectAccessTable: VFC = () => { ), }, + // Always hidden -- for search + { + accessor: (row: IProjectAccess) => + row.type !== ENTITY_TYPE.GROUP + ? (row.entity as IUser)?.username || '' + : '', + Header: 'Username', + searchable: true, + }, + // Always hidden -- for search + { + accessor: (row: IProjectAccess) => + row.type !== ENTITY_TYPE.GROUP + ? (row.entity as IUser)?.email || '' + : '', + Header: 'Email', + searchable: true, + }, ], [access, projectId] ); @@ -273,6 +277,7 @@ export const ProjectAccessTable: VFC = () => { : storedParams.desc, }, ], + hiddenColumns: ['Username', 'Email'], globalFilter: searchParams.get('search') || '', })); const [searchValue, setSearchValue] = useState(initialState.globalFilter); diff --git a/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx b/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx index 83956c49eb..f9b2c66ba1 100644 --- a/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx +++ b/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx @@ -64,15 +64,9 @@ const columns = [ id: 'name', Header: 'Name', accessor: (row: IGroupUser) => row.name || '', - Cell: HighlightCell, - minWidth: 100, - searchable: true, - }, - { - id: 'username', - Header: 'Username', - accessor: (row: IGroupUser) => row.username || row.email, - Cell: HighlightCell, + Cell: ({ value, row: { original: row } }: any) => ( + + ), minWidth: 100, searchable: true, }, @@ -98,6 +92,18 @@ const columns = [ sortType: 'date', maxWidth: 150, }, + // Always hidden -- for search + { + accessor: (row: IGroupUser) => row.username || '', + Header: 'Username', + searchable: true, + }, + // Always hidden -- for search + { + accessor: (row: IGroupUser) => row.email || '', + Header: 'Email', + searchable: true, + }, ]; const hiddenColumnsSmall = ['imageUrl', 'name', 'joined', 'lastLogin']; @@ -131,6 +137,7 @@ export const ProjectGroupView: VFC = ({ desc: defaultSort.desc, }, ], + hiddenColumns: ['Username', 'Email'], })); const [searchValue, setSearchValue] = useState('');