Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-14 00:19:16 +01:00
Code Issues Projects Releases Wiki Activity

fix: users groups table columns on small screens (#9194)

Browse Source 
On page "edit users for group", prevent user names and avatars form
disappearing on devices with small screen.
This commit is contained in:
Tymoteusz Czech 2025-02-04 10:19:40 +01:00 committed by GitHub
parent c68a542a63
commit c1e41b2b05
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 2 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { useMemo, useState, type VFC } from 'react'; import { useMemo, useState, type VFC } from 'react';
import { IconButton, Tooltip, useMediaQuery } from '@mui/material'; import { IconButton, Tooltip } from '@mui/material';
import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
import type { IGroupUser } from 'interfaces/group'; import type { IGroupUser } from 'interfaces/group';
import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell'; import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
@ -10,10 +10,6 @@ import { VirtualizedTable } from 'component/common/Table';
import { useFlexLayout, useSortBy, useTable } from 'react-table'; import { useFlexLayout, useSortBy, useTable } from 'react-table';
import { sortTypes } from 'utils/sortTypes'; import { sortTypes } from 'utils/sortTypes';
import { UserAvatar } from 'component/common/UserAvatar/UserAvatar'; import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
import theme from 'themes/theme';
import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
const hiddenColumnsSmall = ['imageUrl', 'name'];
interface IGroupFormUsersTableProps { interface IGroupFormUsersTableProps {
users: IGroupUser[]; users: IGroupUser[];
@ -24,8 +20,6 @@ export const GroupFormUsersTable: VFC<IGroupFormUsersTableProps> = ({
users, users,
setUsers, setUsers,
}) => { }) => {
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
const columns = useMemo( const columns = useMemo(
() => [ () => [
{ {
@ -100,7 +94,7 @@ export const GroupFormUsersTable: VFC<IGroupFormUsersTableProps> = ({
hiddenColumns: ['Username', 'Email'], hiddenColumns: ['Username', 'Email'],
})); }));
const { headerGroups, rows, prepareRow, setHiddenColumns } = useTable( const { headerGroups, rows, prepareRow } = useTable(
{ {
columns: columns as any[], columns: columns as any[],
data: users as any[], data: users as any[],
@ -115,17 +109,6 @@ export const GroupFormUsersTable: VFC<IGroupFormUsersTableProps> = ({
useFlexLayout, useFlexLayout,
); );
useConditionallyHiddenColumns(
[
{
condition: isSmallScreen,
columns: hiddenColumnsSmall,
},
],
setHiddenColumns,
columns,
);
return ( return (
<ConditionallyRender <ConditionallyRender
condition={rows.length > 0} condition={rows.length > 0}