CB-2482 feat(plugin-connections) Add project selector to AWS dialog

webapp/packages/core-blocks/src/FormControls/Combobox.tsx

@@ -24,6 +24,15 @@ import { baseFormControlStyles, baseValidFormControlStyles } from './baseFormCon
 import { FormContext } from './FormContext';
 
 const styles = css`
+    field[|inline] {
+      display: flex;
+      align-items: center;
+
+      & field-label {
+        padding-right: 8px;
+        padding-bottom: 0;
+      }
+    }
     field input {
       margin: 0;
     }
@@ -137,6 +146,7 @@ type BaseProps<TKey, TValue> = Omit<React.InputHTMLAttributes<HTMLInputElement>,
   iconSelector?: (item: TValue) => string | React.ReactElement | undefined;
   isDisabled?: (item: TValue) => boolean;
   onSwitch?: (state: boolean) => void;
+  inline?: boolean;
 };
 
 type ControlledProps<TKey, TValue> = BaseProps<TKey, TValue> & {
@@ -174,6 +184,7 @@ export const Combobox: ComboboxType = observer(function Combobox({
   searchable,
   readOnly,
   disabled,
+  inline,
   keySelector = v => v,
   valueSelector = v => v,
   iconSelector,
@@ -337,7 +348,7 @@ export const Combobox: ComboboxType = observer(function Combobox({
   }
 
   return styled(useStyles(baseFormControlStyles, baseValidFormControlStyles, styles))(
-    <field className={className}>
+    <field className={className} {...use({ inline })}>
       {children && <field-label title={title}>{children}{rest.required && ' *'}</field-label>}
       <input-box>
         {(icon || loading) && (

webapp/packages/plugin-connections/src/ConnectionForm/Options/ProjectSelect.tsx

@@ -5,20 +5,20 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-
 import type React from 'react';
+import { useEffect } from 'react';
 
 import { Combobox, useMapResource } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import { Project, ProjectsResource } from '@cloudbeaver/core-projects';
 import { CachedMapAllKey } from '@cloudbeaver/core-sdk';
 
-
 interface Props {
   value: string;
   onChange: (value: string) => void;
   readOnly?: boolean;
   disabled?: boolean;
+  inline?: boolean;
 }
 
 export function ProjectSelect(props: Props) {
@@ -27,6 +27,14 @@ export function ProjectSelect(props: Props) {
   const projectsLoader = useMapResource(ProjectSelect, ProjectsResource, CachedMapAllKey);
   const projects = projectsLoader.data as Project[];
 
+  const possibleOptions = projects.filter(project => project.canCreateConnections);
+
+  useEffect(() => {
+    if (!props.value && possibleOptions[0]) {
+      props.onChange(possibleOptions[0].id);
+    }
+  }, [projects]);
+
   function handleProjectSelect(projectId: string) {
     const project = projectsLoader.resource.get(projectId);
 
@@ -35,7 +43,6 @@ export function ProjectSelect(props: Props) {
     }
   }
 
-  const possibleOptions = projects.filter(project => project.canCreateConnections);
 
   return  (
     <Combobox
@@ -50,6 +57,7 @@ export function ProjectSelect(props: Props) {
       searchable={projects.length > 10}
       disabled={props.disabled}
       loading={projectsLoader.isLoading()}
+      inline={props.inline}
       tiny
       fill
       onSelect={handleProjectSelect}

webapp/packages/plugin-connections/src/index.ts

@@ -2,6 +2,7 @@ import { connectionPlugin } from './manifest';
 export * from './ConnectionAuthentication/IConnectionAuthenticationConfig';
 export * from './ConnectionAuthentication/ConnectionAuthenticationForm';
 export * from './ConnectionForm/Options/ConnectionOptionsTabService';
+export * from './ConnectionForm/Options/ProjectSelect';
 export * from './ConnectionForm/DriverProperties/ConnectionDriverPropertiesTabService';
 export * from './ConnectionForm/SSH/ConnectionSSHTabService';
 export * from './ConnectionForm/OriginInfo/ConnectionOriginInfoTabService';