[Layout changes] [Skynet premium portal support]

src/App.css

@@ -8,19 +8,3 @@
   background-size: cover;
 }
 
-.AppContainer {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-.AppHeader {
-  height: 28px;
-  margin-bottom: var(--default_spacing);
-  box-sizing: border-box;
-}
-
-.AppContent {
-  height: calc(100% - 36px);
-  box-sizing: border-box;
-}

src/App.jsx

@@ -280,7 +280,7 @@ class App extends IPCContainer {
     let mainContent = [];
     if (this.props.DisplaySelectAppPlatform || !this.props.AppReady) {
       mainContent = (
-        <Box dxStyle={{ height: '100%' }}>
+        <Box col={0} colSpan={'remain'} row={0} rowSpan={'remain'}>
           <Loading />
         </Box>
       );
@@ -288,24 +288,25 @@ class App extends IPCContainer {
       let key = 0;
       mainContent.push(
         <Box
+          col={0}
+          colSpan={'remain'}
+          row={10}
+          rowSpan={'17'}
           key={'md_' + key++}
-          dxStyle={{ padding: 'var(--default_spacing)', height: 'auto' }}>
+          dxStyle={{ padding: 'var(--default_spacing)' }}>
           <ReleaseVersionDisplay
             downloadDisabled={!downloadEnabled}
             version={selectedVersion}
           />
         </Box>
       );
-      mainContent.push(
-        <div
-          key={'md_' + key++}
-          style={{ paddingTop: 'var(--default_spacing)' }}
-        />
-      );
       if (allowMount) {
         mainContent.push(
           <Box
-            dxStyle={{ padding: 'var(--default_spacing)', height: 'auto' }}
+            row={29}
+            rowSpan={'remain'}
+            colSpan={'remain'}
+            dxStyle={{ padding: 'var(--default_spacing)' }}
             key={'md_' + key++}>
             <MountItems
               s3Supported={s3Supported}
@@ -319,7 +320,11 @@ class App extends IPCContainer {
       } else if (!downloadEnabled && selectedVersion !== 'unavailable') {
         mainContent.push(
           <Box
-            dxStyle={{ padding: 'var(--default_spacing)', height: '170px' }}
+            col={0}
+            colSpan={'remain'}
+            row={0}
+            rowSpan={'remain'}
+            dxStyle={{ padding: 'var(--default_spacing)' }}
             key={'md_' + key++}>
             <Loading />
           </Box>
@@ -329,41 +334,39 @@ class App extends IPCContainer {
 
     return (
       <div className={'App'}>
-        <div className={'AppContainer'}>
-          <div className={'AppHeader'}>
-            <Box>
-              <Grid>
-                <Text
-                  col={0}
-                  colSpan={'remain'}
-                  row={0}
-                  rowSpan={'remain'}
-                  text={'Repertory UI v' + this.props.Version}
-                  textAlign={'center'}
-                  type={'Heading1'}
-                />
-                <UpgradeIcon
-                  available={
-                    !missingDependencies &&
-                    (this.props.UpgradeAvailable ||
-                      this.props.NewReleasesAvailable2.length > 0)
-                  }
-                  newReleases={
-                    !missingDependencies &&
-                    !this.props.UpgradeAvailable &&
-                    this.props.NewReleasesAvailable2.length > 0
-                  }
-                  clicked={this.handleUpgradeIconClicked}
-                  col={(dimensions) => dimensions.columns - 6}
-                  colSpan={5}
-                  row={1}
-                  rowSpan={(remain) => remain - 1}
-                />
-              </Grid>
-            </Box>
-          </div>
-          <div className={'AppContent'}>{mainContent}</div>
-        </div>
+        <Grid>
+          <Box col={0} colSpan={'remain'} row={0} rowSpan={8}>
+            <Grid noScroll>
+              <Text
+                col={0}
+                colSpan={'remain'}
+                row={0}
+                rowSpan={8}
+                text={'Repertory UI v' + this.props.Version}
+                textAlign={'center'}
+                type={'Heading1'}
+              />
+              <UpgradeIcon
+                available={
+                  !missingDependencies &&
+                  (this.props.UpgradeAvailable ||
+                    this.props.NewReleasesAvailable2.length > 0)
+                }
+                newReleases={
+                  !missingDependencies &&
+                  !this.props.UpgradeAvailable &&
+                  this.props.NewReleasesAvailable2.length > 0
+                }
+                clicked={this.handleUpgradeIconClicked}
+                col={(dimensions) => dimensions.columns - 6}
+                colSpan={1}
+                row={1}
+                rowSpan={(remain) => remain - 1}
+              />
+            </Grid>
+          </Box>
+          {mainContent}
+        </Grid>
         {importDisplay}
         {exportDisplay}
         {newReleasesDisplay}

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}