fix(core-connections): input disable state

webapp/packages/core-blocks/src/ItemList/ItemListSearch.tsx

@@ -20,12 +20,13 @@ import { Styles } from './styles';
 type Props = React.PropsWithChildren<{
   value?: string;
   placeholder?: string;
+  disabled?: boolean;
   onSearch?(value: string): void;
   className?: string;
 }>
 
 export function ItemListSearch({
-  value, placeholder, onSearch, className,
+  value, placeholder, disabled, onSearch, className,
 }: Props) {
   const styles = useContext(Styles);
   const [search, setSearch] = useState(value ?? '');
@@ -48,6 +49,7 @@ export function ItemListSearch({
         value={value ?? search}
         onChange={searchHandler}
         autoComplete="off"
+        disabled={disabled}
         {...use({ mod: 'surface' })}
       />
     </list-search>

webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionForm.tsx

@@ -177,8 +177,9 @@ export const ConnectionForm = observer(function ConnectionForm({
                     type={controller.connectionType}
                     credentials={model.credentials}
                     availableDrivers={model.availableDrivers}
-                    onTypeChange={controller.setType}
                     editing={model.editing}
+                    disabled={controller.isDisabled}
+                    onTypeChange={controller.setType}
                     onSave={controller.save}
                   />
                 </TabPanel>

webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/Options.tsx

@@ -89,7 +89,7 @@ export const Options = observer(function Options({
               value={connection.id}
               state={connection}
               checkboxLabel={translate('connections_connection_template')}
-              disabled={editing}
+              disabled={editing || disabled}
               mod='surface'
             />
           </group>
@@ -103,6 +103,7 @@ export const Options = observer(function Options({
               onSelect={controller.onSelectDriver}
               readOnly={editing || controller.drivers.length < 2}
               mod={'surface'}
+              disabled={disabled}
             >
               {translate('connections_connection_driver')}
             </Combobox>
@@ -143,7 +144,11 @@ export const Options = observer(function Options({
           </connection-type>
           <TabsState currentTabId={type}>
             <TabPanel tabId={EConnectionType.Parameters}>
-              <ParametersForm connection={connection} embedded={controller.driver?.embedded} disabled={saving} />
+              <ParametersForm
+                connection={connection}
+                embedded={controller.driver?.embedded}
+                disabled={disabled || saving}
+              />
             </TabPanel>
             <TabPanel tabId={EConnectionType.URL}>
               <group as="div">

webapp/packages/core-connections/src/Administration/Connections/CreateConnection/CreateConnection.tsx

@@ -215,6 +215,7 @@ export const CreateConnection = observer(function CreateConnection({
           <SearchDatabase
             databases={controller.databases}
             hosts={controller.hosts}
+            disabled={controller.isProcessing}
             onSelect={controller.onDatabaseSelect}
             onSearch={controller.search}
             onChange={controller.onSearchChange}

webapp/packages/core-connections/src/Administration/Connections/CreateConnection/DatabaseList.tsx

@@ -28,6 +28,7 @@ const styles = css`
 type Props = {
   databases: AdminConnectionSearchInfo[];
   hosts: string;
+  disabled?: boolean;
   className?: string;
   onSelect(database: AdminConnectionSearchInfo): void;
   onChange(hosts: string): void;
@@ -35,14 +36,14 @@ type Props = {
 }
 
 export const DatabaseList = observer(function DatabaseList({
-  databases, hosts, className, onSelect, onChange, onSearch,
+  databases, hosts, disabled, className, onSelect, onChange, onSearch,
 }: Props) {
   const translate = useTranslate();
 
   return styled(styles)(
     <SubmittingForm onSubmit={onSearch} className={className}>
       <ItemList>
-        <ItemListSearch value={hosts} placeholder={translate('connections_administration_search_database_tip')} onSearch={onChange} />
+        <ItemListSearch value={hosts} placeholder={translate('connections_administration_search_database_tip')} onSearch={onChange} disabled={disabled}/>
         {databases.map(database => (
           <Database key={database.host + database.port} database={database} onSelect={onSelect}/>
         ))}

webapp/packages/core-connections/src/Administration/Connections/CreateConnection/SearchDatabase.tsx

@@ -15,6 +15,7 @@ import { DatabaseList } from './DatabaseList';
 type Props = {
   databases: AdminConnectionSearchInfo[];
   hosts: string;
+  disabled?: boolean;
   onSelect(database: AdminConnectionSearchInfo): void;
   onChange(hosts: string): void;
   onSearch?(): void;
@@ -24,6 +25,7 @@ type Props = {
 export const SearchDatabase = observer(function SearchDatabase({
   databases,
   hosts,
+  disabled,
   onChange,
   onSelect,
   onSearch,
@@ -34,6 +36,7 @@ export const SearchDatabase = observer(function SearchDatabase({
     <DatabaseList
       databases={databases}
       hosts={hosts}
+      disabled={disabled}
       onSelect={onSelect}
       onChange={onChange}
       onSearch={onSearch}