import { Autocomplete, Button, styled, TextField } from '@mui/material'; import Input from 'component/common/Input/Input'; import React, { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { SegmentFormStep } from './SegmentForm'; import { SEGMENT_NAME_ID, SEGMENT_DESC_ID, SEGMENT_NEXT_BTN_ID, } from 'utils/testIds'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import useProjects from 'hooks/api/getters/useProjects/useProjects'; import { useOptionalPathParam } from 'hooks/useOptionalPathParam'; import { GO_BACK } from 'constants/navigate'; import { useStrategiesBySegment } from 'hooks/api/getters/useStrategiesBySegment/useStrategiesBySegment'; import { SegmentProjectAlert } from './SegmentProjectAlert'; interface ISegmentFormPartOneProps { name: string; description: string; project?: string; setName: React.Dispatch>; setDescription: React.Dispatch>; setProject: React.Dispatch>; errors: { [key: string]: string }; clearErrors: () => void; setCurrentStep: React.Dispatch>; } const StyledForm = styled('div')(({ theme }) => ({ display: 'flex', flexDirection: 'column', height: '100%', })); const StyledContainer = styled('div')(({ theme }) => ({ maxWidth: '400px', })); const StyledInputDescription = styled('p')(({ theme }) => ({ marginBottom: theme.spacing(1), })); const StyledInput = styled(Input)(({ theme }) => ({ width: '100%', marginBottom: theme.spacing(2), })); const StyledButtonContainer = styled('div')(({ theme }) => ({ marginTop: 'auto', display: 'flex', justifyContent: 'flex-end', })); const StyledCancelButton = styled(Button)(({ theme }) => ({ marginLeft: theme.spacing(3), })); export const SegmentFormStepOne: React.FC = ({ children, name, description, project, setName, setDescription, setProject, errors, clearErrors, setCurrentStep, }) => { const segmentId = useOptionalPathParam('segmentId'); const projectId = useOptionalPathParam('projectId'); const { uiConfig } = useUiConfig(); const navigate = useNavigate(); const { projects, loading: loadingProjects } = useProjects(); const { strategies, loading: loadingStrategies } = useStrategiesBySegment(segmentId); const projectsUsed = new Set( strategies.map(({ projectId }) => projectId!).filter(Boolean) ); const availableProjects = projects.filter( ({ id }) => !projectsUsed.size || (projectsUsed.size === 1 && projectsUsed.has(id)) ); const [selectedProject, setSelectedProject] = React.useState( projects.find(({ id }) => id === project) ?? null ); useEffect(() => { setSelectedProject(projects.find(({ id }) => id === project) ?? null); }, [project, projects]); const loading = loadingProjects && loadingStrategies; return ( What is the segment name? setName(e.target.value)} error={Boolean(errors.name)} errorText={errors.name} autoFocus required data-testid={SEGMENT_NAME_ID} /> What is the segment description? setDescription(e.target.value)} error={Boolean(errors.description)} errorText={errors.description} data-testid={SEGMENT_DESC_ID} /> Is this segment tied to a specific project? { setProject(newValue?.id); }} options={availableProjects} getOptionLabel={option => option.name} renderInput={params => ( )} disabled={projectsUsed.size > 1} /> } /> { navigate(GO_BACK); }} > Cancel ); };