From 4d969b994e02625912a37c95349364445e4c7507 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 12 Dec 2020 11:43:16 +0100
Subject: [PATCH] Improved server form

---
 src/servers/CreateServer.tsx             |  2 +-
 src/servers/EditServer.tsx               |  6 ++++-
 src/servers/helpers/ServerForm.scss      |  3 +++
 src/servers/helpers/ServerForm.tsx       | 19 +++++++++------
 src/utils/FormGroupContainer.tsx         | 29 ++++++++++++++++++++++
 src/utils/HorizontalFormGroup.tsx        | 31 ------------------------
 src/utils/SimpleCard.tsx                 |  5 ++--
 test/servers/helpers/ServerForm.test.tsx |  4 +--
 8 files changed, 55 insertions(+), 44 deletions(-)
 create mode 100644 src/servers/helpers/ServerForm.scss
 create mode 100644 src/utils/FormGroupContainer.tsx
 delete mode 100644 src/utils/HorizontalFormGroup.tsx

diff --git a/src/servers/CreateServer.tsx b/src/servers/CreateServer.tsx
index ab0e2d5c..7181344b 100644
--- a/src/servers/CreateServer.tsx
+++ b/src/servers/CreateServer.tsx
@@ -44,7 +44,7 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
 
   return (
     <NoMenuLayout>
-      <ServerForm onSubmit={handleSubmit}>
+      <ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={handleSubmit}>
         <ImportServersBtn onImport={setServersImported} onImportError={setErrorImporting} />
         <button className="btn btn-outline-primary">Create server</button>
       </ServerForm>
diff --git a/src/servers/EditServer.tsx b/src/servers/EditServer.tsx
index d8871748..40c52c68 100644
--- a/src/servers/EditServer.tsx
+++ b/src/servers/EditServer.tsx
@@ -23,7 +23,11 @@ export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProp
 
   return (
     <NoMenuLayout>
-      <ServerForm initialValues={selectedServer} onSubmit={handleSubmit}>
+      <ServerForm
+        title={<h5 className="mb-0">Edit "{selectedServer.name}"</h5>}
+        initialValues={selectedServer}
+        onSubmit={handleSubmit}
+      >
         <Button outline className="mr-2" onClick={goBack}>Cancel</Button>
         <Button outline color="primary">Save</Button>
       </ServerForm>
diff --git a/src/servers/helpers/ServerForm.scss b/src/servers/helpers/ServerForm.scss
new file mode 100644
index 00000000..97b1ae22
--- /dev/null
+++ b/src/servers/helpers/ServerForm.scss
@@ -0,0 +1,3 @@
+.server-form .form-group:last-child {
+  margin-bottom: 0;
+}
diff --git a/src/servers/helpers/ServerForm.tsx b/src/servers/helpers/ServerForm.tsx
index 8836772f..d0d7bf66 100644
--- a/src/servers/helpers/ServerForm.tsx
+++ b/src/servers/helpers/ServerForm.tsx
@@ -1,14 +1,17 @@
-import { FC, useEffect, useState } from 'react';
-import { HorizontalFormGroup } from '../../utils/HorizontalFormGroup';
+import { FC, ReactNode, useEffect, useState } from 'react';
+import { FormGroupContainer } from '../../utils/FormGroupContainer';
 import { handleEventPreventingDefault } from '../../utils/utils';
 import { ServerData } from '../data';
+import { SimpleCard } from '../../utils/SimpleCard';
+import './ServerForm.scss';
 
 interface ServerFormProps {
   onSubmit: (server: ServerData) => void;
   initialValues?: ServerData;
+  title?: ReactNode;
 }
 
-export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children }) => {
+export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children, title }) => {
   const [ name, setName ] = useState('');
   const [ url, setUrl ] = useState('');
   const [ apiKey, setApiKey ] = useState('');
@@ -21,10 +24,12 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
   }, [ initialValues ]);
 
   return (
-    <form onSubmit={handleSubmit}>
-      <HorizontalFormGroup value={name} onChange={setName}>Name</HorizontalFormGroup>
-      <HorizontalFormGroup type="url" value={url} onChange={setUrl}>URL</HorizontalFormGroup>
-      <HorizontalFormGroup value={apiKey} onChange={setApiKey}>API key</HorizontalFormGroup>
+    <form className="server-form" onSubmit={handleSubmit}>
+      <SimpleCard className="mb-4" title={title}>
+        <FormGroupContainer value={name} onChange={setName}>Name</FormGroupContainer>
+        <FormGroupContainer type="url" value={url} onChange={setUrl}>URL</FormGroupContainer>
+        <FormGroupContainer value={apiKey} onChange={setApiKey}>API key</FormGroupContainer>
+      </SimpleCard>
 
       <div className="text-right">{children}</div>
     </form>
diff --git a/src/utils/FormGroupContainer.tsx b/src/utils/FormGroupContainer.tsx
new file mode 100644
index 00000000..9c182291
--- /dev/null
+++ b/src/utils/FormGroupContainer.tsx
@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { v4 as uuid } from 'uuid';
+import { InputType } from 'reactstrap/lib/Input';
+
+interface FormGroupContainer {
+  value: string;
+  onChange: (newValue: string) => void;
+  id?: string;
+  type?: InputType;
+  required?: boolean;
+}
+
+export const FormGroupContainer: FC<FormGroupContainer> = (
+  { children, value, onChange, id = uuid(), type = 'text', required = true },
+) => (
+  <div className="form-group">
+    <label htmlFor={id} className="create-server__label">
+      {children}:
+    </label>
+    <input
+      className="form-control"
+      type={type}
+      id={id}
+      value={value}
+      required={required}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  </div>
+);
diff --git a/src/utils/HorizontalFormGroup.tsx b/src/utils/HorizontalFormGroup.tsx
deleted file mode 100644
index b46a5d1a..00000000
--- a/src/utils/HorizontalFormGroup.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { FC } from 'react';
-import { v4 as uuid } from 'uuid';
-import { InputType } from 'reactstrap/lib/Input';
-
-interface HorizontalFormGroupProps {
-  value: string;
-  onChange: (newValue: string) => void;
-  id?: string;
-  type?: InputType;
-  required?: boolean;
-}
-
-export const HorizontalFormGroup: FC<HorizontalFormGroupProps> = (
-  { children, value, onChange, id = uuid(), type = 'text', required = true },
-) => (
-  <div className="form-group row">
-    <label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">
-      {children}:
-    </label>
-    <div className="col-lg-11 col-md-10">
-      <input
-        className="form-control"
-        type={type}
-        id={id}
-        value={value}
-        required={required}
-        onChange={(e) => onChange(e.target.value)}
-      />
-    </div>
-  </div>
-);
diff --git a/src/utils/SimpleCard.tsx b/src/utils/SimpleCard.tsx
index ccee2de2..e50213e7 100644
--- a/src/utils/SimpleCard.tsx
+++ b/src/utils/SimpleCard.tsx
@@ -1,8 +1,9 @@
 import { CardProps } from 'reactstrap/lib/Card';
 import { Card, CardBody, CardHeader } from 'reactstrap';
+import { ReactNode } from 'react';
 
-interface SimpleCardProps extends CardProps {
-  title?: string;
+interface SimpleCardProps extends Omit<CardProps, 'title'> {
+  title?: ReactNode;
 }
 
 export const SimpleCard = ({ title, children, ...rest }: SimpleCardProps) => (
diff --git a/test/servers/helpers/ServerForm.test.tsx b/test/servers/helpers/ServerForm.test.tsx
index d9c11c58..3c40ed48 100644
--- a/test/servers/helpers/ServerForm.test.tsx
+++ b/test/servers/helpers/ServerForm.test.tsx
@@ -1,6 +1,6 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { ServerForm } from '../../../src/servers/helpers/ServerForm';
-import { HorizontalFormGroup } from '../../../src/utils/HorizontalFormGroup';
+import { FormGroupContainer } from '../../../src/utils/FormGroupContainer';
 
 describe('<ServerForm />', () => {
   let wrapper: ShallowWrapper;
@@ -14,7 +14,7 @@ describe('<ServerForm />', () => {
   afterEach(jest.resetAllMocks);
 
   it('renders components', () => {
-    expect(wrapper.find(HorizontalFormGroup)).toHaveLength(3);
+    expect(wrapper.find(FormGroupContainer)).toHaveLength(3);
     expect(wrapper.find('span')).toHaveLength(1);
   });