Fixed: Translations for columns

frontend/src/Components/Icon.js

@@ -43,7 +43,7 @@ class Icon extends PureComponent {
       return (
         <span
           className={containerClassName}
-          title={title}
+          title={typeof title === 'function' ? title() : title}
         >
           {icon}
         </span>
@@ -60,7 +60,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]),
   darken: PropTypes.bool.isRequired,
   isSpinning: PropTypes.bool.isRequired,
   fixedWidth: PropTypes.bool.isRequired

frontend/src/Store/Actions/episodeActions.js

@@ -119,9 +119,8 @@ export const defaultState = {
       },
       label: React.createElement(Icon, {
         name: icons.SCORE,
-        get title() {
+        title: () => translate('CustomFormatScore')
-          return 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({
+      const newColumn = {};
-        ...column,
+
-        isVisible: persistedColumn.isVisible
+      // 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);
     }
   });