From 6bd4883859138fc6b73b2da645a220a3db3433a7 Mon Sep 17 00:00:00 2001
From: Adam Nowotny <adam.nowotny@protonmail.com>
Date: Thu, 29 Aug 2024 20:16:17 +0200
Subject: [PATCH] refactor: split formFields into separate files in
 common/components/forms/

---
 src/common/components/formFields.tsx          | 177 ------------------
 src/common/components/forms/booleanField.tsx  |  29 +++
 src/common/components/forms/buttonField.tsx   |  32 ++++
 src/common/components/forms/field.tsx         |  21 +++
 src/common/components/forms/index.tsx         |  13 ++
 src/common/components/forms/inputField.tsx    |  41 ++++
 src/common/components/forms/numberField.tsx   |  35 ++++
 src/common/components/forms/selectField.tsx   |  31 +++
 .../configuration/components/jsonEditor.tsx   |   2 +-
 .../pages/configuration/configurationPage.tsx |   4 +-
 src/options/pages/notificationsPage.tsx       |   4 +-
 .../pages/service/components/dynamicForm.tsx  |   4 +-
 src/options/pages/viewPage.tsx                |   4 +-
 13 files changed, 211 insertions(+), 186 deletions(-)
 delete mode 100644 src/common/components/formFields.tsx
 create mode 100644 src/common/components/forms/booleanField.tsx
 create mode 100644 src/common/components/forms/buttonField.tsx
 create mode 100644 src/common/components/forms/field.tsx
 create mode 100644 src/common/components/forms/index.tsx
 create mode 100644 src/common/components/forms/inputField.tsx
 create mode 100644 src/common/components/forms/numberField.tsx
 create mode 100644 src/common/components/forms/selectField.tsx

