Fixed translations for columns

(cherry picked from commit 6d53d2a153a98070c42d0619c15902b6bd5dfab4)

Closes #3897

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
 };

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

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

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
       },

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
     },

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);
     }
   });