diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx index b82dbb201f..52962a630d 100644 --- a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx +++ b/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 = Omit, iconSelector?: (item: TValue) => string | React.ReactElement | undefined; isDisabled?: (item: TValue) => boolean; onSwitch?: (state: boolean) => void; + inline?: boolean; }; type ControlledProps = BaseProps & { @@ -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))( - + {children && {children}{rest.required && ' *'}} {(icon || loading) && ( diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/Options/ProjectSelect.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/Options/ProjectSelect.tsx index d57ab1917e..884be717be 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/Options/ProjectSelect.tsx +++ b/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 ( 10} disabled={props.disabled} loading={projectsLoader.isLoading()} + inline={props.inline} tiny fill onSelect={handleProjectSelect} diff --git a/webapp/packages/plugin-connections/src/index.ts b/webapp/packages/plugin-connections/src/index.ts index 0dbc64dcd4..75bb686130 100644 --- a/webapp/packages/plugin-connections/src/index.ts +++ b/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';