diff --git a/src/common/components/formFields.tsx b/src/common/components/formFields.tsx
deleted file mode 100644
index 0aa92974..00000000
--- a/src/common/components/formFields.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import React, { useContext } from 'react';
-import { Button, Col, Form, InputGroup, Nav, Row } from 'react-bootstrap';
-import { ViewConfigContext } from './react-types';
-
-export const FormField = ({
-    children,
-    label,
-    disabled,
-}: {
-    children: React.JSX.Element;
-    label: string;
-    disabled?: boolean;
-}) => {
-    return (
-        <Form.Group as={Row} className={`mb-1 ${disabled ? 'text-muted' : ''}`}>
-            <Form.Label column sm="7">
-                {label}
-            </Form.Label>
-            <Col sm="5">{children}</Col>
-        </Form.Group>
-    );
-};
-
-export const FormSelectField = ({
-    label,
-    onSelect,
-    items,
-    activeItem,
-    disabled,
-}: {
-    label: string;
-    onSelect: (value: string | null) => void;
-    items: Record<string, string>;
-    activeItem?: string;
-    disabled?: boolean;
-}) => {
-    return (
-        <FormField label={label} disabled={disabled}>
-            <Nav justify variant="pills" activeKey={activeItem} onSelect={onSelect}>
-                {Object.entries(items).map(([key, value]) => (
-                    <Nav.Item key={key} className="me-1">
-                        <Nav.Link eventKey={key} disabled={disabled}>
-                            {value}
-                        </Nav.Link>
-                    </Nav.Item>
-                ))}
-            </Nav>
-        </FormField>
-    );
-};
-
-export const FormBooleanField = ({
-    label,
-    onSelect,
-    items = { true: 'On', false: 'Off' },
-    activeItem,
-    disabled,
-}: {
-    label: string;
-    onSelect: (value: boolean) => void;
-    items?: Record<string, string>;
-    activeItem?: boolean;
-    disabled?: boolean;
-}) => {
-    const onSelectHandler = (value: string | null) => {
-        onSelect(value === 'true');
-    };
-    return (
-        <FormSelectField
-            label={label}
-            activeItem={activeItem ? 'true' : 'false'}
-            items={items}
-            onSelect={onSelectHandler}
-            disabled={disabled}
-        />
-    );
-};
-
-export const FormNumberField = ({
-    label,
-    onChange,
-    min,
-    max,
-    disabled,
-}: {
-    label: string;
-    onChange: (value: number) => void;
-    min?: number;
-    max?: number;
-    disabled?: boolean;
-}) => {
-    const viewConfig = useContext(ViewConfigContext);
-    const onChangeHandler = e => {
-        let value = e.target.value;
-        if (min && value < min) value = min;
-        if (max && value > max) value = max;
-        onChange(parseInt(value));
-    };
-    return (
-        <FormField label={label} disabled={disabled}>
-            <Form.Control
-                type="number"
-                defaultValue={viewConfig.columns}
-                onChange={onChangeHandler}
-            />
-        </FormField>
-    );
-};
-
-export const FormButtonField = ({
-    disabled,
-    text,
-    icon,
-    onClick,
-    style = 'success',
-}: {
-    disabled?: boolean;
-    text: string;
-    icon?: string;
-    onClick: () => void;
-    style?: 'success' | 'danger';
-}) => {
-    return (
-        <>
-            <Form.Group>
-                <Row className="text-center">
-                    <Col />
-                    <Col sm="auto">
-                        <Button onClick={onClick} variant={style} disabled={disabled}>
-                            {icon && <i className={`fa fa-${icon}`}></i>} {text}
-                        </Button>
-                    </Col>
-                    <Col />
-                </Row>
-            </Form.Group>
-        </>
-    );
-};
-
-export const FormInputField = ({
-    disabled,
-    text,
-    icon,
-    onChange,
-    placeholder,
-    type = 'text',
-}: {
-    disabled?: boolean;
-    text: string;
-    icon?: string;
-    onChange: (value: string) => void;
-    placeholder?: string;
-    type: 'text' | 'url' | 'password';
-}) => {
-    return (
-        <>
-            <Form.Group>
-                <InputGroup className="mb-3">
-                    {icon && (
-                        <InputGroup.Text>
-                            <i className={`fa fa-${icon}`}></i>
-                        </InputGroup.Text>
-                    )}
-                    <Form.Control
-                        disabled={disabled}
-                        type={type}
-                        defaultValue={text}
-                        onChange={e => {
-                            onChange(e.target.value);
-                        }}
-                        placeholder={placeholder}
-                    />
-                </InputGroup>
-            </Form.Group>
-        </>
-    );
-};
diff --git a/src/common/components/forms/booleanField.tsx b/src/common/components/forms/booleanField.tsx
new file mode 100644
index 00000000..bd9f26e9
--- /dev/null
+++ b/src/common/components/forms/booleanField.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { FormSelectField } from './selectField';
+
+export const FormBooleanField = ({
+    label,
+    onSelect,
+    items = { true: 'On', false: 'Off' },
+    activeItem,
+    disabled,
+}: {
+    label: string;
+    onSelect: (value: boolean) => void;
+    items?: Record<string, string>;
+    activeItem?: boolean;
+    disabled?: boolean;
+}) => {
+    const onSelectHandler = (value: string | null) => {
+        onSelect(value === 'true');
+    };
+    return (
+        <FormSelectField
+            label={label}
+            activeItem={activeItem ? 'true' : 'false'}
+            items={items}
+            onSelect={onSelectHandler}
+            disabled={disabled}
+        />
+    );
+};
diff --git a/src/common/components/forms/buttonField.tsx b/src/common/components/forms/buttonField.tsx
new file mode 100644
index 00000000..d530c139
--- /dev/null
+++ b/src/common/components/forms/buttonField.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Form, Row, Col, Button } from 'react-bootstrap';
+
+export const FormButtonField = ({
+    disabled,
+    text,
+    icon,
+    onClick,
+    style = 'success',
+}: {
+    disabled?: boolean;
+    text: string;
+    icon?: string;
+    onClick: () => void;
+    style?: 'success' | 'danger';
+}) => {
+    return (
+        <>
+            <Form.Group>
+                <Row className="text-center">
+                    <Col />
+                    <Col sm="auto">
+                        <Button onClick={onClick} variant={style} disabled={disabled}>
+                            {icon && <i className={`fa fa-${icon}`}></i>} {text}
+                        </Button>
+                    </Col>
+                    <Col />
+                </Row>
+            </Form.Group>
+        </>
+    );
+};
diff --git a/src/common/components/forms/field.tsx b/src/common/components/forms/field.tsx
new file mode 100644
index 00000000..6b04a086
--- /dev/null
+++ b/src/common/components/forms/field.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Col, Form, Row } from 'react-bootstrap';
+
+export const FormField = ({
+    children,
+    label,
+    disabled,
+}: {
+    children: React.JSX.Element;
+    label: string;
+    disabled?: boolean;
+}) => {
+    return (
+        <Form.Group as={Row} className={`mb-1 ${disabled ? 'text-muted' : ''}`}>
+            <Form.Label column sm="7">
+                {label}
+            </Form.Label>
+            <Col sm="5">{children}</Col>
+        </Form.Group>
+    );
+};
diff --git a/src/common/components/forms/index.tsx b/src/common/components/forms/index.tsx
new file mode 100644
index 00000000..abb1596d
--- /dev/null
+++ b/src/common/components/forms/index.tsx
@@ -0,0 +1,13 @@
+import { FormBooleanField } from './booleanField';
+import { FormButtonField } from './buttonField';
+import { FormInputField } from './inputField';
+import { FormNumberField } from './numberField';
+import { FormSelectField } from './selectField';
+
+export {
+    FormSelectField,
+    FormNumberField,
+    FormBooleanField,
+    FormInputField,
+    FormButtonField,
+};
diff --git a/src/common/components/forms/inputField.tsx b/src/common/components/forms/inputField.tsx
new file mode 100644
index 00000000..9a08168d
--- /dev/null
+++ b/src/common/components/forms/inputField.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Form, InputGroup } from 'react-bootstrap';
+
+export const FormInputField = ({
+    disabled,
+    text,
+    icon,
+    onChange,
+    placeholder,
+    type = 'text',
+}: {
+    disabled?: boolean;
+    text: string;
+    icon?: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    type: 'text' | 'url' | 'password';
+}) => {
+    return (
+        <>
+            <Form.Group>
+                <InputGroup className="mb-3">
+                    {icon && (
+                        <InputGroup.Text>
+                            <i className={`fa fa-${icon}`}></i>
+                        </InputGroup.Text>
+                    )}
+                    <Form.Control
+                        disabled={disabled}
+                        type={type}
+                        defaultValue={text}
+                        onChange={e => {
+                            onChange(e.target.value);
+                        }}
+                        placeholder={placeholder}
+                    />
+                </InputGroup>
+            </Form.Group>
+        </>
+    );
+};
diff --git a/src/common/components/forms/numberField.tsx b/src/common/components/forms/numberField.tsx
new file mode 100644
index 00000000..4250afc4
--- /dev/null
+++ b/src/common/components/forms/numberField.tsx
@@ -0,0 +1,35 @@
+import React, { useContext } from 'react';
+import { Form } from 'react-bootstrap';
+import { FormField } from './field';
+import { ViewConfigContext } from '../react-types';
+
+export const FormNumberField = ({
+    label,
+    onChange,
+    min,
+    max,
+    disabled,
+}: {
+    label: string;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+}) => {
+    const viewConfig = useContext(ViewConfigContext);
+    const onChangeHandler = e => {
+        let value = e.target.value;
+        if (min && value < min) value = min;
+        if (max && value > max) value = max;
+        onChange(parseInt(value));
+    };
+    return (
+        <FormField label={label} disabled={disabled}>
+            <Form.Control
+                type="number"
+                defaultValue={viewConfig.columns}
+                onChange={onChangeHandler}
+            />
+        </FormField>
+    );
+};
diff --git a/src/common/components/forms/selectField.tsx b/src/common/components/forms/selectField.tsx
new file mode 100644
index 00000000..89add796
--- /dev/null
+++ b/src/common/components/forms/selectField.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Nav } from 'react-bootstrap';
+import { FormField } from './field';
+
+export const FormSelectField = ({
+    label,
+    onSelect,
+    items,
+    activeItem,
+    disabled,
+}: {
+    label: string;
+    onSelect: (value: string | null) => void;
+    items: Record<string, string>;
+    activeItem?: string;
+    disabled?: boolean;
+}) => {
+    return (
+        <FormField label={label} disabled={disabled}>
+            <Nav justify variant="pills" activeKey={activeItem} onSelect={onSelect}>
+                {Object.entries(items).map(([key, value]) => (
+                    <Nav.Item key={key} className="me-1">
+                        <Nav.Link eventKey={key} disabled={disabled}>
+                            {value}
+                        </Nav.Link>
+                    </Nav.Item>
+                ))}
+            </Nav>
+        </FormField>
+    );
+};
diff --git a/src/options/pages/configuration/components/jsonEditor.tsx b/src/options/pages/configuration/components/jsonEditor.tsx
index dcd6ee1f..7c6e83de 100644
--- a/src/options/pages/configuration/components/jsonEditor.tsx
+++ b/src/options/pages/configuration/components/jsonEditor.tsx
@@ -1,4 +1,4 @@
-import { FormButtonField } from 'common/components/formFields';
+import { FormButtonField } from 'common/components/forms';
 import React, { useState } from 'react';
 import { Col, Form, Row } from 'react-bootstrap';
 import './jsonEditor.css';
