New: Footnote to indicate some renaming tokens support truncation

(cherry picked from commit 7fc3bebc91db217a1c24ab2d01ebbc5bf03c918e)

Closes #9905

frontend/src/Settings/MediaManagement/Naming/NamingModal.js

@@ -72,15 +72,15 @@ const fileNameTokens = [
 ];
 
 const movieTokens = [
-  { token: '{Movie Title}', example: 'Movie\'s Title' },
+  { token: '{Movie Title}', example: 'Movie\'s Title', footNote: 1 },
-  { token: '{Movie Title:DE}', example: 'Titel des Films' },
+  { token: '{Movie Title:DE}', example: 'Titel des Films', footNote: 1 },
-  { token: '{Movie CleanTitle}', example: 'Movies Title' },
+  { token: '{Movie CleanTitle}', example: 'Movies Title', footNote: 1 },
-  { token: '{Movie TitleThe}', example: 'Movie\'s Title, The' },
+  { token: '{Movie TitleThe}', example: 'Movie\'s Title, The', footNote: 1 },
-  { token: '{Movie OriginalTitle}', example: 'Τίτλος ταινίας' },
+  { token: '{Movie OriginalTitle}', example: 'Τίτλος ταινίας', footNote: 1 },
-  { token: '{Movie CleanOriginalTitle}', example: 'Τίτλος ταινίας' },
+  { token: '{Movie CleanOriginalTitle}', example: 'Τίτλος ταινίας', footNote: 1 },
   { token: '{Movie TitleFirstCharacter}', example: 'M' },
   { token: '{Movie TitleFirstCharacter:DE}', example: 'T' },
-  { token: '{Movie Collection}', example: 'The Movie Collection' },
+  { token: '{Movie Collection}', example: 'The Movie Collection', footNote: 1 },
   { token: '{Movie Certification}', example: 'R' },
   { token: '{Release Year}', example: '2009' }
 ];
@@ -112,11 +112,11 @@ const mediaInfoTokens = [
 ];
 
 const releaseGroupTokens = [
-  { token: '{Release Group}', example: 'Rls Grp' }
+  { token: '{Release Group}', example: 'Rls Grp', footNote: 1 }
 ];
 
 const editionTokens = [
-  { token: '{Edition Tags}', example: 'IMAX' }
+  { token: '{Edition Tags}', example: 'IMAX', footNote: 1 }
 ];
 
 const customFormatTokens = [
@@ -268,7 +268,7 @@ class NamingModal extends Component {
             <FieldSet legend={translate('Movie')}>
               <div className={styles.groups}>
                 {
-                  movieTokens.map(({ token, example }) => {
+                  movieTokens.map(({ token, example, footNote }) => {
                     return (
                       <NamingOption
                         key={token}
@@ -276,6 +276,7 @@ class NamingModal extends Component {
                         value={value}
                         token={token}
                         example={example}
+                        footNote={footNote}
                         tokenSeparator={tokenSeparator}
                         tokenCase={tokenCase}
                         onPress={this.onOptionPress}
@@ -285,6 +286,11 @@ class NamingModal extends Component {
                   )
                 }
               </div>
+
+              <div className={styles.footNote}>
+                <Icon className={styles.icon} name={icons.FOOTNOTE} />
+                <InlineMarkdown data={translate('MovieFootNote')} />
+              </div>
             </FieldSet>
 
             <FieldSet legend={translate('MovieID')}>
@@ -365,7 +371,7 @@ class NamingModal extends Component {
                   <FieldSet legend={translate('ReleaseGroup')}>
                     <div className={styles.groups}>
                       {
-                        releaseGroupTokens.map(({ token, example }) => {
+                        releaseGroupTokens.map(({ token, example, footNote }) => {
                           return (
                             <NamingOption
                               key={token}
@@ -373,6 +379,7 @@ class NamingModal extends Component {
                               value={value}
                               token={token}
                               example={example}
+                              footNote={footNote}
                               tokenSeparator={tokenSeparator}
                               tokenCase={tokenCase}
                               onPress={this.onOptionPress}
@@ -382,12 +389,17 @@ class NamingModal extends Component {
                         )
                       }
                     </div>
+
+                    <div className={styles.footNote}>
+                      <Icon className={styles.icon} name={icons.FOOTNOTE} />
+                      <InlineMarkdown data={translate('ReleaseGroupFootNote')} />
+                    </div>
                   </FieldSet>
 
                   <FieldSet legend={translate('Edition')}>
                     <div className={styles.groups}>
                       {
-                        editionTokens.map(({ token, example }) => {
+                        editionTokens.map(({ token, example, footNote }) => {
                           return (
                             <NamingOption
                               key={token}
@@ -395,6 +407,7 @@ class NamingModal extends Component {
                               value={value}
                               token={token}
                               example={example}
+                              footNote={footNote}
                               tokenSeparator={tokenSeparator}
                               tokenCase={tokenCase}
                               onPress={this.onOptionPress}
@@ -404,6 +417,11 @@ class NamingModal extends Component {
                         )
                       }
                     </div>
+
+                    <div className={styles.footNote}>
+                      <Icon className={styles.icon} name={icons.FOOTNOTE} />
+                      <InlineMarkdown data={translate('EditionFootNote')} />
+                    </div>
                   </FieldSet>
 
                   <FieldSet legend={translate('CustomFormats')}>

src/NzbDrone.Core/Localization/Core/en.json

@@ -555,6 +555,7 @@
   "EditSelectedIndexers": "Edit Selected Indexers",
   "EditSelectedMovies": "Edit Selected Movies",
   "Edition": "Edition",
+  "EditionFootNote": "Optionally control truncation to a maximum number of bytes including ellipsis (`...`). Truncating from the end (e.g. `{Edition Tags:30}`) or the beginning (e.g. `{Edition Tags:-30}`) are both supported.",
   "Enable": "Enable",
   "EnableAutomaticAdd": "Enable Automatic Add",
   "EnableAutomaticAddMovieHelpText": "If enabled, movies will be automatically added to {appName} from this list",
@@ -922,6 +923,7 @@
   "MovieFolderFormat": "Movie Folder Format",
   "MovieFolderFormatHelpText": "Used when adding a new movie or moving movies via the movie editor",
   "MovieFolderImportedTooltip": "Movie imported from movie folder",
+  "MovieFootNote": "Optionally control truncation to a maximum number of bytes including ellipsis (`...`). Truncating from the end (e.g. `{Movie Title:30}`) or the beginning (e.g. `{Movie Title:-30}`) are both supported.",
   "MovieGrabbedHistoryTooltip": "Movie grabbed from {indexer} and sent to {downloadClient}",
   "MovieID": "Movie ID",
   "MovieImported": "Movie Imported",
@@ -1337,6 +1339,7 @@
   "ReleaseBranchCheckOfficialBranchMessage": "Branch {0} is not a valid {appName} release branch, you will not receive updates",
   "ReleaseDates": "Release Dates",
   "ReleaseGroup": "Release Group",
+  "ReleaseGroupFootNote": "Optionally control truncation to a maximum number of bytes including ellipsis (`...`). Truncating from the end (e.g. `{Release Group:30}`) or the beginning (e.g. `{Release Group:-30}`) are both supported.`).",
   "ReleaseGroups": "Release Groups",
   "ReleaseHash": "Release Hash",
   "ReleaseProfileIndexerHelpText": "Specify what indexer the profile applies to",