New: Author folder hint when selecting a root folder while adding a new author

(cherry picked from commit dd09f31abb4dd3f699bcff0a47577075300c70ee)

Fix AuthorFolderAsRootFolderValidator

(cherry picked from commit 0ce81e1ab69d43fde382cc4ae22cd46fe626dea7)

frontend/src/Components/Form/RootFolderSelectInputConnector.js

@@ -28,8 +28,7 @@ function createMapStateToProps() {
       if (includeNoChange) {
         values.unshift({
           key: 'noChange',
-          value: '',
-          name: translate('NoChange'),
+          value: translate('NoChange'),
           isDisabled: includeNoChangeDisabled,
           isMissing: false
         });
@@ -39,7 +38,6 @@ function createMapStateToProps() {
         values.push({
           key: '',
           value: '',
-          name: '',
           isDisabled: true,
           isHidden: true
         });
@@ -56,8 +54,7 @@ function createMapStateToProps() {
 
       values.push({
         key: ADD_NEW_KEY,
-        value: '',
-        name: 'Add a new path'
+        value: 'Add a new path'
       });
 
       return {

frontend/src/Components/Form/RootFolderSelectInputOption.css

@@ -13,6 +13,15 @@
   }
 }
 
+.value {
+  display: flex;
+}
+
+.authorFolder {
+  flex: 0 0 auto;
+  color: var(--disabledColor);
+}
+
 .freeSpace {
   margin-left: 15px;
   color: var(--darkGray);

frontend/src/Components/Form/RootFolderSelectInputOption.css.d.ts

@@ -1,10 +1,12 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'authorFolder': string;
   'freeSpace': string;
   'isMissing': string;
   'isMobile': string;
   'optionText': string;
+  'value': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Components/Form/RootFolderSelectInputOption.js

@@ -7,18 +7,24 @@ import styles from './RootFolderSelectInputOption.css';
 
 function RootFolderSelectInputOption(props) {
   const {
+    id,
     value,
     name,
     freeSpace,
+    authorFolder,
     isMissing,
     isMobile,
+    isWindows,
     ...otherProps
   } = props;
 
-  const text = value === '' ? name : `${name} [${value}]`;
+  const slashCharacter = isWindows ? '\\' : '/';
+
+  const text = name === '' ? value : `[${name}] ${value}`;
 
   return (
     <EnhancedSelectInputOption
+      id={id}
       isMobile={isMobile}
       {...otherProps}
     >
@@ -27,7 +33,18 @@ function RootFolderSelectInputOption(props) {
         isMobile && styles.isMobile
       )}
       >
-        <div>{text}</div>
+        <div className={styles.value}>
+          {text}
+
+          {
+            authorFolder && id !== 'addNew' ?
+              <div className={styles.authorFolder}>
+                {slashCharacter}
+                {authorFolder}
+              </div> :
+              null
+          }
+        </div>
 
         {
           freeSpace == null ?
@@ -50,11 +67,18 @@ function RootFolderSelectInputOption(props) {
 }
 
 RootFolderSelectInputOption.propTypes = {
+  id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   freeSpace: PropTypes.number,
+  authorFolder: PropTypes.string,
   isMissing: PropTypes.bool,
-  isMobile: PropTypes.bool.isRequired
+  isMobile: PropTypes.bool.isRequired,
+  isWindows: PropTypes.bool
+};
+
+RootFolderSelectInputOption.defaultProps = {
+  name: ''
 };
 
 export default RootFolderSelectInputOption;

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css

@@ -7,10 +7,20 @@
   overflow: hidden;
 }
 
+.pathContainer {
+  @add-mixin truncate;
+  display: flex;
+  flex: 1 0 0;
+}
+
 .path {
   @add-mixin truncate;
+  flex: 0 1 auto;
+}
 
-  flex: 1 0 0;
+.authorFolder {
+  flex: 0 1 auto;
+  color: var(--disabledColor);
 }
 
 .freeSpace {

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css.d.ts

@@ -1,8 +1,10 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'authorFolder': string;
   'freeSpace': string;
   'path': string;
+  'pathContainer': string;
   'selectedValue': string;
 }
 export const cssExports: CssExports;

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.js

@@ -9,19 +9,34 @@ function RootFolderSelectInputSelectedValue(props) {
     name,
     value,
     freeSpace,
+    authorFolder,
     includeFreeSpace,
+    isWindows,
     ...otherProps
   } = props;
 
-  const text = value === '' ? name : `${name} [${value}]`;
+  const slashCharacter = isWindows ? '\\' : '/';
+
+  const text = name === '' ? value : `[${name}] ${value}`;
 
   return (
     <EnhancedSelectInputSelectedValue
       className={styles.selectedValue}
       {...otherProps}
     >
-      <div className={styles.path}>
-        {text}
+      <div className={styles.pathContainer}>
+        <div className={styles.path}>
+          {text}
+        </div>
+
+        {
+          authorFolder ?
+            <div className={styles.authorFolder}>
+              {slashCharacter}
+              {authorFolder}
+            </div> :
+            null
+        }
       </div>
 
       {
@@ -38,10 +53,13 @@ RootFolderSelectInputSelectedValue.propTypes = {
   name: PropTypes.string,
   value: PropTypes.string,
   freeSpace: PropTypes.number,
+  authorFolder: PropTypes.string,
+  isWindows: PropTypes.bool,
   includeFreeSpace: PropTypes.bool.isRequired
 };
 
 RootFolderSelectInputSelectedValue.defaultProps = {
+  name: '',
   includeFreeSpace: true
 };