Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-03-23 00:16:25 +01:00
Code Issues Projects Releases Wiki Activity

fix: add forwardRef to ProjectSelect component (#6674)

Browse Source 
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
This commit is contained in:
Thomas Heartman 2024-03-25 10:23:22 +01:00 committed by GitHub
parent 8a9d013545
commit 6025ad0f0d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 84 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/component/common/ProjectSelect/ProjectSelect.tsx
View File

@ -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 { Autocomplete, type SxProps, TextField } from '@mui/material';
import { renderOption } from 'component/playground/Playground/PlaygroundForm/renderOption'; import { renderOption } from 'component/playground/Playground/PlaygroundForm/renderOption';
import useProjects from 'hooks/api/getters/useProjects/useProjects'; import useProjects from 'hooks/api/getters/useProjects/useProjects';
@ -30,13 +36,11 @@ function findAllIndexes(arr: string[], name: string): number[] {
return indexes; 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 { projects: availableProjects } = useProjects();
const projectNames = availableProjects.map(({ name }) => name); const projectNames = availableProjects.map(({ name }) => name);
@ -59,11 +63,9 @@ export const ProjectSelect: VFC<IProjectSelectProps> = ({
(selectedProjects.length === 0 || (selectedProjects.length === 0 ||
(selectedProjects.length === 1 && selectedProjects[0] === '*')); (selectedProjects.length === 1 && selectedProjects[0] === '*'));
const onProjectsChange: ComponentProps<typeof Autocomplete>['onChange'] = ( const onProjectsChange: ComponentProps<
event, typeof Autocomplete
value, >['onChange'] = (event, value, reason) => {
reason,
) => {
const newProjects = value as IOption | IOption[]; const newProjects = value as IOption | IOption[];
if (reason === 'clear' || newProjects === null) { if (reason === 'clear' || newProjects === null) {
return onChange([allOption.id]); return onChange([allOption.id]);
@ -73,7 +75,8 @@ export const ProjectSelect: VFC<IProjectSelectProps> = ({
return onChange([allOption.id]); return onChange([allOption.id]);
} }
if ( if (
newProjects.find(({ id }) => id === allOption.id) !== undefined newProjects.find(({ id }) => id === allOption.id) !==
undefined
) { ) {
return onChange([allOption.id]); return onChange([allOption.id]);
} }
@ -88,13 +91,17 @@ export const ProjectSelect: VFC<IProjectSelectProps> = ({
return ( return (
<Autocomplete <Autocomplete
{...props}
ref={ref}
disablePortal disablePortal
id='projects' id='projects'
limitTags={3} limitTags={3}
multiple={!isAllProjects} multiple={!isAllProjects}
options={projectsOptions} options={projectsOptions}
sx={sx} sx={sx}
renderInput={(params) => <TextField {...params} label='Projects' />} renderInput={(params) => (
<TextField {...params} label='Projects' />
)}
renderOption={renderOption} renderOption={renderOption}
getOptionLabel={({ label }) => label} getOptionLabel={({ label }) => label}
disableCloseOnSelect disableCloseOnSelect
@ -111,4 +118,5 @@ export const ProjectSelect: VFC<IProjectSelectProps> = ({
data-testid={dataTestId ? dataTestId : 'PROJECT_SELECT'} data-testid={dataTestId ? dataTestId : 'PROJECT_SELECT'}
/> />
); );
}; },
);