Simplify column translations

(cherry picked from commit 551ea18caf50353c4c8dbeba5e42d266dbbfb54d)

Closes #3958

frontend/src/Components/Page/Sidebar/PageSidebarItem.js

@@ -64,7 +64,7 @@ class PageSidebarItem extends Component {
           }
 
           <span className={isChildItem ? styles.noIcon : null}>
-            {title}
+            {typeof title === 'function' ? title() : title}
           </span>
 
           {
@@ -88,7 +88,7 @@ class PageSidebarItem extends Component {
 
 PageSidebarItem.propTypes = {
   iconName: PropTypes.object,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   to: PropTypes.string.isRequired,
   isActive: PropTypes.bool,
   isActiveParent: PropTypes.bool,

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.tsx

@@ -36,49 +36,37 @@ type OnSelectedChangeCallback = React.ComponentProps<
 const COLUMNS = [
   {
     name: 'name',
-    get label() {
-      return translate('Name');
-    },
+    label: () => translate('Name'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'implementation',
-    get label() {
-      return translate('Implementation');
-    },
+    label: () => translate('Implementation'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'enable',
-    get label() {
-      return translate('Enabled');
-    },
+    label: () => translate('Enabled'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'priority',
-    get label() {
-      return translate('Priority');
-    },
+    label: () => translate('Priority'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'removeCompletedDownloads',
-    get label() {
-      return translate('RemoveCompleted');
-    },
+    label: () => translate('RemoveCompleted'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'removeFailedDownloads',
-    get label() {
-      return translate('RemoveFailed');
-    },
+    label: () => translate('RemoveFailed'),
     isSortable: true,
     isVisible: true,
   },

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalContent.tsx

@@ -36,49 +36,37 @@ type OnSelectedChangeCallback = React.ComponentProps<
 const COLUMNS = [
   {
     name: 'name',
-    get label() {
-      return translate('Name');
-    },
+    label: () => translate('Name'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'implementation',
-    get label() {
-      return translate('Implementation');
-    },
+    label: () => translate('Implementation'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'qualityProfileId',
-    get label() {
-      return translate('QualityProfile');
-    },
+    label: () => translate('QualityProfile'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'rootFolderPath',
-    get label() {
-      return translate('RootFolder');
-    },
+    label: () => translate('RootFolder'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'enableAutomaticAdd',
-    get label() {
-      return translate('AutoAdd');
-    },
+    label: () => translate('AutoAdd'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'tags',
-    get label() {
-      return translate('Tags');
-    },
+    label: () => translate('Tags'),
     isSortable: true,
     isVisible: true,
   },

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalContent.tsx

@@ -36,57 +36,43 @@ type OnSelectedChangeCallback = React.ComponentProps<
 const COLUMNS = [
   {
     name: 'name',
-    get label() {
-      return translate('Name');
-    },
+    label: () => translate('Name'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'implementation',
-    get label() {
-      return translate('Implementation');
-    },
+    label: () => translate('Implementation'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'enableRss',
-    get label() {
-      return translate('EnableRSS');
-    },
+    label: () => translate('EnableRSS'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'enableAutomaticSearch',
-    get label() {
-      return translate('EnableAutomaticSearch');
-    },
+    label: () => translate('EnableAutomaticSearch'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'enableInteractiveSearch',
-    get label() {
-      return translate('EnableInteractiveSearch');
-    },
+    label: () => translate('EnableInteractiveSearch'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'priority',
-    get label() {
-      return translate('Priority');
-    },
+    label: () => translate('Priority'),
     isSortable: true,
     isVisible: true,
   },
   {
     name: 'tags',
-    get label() {
-      return translate('Tags');
-    },
+    label: () => translate('Tags'),
     isSortable: true,
     isVisible: true,
   },

frontend/src/System/Backup/Backups.js

@@ -21,17 +21,17 @@ const columns = [
   },
   {
     name: 'name',
-    label: translate('Name'),
+    label: () => translate('Name'),
     isVisible: true
   },
   {
     name: 'size',
-    label: translate('Size'),
+    label: () => translate('Size'),
     isVisible: true
   },
   {
     name: 'time',
-    label: translate('Time'),
+    label: () => translate('Time'),
     isVisible: true
   },
   {

frontend/src/System/Logs/Files/LogFiles.js

@@ -19,12 +19,12 @@ import LogFilesTableRow from './LogFilesTableRow';
 const columns = [
   {
     name: 'filename',
-    label: translate('Filename'),
+    label: () => translate('Filename'),
     isVisible: true
   },
   {
     name: 'lastWriteTime',
-    label: translate('LastWriteTime'),
+    label: () => translate('LastWriteTime'),
     isVisible: true
   },
   {

frontend/src/System/Status/DiskSpace/DiskSpace.js

@@ -15,17 +15,17 @@ import styles from './DiskSpace.css';
 const columns = [
   {
     name: 'path',
-    label: translate('Location'),
+    label: () => translate('Location'),
     isVisible: true
   },
   {
     name: 'freeSpace',
-    label: translate('FreeSpace'),
+    label: () => translate('FreeSpace'),
     isVisible: true
   },
   {
     name: 'totalSpace',
-    label: translate('TotalSpace'),
+    label: () => translate('TotalSpace'),
     isVisible: true
   },
   {

frontend/src/System/Status/Health/Health.js

@@ -103,12 +103,12 @@ const columns = [
   },
   {
     name: 'message',
-    label: translate('Message'),
+    label: () => translate('Message'),
     isVisible: true
   },
   {
     name: 'actions',
-    label: translate('Actions'),
+    label: () => translate('Actions'),
     isVisible: true
   }
 ];

frontend/src/System/Tasks/Queued/QueuedTasks.js

@@ -15,27 +15,27 @@ const columns = [
   },
   {
     name: 'commandName',
-    label: translate('Name'),
+    label: () => translate('Name'),
     isVisible: true
   },
   {
     name: 'queued',
-    label: translate('Queued'),
+    label: () => translate('Queued'),
     isVisible: true
   },
   {
     name: 'started',
-    label: translate('Started'),
+    label: () => translate('Started'),
     isVisible: true
   },
   {
     name: 'ended',
-    label: translate('Ended'),
+    label: () => translate('Ended'),
     isVisible: true
   },
   {
     name: 'duration',
-    label: translate('Duration'),
+    label: () => translate('Duration'),
     isVisible: true
   },
   {

frontend/src/System/Tasks/Scheduled/ScheduledTasks.js

@@ -10,27 +10,27 @@ import ScheduledTaskRowConnector from './ScheduledTaskRowConnector';
 const columns = [
   {
     name: 'name',
-    label: translate('Name'),
+    label: () => translate('Name'),
     isVisible: true
   },
   {
     name: 'interval',
-    label: translate('Interval'),
+    label: () => translate('Interval'),
     isVisible: true
   },
   {
     name: 'lastExecution',
-    label: translate('LastExecution'),
+    label: () => translate('LastExecution'),
     isVisible: true
   },
   {
     name: 'lastDuration',
-    label: translate('LastDuration'),
+    label: () => translate('LastDuration'),
     isVisible: true
   },
   {
     name: 'nextExecution',
-    label: translate('NextExecution'),
+    label: () => translate('NextExecution'),
     isVisible: true
   },
   {