feat: remove + from the segment dropdown (#9714)

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 <TextField {...params} variant='outlined' label={label} />;
-    };
-
     const renderCustomInput = (params: AutocompleteRenderInputParams) => {
         const { InputProps } = params;
+
+        let startAdornment = undefined;
+        if (icon !== null) {
+            startAdornment = (
+                <InputAdornment position='start'>
+                    {icon || (
+                        <Add
+                            sx={{
+                                height: 20,
+                                width: 20,
+                                color: theme.palette.primary.main,
+                            }}
+                        />
+                    )}
+                </InputAdornment>
+            );
+        }
+
         return (
             <TextField
                 {...params}
                 InputProps={{
                     ...InputProps,
-                    startAdornment: (
+                    startAdornment,
-                        <InputAdornment position='start'>
-                            <Add
-                                sx={{
-                                    height: 20,
-                                    width: 20,
-                                    color: theme.palette.primary.main,
-                                }}
-                            />
-                        </InputAdornment>
-                    ),
                 }}
                 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 = ({
             <StyledAutocomplete
                 options={options}
                 value={value}
-                onChange={(event, value) => onChange(value || [])}
+                onChange={(_, value) => onChange(value || [])}
                 renderInput={renderCustomInput}
                 getOptionLabel={(value) => value.label}
                 disabled={disabled}

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'}
             />
             <FeatureStrategySegmentList
                 segments={selectedSegments}

frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategySegment.tsx

@@ -9,6 +9,7 @@ import {
     type IAutocompleteBoxOption,
 } from 'component/common/AutocompleteBox/AutocompleteBox';
 import { MilestoneStrategySegmentList } from './MilestoneStrategySegmentList';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledHelpIconBox = styled(Box)(({ theme }) => ({
     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'}
             />
             <MilestoneStrategySegmentList
                 segments={selectedSegments}