From 0b0bebf3aacb859b3adc6d441bd26b76bea26d61 Mon Sep 17 00:00:00 2001
From: PearsonFlyer <PearsonFlyer@github.com>
Date: Tue, 13 Jul 2021 16:05:10 -0400
Subject: [PATCH] Fixed: Improved root folder setup page

(cherry picked from commit eb4f55de85caaf4f5f5959d7eda5af83aa0ad4e3)
---
 .../src/Search/Common/AddAuthorOptionsForm.js |   2 +-
 .../RootFolder/EditRootFolderModalContent.js  | 605 +++++++++---------
 src/NzbDrone.Core/Localization/Core/en.json   |   8 +-
 3 files changed, 315 insertions(+), 300 deletions(-)

diff --git a/frontend/src/Search/Common/AddAuthorOptionsForm.js b/frontend/src/Search/Common/AddAuthorOptionsForm.js
index e97b2fa0d..4850c62f1 100644
--- a/frontend/src/Search/Common/AddAuthorOptionsForm.js
+++ b/frontend/src/Search/Common/AddAuthorOptionsForm.js
@@ -61,7 +61,7 @@ class AddAuthorOptionsForm extends Component {
 
         <FormGroup>
           <FormLabel>
-            Monitor
+            {translate('Monitor')}
 
             <Popover
               anchor={
diff --git a/frontend/src/Settings/MediaManagement/RootFolder/EditRootFolderModalContent.js b/frontend/src/Settings/MediaManagement/RootFolder/EditRootFolderModalContent.js
index 4d57b9d99..d48fb74db 100644
--- a/frontend/src/Settings/MediaManagement/RootFolder/EditRootFolderModalContent.js
+++ b/frontend/src/Settings/MediaManagement/RootFolder/EditRootFolderModalContent.js
@@ -3,6 +3,8 @@ import React from 'react';
 import AuthorMetadataProfilePopoverContent from 'AddAuthor/AuthorMetadataProfilePopoverContent';
 import AuthorMonitoringOptionsPopoverContent from 'AddAuthor/AuthorMonitoringOptionsPopoverContent';
 import AuthorMonitorNewItemsOptionsPopoverContent from 'AddAuthor/AuthorMonitorNewItemsOptionsPopoverContent';
+import Alert from 'Components/Alert';
+import FieldSet from 'Components/FieldSet';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -82,324 +84,333 @@ function EditRootFolderModalContent(props) {
         {
           !isFetching && !error &&
             <Form {...otherProps}>
-              <FormGroup>
-                <FormLabel>
-                  {translate('Name')}
-                </FormLabel>
+              <FieldSet legend={translate('RootFolder')} >
+                <FormGroup>
+                  <FormLabel>
+                    {translate('Name')}
+                  </FormLabel>
 
-                <FormInputGroup
-                  type={inputTypes.TEXT}
-                  name="name"
-                  {...name}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>
-                  {translate('Path')}
-                </FormLabel>
-
-                <FormInputGroup
-                  type={id ? inputTypes.TEXT : inputTypes.PATH}
-                  readOnly={!!id}
-                  name="path"
-                  helpText={translate('PathHelpText')}
-                  helpTextWarning={translate('PathHelpTextWarning')}
-                  {...path}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>
-                  Use Calibre
-                  <Popover
-                    anchor={
-                      <Icon
-                        className={styles.labelIcon}
-                        name={icons.INFO}
-                      />
-                    }
-                    title={translate('CalibreContentServer')}
-                    body={'Using a Calibre content server allows Readarr to add books to your Calibre library and trigger conversions between formats'}
-                    position={tooltipPositions.RIGHT}
+                  <FormInputGroup
+                    type={inputTypes.TEXT}
+                    name="name"
+                    {...name}
+                    onChange={onInputChange}
                   />
-                </FormLabel>
+                </FormGroup>
 
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  isDisabled={!!id}
-                  name="isCalibreLibrary"
-                  helpText={translate('IsCalibreLibraryHelpText')}
-                  {...isCalibreLibrary}
-                  onChange={onInputChange}
-                  helpLink={'https://manual.calibre-ebook.com/server.html'}
-                />
-              </FormGroup>
+                <FormGroup>
+                  <FormLabel>
+                    {translate('Path')}
+                  </FormLabel>
 
-              {
-                isCalibreLibrary !== undefined && isCalibreLibrary.value &&
-                  <div>
-                    <FormGroup>
-                      <FormLabel>
-                        {translate('CalibreHost')}
-                      </FormLabel>
+                  <FormInputGroup
+                    type={id ? inputTypes.TEXT : inputTypes.PATH}
+                    readOnly={!!id}
+                    name="path"
+                    helpText={translate('PathHelpText')}
+                    helpTextWarning={translate('PathHelpTextWarning')}
+                    {...path}
+                    onChange={onInputChange}
+                  />
+                </FormGroup>
+              </FieldSet>
 
-                      <FormInputGroup
-                        type={inputTypes.TEXT}
-                        name="host"
-                        helpText={translate('HostHelpText')}
-                        {...host}
-                        onChange={onInputChange}
-                      />
-                    </FormGroup>
+              <FieldSet legend={translate('AddedAuthorSettings')} >
+                <FormGroup>
+                  <FormLabel>
+                    {translate('Monitor')}
 
-                    <FormGroup>
-                      <FormLabel>
-                        {translate('CalibrePort')}
-                      </FormLabel>
-
-                      <FormInputGroup
-                        type={inputTypes.NUMBER}
-                        name="port"
-                        helpText={translate('PortHelpText')}
-                        {...port}
-                        onChange={onInputChange}
-                      />
-                    </FormGroup>
-
-                    <FormGroup
-                      advancedSettings={advancedSettings}
-                      isAdvanced={true}
-                    >
-                      <FormLabel>
-                        {translate('CalibreUrlBase')}
-                      </FormLabel>
-
-                      <FormInputGroup
-                        type={inputTypes.TEXT}
-                        name="urlBase"
-                        helpText={translate('UrlBaseHelpText')}
-                        {...urlBase}
-                        onChange={onInputChange}
-                      />
-                    </FormGroup>
-
-                    <FormGroup>
-                      <FormLabel>
-                        {translate('CalibreUsername')}
-                      </FormLabel>
-
-                      <FormInputGroup
-                        type={inputTypes.TEXT}
-                        name="username"
-                        helpText={translate('UsernameHelpText')}
-                        {...username}
-                        onChange={onInputChange}
-                      />
-                    </FormGroup>
-
-                    <FormGroup>
-                      <FormLabel>
-                        {translate('CalibrePassword')}
-                      </FormLabel>
-
-                      <FormInputGroup
-                        type={inputTypes.PASSWORD}
-                        name="password"
-                        helpText={translate('PasswordHelpText')}
-                        {...password}
-                        onChange={onInputChange}
-                      />
-                    </FormGroup>
-
-                    <FormGroup>
-                      <FormLabel>
-                        {translate('CalibreLibrary')}
-                      </FormLabel>
-
-                      <FormInputGroup
-                        type={inputTypes.TEXT}
-                        name="library"
-                        helpText={translate('LibraryHelpText')}
-                        {...library}
-                        onChange={onInputChange}
-                      />
-                    </FormGroup>
-
-                    <FormGroup>
-                      <FormLabel>
-                        Convert to format
-                        <Popover
-                          anchor={
-                            <Icon
-                              className={styles.labelIcon}
-                              name={icons.INFO}
-                            />
-                          }
-                          title={translate('CalibreOutputFormat')}
-                          body={'Specify the output format.  Options are: MOBI, EPUB, AZW3, DOCX, FB2, HTMLZ, LIT, LRF, PDB, PDF, PMLZ, RB, RTF, SNB, TCR, TXT, TXTZ, ZIP'}
-                          position={tooltipPositions.RIGHT}
+                    <Popover
+                      anchor={
+                        <Icon
+                          className={styles.labelIcon}
+                          name={icons.INFO}
                         />
-                      </FormLabel>
+                      }
+                      title={translate('MonitoringOptions')}
+                      body={<AuthorMonitoringOptionsPopoverContent />}
+                      position={tooltipPositions.RIGHT}
+                    />
+                  </FormLabel>
 
-                      <FormInputGroup
-                        type={inputTypes.TEXT}
-                        name="outputFormat"
-                        helpText={translate('OutputFormatHelpText')}
-                        {...outputFormat}
-                        onChange={onInputChange}
-                      />
-                    </FormGroup>
+                  <FormInputGroup
+                    type={inputTypes.MONITOR_BOOKS_SELECT}
+                    name="defaultMonitorOption"
+                    onChange={onInputChange}
+                    {...defaultMonitorOption}
+                    helpText={translate('DefaultMonitorOptionHelpText')}
+                  />
 
-                    <FormGroup>
-                      <FormLabel>
-                        Calibre Output Profile
-                        <Popover
-                          anchor={
-                            <Icon
-                              className={styles.labelIcon}
-                              name={icons.INFO}
-                            />
-                          }
-                          title={translate('CalibreOutputProfile')}
-                          body={'Specify the output profile. The output profile tells the Calibre conversion system how to optimize the created document for the specified device (such as by resizing images for the device screen size). In some cases, an output profile can be used to optimize the output for a particular device, but this is rarely necessary.'}
-                          position={tooltipPositions.RIGHT}
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>
+                    {translate('MonitorNewItems')}
+                    <Popover
+                      anchor={
+                        <Icon
+                          className={styles.labelIcon}
+                          name={icons.INFO}
                         />
-                      </FormLabel>
+                      }
+                      title={translate('MonitorNewItems')}
+                      body={<AuthorMonitorNewItemsOptionsPopoverContent />}
+                      position={tooltipPositions.RIGHT}
+                    />
+                  </FormLabel>
 
-                      <FormInputGroup
-                        type={inputTypes.SELECT}
-                        name="outputProfile"
-                        values={calibreProfiles.options}
-                        helpText={profileHelpText}
-                        {...outputProfile}
-                        onChange={onInputChange}
-                      />
-                    </FormGroup>
-
-                    <FormGroup>
-                      <FormLabel>
-                        {translate('UseSSL')}
-                      </FormLabel>
-
-                      <FormInputGroup
-                        type={inputTypes.CHECK}
-                        name="useSsl"
-                        helpText={translate('UseSslHelpText')}
-                        {...useSsl}
-                        onChange={onInputChange}
-                      />
-                    </FormGroup>
-                  </div>
-              }
-
-              <FormGroup>
-                <FormLabel>
-                  {translate('Monitor')}
-
-                  <Popover
-                    anchor={
-                      <Icon
-                        className={styles.labelIcon}
-                        name={icons.INFO}
-                      />
-                    }
-                    title={translate('MonitoringOptions')}
-                    body={<AuthorMonitoringOptionsPopoverContent />}
-                    position={tooltipPositions.RIGHT}
+                  <FormInputGroup
+                    type={inputTypes.MONITOR_NEW_ITEMS_SELECT}
+                    name="defaultNewItemMonitorOption"
+                    {...defaultNewItemMonitorOption}
+                    onChange={onInputChange}
+                    helpText={translate('MonitorNewItemsHelpText')}
                   />
-                </FormLabel>
+                </FormGroup>
 
-                <FormInputGroup
-                  type={inputTypes.MONITOR_BOOKS_SELECT}
-                  name="defaultMonitorOption"
-                  onChange={onInputChange}
-                  {...defaultMonitorOption}
-                  helpText={translate('DefaultMonitorOptionHelpText')}
-                />
+                <FormGroup>
+                  <FormLabel>
+                    {translate('QualityProfile')}
+                  </FormLabel>
 
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>
-                  {translate('MonitorNewItems')}
-                  <Popover
-                    anchor={
-                      <Icon
-                        className={styles.labelIcon}
-                        name={icons.INFO}
-                      />
-                    }
-                    title={translate('MonitorNewItems')}
-                    body={<AuthorMonitorNewItemsOptionsPopoverContent />}
-                    position={tooltipPositions.RIGHT}
+                  <FormInputGroup
+                    type={inputTypes.QUALITY_PROFILE_SELECT}
+                    name="defaultQualityProfileId"
+                    helpText={translate('DefaultQualityProfileIdHelpText')}
+                    {...defaultQualityProfileId}
+                    onChange={onInputChange}
                   />
-                </FormLabel>
+                </FormGroup>
 
-                <FormInputGroup
-                  type={inputTypes.MONITOR_NEW_ITEMS_SELECT}
-                  name="defaultNewItemMonitorOption"
-                  {...defaultNewItemMonitorOption}
-                  onChange={onInputChange}
-                  helpText={translate('MonitorNewItemsHelpText')}
-                />
-              </FormGroup>
+                <FormGroup className={showMetadataProfile ? undefined : styles.hideMetadataProfile}>
+                  <FormLabel>
+                    {translate('MetadataProfile')}
+                    <Popover
+                      anchor={
+                        <Icon
+                          className={styles.labelIcon}
+                          name={icons.INFO}
+                        />
+                      }
+                      title={translate('MetadataProfile')}
+                      body={<AuthorMetadataProfilePopoverContent />}
+                      position={tooltipPositions.RIGHT}
+                    />
+                  </FormLabel>
 
-              <FormGroup>
-                <FormLabel>
-                  {translate('QualityProfile')}
-                </FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.QUALITY_PROFILE_SELECT}
-                  name="defaultQualityProfileId"
-                  helpText={translate('DefaultQualityProfileIdHelpText')}
-                  {...defaultQualityProfileId}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup className={showMetadataProfile ? undefined : styles.hideMetadataProfile}>
-                <FormLabel>
-                  Metadata Profile
-                  <Popover
-                    anchor={
-                      <Icon
-                        className={styles.labelIcon}
-                        name={icons.INFO}
-                      />
-                    }
-                    title={translate('MetadataProfile')}
-                    body={<AuthorMetadataProfilePopoverContent />}
-                    position={tooltipPositions.RIGHT}
+                  <FormInputGroup
+                    type={inputTypes.METADATA_PROFILE_SELECT}
+                    name="defaultMetadataProfileId"
+                    helpText={translate('DefaultMetadataProfileIdHelpText')}
+                    {...defaultMetadataProfileId}
+                    includeNone={true}
+                    onChange={onInputChange}
                   />
-                </FormLabel>
+                </FormGroup>
 
-                <FormInputGroup
-                  type={inputTypes.METADATA_PROFILE_SELECT}
-                  name="defaultMetadataProfileId"
-                  helpText={translate('DefaultMetadataProfileIdHelpText')}
-                  {...defaultMetadataProfileId}
-                  includeNone={true}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
+                <FormGroup>
+                  <FormLabel>
+                    {translate('DefaultReadarrTags')}
+                  </FormLabel>
 
-              <FormGroup>
-                <FormLabel>
-                  {translate('DefaultReadarrTags')}
-                </FormLabel>
+                  <FormInputGroup
+                    type={inputTypes.TAG}
+                    name="defaultTags"
+                    helpText={translate('DefaultTagsHelpText')}
+                    {...defaultTags}
+                    onChange={onInputChange}
+                  />
+                </FormGroup>
+              </FieldSet>
 
-                <FormInputGroup
-                  type={inputTypes.TAG}
-                  name="defaultTags"
-                  helpText={translate('DefaultTagsHelpText')}
-                  {...defaultTags}
-                  onChange={onInputChange}
-                />
-              </FormGroup>
+              <FieldSet legend={translate('CalibreSettings')}>
+                <Alert>
+                  {translate('CalibreNotCalibreWeb')}
+                </Alert>
+                <FormGroup>
+                  <FormLabel>
+                    {translate('UseCalibreContentServer')}
+                    <Popover
+                      anchor={
+                        <Icon
+                          className={styles.labelIcon}
+                          name={icons.INFO}
+                        />
+                      }
+                      title={translate('CalibreContentServer')}
+                      body={translate('CalibreContentServerText')}
+                      position={tooltipPositions.RIGHT}
+                    />
+                  </FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.CHECK}
+                    isDisabled={!!id}
+                    name="isCalibreLibrary"
+                    helpText={translate('IsCalibreLibraryHelpText')}
+                    {...isCalibreLibrary}
+                    onChange={onInputChange}
+                    helpLink={'https://manual.calibre-ebook.com/server.html'}
+                  />
+                </FormGroup>
+
+                {
+                  isCalibreLibrary !== undefined && isCalibreLibrary.value &&
+                    <div>
+                      <FormGroup>
+                        <FormLabel>
+                          {translate('CalibreHost')}
+                        </FormLabel>
+
+                        <FormInputGroup
+                          type={inputTypes.TEXT}
+                          name="host"
+                          helpText={translate('HostHelpText')}
+                          {...host}
+                          onChange={onInputChange}
+                        />
+                      </FormGroup>
+
+                      <FormGroup>
+                        <FormLabel>
+                          {translate('CalibrePort')}
+                        </FormLabel>
+
+                        <FormInputGroup
+                          type={inputTypes.NUMBER}
+                          name="port"
+                          helpText={translate('PortHelpText')}
+                          {...port}
+                          onChange={onInputChange}
+                        />
+                      </FormGroup>
+
+                      <FormGroup
+                        advancedSettings={advancedSettings}
+                        isAdvanced={true}
+                      >
+                        <FormLabel>
+                          {translate('CalibreUrlBase')}
+                        </FormLabel>
+
+                        <FormInputGroup
+                          type={inputTypes.TEXT}
+                          name="urlBase"
+                          helpText={translate('UrlBaseHelpText')}
+                          {...urlBase}
+                          onChange={onInputChange}
+                        />
+                      </FormGroup>
+
+                      <FormGroup>
+                        <FormLabel>
+                          {translate('CalibreUsername')}
+                        </FormLabel>
+
+                        <FormInputGroup
+                          type={inputTypes.TEXT}
+                          name="username"
+                          helpText={translate('UsernameHelpText')}
+                          {...username}
+                          onChange={onInputChange}
+                        />
+                      </FormGroup>
+
+                      <FormGroup>
+                        <FormLabel>
+                          {translate('CalibrePassword')}
+                        </FormLabel>
+
+                        <FormInputGroup
+                          type={inputTypes.PASSWORD}
+                          name="password"
+                          helpText={translate('PasswordHelpText')}
+                          {...password}
+                          onChange={onInputChange}
+                        />
+                      </FormGroup>
+
+                      <FormGroup>
+                        <FormLabel>
+                          {translate('CalibreLibrary')}
+                        </FormLabel>
+
+                        <FormInputGroup
+                          type={inputTypes.TEXT}
+                          name="library"
+                          helpText={translate('LibraryHelpText')}
+                          {...library}
+                          onChange={onInputChange}
+                        />
+                      </FormGroup>
+
+                      <FormGroup>
+                        <FormLabel>
+                          Convert to format
+                          <Popover
+                            anchor={
+                              <Icon
+                                className={styles.labelIcon}
+                                name={icons.INFO}
+                              />
+                            }
+                            title={translate('CalibreOutputFormat')}
+                            body={'Specify the output format.  Options are: MOBI, EPUB, AZW3, DOCX, FB2, HTMLZ, LIT, LRF, PDB, PDF, PMLZ, RB, RTF, SNB, TCR, TXT, TXTZ, ZIP'}
+                            position={tooltipPositions.RIGHT}
+                          />
+                        </FormLabel>
+
+                        <FormInputGroup
+                          type={inputTypes.TEXT}
+                          name="outputFormat"
+                          helpText={translate('OutputFormatHelpText')}
+                          {...outputFormat}
+                          onChange={onInputChange}
+                        />
+                      </FormGroup>
+
+                      <FormGroup>
+                        <FormLabel>
+                          Calibre Output Profile
+                          <Popover
+                            anchor={
+                              <Icon
+                                className={styles.labelIcon}
+                                name={icons.INFO}
+                              />
+                            }
+                            title={translate('CalibreOutputProfile')}
+                            body={'Specify the output profile. The output profile tells the Calibre conversion system how to optimize the created document for the specified device (such as by resizing images for the device screen size). In some cases, an output profile can be used to optimize the output for a particular device, but this is rarely necessary.'}
+                            position={tooltipPositions.RIGHT}
+                          />
+                        </FormLabel>
+
+                        <FormInputGroup
+                          type={inputTypes.SELECT}
+                          name="outputProfile"
+                          values={calibreProfiles.options}
+                          helpText={profileHelpText}
+                          {...outputProfile}
+                          onChange={onInputChange}
+                        />
+                      </FormGroup>
+
+                      <FormGroup>
+                        <FormLabel>
+                          {translate('UseSSL')}
+                        </FormLabel>
+
+                        <FormInputGroup
+                          type={inputTypes.CHECK}
+                          name="useSsl"
+                          helpText={translate('UseSslHelpText')}
+                          {...useSsl}
+                          onChange={onInputChange}
+                        />
+                      </FormGroup>
+                    </div>
+                }
+              </FieldSet>
 
             </Form>
         }
diff --git a/src/NzbDrone.Core/Localization/Core/en.json b/src/NzbDrone.Core/Localization/Core/en.json
index 3e7b6df61..e8d411c0d 100644
--- a/src/NzbDrone.Core/Localization/Core/en.json
+++ b/src/NzbDrone.Core/Localization/Core/en.json
@@ -89,14 +89,17 @@
   "BypassProxyForLocalAddresses": "Bypass Proxy for Local Addresses",
   "Calendar": "Calendar",
   "CalendarWeekColumnHeaderHelpText": "Shown above each column when week is the active view",
-  "CalibreContentServer": "Calibre content server",
+  "CalibreContentServer": "Calibre Content Server",
+  "CalibreContentServerText": "Using a Calibre Content Server (not Calibre Web) allows Readarr to add books to your Calibre library and trigger conversions between formats",
   "CalibreHost": "Calibre Host",
   "CalibreLibrary": "Calibre Library",
   "CalibreMetadata": "Calibre Metadata",
+  "CalibreNotCalibreWeb": "Readarr can interface with Calibre's Content Server.  It cannot use Calibre-Web, which is unrelated software.",
   "CalibreOutputFormat": "Calibre output format",
   "CalibreOutputProfile": "Calibre output profile",
   "CalibrePassword": "Calibre Password",
   "CalibrePort": "Calibre Port",
+  "CalibreSettings": "Calibre Settings",
   "CalibreUrlBase": "Calibre Url Base",
   "CalibreUsername": "Calibre Username",
   "Cancel": "Cancel",
@@ -308,7 +311,7 @@
   "IndexerSettings": "Indexer Settings",
   "Interval": "Interval",
   "ISBN": "ISBN",
-  "IsCalibreLibraryHelpText": "Use Calibre content server to manipulate library",
+  "IsCalibreLibraryHelpText": "Use Calibre Content Server to manipulate library",
   "IsCutoffCutoff": "Cutoff",
   "IsCutoffUpgradeUntilThisQualityIsMetOrExceeded": "Upgrade until this quality is met or exceeded",
   "IsExpandedHideBooks": "Hide books",
@@ -738,6 +741,7 @@
   "URLBase": "URL Base",
   "UrlBaseHelpText": "Adds a prefix to the Calibre url, e.g. http://[host]:[port]/[urlBase]",
   "UrlBaseHelpTextWarning": "Requires restart to take effect",
+  "UseCalibreContentServer": "Use Calibre Content Server",
   "UseHardlinksInsteadOfCopy": "Use Hardlinks instead of Copy",
   "Usenet": "Usenet",
   "UsenetDelay": "Usenet Delay",