dbeaver/pro#7090 move auth island, show desc as placeholder (#4012)

devnaumov · EvgeniaBzzz · mr-anton-t · web-flow · commit 9652520073a9 · 2025-12-29T17:03:33.000+01:00
Co-authored-by: Evgenia &lt;139753579+EvgeniaBzzz@users.noreply.github.com&gt;
Co-authored-by: mr-anton-t &lt;42037741+mr-anton-t@users.noreply.github.com&gt;
diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx
@@ -142,6 +142,10 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
     );
   }
 
+  const passwordSaved = showRememberTip && ((isPassword && !!property.value) || saved);
+  const passwordSavedMessage = passwordSaved ? translate('core_blocks_object_property_info_password_saved') : undefined;
+  const placeholder = passwordSavedMessage || property.description;
+
   if (controlType === 'selector') {
     if (state !== undefined) {
       return (
@@ -154,6 +158,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
           valueSelector={value => value}
           titleSelector={value => value}
           defaultValue={defaultValue}
+          placeholder={placeholder}
           title={property.description}
           disabled={disabled}
           readOnly={readonly}
@@ -174,6 +179,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
         valueSelector={value => value}
         titleSelector={value => value}
         defaultValue={defaultValue}
+        placeholder={placeholder}
         title={property.description}
         disabled={disabled}
         readOnly={readonly}
@@ -185,9 +191,6 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
     );
   }
 
-  const passwordSaved = showRememberTip && ((isPassword && !!property.value) || saved);
-  const passwordSavedMessage = passwordSaved ? translate('core_blocks_object_property_info_password_saved') : undefined;
-
   if (controlType === 'file' && state) {
     return (
       <InputFileTextContent
@@ -213,7 +216,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
           required={required}
           title={state[property.id!]}
           labelTooltip={property.description || property.displayName}
-          placeholder={passwordSavedMessage}
+          placeholder={placeholder}
           name={property.id!}
           state={state}
           disabled={disabled}
@@ -230,7 +233,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
         required={required}
         title={value}
         labelTooltip={property.description || property.displayName}
-        placeholder={passwordSavedMessage}
+        placeholder={placeholder}
         name={property.id!}
         value={value}
         readOnly={readonly || disabled}
@@ -253,7 +256,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
         defaultState={defaultState || { [property.id!]: defaultValue }}
         autoHide={autoHide}
         description={hint}
-        placeholder={passwordSavedMessage}
+        placeholder={placeholder}
         readOnly={readonly || disabled}
         autoComplete={autocomplete}
         className={className}
@@ -275,7 +278,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
       value={value}
       defaultValue={defaultValue}
       description={hint}
-      placeholder={passwordSavedMessage}
+      placeholder={placeholder}
       readOnly={readonly || disabled}
       autoComplete={autocomplete}
       className={className}
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionAuthModelCredentials/ConnectionAuthModelCredentialsForm.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionAuthModelCredentials/ConnectionAuthModelCredentialsForm.tsx
@@ -33,7 +33,7 @@ export const ConnectionAuthModelCredentialsForm = observer<Props>(function Conne
     }
 
     return {
-      tiny: true,
+      fill: true,
     };
   }
 
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx
@@ -244,28 +244,6 @@ export const Options: TabContainerPanelComponent<IConnectionFormProps> = observe
                 ))}
             </Group>
           </Group>
-          <Group form gap>
-            <Container wrap gap>
-              <InputField type="text" name="name" minLength={1} state={optionsPart.state} readOnly={readonly || formState.isDisabled} required fill>
-                {translate('connections_connection_name')}
-              </InputField>
-              <ProjectSelect
-                value={formState.state.projectId}
-                readOnly={readonly || edit}
-                disabled={formState.isDisabled}
-                autoHide
-                onChange={setProject}
-              />
-              <InputField type="text" name="folder" state={optionsPart.state} autoHide readOnly tiny fill>
-                {translate('plugin_connections_connection_form_part_main_folder')}
-              </InputField>
-            </Container>
-            <Textarea name="description" rows={3} state={optionsPart.state} readOnly={readonly || formState.isDisabled}>
-              {translate('connections_connection_description')}
-            </Textarea>
-          </Group>
-        </Container>
-        <Container medium gap>
           {!driver?.anonymousAccess && (authentication.authorized || !edit) && (
             <Group form gap>
               <GroupTitle>{translate('connections_connection_edit_authentication')}</GroupTitle>
@@ -330,10 +308,32 @@ export const Options: TabContainerPanelComponent<IConnectionFormProps> = observe
               )}
             </Group>
           )}
+        </Container>
+        <Container medium gap>
           <Placeholder container={connectionFormService.providerPropertiesContainer} formState={formState} />
           {driver?.providerProperties && <ProviderPropertiesForm formState={formState} properties={driver.providerProperties} readonly={readonly} />}
 
           <AdvancedPropertiesForm config={optionsPart.state} disabled={formState.isDisabled} readonly={readonly} />
+          <Group form gap>
+            <Container wrap gap>
+              <InputField type="text" name="name" minLength={1} state={optionsPart.state} readOnly={readonly || formState.isDisabled} required fill>
+                {translate('connections_connection_name')}
+              </InputField>
+              <ProjectSelect
+                value={formState.state.projectId}
+                readOnly={readonly || edit}
+                disabled={formState.isDisabled}
+                autoHide
+                onChange={setProject}
+              />
+              <InputField type="text" name="folder" state={optionsPart.state} autoHide readOnly tiny fill>
+                {translate('plugin_connections_connection_form_part_main_folder')}
+              </InputField>
+            </Container>
+            <Textarea name="description" rows={3} state={optionsPart.state} readOnly={readonly || formState.isDisabled}>
+              {translate('connections_connection_description')}
+            </Textarea>
+          </Group>
         </Container>
       </ColoredContainer>
     </Form>

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ export const ConnectionAuthModelCredentialsForm = observer<Props>(function Conne`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`return {`
`36`		`- tiny: true,`
	`36`	`+ fill: true,`
`37`	`37`	`};`
`38`	`38`	`}`
`39`	`39`