Merge pull request #6759 from metabase/i18n-debug

Add i18n debug feature to assist in finding untranslated strings

frontend/src/metabase/app.js

@@ -3,6 +3,10 @@
 import 'babel-polyfill';
 import 'number-to-locale-string';
 
+// If enabled this monkeypatches `t` and `jt` to return blacked out
+// strings/elements to assist in finding untranslated strings.
+import "metabase/lib/i18n-debug";
+
 // make the i18n function "t" global so we don't have to import it in basically every file
 import { t, jt } from "c-3po";
 global.t = t;

frontend/src/metabase/lib/i18n-debug.js

+import React from "react";
+
+// If enabled this monkeypatches `t` and `jt` to return blacked out
+// strings/elements to assist in finding untranslated strings.
+//
+// Enable:
+//    localStorage["metabase-i18n-debug"] = true; window.location.reload()
+//
+// Disable:
+//    delete localStorage["metabase-i18n-debug"]; window.location.reload()
+//
+// Should be loaded before almost everything else.
+
+// special strings that need to be handled specially
+const SPECIAL_STRINGS = new Set([
+  // Expression editor aggregation names need to be unique for the parser
+  "Count",
+  "CumulativeCount",
+  "Sum",
+  "CumulativeSum",
+  "Distinct",
+  "StandardDeviation",
+  "Average",
+  "Min",
+  "Max"
+])
+
+export function enableTranslatedStringReplacement() {
+  const c3po = require("c-3po");
+  const _t = c3po.t;
+  const _jt = c3po.jt;
+  c3po.t = (...args) => {
+    const string = _t(...args);
+    if (SPECIAL_STRINGS.has(string)) {
+      return string.toUpperCase();
+    } else {
+      // divide by 2 because Unicode `FULL BLOCK` is quite wide
+      return new Array(Math.ceil(string.length / 2) + 1).join("█");
+    }
+  }
+  // eslint-disable-next-line react/display-name
+  c3po.jt = (...args) => {
+    const elements = _jt(...args);
+    return (
+      <span style={{ backgroundColor: "currentcolor" }}>
+        {elements}
+      </span>
+    );
+  }
+}
+
+if (window.localStorage && window.localStorage["metabase-i18n-debug"]) {
+  enableTranslatedStringReplacement();
+}

frontend/src/metabase/pulse/components/PulseListItem.jsx

@@ -3,7 +3,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import ReactDOM from "react-dom";
 import { Link } from "react-router";
-import { t } from 'c-3po';
+import { jt, t } from 'c-3po';
 
 import cx from "classnames";
 
@@ -29,12 +29,13 @@ export default class PulseListItem extends Component {
     render() {
         let { pulse, formInput, user } = this.props;
 
+        const creator = <span className="text-bold">{pulse.creator && pulse.creator.common_name}</span>;
         return (
             <div ref="pulseListItem" className={cx("PulseListItem bordered rounded mb2 pt3", {"PulseListItem--focused": this.props.scrollTo})}>
                 <div className="flex px4 mb2">
                     <div>
                         <h2 className="mb1">{pulse.name}</h2>
-                        <span>Pulse by <span className="text-bold">{pulse.creator && pulse.creator.common_name}</span></span>
+                        <span>{jt`Pulse by ${creator}`}</span>
                     </div>
                     { !pulse.read_only &&
                         <div className="flex-align-right">