Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +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',
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) => (
<HighlightCell
value={value}
subtitle={row.email || row.username}
/>
),
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);

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 { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
import { IGroupUser } from 'interfaces/group';
@ -43,15 +43,12 @@ export const GroupFormUsersTable: VFC<IGroupFormUsersTableProps> = ({
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) => (
<HighlightCell
value={value}
subtitle={row.email || row.username}
/>
),
minWidth: 100,
searchable: true,
},
@ -83,14 +80,31 @@ export const GroupFormUsersTable: VFC<IGroupFormUsersTableProps> = ({
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,

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

@ -138,7 +138,7 @@ export const ProjectAccessTable: VFC = () => {
<HighlightCell
value={value}
subtitle={
row.entity?.username || row.entity?.email
row.entity?.email || row.entity?.username
}
/>
}
@ -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 = () => {
</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]
);
@ -273,6 +277,7 @@ export const ProjectAccessTable: VFC = () => {
: storedParams.desc,
},
],
hiddenColumns: ['Username', 'Email'],
globalFilter: searchParams.get('search') || '',
}));
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',
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) => (
<HighlightCell value={value} subtitle={row.email || row.username} />
),
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<IProjectGroupViewProps> = ({
desc: defaultSort.desc,
},
],
hiddenColumns: ['Username', 'Email'],
}));
const [searchValue, setSearchValue] = useState('');