+ client: add multiple fields client form

client/src/helpers/form.js

@@ -29,6 +29,50 @@ export const renderField = ({
     </Fragment>
 );
 
+export const renderGroupField = ({
+    input,
+    id,
+    className,
+    placeholder,
+    type,
+    disabled,
+    autoComplete,
+    isActionAvailable,
+    removeField,
+    meta: { touched, error },
+}) => (
+    <Fragment>
+        <div className="input-group">
+            <input
+                {...input}
+                id={id}
+                placeholder={placeholder}
+                type={type}
+                className={className}
+                disabled={disabled}
+                autoComplete={autoComplete}
+            />
+            {isActionAvailable &&
+                <span className="input-group-append">
+                    <button
+                        type="button"
+                        className="btn btn-secondary btn-icon"
+                        onClick={removeField}
+                    >
+                        <svg className="icon icon--close">
+                            <use xlinkHref="#cross" />
+                        </svg>
+                    </button>
+                </span>
+            }
+        </div>
+
+        {!disabled &&
+            touched &&
+            (error && <span className="form__message form__message--error">{error}</span>)}
+    </Fragment>
+);
+
 export const renderRadioField = ({
     input, placeholder, disabled, meta: { touched, error },
 }) => (
@@ -102,6 +146,7 @@ export const renderServiceField = ({
     </Fragment>
 );
 
+// Validation functions
 export const required = (value) => {
     if (value || value === 0) {
         return false;

client/src/helpers/formatClientCell.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { getClientInfo, normalizeWhois } from './helpers';
+import { getClientInfo, getAutoClientInfo, normalizeWhois } from './helpers';
 import { WHOIS_ICONS } from './constants';
 
 const getFormattedWhois = (whois, t) => {
@@ -23,7 +23,7 @@ const getFormattedWhois = (whois, t) => {
 };
 
 export const formatClientCell = (value, clients, autoClients, t) => {
-    const clientInfo = getClientInfo(clients, value) || getClientInfo(autoClients, value);
+    const clientInfo = getClientInfo(clients, value) || getAutoClientInfo(autoClients, value);
     const { name, whois } = clientInfo;
     let whoisContainer = '';
     let nameContainer = value;

client/src/helpers/helpers.js

@@ -248,6 +248,20 @@ export const redirectToCurrentProtocol = (values, httpPort = 80) => {
 export const normalizeTextarea = text => text && text.replace(/[;, ]/g, '\n').split('\n').filter(n => n);
 
 export const getClientInfo = (clients, ip) => {
+    const client = clients
+        .find(item => item.ip_addrs && item.ip_addrs.find(clientIp => clientIp === ip));
+
+    if (!client) {
+        return '';
+    }
+
+    const { name, whois_info } = client;
+    const whois = Object.keys(whois_info).length > 0 ? whois_info : '';
+
+    return { name, whois };
+};
+
+export const getAutoClientInfo = (clients, ip) => {
     const client = clients.find(item => ip === item.ip);
 
     if (!client) {