Get Connector and Data Plane auto complete rendering properly with arrows

src/forms/renderers/AutoCompleteInputWithStartAdornment.tsx

@@ -0,0 +1,29 @@
+import { AutocompleteRenderInputParams, Box, Input } from '@mui/material';
+import { ReactNode } from 'react';
+
+interface Props {
+    textFieldProps: AutocompleteRenderInputParams;
+    startAdornment: ReactNode | null;
+}
+
+function AutoCompleteInputWithStartAdornment({
+    startAdornment: icon,
+    textFieldProps,
+}: Props) {
+    if (icon) {
+        textFieldProps.InputProps.startAdornment = (
+            <Box style={{ paddingRight: 5 }}>{icon}</Box>
+        );
+    }
+
+    return (
+        <Input
+            {...textFieldProps.InputProps}
+            inputProps={textFieldProps.inputProps}
+            fullWidth={textFieldProps.fullWidth}
+            disabled={textFieldProps.disabled}
+        />
+    );
+}
+
+export default AutoCompleteInputWithStartAdornment;

src/forms/renderers/ConnectorSelect/AutoComplete.tsx

@@ -31,10 +31,10 @@ import {
     AutocompleteRenderOptionState,
     FilterOptionsState,
 } from '@mui/material';
-import ConnectorInput from 'forms/renderers/ConnectorSelect/Input';
+import ConnectorIcon from 'components/connectors/ConnectorIcon';
 import ConnectorOption from 'forms/renderers/ConnectorSelect/Option';
-import merge from 'lodash/merge';
 import React, { ReactNode, useMemo } from 'react';
+import AutoCompleteInputWithStartAdornment from '../AutoCompleteInputWithStartAdornment';
 
 export interface WithOptionLabel {
     getOptionLabel?(option: EnumOption): string;
@@ -61,22 +61,19 @@ export const ConnectorAutoComplete = (
         className,
         id,
         enabled,
-        uischema,
         path,
         options,
-        config,
         handleChange,
         getOptionLabel,
         filterOptions,
     } = props;
 
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const [inputValue, setInputValue] = React.useState('');
     const currentOption = useMemo(
         () =>
             options?.find((option) => {
                 return areOptionsEqual(option.value, data);
-            }) ?? null,
+            }) ?? undefined,
         [data, options]
     );
 
@@ -87,6 +84,7 @@ export const ConnectorAutoComplete = (
             className={className}
             id={id}
             disabled={!enabled}
+            disableClearable
             value={currentOption}
             inputValue={inputValue}
             onChange={(_event: any, newValue: EnumOption | null) => {
@@ -103,17 +101,18 @@ export const ConnectorAutoComplete = (
                 marginTop: 2,
             }}
             filterOptions={filterOptions}
-            renderInput={({ inputProps, InputProps }) => {
-                return (
-                    <ConnectorInput
-                        inputProps={inputProps}
-                        InputProps={InputProps}
-                        appliedUiSchemaOptions={appliedUiSchemaOptions}
-                        enabled={enabled}
-                        currentOption={currentOption}
-                    />
-                );
-            }}
+            renderInput={(textFieldProps) => (
+                <AutoCompleteInputWithStartAdornment
+                    textFieldProps={textFieldProps}
+                    startAdornment={
+                        currentOption ? (
+                            <ConnectorIcon
+                                iconPath={currentOption.value.iconPath}
+                            />
+                        ) : null
+                    }
+                />
+            )}
             renderOption={(renderOptionProps, option) => {
                 return (
                     <ConnectorOption

src/forms/renderers/DataPlaneSelector/AutoComplete.tsx

@@ -33,10 +33,10 @@ import {
     MenuList,
     Typography,
 } from '@mui/material';
-import merge from 'lodash/merge';
+import DataPlaneIcon from 'components/shared/Entity/DataPlaneIcon';
 import React, { ReactNode, useMemo } from 'react';
 import { useIntl } from 'react-intl';
-import DataPlaneInput from './Input';
+import AutoCompleteInputWithStartAdornment from '../AutoCompleteInputWithStartAdornment';
 import Option from './Option';
 
 export interface WithOptionLabel {
@@ -61,23 +61,20 @@ export const DataPlaneAutoComplete = ({
     className,
     id,
     enabled,
-    uischema,
     path,
     options,
-    config,
     handleChange,
     getOptionLabel,
     filterOptions,
 }: EnumCellProps & WithClassname & WithOptionLabel) => {
     const intl = useIntl();
 
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const [inputValue, setInputValue] = React.useState('');
     const currentOption = useMemo(
         () =>
             options?.find((option) => {
                 return areOptionsEqual(option.value, data);
-            }) ?? null,
+            }) ?? undefined,
         [data, options]
     );
 
@@ -87,6 +84,7 @@ export const DataPlaneAutoComplete = ({
             className={className}
             clearOnBlur
             disabled={!enabled}
+            disableClearable
             filterOptions={filterOptions}
             fullWidth
             getOptionLabel={getOptionLabel ?? ((option) => option.label)}
@@ -118,17 +116,21 @@ export const DataPlaneAutoComplete = ({
                     <MenuList style={{ padding: 0 }}>{children}</MenuList>
                 </li>
             )}
-            renderInput={({ inputProps, InputProps }) => {
-                return (
-                    <DataPlaneInput
-                        inputProps={inputProps}
-                        InputProps={InputProps}
-                        appliedUiSchemaOptions={appliedUiSchemaOptions}
-                        enabled={enabled}
-                        currentOption={currentOption}
-                    />
-                );
-            }}
+            renderInput={(textFieldProps) => (
+                <AutoCompleteInputWithStartAdornment
+                    textFieldProps={textFieldProps}
+                    startAdornment={
+                        currentOption ? (
+                            <DataPlaneIcon
+                                provider={
+                                    currentOption.value.dataPlaneName.provider
+                                }
+                                scope={currentOption.value.scope}
+                            />
+                        ) : null
+                    }
+                />
+            )}
             renderOption={(renderOptionProps, option) => {
                 return (
                     <Option