fix: Project select should not expand when selecting multiple projects (#6811)

Currently when you are selecting multiple projects, the autocomplete
expands indefinitely when focused.

This fixes that behaviour by limiting the project select to 1 visible
tag (even when focused) for Insights and 3 tags for Playground (same as
it was)

Closes
[1-2276](https://linear.app/unleash/issue/1-2276/limit-the-project-select-height-or-expand-its-length)



https://github.com/Unleash/unleash/assets/104830839/bf42a06e-8d30-49df-ac5b-a4a4f2685fa9

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

frontend/src/component/common/ProjectSelect/ProjectSelect.tsx

@@ -5,7 +5,7 @@ import {
     type SetStateAction,
     type VFC,
 } from 'react';
-import { Autocomplete, type SxProps, TextField } from '@mui/material';
+import { Autocomplete, Chip, type SxProps, TextField } from '@mui/material';
 import { renderOption } from 'component/playground/Playground/PlaygroundForm/renderOption';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
 
@@ -21,6 +21,7 @@ interface IProjectSelectProps {
     onChange:
         | Dispatch<SetStateAction<string[]>>
         | ((projects: string[]) => void);
+    limitTags: number;
     dataTestId?: string;
     sx?: SxProps;
     disabled?: boolean;
@@ -38,7 +39,15 @@ function findAllIndexes(arr: string[], name: string): number[] {
 
 export const ProjectSelect: VFC<IProjectSelectProps> = forwardRef(
     (
-        { selectedProjects, onChange, dataTestId, sx, disabled, ...props },
+        {
+            limitTags,
+            selectedProjects,
+            onChange,
+            dataTestId,
+            sx,
+            disabled,
+            ...props
+        },
         ref,
     ) => {
         const { projects: availableProjects } = useProjects();
@@ -95,7 +104,7 @@ export const ProjectSelect: VFC<IProjectSelectProps> = forwardRef(
                 ref={ref}
                 disablePortal
                 id='projects'
-                limitTags={3}
+                limitTags={limitTags}
                 multiple={!isAllProjects}
                 options={projectsOptions}
                 sx={sx}
@@ -116,6 +125,23 @@ export const ProjectSelect: VFC<IProjectSelectProps> = forwardRef(
                 }
                 onChange={onProjectsChange}
                 data-testid={dataTestId ? dataTestId : 'PROJECT_SELECT'}
+                renderTags={(value, getTagProps) => {
+                    const numTags = value.length;
+
+                    return (
+                        <>
+                            {value.slice(0, limitTags).map((option, index) => (
+                                <Chip
+                                    {...getTagProps({ index })}
+                                    key={index}
+                                    label={option.label}
+                                />
+                            ))}
+
+                            {numTags > limitTags && ` +${numTags - limitTags}`}
+                        </>
+                    );
+                }}
             />
         );
     },

frontend/src/component/insights/Insights.tsx

@@ -59,6 +59,7 @@ export const Insights: VFC = () => {
                             selectedProjects={projects}
                             onChange={setProjects}
                             dataTestId={'DASHBOARD_PROJECT_SELECT'}
+                            limitTags={1}
                             sx={{
                                 flex: 1,
                                 maxWidth: '360px',

frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/PlaygroundConnectionFieldset.tsx

@@ -254,6 +254,7 @@ export const PlaygroundConnectionFieldset: VFC<
                             onChange={setProjects}
                             dataTestId={'PLAYGROUND_PROJECT_SELECT'}
                             disabled={Boolean(token)}
+                            limitTags={3}
                         />
                     </Tooltip>
                 </Box>