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'}
/>