diff --git a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx index 01d062e099..aa68e691f9 100644 --- a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx +++ b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx @@ -1,4 +1,3 @@ -import { useStyles } from 'component/common/AutocompleteBox/AutocompleteBox.styles'; import Add from '@mui/icons-material/Add'; import { Autocomplete, @@ -8,7 +7,7 @@ import { useTheme, } from '@mui/material'; import type { AutocompleteRenderInputParams } from '@mui/material/Autocomplete'; -import { useState } from 'react'; +import type { ReactNode } from 'react'; interface IAutocompleteBoxProps { label: string; @@ -16,6 +15,8 @@ interface IAutocompleteBoxProps { value?: IAutocompleteBoxOption[]; onChange: (value: IAutocompleteBoxOption[]) => void; disabled?: boolean; + icon?: ReactNode | null; + width?: string | number; } export interface IAutocompleteBoxOption { @@ -32,23 +33,6 @@ const StyledContainer = styled('div')(({ theme }) => ({ }, })); -const StyledIcon = styled('div', { - shouldForwardProp: (prop: string) => !prop.startsWith('$'), -})<{ $disabled: boolean }>(({ theme, $disabled }) => ({ - background: $disabled - ? theme.palette.primary.light - : theme.palette.primary.main, - height: '48px', - width: '48px', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - paddingLeft: 6, - borderTopLeftRadius: '40px', - borderBottomLeftRadius: '40px', - color: theme.palette.primary.contrastText, -})); - const StyledAutocomplete = styled(Autocomplete)({ flex: 1, }) as typeof Autocomplete; @@ -59,37 +43,41 @@ export const AutocompleteBox = ({ value = [], onChange, disabled, + icon, + width = '215px', }: IAutocompleteBoxProps) => { - const [placeHolder, setPlaceholder] = useState('Add Segments'); - const { classes: styles } = useStyles(); const theme = useTheme(); - const renderInput = (params: AutocompleteRenderInputParams) => { - return ; - }; - const renderCustomInput = (params: AutocompleteRenderInputParams) => { const { InputProps } = params; + + let startAdornment = undefined; + if (icon !== null) { + startAdornment = ( + + {icon || ( + + )} + + ); + } + return ( - - - ), + startAdornment, }} variant='outlined' sx={{ - width: '215px', + width, '& .MuiOutlinedInput-root': { '& .MuiInputBase-input': { color: theme.palette.primary.main, @@ -110,8 +98,6 @@ export const AutocompleteBox = ({ }, }} placeholder={label} - onFocus={() => setPlaceholder('')} - onBlur={() => setPlaceholder(label)} /> ); }; @@ -120,7 +106,7 @@ export const AutocompleteBox = ({ onChange(value || [])} + onChange={(_, value) => onChange(value || [])} renderInput={renderCustomInput} getOptionLabel={(value) => value.label} disabled={disabled} diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx index ea044c517e..5d668de868 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx @@ -8,8 +8,9 @@ import { import { FeatureStrategySegmentList } from 'component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList'; import { SegmentDocsStrategyWarning } from 'component/segments/SegmentDocs'; import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits'; -import { Box, Divider, styled, Typography } from '@mui/material'; +import { Box, styled, Typography } from '@mui/material'; import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; +import { useUiFlag } from 'hooks/useUiFlag'; interface IFeatureStrategySegmentProps { segments: ISegment[]; @@ -17,10 +18,6 @@ interface IFeatureStrategySegmentProps { projectId: string; } -const StyledDivider = styled(Divider)(({ theme }) => ({ - fontSize: theme.fontSizes.smallBody, -})); - const StyledHelpIconBox = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', @@ -33,6 +30,7 @@ export const FeatureStrategySegment = ({ setSegments: setSelectedSegments, projectId, }: IFeatureStrategySegmentProps) => { + const addEditStrategy = useUiFlag('addEditStrategy'); const { segments: allSegments } = useSegments(); const { strategySegmentsLimit } = useSegmentLimits(); @@ -100,6 +98,8 @@ export const FeatureStrategySegment = ({ options={autocompleteOptions} onChange={onChange} disabled={atStrategySegmentsLimit} + icon={addEditStrategy ? null : undefined} + width={'175px'} /> ({ display: 'flex', @@ -26,6 +27,7 @@ export const MilestoneStrategySegment = ({ segments: selectedSegments, setSegments: setSelectedSegments, }: IMilestoneStrategySegmentProps) => { + const addEditStrategy = useUiFlag('addEditStrategy'); const { segments: allSegments } = useSegments(); const { strategySegmentsLimit } = useSegmentLimits(); @@ -88,6 +90,8 @@ export const MilestoneStrategySegment = ({ options={autocompleteOptions} onChange={onChange} disabled={atStrategySegmentsLimit} + icon={addEditStrategy ? null : undefined} + width={'175px'} />