diff --git a/src/options/pages/configuration/configurationPage.tsx b/src/options/pages/configuration/configurationPage.tsx
index 0082ce6d..ca34ca36 100644
--- a/src/options/pages/configuration/configurationPage.tsx
+++ b/src/options/pages/configuration/configurationPage.tsx
@@ -1,11 +1,11 @@
-import core from 'common/core';
 import {
     FormBooleanField,
     FormButtonField,
     FormInputField,
-} from 'common/components/formFields';
+} from 'common/components/forms';
 import { SettingsContext } from 'common/components/react-types';
 import ToastAlert from 'common/components/toastAlert';
+import core from 'common/core';
 import React, { useContext, useState } from 'react';
 import { Alert, Col, Container, Form, Row } from 'react-bootstrap';
 import JsonEditor from './components/jsonEditor';
diff --git a/src/options/pages/notificationsPage.tsx b/src/options/pages/notificationsPage.tsx
index 33e8b0f6..9a09edcd 100644
--- a/src/options/pages/notificationsPage.tsx
+++ b/src/options/pages/notificationsPage.tsx
@@ -1,6 +1,6 @@
-import core from 'common/core';
-import { FormBooleanField } from 'common/components/formFields';
+import { FormBooleanField } from 'common/components/forms';
 import { ViewConfigContext } from 'common/components/react-types';
