[Layout changes] [Skynet premium portal support]

src/containers/AddEditHost/AddEditHost.js

@@ -5,12 +5,13 @@ import DropDown from '../../components/UI/DropDown/DropDown';
 import PropTypes from 'prop-types';
 import Text from '../../components/UI/Text/Text';
 import { Component } from 'react';
-import { connect } from 'react-redux';
-import { createDismissDisplay } from '../../utils.jsx';
 import {
   addEditHost,
   completeAddEditHost,
 } from '../../redux/actions/host_actions';
+import { connect } from 'react-redux';
+import { createDismissDisplay } from '../../utils.jsx';
+import { notifyError } from '../../redux/actions/error_actions';
 
 class AddEditHost extends Component {
   state = {
@@ -37,6 +38,18 @@ class AddEditHost extends Component {
   }
 
   handleSave = () => {
+    if (this.state.HostNameOrIp.trim().length == 0) {
+      this.props.notifyError('Host / IP cannot be empty');
+      return;
+    }
+    if (this.state.HostNameOrIp.trim().indexOf('/') >= 0) {
+      this.props.notifyError(`Host / IP cannot be contain '/'`);
+      return;
+    }
+    if (this.state.HostNameOrIp.trim().indexOf(':') >= 0) {
+      this.props.notifyError(`Host / IP cannot be contain ':'`);
+      return;
+    }
     this.props.completeAddEditHost(this.state);
   };
 
@@ -224,6 +237,7 @@ const mapDispatchToProps = (dispatch) => {
     Close: () => dispatch(addEditHost(false)),
     completeAddEditHost: (host_data) =>
       dispatch(completeAddEditHost(true, host_data)),
+    notifyError: (msg) => dispatch(notifyError(msg)),
   };
 };
 
@@ -231,6 +245,7 @@ AddEditHost.propTypes = {
   Close: PropTypes.func.isRequired,
   completeAddEditHost: PropTypes.func.isRequired,
   HostData: PropTypes.object,
+  notifyError: PropTypes.func.isRequired,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(AddEditHost);

src/containers/HostList/Host/Host.js

@@ -24,6 +24,7 @@ const Host = ({ allowDelete, addEditHost, value, onChange, onDelete }) => {
     });
   };
 
+  const premium = value.AuthURL && value.AuthUser;
   return (
     <div style={{ display: 'flex', flexDirection: 'row' }}>
       <div
@@ -46,13 +47,26 @@ const Host = ({ allowDelete, addEditHost, value, onChange, onDelete }) => {
           </a>
         </div>
       ) : null}
-      <p>
-        {value.HostNameOrIp +
-          ((value.Protocol === 'http' && value.ApiPort === 80) ||
-          (value.Protocol === 'https' && value.ApiPort === 443)
-            ? ''
-            : ':' + value.ApiPort)}
-      </p>
+      {premium ? (
+        <p>
+          <b>
+            {'(premium) ' +
+              value.HostNameOrIp +
+              ((value.Protocol === 'http' && value.ApiPort === 80) ||
+              (value.Protocol === 'https' && value.ApiPort === 443)
+                ? ''
+                : ':' + value.ApiPort)}
+          </b>
+        </p>
+      ) : (
+        <p>
+          {value.HostNameOrIp +
+            ((value.Protocol === 'http' && value.ApiPort === 80) ||
+            (value.Protocol === 'https' && value.ApiPort === 443)
+              ? ''
+              : ':' + value.ApiPort)}
+        </p>
+      )}
     </div>
   );
 };

src/containers/MountItems/MountItems.css

