Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

feat: show username and email in name column (users tables) (#4180)

Browse Source 
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)
This commit is contained in:
Nuno Góis 2023-07-07 11:24:09 +01:00 committed by GitHub
parent 3ebf3c05f8
commit e0f5d2c600
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 79 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/component/admin/groups/Group/Group.tsx
View File

@ -78,15 +78,12 @@ export const Group: VFC = () => {
id: 'name', id: 'name',
Header: 'Name', Header: 'Name',
accessor: (row: IGroupUser) => row.name || '', accessor: (row: IGroupUser) => row.name || '',
Cell: HighlightCell, Cell: ({ value, row: { original: row } }: any) => (
minWidth: 100, <HighlightCell
searchable: true, value={value}
}, subtitle={row.email || row.username}
{ />
id: 'username', ),
Header: 'Username',
accessor: (row: IGroupUser) => row.username || row.email,
Cell: HighlightCell,
minWidth: 100, minWidth: 100,
searchable: true, searchable: true,
}, },
@ -146,6 +143,18 @@ export const Group: VFC = () => {
maxWidth: 100, maxWidth: 100,
disableSortBy: true, 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] [setSelectedUser, setRemoveUserOpen]
); );
@ -160,7 +169,7 @@ export const Group: VFC = () => {
: storedParams.desc, : storedParams.desc,
}, },
], ],
hiddenColumns: ['description'], hiddenColumns: ['Username', 'Email'],
globalFilter: searchParams.get('search') || '', globalFilter: searchParams.get('search') || '',
})); }));
const [searchValue, setSearchValue] = useState(initialState.globalFilter); const [searchValue, setSearchValue] = useState(initialState.globalFilter);

34
frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx
View File

@ -1,4 +1,4 @@
import { useMemo, VFC } from 'react'; import { useMemo, useState, VFC } from 'react';
import { IconButton, Tooltip, useMediaQuery } from '@mui/material'; import { IconButton, Tooltip, useMediaQuery } from '@mui/material';
import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
import { IGroupUser } from 'interfaces/group'; import { IGroupUser } from 'interfaces/group';
@ -43,15 +43,12 @@ export const GroupFormUsersTable: VFC<IGroupFormUsersTableProps> = ({
id: 'name', id: 'name',
Header: 'Name', Header: 'Name',
accessor: (row: IGroupUser) => row.name || '', accessor: (row: IGroupUser) => row.name || '',
Cell: HighlightCell, Cell: ({ value, row: { original: row } }: any) => (
minWidth: 100, <HighlightCell
searchable: true, value={value}
}, subtitle={row.email || row.username}
{ />
id: 'username', ),
Header: 'Username',
accessor: (row: IGroupUser) => row.username || row.email,
Cell: HighlightCell,
minWidth: 100, minWidth: 100,
searchable: true, searchable: true,
}, },
@ -83,14 +80,31 @@ export const GroupFormUsersTable: VFC<IGroupFormUsersTableProps> = ({
maxWidth: 100, maxWidth: 100,
disableSortBy: true, 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] [setUsers]
); );
const [initialState] = useState(() => ({
hiddenColumns: ['Username', 'Email'],
}));
const { headerGroups, rows, prepareRow, setHiddenColumns } = useTable( const { headerGroups, rows, prepareRow, setHiddenColumns } = useTable(
{ {
columns: columns as any[], columns: columns as any[],
data: users as any[], data: users as any[],
initialState,
sortTypes, sortTypes,
autoResetHiddenColumns: false, autoResetHiddenColumns: false,
autoResetSortBy: false, autoResetSortBy: false,

35
frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx
View File

@ -138,7 +138,7 @@ export const ProjectAccessTable: VFC = () => {
<HighlightCell <HighlightCell
value={value} value={value}
subtitle={ subtitle={
row.entity?.username || row.entity?.email row.entity?.email || row.entity?.username
} }
/> />
} }
@ -147,20 +147,6 @@ export const ProjectAccessTable: VFC = () => {
minWidth: 100, minWidth: 100,
searchable: true, 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', id: 'role',
Header: 'Role', Header: 'Role',
@ -259,6 +245,24 @@ export const ProjectAccessTable: VFC = () => {
</ActionCell> </ActionCell>
), ),
}, },
// 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] [access, projectId]
); );
@ -273,6 +277,7 @@ export const ProjectAccessTable: VFC = () => {
: storedParams.desc, : storedParams.desc,
}, },
], ],
hiddenColumns: ['Username', 'Email'],
globalFilter: searchParams.get('search') || '', globalFilter: searchParams.get('search') || '',
})); }));
const [searchValue, setSearchValue] = useState(initialState.globalFilter); const [searchValue, setSearchValue] = useState(initialState.globalFilter);

25
frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx
View File

@ -64,15 +64,9 @@ const columns = [
id: 'name', id: 'name',
Header: 'Name', Header: 'Name',
accessor: (row: IGroupUser) => row.name || '', accessor: (row: IGroupUser) => row.name || '',
Cell: HighlightCell, Cell: ({ value, row: { original: row } }: any) => (
minWidth: 100, <HighlightCell value={value} subtitle={row.email || row.username} />
searchable: true, ),
},
{
id: 'username',
Header: 'Username',
accessor: (row: IGroupUser) => row.username || row.email,
Cell: HighlightCell,
minWidth: 100, minWidth: 100,
searchable: true, searchable: true,
}, },
@ -98,6 +92,18 @@ const columns = [
sortType: 'date', sortType: 'date',
maxWidth: 150, 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']; const hiddenColumnsSmall = ['imageUrl', 'name', 'joined', 'lastLogin'];
@ -131,6 +137,7 @@ export const ProjectGroupView: VFC<IProjectGroupViewProps> = ({
desc: defaultSort.desc, desc: defaultSort.desc,
}, },
], ],
hiddenColumns: ['Username', 'Email'],
})); }));
const [searchValue, setSearchValue] = useState(''); const [searchValue, setSearchValue] = useState('');