Initial Skynet premium portal suppport

src/containers/Configuration/Configuration.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import './Configuration.css';
 import { connect } from 'react-redux';
+import { createDismissDisplay } from '../../utils.jsx';
 import Box from '../../components/UI/Box/Box';
 import Button from '../../components/UI/Button/Button';
 import ConfigurationItem from './ConfigurationItem/ConfigurationItem';
@@ -35,6 +36,27 @@ class Configuration extends IPCContainer {
       }
       return itemA.value.filter((i) => !itemB.value.includes(i)).length !== 0;
     }
+    if (itemA.type === 'host_list') {
+      if (itemA.value.length !== itemB.value.length) {
+        return true;
+      }
+      return (
+        itemA.value.filter((i) =>
+          itemB.value.find(
+            (j) =>
+              j.HostNameOrIp === i.HostNameOrIp &&
+              j.ApiPort === i.ApiPort &&
+              j.Protocol === i.Protocol &&
+              j.TimeoutMs === i.TimeoutMs &&
+              j.AgentString === i.AgentString &&
+              j.ApiPassword === i.ApiPassword &&
+              j.AuthURL === i.AuthURL &&
+              j.AuthUser === i.AuthUser &&
+              j.AuthPassword === i.AuthPassword
+          )
+        ).length === 0
+      );
+    }
     return itemA.value !== itemB.value;
   };
 
@@ -115,9 +137,11 @@ class Configuration extends IPCContainer {
           remote: template[key] ? template[key].remote : false,
           type: template[key] ? template[key].type : null,
           value:
-            template[key] && template[key].type === 'object'
+            template[key] &&
+            (template[key].type === 'string_array' ||
+              template[key].type === 'object')
               ? config[key]
-              : template[key] && template[key].type === 'string_array'
+              : template[key] && template[key].type === 'host_list'
               ? config[key]
               : config[key].toString(),
         };
@@ -141,6 +165,8 @@ class Configuration extends IPCContainer {
     itemList[idx].value =
       target.type === 'textarea'
         ? target.string_array
+        : target.type === 'host_list'
+        ? target.value
         : target.value.toString();
     this.setState({
       ItemList: itemList,
@@ -156,6 +182,8 @@ class Configuration extends IPCContainer {
     itemList[idx].value =
       target.type === 'textarea'
         ? target.string_array
+        : target.type === 'host_list'
+        ? target.value
         : target.value.toString();
     objectLookup[name] = itemList;
     this.setState({
@@ -246,7 +274,11 @@ class Configuration extends IPCContainer {
           changedItems.push({
             Name: item.label,
             Value:
-              item.type === 'string_array' ? item.value.join(';') : item.value,
+              item.type === 'string_array'
+                ? item.value.join(';')
+                : item.type === 'host_list'
+                ? JSON.stringify(item.value)
+                : item.value,
           });
         }
 
@@ -258,6 +290,8 @@ class Configuration extends IPCContainer {
                 Value:
                   item.type === 'string_array'
                     ? item.value.join(';')
+                    : item.type === 'host_list'
+                    ? JSON.stringify(item.value)
                     : item.value,
               });
             }
@@ -402,23 +436,8 @@ class Configuration extends IPCContainer {
     return (
       <div className={'Configuration'}>
         {confirmSave}
-        <Box dxDark dxStyle={{ padding: 'var(--default_spacing)' }}>
-          <div
-            style={{
-              float: 'right',
-              margin: 0,
-              padding: 0,
-              marginTop: '-4px',
-              boxSizing: 'border-box',
-              display: 'block',
-            }}>
-            <a
-              href={'#'}
-              onClick={this.checkSaveRequired}
-              style={{ cursor: 'pointer' }}>
-              X
-            </a>
-          </div>
+        <Box dxDark dxStyle={{ padding: '5px' }}>
+          {createDismissDisplay(this.checkSaveRequired)}
           <h1 style={{ width: '100%', textAlign: 'center' }}>
             {(this.props.DisplayRemoteConfiguration
               ? this.props.DisplayConfiguration.substr(6)