@@ -1,7 +1,7 @@
 .MountItems {
   padding: 0;
   margin: 0;
-  height: 121px;
+  height: 212px;
   width: 100%;
   box-sizing: border-box;
   overflow: hidden;
@@ -10,7 +10,7 @@
 .MountItemsRemote {
   padding: 0;
   margin: 0;
-  height: 121px;
+  height: 212px;
   width: 100%;
   box-sizing: border-box;
   overflow-x: hidden;

src/containers/MountItems/MountItems.js

@@ -314,7 +314,7 @@ class MountItems extends IPCContainer {
     return false;
   };
 
-  onDetectMountReply = (event, arg) => {
+  onDetectMountReply = (_, arg) => {
     const provider = arg.data.Provider;
     if (!this.state.RetryItems[provider]) {
       if (
@@ -344,13 +344,13 @@ class MountItems extends IPCContainer {
     }
   };
 
-  onMountDriveReply = (event, arg) => {
+  onMountDriveReply = (_, arg) => {
     this.props.setMounted(arg.data.Provider, arg.data.Success);
     this.detectMount(arg.data.Provider);
     this.removeMountsBusy(arg.data.Provider);
   };
 
-  onUnmountDriveReply = (event, arg) => {
+  onUnmountDriveReply = (_, arg) => {
     if (
       arg &&
       arg.data &&
@@ -480,78 +480,49 @@ class MountItems extends IPCContainer {
       );
     }
 
-    let items = [];
-    for (const provider of this.getProviderList(true)) {
-      items.push(
+    let mountItems = [];
+    const addMountItem = (provider, remote, s3) => {
+      if (mountItems.length > 0) {
+        mountItems.push(
+          <div
+            key={'it_' + mountItems.length}
+            style={{ paddingTop: 'calc(var(--default_spacing) * 2.5)' }}
+          />
+        );
+      }
+
+      mountItems.push(
         <MountItem
-          allowRemove={false}
+          allowRemove={remote || s3}
           browseClicked={this.handleBrowseLocation}
           changed={(e) =>
             this.handleMountLocationChanged(provider, e.target.value)
           }
           clicked={this.handleMountUnMount}
-          key={'it_' + items.length}
+          key={'it_' + mountItems.length}
           provider={provider}
+          remote={remote}
+          s3={s3}
         />
       );
-      items.push(
-        <div
-          key={'it_' + items.length}
-          style={{ paddingTop: 'var(--default_spacing)' }}
-        />
-      );
+    };
+
+    for (const provider of this.getProviderList(true)) {
+      addMountItem(provider);
     }
 
     if (this.props.remoteSupported) {
       for (const provider of this.props.RemoteMounts) {
-        items.push(
-          <MountItem
-            allowRemove={true}
-            browseClicked={this.handleBrowseLocation}
-            changed={(e) =>
-              this.handleMountLocationChanged(provider, e.target.value)
-            }
-            clicked={this.handleMountUnMount}
-            key={'it_' + items.length}
-            provider={provider}
-            remote
-          />
-        );
-        items.push(
-          <div
-            key={'it_' + items.length}
-            style={{ paddingTop: 'var(--default_spacing)' }}
-          />
-        );
+        addMountItem(provider, true);
       }
     }
 
     if (this.props.s3Supported) {
       for (const provider of this.props.S3Mounts) {
-        items.push(
-          <MountItem
-            allowRemove={true}
-            browseClicked={this.handleBrowseLocation}
-            changed={(e) =>
-              this.handleMountLocationChanged(provider, e.target.value)
-            }
-            clicked={this.handleMountUnMount}
-            key={'it_' + items.length}
-            provider={provider}
-            s3
-          />
-        );
-        items.push(
-          <div
-            key={'it_' + items.length}
-            style={{ paddingTop: 'var(--default_spacing)' }}
-          />
-        );
+        addMountItem(provider, false, true);
       }
     }
 
-    items.splice(items.length - 1, 1);
-
     return (
       <div style={{ margin: 0, padding: 0 }}>
         {retryDisplay}
@@ -561,7 +532,7 @@ class MountItems extends IPCContainer {
               ? 'MountItemsRemote'
               : 'MountItems'
           }>
-          {items}
+          {mountItems}
         </div>
         <div style={{ paddingTop: 'var(--default_spacing)' }} />
         {footerItems}