From 7406e0e3b7b41e09b15662946ad88a9a987a0578 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Wed, 19 Jul 2023 17:52:19 -0700
Subject: [PATCH] Fixed translations for columns

(cherry picked from commit 6d53d2a153a98070c42d0619c15902b6bd5dfab4)

Closes #3897
---
 frontend/src/Components/Icon.js                   |  4 ++--
 .../Interactive/InteractiveImportModalContent.js  |  2 +-
 .../src/InteractiveSearch/InteractiveSearch.js    |  2 +-
 frontend/src/Store/Actions/queueActions.js        |  2 +-
 frontend/src/Store/Actions/trackActions.js        |  2 +-
 .../src/Store/Middleware/createPersistState.js    | 15 +++++++++++----
 6 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/frontend/src/Components/Icon.js b/frontend/src/Components/Icon.js
index e8c7c5178..d200b8c08 100644
--- a/frontend/src/Components/Icon.js
+++ b/frontend/src/Components/Icon.js
@@ -41,7 +41,7 @@ class Icon extends PureComponent {
       return (
         <span
           className={containerClassName}
-          title={title}
+          title={typeof title === 'function' ? title() : title}
         >
           {icon}
         </span>
@@ -58,7 +58,7 @@ Icon.propTypes = {
   name: PropTypes.object.isRequired,
   kind: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   isSpinning: PropTypes.bool.isRequired,
   fixedWidth: PropTypes.bool.isRequired
 };
diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js
index 4b2558277..a73b4c00d 100644
--- a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js
+++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js
@@ -74,7 +74,7 @@ const columns = [
     name: 'customFormats',
     label: React.createElement(Icon, {
       name: icons.INTERACTIVE,
-      title: translate('CustomFormat')
+      title: () => translate('CustomFormat')
     }),
     isSortable: true,
     isVisible: true
diff --git a/frontend/src/InteractiveSearch/InteractiveSearch.js b/frontend/src/InteractiveSearch/InteractiveSearch.js
index 560234131..992596625 100644
--- a/frontend/src/InteractiveSearch/InteractiveSearch.js
+++ b/frontend/src/InteractiveSearch/InteractiveSearch.js
@@ -60,7 +60,7 @@ const columns = [
     name: 'customFormatScore',
     label: React.createElement(Icon, {
       name: icons.SCORE,
-      title: translate('CustomFormatScore')
+      title: () => translate('CustomFormatScore')
     }),
     isSortable: true,
     isVisible: true
diff --git a/frontend/src/Store/Actions/queueActions.js b/frontend/src/Store/Actions/queueActions.js
index dddc2ee0f..0a72718d9 100644
--- a/frontend/src/Store/Actions/queueActions.js
+++ b/frontend/src/Store/Actions/queueActions.js
@@ -100,7 +100,7 @@ export const defaultState = {
         columnLabel: translate('CustomFormatScore'),
         label: React.createElement(Icon, {
           name: icons.SCORE,
-          title: translate('CustomFormatScore')
+          title: () => translate('CustomFormatScore')
         }),
         isVisible: false
       },
diff --git a/frontend/src/Store/Actions/trackActions.js b/frontend/src/Store/Actions/trackActions.js
index 03a03e7cb..03b6dab29 100644
--- a/frontend/src/Store/Actions/trackActions.js
+++ b/frontend/src/Store/Actions/trackActions.js
@@ -68,7 +68,7 @@ export const defaultState = {
       columnLabel: translate('CustomFormatScore'),
       label: React.createElement(Icon, {
         name: icons.SCORE,
-        title: translate('CustomFormatScore')
+        title: () => translate('CustomFormatScore')
       }),
       isVisible: false
     },
diff --git a/frontend/src/Store/Middleware/createPersistState.js b/frontend/src/Store/Middleware/createPersistState.js
index 605daeda8..57452d6a3 100644
--- a/frontend/src/Store/Middleware/createPersistState.js
+++ b/frontend/src/Store/Middleware/createPersistState.js
@@ -36,10 +36,17 @@ function mergeColumns(path, initialState, persistedState, computedState) {
     const column = initialColumns.find((i) => i.name === persistedColumn.name);
 
     if (column) {
-      columns.push({
-        ...column,
-        isVisible: persistedColumn.isVisible
-      });
+      const newColumn = {};
+
+      // We can't use a spread operator or Object.assign to clone the column
+      // or any accessors are lost and can break translations.
+      for (const prop of Object.keys(column)) {
+        Object.defineProperty(newColumn, prop, Object.getOwnPropertyDescriptor(column, prop));
+      }
+
+      newColumn.isVisible = persistedColumn.isVisible;
+
+      columns.push(newColumn);
     }
   });