1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

feat: remove sort by user on flags overview (#9826)

We don't aggregate all users, for filters on flags overview. Let's drop this filter
This commit is contained in:
Tymoteusz Czech 2025-04-24 13:37:30 +02:00 committed by GitHub
parent f6eb572a14
commit a38bf8ea4c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 32 additions and 30 deletions

View File

@ -102,11 +102,6 @@ export const FeatureToggleListTable: FC = () => {
tableState, tableState,
setTableState, setTableState,
); );
const onAvatarClick = useTableStateFilter(
['createdBy', 'IS'],
tableState,
setTableState,
);
const { projects } = useProjects(); const { projects } = useProjects();
const bodyLoadingRef = useLoading(loading); const bodyLoadingRef = useLoading(loading);
@ -172,7 +167,7 @@ export const FeatureToggleListTable: FC = () => {
columnHelper.accessor('createdBy', { columnHelper.accessor('createdBy', {
id: 'createdBy', id: 'createdBy',
header: 'By', header: 'By',
cell: AvatarCell(onAvatarClick), cell: AvatarCell(),
meta: { width: '1%', align: 'center' }, meta: { width: '1%', align: 'center' },
enableSorting: false, enableSorting: false,
}), }),
@ -347,12 +342,11 @@ export const FeatureToggleListTable: FC = () => {
], ],
[tableState.favoritesFirst], [tableState.favoritesFirst],
); );
const data = useMemo( const data = useMemo<FeatureSearchResponseSchema[]>(
() => () =>
features?.length === 0 && loading ? featuresPlaceholder : features, features?.length === 0 && loading ? featuresPlaceholder : features,
[initialLoad, features, loading], [initialLoad, features, loading],
); );
const table = useReactTable( const table = useReactTable(
withTableState(tableState, setTableState, { withTableState(tableState, setTableState, {
columns, columns,

View File

@ -41,12 +41,12 @@ const StyledAvatar = styled(UserAvatar)(({ theme }) => ({
})); }));
export const AvatarCell = export const AvatarCell =
(onAvatarClick: (userId: number) => void): FC<AvatarCellProps> => (onAvatarClick?: (userId: number) => void): FC<AvatarCellProps> =>
({ row: { original } }) => { ({ row: { original } }) => {
const ariaDisabled = original.createdBy.id === 0; const ariaDisabled = original.createdBy.id === 0;
const clickAction = ariaDisabled const clickAction = ariaDisabled
? () => {} ? () => {}
: () => onAvatarClick(original.createdBy.id); : () => onAvatarClick?.(original.createdBy.id);
const tooltipContent = ariaDisabled ? ( const tooltipContent = ariaDisabled ? (
<> <>
<p>{original.createdBy.name}</p> <p>{original.createdBy.name}</p>
@ -58,29 +58,37 @@ export const AvatarCell =
<p>{original.createdBy.name}</p> <p>{original.createdBy.name}</p>
); );
const content = (
<>
<ScreenReaderOnly>
<span>
Show only flags created by {original.createdBy.name}
</span>
</ScreenReaderOnly>
<StyledAvatar
disableTooltip
user={{
id: original.createdBy.id,
name: original.createdBy.name,
imageUrl: original.createdBy.imageUrl,
}}
/>
</>
);
return ( return (
<StyledContainer> <StyledContainer>
<HtmlTooltip arrow describeChild title={tooltipContent}> <HtmlTooltip arrow describeChild title={tooltipContent}>
<StyledAvatarButton {onAvatarClick ? (
aria-disabled={ariaDisabled} <StyledAvatarButton
onClick={clickAction} aria-disabled={ariaDisabled}
> onClick={clickAction}
<ScreenReaderOnly> >
<span> {content}
Show only flags created by{' '} </StyledAvatarButton>
{original.createdBy.name} ) : (
</span> <div>{content}</div>
</ScreenReaderOnly> )}
<StyledAvatar
disableTooltip
user={{
id: original.createdBy.id,
name: original.createdBy.name,
imageUrl: original.createdBy.imageUrl,
}}
/>
</StyledAvatarButton>
</HtmlTooltip> </HtmlTooltip>
</StyledContainer> </StyledContainer>
); );