feat: add "my projects" filter to projects list (#6831)

This PR adds the buttons (only UI, no functionality) to show either "all
projects" or "my projects".

The buttons use a styled button group and are hidden behind the new
`projectListFilterMyProjects` flag.

The button placement breaks with the previously established page header
pattern of having all actions moved to the right. To accommodate this
new placement, I created a new flex container in the header called
`leftActions`, which is essentially just a mirror of the normal actions.
I went with `leftActions` instead of `inlineStartActions` or something
similar because I think it's clearer, and I don't see us adapting
Unleash for different writing directions right now. We can always change
it later.

I have also slightly increased the end margin of the page header to
accommodate the new designs and to adjust the spacing before the
buttons. I adjusted the margin of the text instead of the padding of the
left actions because this will keep the spacing to the page header the
same on every page. Without it, we could end up in situations where the
spacing changes from page to page based on whether it has left actions
or not, which is probably undesirable.


![image](https://github.com/Unleash/unleash/assets/17786332/7d6ba98c-a34b-45d4-85f4-2b1c2f3dc0c8)


## Still to do:

### Hover colors

~~Find out what the right hover color variable is. I'm using the light
mode hover color for now, which works well in both light and dark modes
(looks nice and is AAccessible), but it's not the same as the hover
color for other buttons in dark mode.~~

Fixed ☝🏼 

### Small windows

Also worth noting: at around 500px, the layout shift starts to cause
problems and we end up with overlapping elements. How do we want to deal
with narrower screens? Today, the UI is pretty functional until we reach
about 250px. It would be nice to not increase that size.

The new version breaking at about 500px:

![image](https://github.com/Unleash/unleash/assets/17786332/bf4f70d7-13b7-410a-9de4-30f4873a2ab8)

The old version breaking at about 250px:

![image](https://github.com/Unleash/unleash/assets/17786332/2d4e1e9c-8442-471c-91e4-67c024736234)

### Margins

We also need to figure out how much space we want on smaller windows:


![image](https://github.com/Unleash/unleash/assets/17786332/b12804b1-a2db-4547-88d5-0d9d49221fe2)

frontend/src/component/common/PageHeader/PageHeader.tsx

@@ -40,7 +40,7 @@ const StyledHeader = styled('div')(({ theme }) => ({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    marginRight: theme.spacing(2),
+    marginRight: theme.spacing(5),
 }));
 
 const StyledHeaderTitle = styled(Typography)(({ theme }) => ({
@@ -57,6 +57,15 @@ const StyledHeaderActions = styled('div')(({ theme }) => ({
     gap: theme.spacing(1),
 }));
 
+const StyledLeftHeaderActions = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexGrow: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    marginRight: theme.spacing(2),
+}));
+
 interface IPageHeaderProps {
     title?: string;
     titleElement?: ReactNode;
@@ -64,6 +73,7 @@ interface IPageHeaderProps {
     variant?: TypographyProps['variant'];
     loading?: boolean;
     actions?: ReactNode;
+    leftActions?: ReactNode;
     className?: string;
     secondary?: boolean;
 }
@@ -74,6 +84,7 @@ const PageHeaderComponent: FC<IPageHeaderProps> & {
     title,
     titleElement,
     actions,
+    leftActions,
     subtitle,
     variant,
     loading,
@@ -100,6 +111,14 @@ const PageHeaderComponent: FC<IPageHeaderProps> & {
                     </StyledHeaderTitle>
                     {subtitle && <small>{subtitle}</small>}
                 </StyledHeader>
+                <ConditionallyRender
+                    condition={Boolean(leftActions)}
+                    show={
+                        <StyledLeftHeaderActions>
+                            {leftActions}
+                        </StyledLeftHeaderActions>
+                    }
+                />
                 <ConditionallyRender
                     condition={Boolean(actions)}
                     show={<StyledHeaderActions>{actions}</StyledHeaderActions>}

frontend/src/component/project/ProjectList/ProjectList.tsx

@@ -16,7 +16,12 @@ import Add from '@mui/icons-material/Add';
 import ApiError from 'component/common/ApiError/ApiError';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { TablePlaceholder } from 'component/common/Table';
-import { useMediaQuery, styled } from '@mui/material';
+import {
+    useMediaQuery,
+    styled,
+    ToggleButtonGroup,
+    ToggleButton,
+} from '@mui/material';
 import theme from 'themes/theme';
 import { Search } from 'component/common/Search/Search';
 import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
@@ -25,6 +30,7 @@ import { ReactComponent as ProPlanIcon } from 'assets/icons/pro-enterprise-featu
 import { ReactComponent as ProPlanIconLight } from 'assets/icons/pro-enterprise-feature-badge-light.svg';
 import { safeRegExp } from '@server/util/escape-regex';
 import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledDivContainer = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -49,6 +55,24 @@ const StyledCardLink = styled(Link)(({ theme }) => ({
     pointer: 'cursor',
 }));
 
+const StyledButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
+    button: {
+        color: theme.palette.primary.main,
+        borderColor: theme.palette.background.alternative,
+        textTransform: 'none',
+        paddingInline: theme.spacing(3),
+        transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+    },
+    'button[aria-pressed=true]': {
+        backgroundColor: theme.palette.background.alternative,
+        color: theme.palette.primary.contrastText,
+
+        '&:hover': {
+            backgroundColor: theme.palette.action.alternative,
+        },
+    },
+}));
+
 type PageQueryType = Partial<Record<'search', string>>;
 
 type projectMap = {
@@ -112,6 +136,10 @@ export const ProjectListNew = () => {
         searchParams.get('search') || '',
     );
 
+    const showProjectFilterButtons = useUiFlag('projectListFilterMyProjects');
+    const filters = ['All projects', 'My projects'];
+    const [filter, setFilter] = useState(filters[0]);
+
     useEffect(() => {
         const tableState: PageQueryType = {};
         if (searchValue) {
@@ -172,6 +200,36 @@ export const ProjectListNew = () => {
             header={
                 <PageHeader
                     title={`Projects (${projectCount})`}
+                    leftActions={
+                        <ConditionallyRender
+                            condition={showProjectFilterButtons}
+                            show={
+                                <StyledButtonGroup
+                                    aria-label='project list filter'
+                                    size='small'
+                                    color='primary'
+                                    value={filter}
+                                    exclusive
+                                    onChange={(event, value) => {
+                                        if (value !== null) {
+                                            setFilter(value);
+                                        }
+                                    }}
+                                >
+                                    {filters.map((filter) => {
+                                        return (
+                                            <ToggleButton
+                                                key={filter}
+                                                value={filter}
+                                            >
+                                                {filter}
+                                            </ToggleButton>
+                                        );
+                                    })}
+                                </StyledButtonGroup>
+                            }
+                        />
+                    }
                     actions={
                         <>
                             <ConditionallyRender

frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap

@@ -19,7 +19,7 @@ exports[`renders an empty list correctly 1`] = `
             className="css-mt0dvk"
           >
             <div
-              className=" css-1gg5pjj"
+              className=" css-1kxj5dx"
               data-loading={true}
             >
               <h1

frontend/src/themes/colors.ts

@@ -26,6 +26,7 @@ export const colors = {
         0.05: 'rgba(25, 24, 41, 0.05)',
     },
     purple: {
+        1000: '#34325E',
         950: '#4944a7',
         900: '#615BC2',
         800: '#6C65E5',

frontend/src/themes/dark-theme.ts

@@ -180,6 +180,7 @@ const theme = {
             focus: actionColors[0.12],
             focusOpacity: 0.12,
             activatedOpacity: 0.12,
+            alternative: colors.purple[1000],
         },
 
         /**

frontend/src/themes/theme.ts

@@ -165,6 +165,7 @@ export const theme = {
             focus: colors.action[0.12],
             focusOpacity: 0.12,
             activatedOpacity: 0.12,
+            alternative: colors.purple[900],
         },
 
         /**

frontend/src/themes/themeTypes.ts

@@ -155,6 +155,18 @@ declare module '@mui/material/styles' {
     interface PaletteOptions extends CustomPalette {}
     interface TypeBackground extends CustomTypeBackground {}
 
+    /* Extend the action object from MUI */
+    interface CustomTypeAction {
+        /**
+         * Add background color on hover for the interactive elements
+         * that use the alternative primary color. First used to add
+         * hover colors to button group elements
+         **/
+        alternative: string;
+    }
+
+    interface TypeAction extends CustomTypeAction {}
+
     /* Extend the background object from MUI */
     interface CustomTypeBackground {
         application: string;