From 6c6a55cb3b35d0c7c4d79271e1c8352e41e84a90 Mon Sep 17 00:00:00 2001
From: "s.teleshev" <s.teleshev@mu.se>
Date: Wed, 6 Dec 2023 13:51:04 +0100
Subject: [PATCH] CB-4335 create connection form uses useForm hook (first
 iteration)

---
 .../ObjectPropertyInfoForm/RenderField.tsx    | 16 ++---
 .../src/ConnectionForm/ConnectionForm.tsx     | 66 ++++++++++++-------
 .../ConnectionFormBaseActions.tsx             |  5 +-
 .../ConnectionForm/IConnectionFormProps.ts    |  6 ++
 .../ConnectionFormAuthenticationAction.tsx    |  3 +-
 5 files changed, 63 insertions(+), 33 deletions(-)

diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx
index d2cb7bdf5a..60640112ca 100644
--- a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx
+++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx
@@ -79,7 +79,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
   if (controlType === 'file' && state) {
     return (
       <InputFileTextContent
-        required={property.required}
+        required={!property.required}
         tooltip={property.description}
         labelTooltip={property.displayName || property.description}
         name={property.id!}
@@ -119,7 +119,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
     if (state !== undefined) {
       return (
         <FieldCheckbox
-          required={property.required}
+          required={!property.required}
           id={property.id}
           name={property.id!}
           state={state}
@@ -151,7 +151,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
     if (state !== undefined) {
       return (
         <Combobox
-          required={property.required}
+          required={!property.required}
           name={property.id!}
           state={state}
           items={property.validValues!}
@@ -171,7 +171,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
 
     return (
       <Combobox
-        required={property.required}
+        required={!property.required}
         name={property.id!}
         items={property.validValues!}
         keySelector={value => value}
@@ -192,7 +192,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
     if (state !== undefined) {
       return (
         <Textarea
-          required={property.required}
+          required={!property.required}
           title={state[property.id!]}
           labelTooltip={property.description || property.displayName}
           description={description}
@@ -209,7 +209,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
 
     return (
       <Textarea
-        required={property.required}
+        required={!property.required}
         title={value}
         labelTooltip={property.description || property.displayName}
         description={description}
@@ -227,7 +227,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
   if (state !== undefined) {
     return (
       <InputField
-        required={property.required}
+        required={!property.required}
         type={password ? 'password' : 'text'}
         title={password ? property.description || property.displayName : state[property.id!]}
         labelTooltip={property.description || property.displayName}
@@ -250,7 +250,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
 
   return (
     <InputField
-      required={property.required}
+      required={!property.required}
       type={password ? 'password' : 'text'}
       title={password ? property.description || property.displayName : value}
       labelTooltip={property.description || property.displayName}
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionForm.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionForm.tsx
index 2b14c1a281..811fd3711f 100644
--- a/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionForm.tsx
+++ b/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionForm.tsx
@@ -9,7 +9,7 @@ import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
 import styled, { css } from 'reshadow';
 
-import { ExceptionMessage, Loader, Placeholder, StatusMessage, useExecutor, useObjectRef, useStyles } from '@cloudbeaver/core-blocks';
+import { ExceptionMessage, Form, Loader, Placeholder, StatusMessage, useExecutor, useForm, useObjectRef, useStyles } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { ENotificationType } from '@cloudbeaver/core-events';
 import type { ConnectionConfig } from '@cloudbeaver/core-sdk';
@@ -17,7 +17,7 @@ import { BASE_TAB_STYLES, TabList, TabPanelList, TabsState, UNDERLINE_TAB_BIG_ST
 
 import { ConnectionFormService } from './ConnectionFormService';
 import { connectionConfigContext } from './Contexts/connectionConfigContext';
-import type { IConnectionFormState } from './IConnectionFormProps';
+import type { IConnectionFormActions, IConnectionFormState } from './IConnectionFormProps';
 
 const tabsStyles = css`
   TabList {
@@ -106,6 +106,26 @@ export const ConnectionForm = observer<ConnectionFormProps>(function ConnectionF
   const style = [BASE_TAB_STYLES, tabsStyles, UNDERLINE_TAB_STYLES, UNDERLINE_TAB_BIG_STYLES];
   const styles = useStyles(style, topBarStyles, formStyles);
   const service = useService(ConnectionFormService);
+  
+  const form = useForm({
+    onSubmit: event => {
+      if (event?.type === 'test') {
+        console.info('test');
+        state.test();
+      } else {
+        state.save();
+      }
+    },
+  });
+
+  const actionsContext = useObjectRef<IConnectionFormActions>(() => ({
+    save: () => {
+      form.submit(new SubmitEvent('submit'));
+    },
+    test: () => {
+      form.submit(new SubmitEvent('test'));
+    },
+  }));
 
   useExecutor({
     executor: state.submittingTask,
@@ -139,25 +159,27 @@ export const ConnectionForm = observer<ConnectionFormProps>(function ConnectionF
   }
 
   return styled(styles)(
-    <TabsState container={service.tabsContainer} localState={state.partsState} state={state} onCancel={onCancel}>
-      <box className={className}>
-        <connection-top-bar>
-          <connection-top-bar-tabs>
-            <connection-status-message>
-              <StatusMessage type={ENotificationType.Info} message={state.statusMessage} />
-            </connection-status-message>
-            <TabList style={style} disabled={state.disabled} />
-          </connection-top-bar-tabs>
-          <connection-top-bar-actions>
-            <Loader suspense inline hideMessage hideException>
-              <Placeholder container={service.actionsContainer} state={state} onCancel={onCancel} />
-            </Loader>
-          </connection-top-bar-actions>
-        </connection-top-bar>
-        <content-box>
-          <TabPanelList style={style} />
-        </content-box>
-      </box>
-    </TabsState>,
+    <Form context={form} focusFirstChild>
+      <TabsState actions={actionsContext} container={service.tabsContainer} localState={state.partsState} state={state} onCancel={onCancel}>
+        <box className={className}>
+          <connection-top-bar>
+            <connection-top-bar-tabs>
+              <connection-status-message>
+                <StatusMessage type={ENotificationType.Info} message={state.statusMessage} />
+              </connection-status-message>
+              <TabList style={style} disabled={state.disabled} />
+            </connection-top-bar-tabs>
+            <connection-top-bar-actions>
+              <Loader suspense inline hideMessage hideException>
+                <Placeholder actions={actionsContext} container={service.actionsContainer} state={state} onCancel={onCancel} />
+              </Loader>
+            </connection-top-bar-actions>
+          </connection-top-bar>
+          <content-box>
+            <TabPanelList style={style} />
+          </content-box>
+        </box>
+      </TabsState>
+    </Form>,
   );
 });
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionFormBaseActions.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionFormBaseActions.tsx
index c0c0c47a79..2579dda941 100644
--- a/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionFormBaseActions.tsx
+++ b/webapp/packages/plugin-connections/src/ConnectionForm/ConnectionFormBaseActions.tsx
@@ -16,6 +16,7 @@ import type { IConnectionFormProps } from './IConnectionFormProps';
 
 export const ConnectionFormBaseActions: PlaceholderComponent<IConnectionFormProps> = observer(function ConnectionFormBaseActions({
   state,
+  actions,
   onCancel,
 }) {
   const translate = useTranslate();
@@ -40,10 +41,10 @@ export const ConnectionFormBaseActions: PlaceholderComponent<IConnectionFormProp
           {translate('ui_processing_cancel')}
         </Button>
       )}
-      <Button type="button" disabled={state.disabled || !authorized} mod={['outlined']} loader onClick={state.test}>
+      <Button type="button" disabled={state.disabled || !authorized} mod={['outlined']} loader onClick={actions.test}>
         {translate('connections_connection_test')}
       </Button>
-      <Button type="button" disabled={state.disabled || state.readonly} mod={['unelevated']} loader onClick={state.save}>
+      <Button type="button" disabled={state.disabled || state.readonly} mod={['unelevated']} loader onClick={actions.save}>
         {translate(state.mode === 'edit' ? 'ui_processing_save' : 'ui_processing_create')}
       </Button>
     </>
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/IConnectionFormProps.ts b/webapp/packages/plugin-connections/src/ConnectionForm/IConnectionFormProps.ts
index 25e4a8b774..c4167afa78 100644
--- a/webapp/packages/plugin-connections/src/ConnectionForm/IConnectionFormProps.ts
+++ b/webapp/packages/plugin-connections/src/ConnectionForm/IConnectionFormProps.ts
@@ -52,8 +52,14 @@ export interface IConnectionFormState {
   readonly dispose: () => void;
 }
 
+export interface IConnectionFormActions {
+  save: VoidFunction;
+  test: VoidFunction;
+}
+
 export interface IConnectionFormProps {
   state: IConnectionFormState;
+  actions: IConnectionFormActions;
   onCancel?: () => void;
 }
 
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/ConnectionFormAuthenticationAction.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/ConnectionFormAuthenticationAction.tsx
index be88f5d3df..4240120758 100644
--- a/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/ConnectionFormAuthenticationAction.tsx
+++ b/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/ConnectionFormAuthenticationAction.tsx
@@ -43,6 +43,7 @@ export const AuthenticationButton: PlaceholderComponent<IConnectionFormProps> =
 
 export const ConnectionFormAuthenticationAction: PlaceholderComponent<IConnectionFormProps> = observer(function ConnectionFormAuthenticationAction({
   state,
+  actions,
 }) {
   const driverMap = useResource(ConnectionFormAuthenticationAction, DBDriverResource, state.config.driverId || null);
 
@@ -57,5 +58,5 @@ export const ConnectionFormAuthenticationAction: PlaceholderComponent<IConnectio
     return null;
   }
 
-  return <AuthenticationButton state={state} />;
+  return <AuthenticationButton actions={actions} state={state} />;
 });