fix: capitalize dns provider label for form fields (#245)

konstructio · Aug 25, 2023 · 6d9502a · 6d9502a
1 parent 9d9a827
commit 6d9502a
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 89 deletions.
diff --git a/containers/clusterForms/clusterCreation/advancedOptions/index.tsx b/containers/clusterForms/clusterCreation/advancedOptions/index.tsx
@@ -67,8 +67,8 @@ const AdvancedOptions: FunctionComponent = () => {
         label="DNS provider"
         defaultValue="default"
         options={[
-          { label: 'default', value: 'default' },
-          { label: 'cloudflare', value: 'cloudflare' },
+          { label: 'Default', value: 'default' },
+          { label: 'Cloudflare', value: 'cloudflare' },
         ]}
         onChange={(value) => setIsCloudFlareSelected(value === 'cloudflare')}
         rules={{

diff --git a/containers/clusterForms/shared/dnsProvider/index.tsx b/containers/clusterForms/shared/dnsProvider/index.tsx
diff --git a/containers/clusterForms/shared/setupForm/index.tsx b/containers/clusterForms/shared/setupForm/index.tsx
@@ -1,4 +1,6 @@
 import React, { ChangeEvent, FunctionComponent, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { capitalize } from 'lodash';
 
 import { clearDomains } from '../../../../redux/slices/api.slice';
 import ControlledPassword from '../../../../components/controlledFields/Password';
@@ -7,13 +9,8 @@ import { getCloudDomains } from '../../../../redux/thunks/api.thunk';
 import ControlledTextField from '../../../../components/controlledFields/TextField';
 import ControlledAutocomplete from '../../../../components/controlledFields/AutoComplete';
 import { EMAIL_REGEX } from '../../../../constants';
-import { FormFlowProps } from '../../../../types/provision';
 import { InstallValues, InstallationType } from '../../../../types/redux';
 
-export interface SetupFormProps {
-  children: FunctionComponent;
-}
-
 const CLOUD_REGION_LABELS: Record<InstallationType, string | null> = {
   [InstallationType.AWS]: 'Cloud region',
   [InstallationType.CIVO]: 'Cloud region',
@@ -22,7 +19,7 @@ const CLOUD_REGION_LABELS: Record<InstallationType, string | null> = {
   [InstallationType.LOCAL]: null,
 };
 
-const SetupForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ control, setValue }) => {
+const SetupForm: FunctionComponent = () => {
   const [isCloudFlareSelected, setIsCloudFlareSelected] = useState<boolean>(false);
   const [selectedRegion, setSelectedRegion] = useState<string>('');
   const dispatch = useAppDispatch();
@@ -36,6 +33,8 @@ const SetupForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ control, s
     }),
   );
 
+  const { control, setValue } = useForm<InstallValues>();
+
   const cloudRegionLabel = useMemo(
     () =>
       CLOUD_REGION_LABELS[installType as InstallationType] ||
@@ -111,8 +110,8 @@ const SetupForm: FunctionComponent<FormFlowProps<InstallValues>> = ({ control, s
         required
         rules={{ required: true }}
         options={[
-          { label: installType as string, value: installType as string },
-          { label: 'cloudflare', value: 'cloudflare' },
+          { label: capitalize(installType as string), value: installType as string },
+          { label: 'Cloudflare', value: 'cloudflare' },
         ]}
         onChange={handleDnsProviderOnChange}
       />