fix: add forwardRef to ProjectSelect component (#6674)

Make the tooltip for project selection in the playground work properly
again. Right now, it doesn't work due to an error in react refs.

Because we wrap this in a tooltip in the Playground, we need to forward
the ref to the underlying component.

This follows the steps outlined in
https://mui.com/material-ui/guides/composition/#caveat-with-refs

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

@@ -1,4 +1,10 @@
-import type { ComponentProps, Dispatch, SetStateAction, VFC } from 'react';
+import {
+    forwardRef,
+    type ComponentProps,
+    type Dispatch,
+    type SetStateAction,
+    type VFC,
+} from 'react';
 import { Autocomplete, type SxProps, TextField } from '@mui/material';
 import { renderOption } from 'component/playground/Playground/PlaygroundForm/renderOption';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
@@ -30,85 +36,87 @@ function findAllIndexes(arr: string[], name: string): number[] {
     return indexes;
 }
 
-export const ProjectSelect: VFC<IProjectSelectProps> = ({
+export const ProjectSelect: VFC<IProjectSelectProps> = forwardRef(
-    selectedProjects,
+    (
-    onChange,
+        { selectedProjects, onChange, dataTestId, sx, disabled, ...props },
-    dataTestId,
+        ref,
-    sx,
-    disabled,
-}) => {
-    const { projects: availableProjects } = useProjects();
-
-    const projectNames = availableProjects.map(({ name }) => name);
-
-    const projectsOptions = [
-        allOption,
-        ...availableProjects.map(({ name, id }) => {
-            const indexes = findAllIndexes(projectNames, name);
-            const isDuplicate = indexes.length > 1;
-
-            return {
-                label: isDuplicate ? `${name} - (${id})` : name,
-                id,
-            };
-        }),
-    ];
-
-    const isAllProjects =
-        selectedProjects &&
-        (selectedProjects.length === 0 ||
-            (selectedProjects.length === 1 && selectedProjects[0] === '*'));
-
-    const onProjectsChange: ComponentProps<typeof Autocomplete>['onChange'] = (
-        event,
-        value,
-        reason,
     ) => {
-        const newProjects = value as IOption | IOption[];
+        const { projects: availableProjects } = useProjects();
-        if (reason === 'clear' || newProjects === null) {
+
-            return onChange([allOption.id]);
+        const projectNames = availableProjects.map(({ name }) => name);
-        }
+
-        if (Array.isArray(newProjects)) {
+        const projectsOptions = [
-            if (newProjects.length === 0) {
+            allOption,
+            ...availableProjects.map(({ name, id }) => {
+                const indexes = findAllIndexes(projectNames, name);
+                const isDuplicate = indexes.length > 1;
+
+                return {
+                    label: isDuplicate ? `${name} - (${id})` : name,
+                    id,
+                };
+            }),
+        ];
+
+        const isAllProjects =
+            selectedProjects &&
+            (selectedProjects.length === 0 ||
+                (selectedProjects.length === 1 && selectedProjects[0] === '*'));
+
+        const onProjectsChange: ComponentProps<
+            typeof Autocomplete
+        >['onChange'] = (event, value, reason) => {
+            const newProjects = value as IOption | IOption[];
+            if (reason === 'clear' || newProjects === null) {
                 return onChange([allOption.id]);
             }
-            if (
+            if (Array.isArray(newProjects)) {
-                newProjects.find(({ id }) => id === allOption.id) !== undefined
+                if (newProjects.length === 0) {
-            ) {
+                    return onChange([allOption.id]);
+                }
+                if (
+                    newProjects.find(({ id }) => id === allOption.id) !==
+                    undefined
+                ) {
+                    return onChange([allOption.id]);
+                }
+                return onChange(newProjects.map(({ id }) => id));
+            }
+            if (newProjects.id === allOption.id) {
                 return onChange([allOption.id]);
             }
-            return onChange(newProjects.map(({ id }) => id));
-        }
-        if (newProjects.id === allOption.id) {
-            return onChange([allOption.id]);
-        }
 
-        return onChange([newProjects.id]);
+            return onChange([newProjects.id]);
-    };
+        };
 
-    return (
+        return (
-        <Autocomplete
+            <Autocomplete
-            disablePortal
+                {...props}
-            id='projects'
+                ref={ref}
-            limitTags={3}
+                disablePortal
-            multiple={!isAllProjects}
+                id='projects'
-            options={projectsOptions}
+                limitTags={3}
-            sx={sx}
+                multiple={!isAllProjects}
-            renderInput={(params) => <TextField {...params} label='Projects' />}
+                options={projectsOptions}
-            renderOption={renderOption}
+                sx={sx}
-            getOptionLabel={({ label }) => label}
+                renderInput={(params) => (
-            disableCloseOnSelect
+                    <TextField {...params} label='Projects' />
-            size='small'
+                )}
-            disabled={disabled}
+                renderOption={renderOption}
-            value={
+                getOptionLabel={({ label }) => label}
-                isAllProjects
+                disableCloseOnSelect
-                    ? allOption
+                size='small'
-                    : projectsOptions.filter(({ id }) =>
+                disabled={disabled}
-                          selectedProjects.includes(id),
+                value={
-                      )
+                    isAllProjects
-            }
+                        ? allOption
-            onChange={onProjectsChange}
+                        : projectsOptions.filter(({ id }) =>
-            data-testid={dataTestId ? dataTestId : 'PROJECT_SELECT'}
+                              selectedProjects.includes(id),
-        />
+                          )
-    );
+                }
-};
+                onChange={onProjectsChange}
+                data-testid={dataTestId ? dataTestId : 'PROJECT_SELECT'}
+            />
+        );
+    },
+);