Initial Skynet premium portal suppport

src/containers/HostList/Host/Host.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { addEditHost } from '../../../redux/actions/host_actions';
+import { connect } from 'react-redux';
+import { faTrashAlt, faEdit } from '@fortawesome/free-solid-svg-icons';
+
+// const mapStateToProps = (state) => {
+//   return {};
+// };
+//
+const mapDispatchToProps = (dispatch) => {
+  return {
+    addEditHost: (host_data, cb) => dispatch(addEditHost(true, host_data, cb)),
+  };
+};
+
+const Host = ({ allowDelete, addEditHost, value, onChange, onDelete }) => {
+  const handleEditHost = () => {
+    addEditHost(value, (changed, host_data) => {
+      if (changed) {
+        onChange(host_data);
+      }
+    });
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row' }}>
+      <div
+        style={{
+          flex: 0,
+          paddingRight: 'calc(var(--default_spacing) * 1.25)',
+        }}>
+        <a href={'#'} onClick={handleEditHost}>
+          <FontAwesomeIcon icon={faEdit} />
+        </a>
+      </div>
+      {allowDelete ? (
+        <div
+          style={{
+            flex: 0,
+            paddingRight: 'calc(var(--default_spacing) * 1.25)',
+          }}>
+          <a href={'#'} onClick={onDelete}>
+            <FontAwesomeIcon icon={faTrashAlt} />
+          </a>
+        </div>
+      ) : null}
+      <p>
+        {value.HostNameOrIp +
+          ((value.Protocol === 'http' && value.ApiPort === 80) ||
+          (value.Protocol === 'https' && value.ApiPort === 443)
+            ? ''
+            : ':' + value.ApiPort)}
+      </p>
+    </div>
+  );
+};
+
+Host.propTypes = {
+  allowDelete: PropTypes.bool.isRequired,
+  addEditHost: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  value: PropTypes.object.isRequired,
+};
+
+export default connect(null, mapDispatchToProps)(Host);
+// export default Host;

src/containers/HostList/HostList.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import './HostList.css';
+import Host from './Host/Host';
+import PropTypes from 'prop-types';
+import { Component } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { confirmYesNo } from '../../redux/actions/common_actions';
+import { connect } from 'react-redux';
+import { addEditHost } from '../../redux/actions/host_actions';
+import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
+
+class HostList extends Component {
+  state = {
+    items: [],
+  };
+  // autoFocus={props.autoFocus}
+  // disabled={props.readOnly}
+  // type={props.template.subtype}
+
+  componentDidMount() {
+    this.setState({ items: this.props.value });
+  }
+
+  componentWillUnmount() {}
+
+  checkDuplicates = () => {
+    return false;
+  };
+
+  handleAddHost = () => {
+    this.props.addEditHost((changed, host_data) => {
+      if (changed) {
+        const items = [...this.state.items, host_data];
+        this.updateItems(items);
+      }
+    });
+  };
+
+  handleChanged = (host_data, index) => {
+    const items = [...this.state.items];
+    items[index] = host_data;
+    this.updateItems(items);
+  };
+
+  handleDeleted = (index) => {
+    this.props.ConfirmRemoveHost(
+      'Delete [' + this.state.items[index].HostNameOrIp + ']?',
+      (confirmed) => {
+        if (confirmed) {
+          const items = [...this.state.items];
+          items.splice(index, 1);
+          this.updateItems(items);
+        }
+      }
+    );
+  };
+
+  updateItems = (items) => {
+    this.setState(
+      {
+        items,
+      },
+      () => {
+        this.props.onChange(this.state.items);
+      }
+    );
+  };
+
+  render() {
+    let idx = 0;
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <div
+          style={{
+            maxHeight: '80px',
+            maxWidth: '260px',
+            minWidth: '260px',
+            backgroundColor: 'var(--control_background)',
+            padding: 'var(--default_spacing)',
+            overflowY: 'scroll',
+          }}>
+          {this.state.items.map((v, index) => {
+            return (
+              <Host
+                key={idx++}
+                onChange={(host_data) => this.handleChanged(host_data, index)}
+                onDelete={() => this.handleDeleted(index)}
+                allowDelete={this.state.items.length > 1}
+                value={v}
+              />
+            );
+          })}
+        </div>
+        <a
+          href={'#'}
+          onClick={this.handleAddHost}
+          style={{
+            marginTop: 'var(--default_spacing)',
+          }}>
+          <FontAwesomeIcon icon={faPlusCircle} />
+          <b>{' Add Portal '}</b>
+        </a>
+      </div>
+    );
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    addEditHost: (cb) => dispatch(addEditHost(true, null, cb)),
+    ConfirmRemoveHost: (title, cb) => dispatch(confirmYesNo(title, cb)),
+  };
+};
+
+HostList.propTypes = {
+  addEditHost: PropTypes.func.isRequired,
+  ConfirmRemoveHost: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.array.isRequired,
+};
+
+export default connect(null, mapDispatchToProps)(HostList);