From a38bf8ea4c5a7ca099615ab3e1da4f669a38971d Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Thu, 24 Apr 2025 13:37:30 +0200
Subject: [PATCH] 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
---
 .../FeatureToggleListTable.tsx                | 10 +---
 .../AvatarCell.tsx                            | 52 +++++++++++--------
 2 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
index 254e5218ff..02a5af69e7 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
@@ -102,11 +102,6 @@ export const FeatureToggleListTable: FC = () => {
         tableState,
         setTableState,
     );
-    const onAvatarClick = useTableStateFilter(
-        ['createdBy', 'IS'],
-        tableState,
-        setTableState,
-    );
 
     const { projects } = useProjects();
     const bodyLoadingRef = useLoading(loading);
@@ -172,7 +167,7 @@ export const FeatureToggleListTable: FC = () => {
                       columnHelper.accessor('createdBy', {
                           id: 'createdBy',
                           header: 'By',
-                          cell: AvatarCell(onAvatarClick),
+                          cell: AvatarCell(),
                           meta: { width: '1%', align: 'center' },
                           enableSorting: false,
                       }),
@@ -347,12 +342,11 @@ export const FeatureToggleListTable: FC = () => {
                   ],
         [tableState.favoritesFirst],
     );
-    const data = useMemo(
+    const data = useMemo<FeatureSearchResponseSchema[]>(
         () =>
             features?.length === 0 && loading ? featuresPlaceholder : features,
         [initialLoad, features, loading],
     );
-
     const table = useReactTable(
         withTableState(tableState, setTableState, {
             columns,
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/AvatarCell.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/AvatarCell.tsx
index 6d5df110c0..b9981e489c 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/AvatarCell.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/AvatarCell.tsx
@@ -41,12 +41,12 @@ const StyledAvatar = styled(UserAvatar)(({ theme }) => ({
 }));
 
 export const AvatarCell =
-    (onAvatarClick: (userId: number) => void): FC<AvatarCellProps> =>
+    (onAvatarClick?: (userId: number) => void): FC<AvatarCellProps> =>
     ({ row: { original } }) => {
         const ariaDisabled = original.createdBy.id === 0;
         const clickAction = ariaDisabled
             ? () => {}
-            : () => onAvatarClick(original.createdBy.id);
+            : () => onAvatarClick?.(original.createdBy.id);
         const tooltipContent = ariaDisabled ? (
             <>
                 <p>{original.createdBy.name}</p>
@@ -58,29 +58,37 @@ export const AvatarCell =
             <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 (
             <StyledContainer>
                 <HtmlTooltip arrow describeChild title={tooltipContent}>
-                    <StyledAvatarButton
-                        aria-disabled={ariaDisabled}
-                        onClick={clickAction}
-                    >
-                        <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,
-                            }}
-                        />
-                    </StyledAvatarButton>
+                    {onAvatarClick ? (
+                        <StyledAvatarButton
+                            aria-disabled={ariaDisabled}
+                            onClick={clickAction}
+                        >
+                            {content}
+                        </StyledAvatarButton>
+                    ) : (
+                        <div>{content}</div>
+                    )}
                 </HtmlTooltip>
             </StyledContainer>
         );