+import core from 'common/core';
 import React, { useContext } from 'react';
 import { Col, Container, Form } from 'react-bootstrap';
 
diff --git a/src/options/pages/service/components/dynamicForm.tsx b/src/options/pages/service/components/dynamicForm.tsx
index 6b4a222c..6074bb30 100644
--- a/src/options/pages/service/components/dynamicForm.tsx
+++ b/src/options/pages/service/components/dynamicForm.tsx
@@ -1,3 +1,5 @@
+import { FormInputField } from 'common/components/forms';
+import { ServiceTypesContext } from 'common/components/react-types';
 import core from 'common/core';
 import {
     CIPipelineList,
@@ -5,8 +7,6 @@ import {
     CIServiceSettings,
     WorkerError,
 } from 'common/types';
-import { FormInputField } from 'common/components/formFields';
-import { ServiceTypesContext } from 'common/components/react-types';
 import React, { useContext, useState } from 'react';
 import { Alert, Form } from 'react-bootstrap';
 import './dynamicForm.css';
diff --git a/src/options/pages/viewPage.tsx b/src/options/pages/viewPage.tsx
index a10a59b0..6df9b31f 100644
--- a/src/options/pages/viewPage.tsx
+++ b/src/options/pages/viewPage.tsx
@@ -1,10 +1,10 @@
-import core from 'common/core';
 import {
     FormBooleanField,
     FormNumberField,
     FormSelectField,
-} from 'common/components/formFields';
+} from 'common/components/forms/index';
 import { ViewConfigContext } from 'common/components/react-types';
+import core from 'common/core';
 import DashboardTheme from 'dashboard/components/dashboardTheme';
 import React, { useContext } from 'react';
 import { Col, Container, Form, Row } from 'react-bootstrap';