feat: refactor connector form

assets/utils/providers/forms/AutoDnsConnectorForm.tsx

@@ -1,10 +1,10 @@
 import type {FormInstance} from 'antd'
 import {Alert, Checkbox, Form, Input, Typography} from 'antd'
 import React from 'react'
-import type {Connector} from '../../../utils/api/connectors'
-import {ConnectorProvider} from '../../../utils/api/connectors'
+import type {Connector} from '../../api/connectors'
+import {ConnectorProvider} from '../../api/connectors'
 import {t} from 'ttag'
-import {DefaultConnectorFormItems} from "../../../utils/providers/forms"
+import {DefaultConnectorFormItems} from "./index"
 import {providersConfig} from "../index"
 
 const formItemLayoutWithOutLabel = {
@@ -14,7 +14,10 @@ const formItemLayoutWithOutLabel = {
     }
 }
 
-export function AutoDnsConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
+export default function AutoDnsConnectorForm({form, onCreate}: {
+    form: FormInstance,
+    onCreate: (values: Connector) => void
+}) {
 
     return (
         <Form

assets/utils/providers/forms/GandiConnectorForm.tsx

@@ -14,7 +14,10 @@ const formItemLayoutWithOutLabel = {
     }
 }
 
-export function GandiConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
+export default function GandiConnectorForm({form, onCreate}: {
+    form: FormInstance,
+    onCreate: (values: Connector) => void
+}) {
 
     return (
         <Form
@@ -47,7 +50,6 @@ export function GandiConnectorForm({form, onCreate}: { form: FormInstance, onCre
             >
                 <Input autoComplete='off' placeholder='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'/>
             </Form.Item>
-
             <DefaultConnectorFormItems tosLink={providersConfig()[ConnectorProvider.Gandi].tosLink}/>
 
         </Form>

assets/utils/providers/forms/NamecheapConnectorForm.tsx

@@ -1,10 +1,10 @@
 import type {FormInstance} from 'antd'
 import {Form, Input} from 'antd'
 import React from 'react'
-import type {Connector} from '../../../utils/api/connectors'
-import {ConnectorProvider} from '../../../utils/api/connectors'
+import type {Connector} from '../../api/connectors'
+import {ConnectorProvider} from '../../api/connectors'
 import {t} from 'ttag'
-import {DefaultConnectorFormItems} from "../../../utils/providers/forms"
+import {DefaultConnectorFormItems} from "./index"
 import {providersConfig} from "../index"
 
 const formItemLayoutWithOutLabel = {
@@ -14,7 +14,7 @@ const formItemLayoutWithOutLabel = {
     }
 }
 
-export function NamecheapConnectorForm({form, onCreate}: {
+export default function NamecheapConnectorForm({form, onCreate}: {
     form: FormInstance,
     onCreate: (values: Connector) => void
 }) {
@@ -44,7 +44,6 @@ export function NamecheapConnectorForm({form, onCreate}: {
             >
                 <Input autoComplete='off'/>
             </Form.Item>
-
             <DefaultConnectorFormItems tosLink={providersConfig()[ConnectorProvider.Namecheap].tosLink}/>
         </Form>
     )

assets/utils/providers/forms/NamecomConnectorForm.tsx

@@ -1,10 +1,10 @@
 import type {FormInstance} from 'antd'
 import {Alert, Form, Input} from 'antd'
 import React from 'react'
-import type {Connector} from '../../../utils/api/connectors'
-import {ConnectorProvider} from '../../../utils/api/connectors'
+import type {Connector} from '../../api/connectors'
+import {ConnectorProvider} from '../../api/connectors'
 import {t} from 'ttag'
-import {DefaultConnectorFormItems} from "../../../utils/providers/forms"
+import {DefaultConnectorFormItems} from "./index"
 import {providersConfig} from "../index"
 
 const formItemLayoutWithOutLabel = {
@@ -14,7 +14,10 @@ const formItemLayoutWithOutLabel = {
     }
 }
 
-export function NamecomConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
+export default function NamecomConnectorForm({form, onCreate}: {
+    form: FormInstance,
+    onCreate: (values: Connector) => void
+}) {
 
     return (
         <Form

assets/utils/providers/forms/OvhCloudConnectorForm.tsx

@@ -1,38 +1,13 @@
 import {t} from 'ttag'
 import {regionNames} from "../../../i18n"
 import React, {useState} from 'react'
-import type { FormInstance} from "antd"
+import type {FormInstance} from "antd"
 import {Form, Input, Popconfirm, Select} from "antd"
 import type {Connector} from "../../api/connectors"
-import { ConnectorProvider} from "../../api/connectors"
+import {ConnectorProvider} from "../../api/connectors"
 import {DefaultConnectorFormItems} from "./index"
 import {providersConfig} from "../index"
 
-const ovhFieldsFunction = () => ({
-    appKey: t`Application key`,
-    appSecret: t`Application secret`,
-    consumerKey: t`Consumer key`
-})
-
-const ovhEndpointListFunction = () => [
-    {
-        label: t`European Region`,
-        value: 'ovh-eu'
-    }
-]
-
-const ovhSubsidiaryListFunction = () => [...[
-    'CZ', 'DE', 'ES', 'FI', 'FR', 'GB', 'IE', 'IT', 'LT', 'MA', 'NL', 'PL', 'PT', 'SN', 'TN'
-].map(c => ({value: c, label: regionNames.of(c) ?? c})), {value: 'EU', label: t`Europe`}]
-
-const ovhPricingModeFunction = () => [
-    {value: 'create-default', label: t`The domain is free and at the standard price`},
-    {
-        value: 'create-premium',
-        label: t`The domain is free but can be premium. Its price varies from one domain to another`
-    }
-]
-
 const formItemLayoutWithOutLabel = {
     wrapperCol: {
         xs: {span: 24, offset: 0},
@@ -40,14 +15,35 @@ const formItemLayoutWithOutLabel = {
     }
 }
 
-export function OvhCloudConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
-    const ovhFields = ovhFieldsFunction()
-    const ovhEndpointList = ovhEndpointListFunction()
-    const ovhSubsidiaryList = ovhSubsidiaryListFunction()
-    const ovhPricingMode = ovhPricingModeFunction()
+export default function OvhCloudConnectorForm({form, onCreate}: {
+    form: FormInstance,
+    onCreate: (values: Connector) => void
+}) {
     const [open, setOpen] = useState(false)
     const [ovhPricingModeValue, setOvhPricingModeValue] = useState<string | undefined>()
 
+    const ovhFields = {
+        appKey: t`Application key`,
+        appSecret: t`Application secret`,
+        consumerKey: t`Consumer key`
+    }
+    const ovhEndpointList = [
+        {
+            label: t`European Region`,
+            value: 'ovh-eu'
+        }
+    ]
+    const ovhSubsidiaryList = [...[
+        'CZ', 'DE', 'ES', 'FI', 'FR', 'GB', 'IE', 'IT', 'LT', 'MA', 'NL', 'PL', 'PT', 'SN', 'TN'
+    ].map(c => ({value: c, label: regionNames.of(c) ?? c})), {value: 'EU', label: t`Europe`}]
+    const ovhPricingMode = [
+        {value: 'create-default', label: t`The domain is free and at the standard price`},
+        {
+            value: 'create-premium',
+            label: t`The domain is free but can be premium. Its price varies from one domain to another`
+        }
+    ]
+
     return (
         <Form
             {...formItemLayoutWithOutLabel}
@@ -114,7 +110,6 @@ export function OvhCloudConnectorForm({form, onCreate}: { form: FormInstance, on
                     />
                 </Popconfirm>
             </Form.Item>
-
             <DefaultConnectorFormItems tosLink={providersConfig()[ConnectorProvider.OVHcloud].tosLink}/>
         </Form>
     )

assets/utils/providers/forms/index.tsx

@@ -1,8 +1,8 @@
-import {Button, Checkbox, Form, Space, Typography} from "antd"
+import {Button, Checkbox, Form, Typography} from "antd"
 import {t} from "ttag"
 import React from "react"
 
-export function DefaultConnectorFormItems({tosLink}: {tosLink: string}) {
+export function DefaultConnectorFormItems({tosLink}: { tosLink: string }) {
     return <>
         <Form.Item
             valuePropName='checked'
@@ -43,15 +43,10 @@ export function DefaultConnectorFormItems({tosLink}: {tosLink: string}) {
         </Form.Item>
 
 
-        <Form.Item style={{marginTop: '5vh'}}>
-            <Space>
-                <Button type='primary' htmlType='submit'>
-                    {t`Create`}
-                </Button>
-                <Button type='default' htmlType='reset'>
-                    {t`Reset`}
-                </Button>
-            </Space>
+        <Form.Item style={{marginTop: '5vh', textAlign: 'center'}}>
+            <Button type='primary' htmlType='submit'>
+                {t`Create`}
+            </Button>
         </Form.Item>
     </>
 }

assets/utils/providers/index.tsx

@@ -1,12 +1,12 @@
 import type {Connector} from '../api/connectors'
-import { ConnectorProvider} from '../api/connectors'
-import {OvhCloudConnectorForm} from "./forms/OvhCloudConnectorForm"
+import {ConnectorProvider} from '../api/connectors'
+import OvhCloudConnectorForm from "./forms/OvhCloudConnectorForm"
 import type {FormInstance} from "antd"
 import type React from "react"
-import {GandiConnectorForm} from "./forms/GandiConnectorForm"
-import {NamecheapConnectorForm} from "./forms/NamecheapConnectorForm"
-import {AutoDnsConnectorForm} from "./forms/AutoDnsConnectorForm"
-import {NamecomConnectorForm} from "./forms/NamecomConnectorForm"
+import GandiConnectorForm from "./forms/GandiConnectorForm"
+import NamecheapConnectorForm from "./forms/NamecheapConnectorForm"
+import AutoDnsConnectorForm from "./forms/AutoDnsConnectorForm"
+import NamecomConnectorForm from "./forms/NamecomConnectorForm"
 
 export type ProviderConfig = {
     tosLink: string