chore: disable filtering for unknown users (#7369)

This PR disables the filtering capability in the front end for unknown
users.

Modifying the back end to support filtering for unknown users is not
something we want to do yet. It's possible, but it requires adding a lot
of special cases to the handling code (refer to [PR
#7359](https://github.com/Unleash/unleash/pull/7359)), which we'd like
to avoid if possible. To avoid annoying cases where the filtering
doesn't work as expected and breaks user expectations, we're disabling
the filtering capability for unknown users in the front end.

We can consider whether to enable back-end results for unknown in the future if we get
user feedback that it's important.

This PR works by changing the avatar cell component. When the user has
id 0 (and is therefore unknown), we:
- set aria-disabled to true. This alerts users with assistive tech that
the button is disabled, but it doesn't take it out of the tab order, so
it's not mysteriously missing.
- change the tooltip text, telling users that they can't filter by
unknown users.
- disable the avatar callback function, so clicking on the avatar
doesn't do anything.

The accompanying tests assert this functionality.

I considered also updating the screen reader text, but I think that
would add more confusion or be more information than the user needs.
According to MDN's article on the [aria-disabled
attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled):

> [the aria-disabled] declaration will inform people using assistive
technologies, such as screen readers, that such elements are not meant
to be editable or otherwise operable.

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/AvatarCell.test.tsx

@@ -0,0 +1,60 @@
+import { fireEvent, screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import { vi } from 'vitest';
+import { AvatarCell } from './AvatarCell';
+
+test("the filtering button should have aria-disabled='true' when the user id is 0", async () => {
+    const Cell = AvatarCell(() => {});
+    render(<Cell row={{ original: { createdBy: { id: 0, name: '' } } }} />);
+    const button = await screen.findByRole('button');
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+});
+
+test("the filtering button should have aria-disabled='false' when the user id is not 0", async () => {
+    const Cell = AvatarCell(() => {});
+    render(<Cell row={{ original: { createdBy: { id: 1, name: '' } } }} />);
+    const button = await screen.findByRole('button');
+    expect(button).toHaveAttribute('aria-disabled', 'false');
+});
+
+test('the onAvatarClick function should not be called when the user id is 0', async () => {
+    const onAvatarClick = vi.fn();
+    const Cell = AvatarCell(onAvatarClick);
+    render(<Cell row={{ original: { createdBy: { id: 0, name: '' } } }} />);
+    const button = await screen.findByRole('button');
+
+    fireEvent.click(button);
+
+    expect(onAvatarClick).not.toHaveBeenCalled();
+});
+
+test('the onAvatarClick function should be called when the user id is not 0', async () => {
+    const onAvatarClick = vi.fn();
+    const Cell = AvatarCell(onAvatarClick);
+    render(<Cell row={{ original: { createdBy: { id: 1, name: '' } } }} />);
+    const button = await screen.findByRole('button');
+
+    fireEvent.click(button);
+
+    expect(onAvatarClick).toHaveBeenCalled();
+});
+
+test("when the user id is 0, the tooltip should tell you that you can't filter by unknown users", async () => {
+    const Cell = AvatarCell(() => {});
+    render(<Cell row={{ original: { createdBy: { id: 0, name: '' } } }} />);
+    const button = await screen.findByRole('button');
+    fireEvent.mouseOver(button);
+
+    const tooltip = await screen.findByRole('tooltip');
+    expect(tooltip).toHaveTextContent("can't filter by unknown users");
+});
+
+test("when the user id is not 0, the tooltip should not tell you that you can't filter by unknown users", async () => {
+    const Cell = AvatarCell(() => {});
+    render(<Cell row={{ original: { createdBy: { id: 1, name: '' } } }} />);
+    const button = await screen.findByRole('button');
+    fireEvent.mouseOver(button);
+
+    const tooltip = await screen.findByRole('tooltip');
+    expect(tooltip).not.toHaveTextContent("can't filter by unknown users");
+});

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/AvatarCell.tsx

@@ -1,6 +1,5 @@
 import { type Theme, styled } from '@mui/material';
 import type { FC } from 'react';
-import { visuallyHiddenStyles } from '../CreateProject/NewCreateProjectForm/ConfigButtons/shared.styles';
 import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
 import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
@@ -32,23 +31,34 @@ const StyledAvatarButton = styled('button')({
     padding: 0,
 });
 
-export const VisuallyHiddenButtonText = styled('span')(() => ({
-    ...visuallyHiddenStyles,
-    position: 'absolute',
+const StyledSecondaryText = styled('p')(({ theme }) => ({
+    color: theme.palette.text.secondary,
 }));
 
 export const AvatarCell =
     (onAvatarClick: (userId: number) => void): FC<AvatarCellProps> =>
     ({ row: { original } }) => {
+        const ariaDisabled = original.createdBy.id === 0;
+        const clickAction = ariaDisabled
+            ? () => {}
+            : () => onAvatarClick(original.createdBy.id);
+        const tooltipContent = ariaDisabled ? (
+            <>
+                <p>{original.createdBy.name}</p>
+                <StyledSecondaryText>
+                    You can't filter by unknown users.
+                </StyledSecondaryText>
+            </>
+        ) : (
+            <p>{original.createdBy.name}</p>
+        );
+
         return (
             <StyledContainer>
-                <HtmlTooltip
-                    arrow
-                    describeChild
-                    title={original.createdBy.name}
-                >
+                <HtmlTooltip arrow describeChild title={tooltipContent}>
                     <StyledAvatarButton
-                        onClick={() => onAvatarClick(original.createdBy.id)}
+                        aria-disabled={ariaDisabled}
+                        onClick={clickAction}
                     >
                         <ScreenReaderOnly>
                             <span>