refactor: move constants

assets/components/tracking/connector/ConnectorForm.tsx

@@ -10,10 +10,9 @@ import {providersConfig} from "../../../utils/providers"
 
 export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
     const [provider, setProvider] = useState<ConnectorProvider>()
-    const providersConfigList = providersConfig()
     const [current, setCurrent] = useState(0)
 
-    const ProviderForm = provider !== undefined ? providersConfigList[provider].form : undefined
+    const ProviderForm = provider !== undefined ? providersConfig[provider].form : undefined
 
     const steps: StepProps[] = [
         {
@@ -38,7 +37,7 @@ export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate:
                     <>
                         <h2>{t`Choose a registrar`}</h2>
                         <Row gutter={[16, 16]}>
-                            {Object.keys(providersConfigList).map((provider: string) => (
+                            {Object.keys(providersConfig).map((provider: string) => (
                                 <Col key={provider as ConnectorProvider} span={8}>
                                     <Card
                                         hoverable

assets/components/tracking/connector/ConnectorsList.tsx

@@ -50,7 +50,7 @@ export function ConnectorsList({connectors, onDelete}: { connectors: ConnectorEl
                                     {t`You can stop using a connector at any time. To delete a connector, you must remove it from each linked Watchlist.
 The creation date corresponds to the date on which you consented to the creation of the connector and on which you declared in particular that you fulfilled the conditions of use of the supplier's API, waived the right of withdrawal and were of the minimum age to consent to these conditions.`}
                                      
-                                    <Typography.Link href={providersConfig()[connector.provider].tosLink}>
+                                    <Typography.Link href={providersConfig[connector.provider].tosLink}>
                                         {t`The Provider’s conditions are accessible by following this hyperlink.`}
                                     </Typography.Link>
                                 </>

assets/components/tracking/watchlist/WatchlistForm.tsx

@@ -269,7 +269,7 @@ export function WatchlistForm({form, connectors, onFinish, isCreation}: {
                     </>
                 )}
             </Form.List>
-            <Form.Item style={{marginTop: '5vh'}}>
+            <Form.Item style={{marginTop: '5em'}}>
                 <Space>
                     <Button type='primary' htmlType='submit'>
                         {isCreation ? t`Create` : t`Update`}

assets/utils/providers/forms/AutoDnsConnectorForm.tsx

@@ -4,15 +4,8 @@ import React from 'react'
 import type {Connector} from '../../api/connectors'
 import {ConnectorProvider} from '../../api/connectors'
 import {t} from 'ttag'
-import {DefaultConnectorFormItems} from "./index"
-import {providersConfig} from "../index"
-
-const formItemLayoutWithOutLabel = {
-    wrapperCol: {
-        xs: {span: 24, offset: 0},
-        sm: {span: 20, offset: 4}
-    }
-}
+import DefaultConnectorFormItems from "./DefaultConnectorFormItems"
+import {formItemLayoutWithOutLabel, providersConfig} from "../index"
 
 export default function AutoDnsConnectorForm({form, onCreate}: {
     form: FormInstance,
@@ -97,7 +90,7 @@ export default function AutoDnsConnectorForm({form, onCreate}: {
                 </Checkbox>
             </Form.Item>
 
-            <DefaultConnectorFormItems tosLink={providersConfig()[ConnectorProvider.AutoDNS].tosLink}/>
+            <DefaultConnectorFormItems tosLink={providersConfig[ConnectorProvider.AutoDNS].tosLink}/>
         </Form>
     )
 }

assets/utils/providers/forms/DefaultConnectorFormItems.tsx

@@ -2,7 +2,7 @@ import {Button, Checkbox, Form, Input, Typography} from "antd"
 import {t} from "ttag"
 import React from "react"
 
-export function DefaultConnectorFormItems({tosLink}: { tosLink: string }) {
+export default function DefaultConnectorFormItems({tosLink}: { tosLink: string }) {
     return <>
         <Form.Item name="provider" noStyle>
             <Input type="hidden" />
@@ -47,7 +47,7 @@ export function DefaultConnectorFormItems({tosLink}: { tosLink: string }) {
         </Form.Item>
 
 
-        <Form.Item style={{marginTop: '5vh', textAlign: 'center'}}>
+        <Form.Item style={{marginTop: '5em', textAlign: 'center'}}>
             <Button type='primary' htmlType='submit'>
                 {t`Create`}
             </Button>

assets/utils/providers/forms/GandiConnectorForm.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import type {Connector} from '../../api/connectors'
 import {ConnectorProvider} from '../../api/connectors'
 import {t} from 'ttag'
-import {DefaultConnectorFormItems} from "./index"
+import DefaultConnectorFormItems from "./DefaultConnectorFormItems"
 import {providersConfig} from "../index"
 
 const formItemLayoutWithOutLabel = {
@@ -48,7 +48,7 @@ export default function GandiConnectorForm({form, onCreate}: {
             >
                 <Input autoComplete='off' placeholder='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'/>
             </Form.Item>
-            <DefaultConnectorFormItems tosLink={providersConfig()[ConnectorProvider.Gandi].tosLink}/>
+            <DefaultConnectorFormItems tosLink={providersConfig[ConnectorProvider.Gandi].tosLink}/>
 
         </Form>
     )

assets/utils/providers/forms/NamecheapConnectorForm.tsx

@@ -4,15 +4,8 @@ import React from 'react'
 import type {Connector} from '../../api/connectors'
 import {ConnectorProvider} from '../../api/connectors'
 import {t} from 'ttag'
-import {DefaultConnectorFormItems} from "./index"
-import {providersConfig} from "../index"
-
-const formItemLayoutWithOutLabel = {
-    wrapperCol: {
-        xs: {span: 24, offset: 0},
-        sm: {span: 20, offset: 4}
-    }
-}
+import DefaultConnectorFormItems from "./DefaultConnectorFormItems"
+import {formItemLayoutWithOutLabel, providersConfig} from "../index"
 
 export default function NamecheapConnectorForm({form, onCreate}: {
     form: FormInstance,
@@ -43,7 +36,7 @@ export default function NamecheapConnectorForm({form, onCreate}: {
             >
                 <Input autoComplete='off'/>
             </Form.Item>
-            <DefaultConnectorFormItems tosLink={providersConfig()[ConnectorProvider.Namecheap].tosLink}/>
+            <DefaultConnectorFormItems tosLink={providersConfig[ConnectorProvider.Namecheap].tosLink}/>
         </Form>
     )
 }

assets/utils/providers/forms/NamecomConnectorForm.tsx

@@ -4,15 +4,8 @@ import React from 'react'
 import type {Connector} from '../../api/connectors'
 import {ConnectorProvider} from '../../api/connectors'
 import {t} from 'ttag'
-import {DefaultConnectorFormItems} from "./index"
-import {providersConfig} from "../index"
-
-const formItemLayoutWithOutLabel = {
-    wrapperCol: {
-        xs: {span: 24, offset: 0},
-        sm: {span: 20, offset: 4}
-    }
-}
+import DefaultConnectorFormItems from "./DefaultConnectorFormItems"
+import {formItemLayoutWithOutLabel, providersConfig} from "../index"
 
 export default function NamecomConnectorForm({form, onCreate}: {
     form: FormInstance,
@@ -47,7 +40,7 @@ export default function NamecomConnectorForm({form, onCreate}: {
             >
                 <Input autoComplete='off'/>
             </Form.Item>
-            <DefaultConnectorFormItems tosLink={providersConfig()[ConnectorProvider["Name.com"]].tosLink}/>
+            <DefaultConnectorFormItems tosLink={providersConfig[ConnectorProvider["Name.com"]].tosLink}/>
         </Form>
     )
 }

assets/utils/providers/forms/OvhCloudConnectorForm.tsx

@@ -5,15 +5,8 @@ import type {FormInstance} from "antd"
 import {Form, Input, Popconfirm, Select} from "antd"
 import type {Connector} from "../../api/connectors"
 import {ConnectorProvider} from "../../api/connectors"
-import {DefaultConnectorFormItems} from "./index"
-import {providersConfig} from "../index"
-
-const formItemLayoutWithOutLabel = {
-    wrapperCol: {
-        xs: {span: 24, offset: 0},
-        sm: {span: 20, offset: 4}
-    }
-}
+import DefaultConnectorFormItems from "./DefaultConnectorFormItems"
+import {formItemLayoutWithOutLabel, providersConfig} from "../index"
 
 export default function OvhCloudConnectorForm({form, onCreate}: {
     form: FormInstance,
@@ -24,20 +17,16 @@ export default function OvhCloudConnectorForm({form, onCreate}: {
 
     form.setFieldValue('provider', ConnectorProvider.OVHcloud)
 
-    const ovhFields = {
-        appKey: t`Application key`,
-        appSecret: t`Application secret`,
-        consumerKey: t`Consumer key`
-    }
     const ovhEndpointList = [
-        {
-            label: t`European Region`,
-            value: 'ovh-eu'
-        }
+        {label: t`European Region`, value: 'ovh-eu'},
+        {label: t`United States Region`, value: 'ovh-us'},
+        {label: t`Canada Region`, value: 'ovh-ca'}
     ]
+
     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`},
         {
@@ -55,16 +44,38 @@ export default function OvhCloudConnectorForm({form, onCreate}: {
             wrapperCol={{span: 14}}
             onFinish={onCreate}
         >
-            {
-                Object.keys(ovhFields).map(fieldName => <Form.Item
-                    key={ovhFields[fieldName as keyof typeof ovhFields]}
-                    label={ovhFields[fieldName as keyof typeof ovhFields]}
-                    name={['authData', fieldName]}
-                    rules={[{required: true, message: t`Required`}]}
-                >
-                    <Input autoComplete='off'/>
-                </Form.Item>)
-            }
+            <Form.Item
+                label={t`Application key`}
+                name={['authData', 'appKey']}
+                rules={[{required: true, message: t`Required`}]}
+            >
+                <Input autoComplete='off'/>
+            </Form.Item>
+
+            <Form.Item
+                label={t`Application secret`}
+                name={['authData', 'appSecret']}
+                rules={[{required: true, message: t`Required`}]}
+            >
+                <Input autoComplete='off'/>
+            </Form.Item>
+
+            <Form.Item
+                label={t`Consumer key`}
+                name={['authData', 'consumerKey']}
+                rules={[{required: true, message: t`Required`}]}
+            >
+                <Input autoComplete='off'/>
+            </Form.Item>
+
+            <Form.Item
+                label={t`Application key`}
+                name={['authData', 'appKey']}
+                rules={[{required: true, message: t`Required`}]}
+            >
+                <Input autoComplete='off'/>
+            </Form.Item>
+
             <Form.Item
                 label={t`OVH Endpoint`}
                 name={['authData', 'apiEndpoint']}
@@ -108,7 +119,7 @@ export default function OvhCloudConnectorForm({form, onCreate}: {
                     />
                 </Popconfirm>
             </Form.Item>
-            <DefaultConnectorFormItems tosLink={providersConfig()[ConnectorProvider.OVHcloud].tosLink}/>
+            <DefaultConnectorFormItems tosLink={providersConfig[ConnectorProvider.OVHcloud].tosLink}/>
         </Form>
     )
 }

assets/utils/providers/index.tsx

@@ -8,38 +8,43 @@ import NamecheapConnectorForm from "./forms/NamecheapConnectorForm"
 import AutoDnsConnectorForm from "./forms/AutoDnsConnectorForm"
 import NamecomConnectorForm from "./forms/NamecomConnectorForm"
 
+export const formItemLayoutWithOutLabel = {
+    wrapperCol: {
+        xs: {span: 24, offset: 0},
+        sm: {span: 20, offset: 4}
+    }
+}
+
 export type ProviderConfig = {
     tosLink: string
     tokenLink: string
     form: ({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) => React.ReactElement
 }
 
-export const providersConfig: () => Record<ConnectorProvider, ProviderConfig> = () => {
-    return {
-        [ConnectorProvider.OVHcloud]: {
-            tosLink: 'https://www.ovhcloud.com/en/terms-and-conditions/contracts/',
-            tokenLink: 'https://api.ovh.com/createToken/?GET=/order/cart&GET=/order/cart/*&POST=/order/cart&POST=/order/cart/*&DELETE=/order/cart/*&GET=/domain/extensions',
-            form: OvhCloudConnectorForm
-        },
-        [ConnectorProvider.Gandi]: {
-            tosLink: 'https://www.gandi.net/en/contracts/terms-of-service',
-            tokenLink: 'https://admin.gandi.net/organizations/account/pat',
-            form: GandiConnectorForm
-        },
-        [ConnectorProvider.Namecheap]: {
-            tosLink: 'https://www.namecheap.com/legal/universal/universal-tos/',
-            tokenLink: 'https://ap.www.namecheap.com/settings/tools/apiaccess/',
-            form: NamecheapConnectorForm
-        },
-        [ConnectorProvider.AutoDNS]: {
-            tosLink: 'https://www.internetx.com/agb/',
-            tokenLink: 'https://en.autodns.com/domain-robot-api/',
-            form: AutoDnsConnectorForm
-        },
-        [ConnectorProvider["Name.com"]]: {
-            tosLink: 'https://www.name.com/policies/',
-            tokenLink: 'https://www.name.com/account/settings/api',
-            form: NamecomConnectorForm
-        }
+export const providersConfig: Record<ConnectorProvider, ProviderConfig> = {
+    [ConnectorProvider.OVHcloud]: {
+        tosLink: 'https://www.ovhcloud.com/en/terms-and-conditions/contracts/',
+        tokenLink: 'https://api.ovh.com/createToken/?GET=/order/cart&GET=/order/cart/*&POST=/order/cart&POST=/order/cart/*&DELETE=/order/cart/*&GET=/domain/extensions',
+        form: OvhCloudConnectorForm
+    },
+    [ConnectorProvider.Gandi]: {
+        tosLink: 'https://www.gandi.net/en/contracts/terms-of-service',
+        tokenLink: 'https://admin.gandi.net/organizations/account/pat',
+        form: GandiConnectorForm
+    },
+    [ConnectorProvider.Namecheap]: {
+        tosLink: 'https://www.namecheap.com/legal/universal/universal-tos/',
+        tokenLink: 'https://ap.www.namecheap.com/settings/tools/apiaccess/',
+        form: NamecheapConnectorForm
+    },
+    [ConnectorProvider.AutoDNS]: {
+        tosLink: 'https://www.internetx.com/agb/',
+        tokenLink: 'https://en.autodns.com/domain-robot-api/',
+        form: AutoDnsConnectorForm
+    },
+    [ConnectorProvider["Name.com"]]: {
+        tosLink: 'https://www.name.com/policies/',
+        tokenLink: 'https://www.name.com/account/settings/api',
+        form: NamecomConnectorForm
     }
 }