metabase应用名替换功能实现

简单描述下本文的功能：
部分用户在使用的时候不想显示原有的metabase字样，想动态配置成想要的内容，该功能实际为metabase所限制的，只有企业版才能授权使用，所以本文仅限于技术交流。如有侵权，立马删帖。
如果你用过metabase的企业版，会发现图一的whitelable配置菜单几乎跟企业版一样，这里基本是仿照企业版功能做的，本文主要介绍application-name配置的功能实现。

application-name配置成metabase123555后，对应的显示metabase的地方都会被metabase123555替换，如果有没被替换的地方，基本就是页面写死的，需要国际化处理或者hardcode。

图一

whitelable的开发有点复杂，偷懒的做法是手动往数据库里增加一个配置（如图二红框），然后修改对应图三图四内容的代码就可完成主要功能了。
数据库setting表中增加下面的数据

图二

图三

上图对应的文件
/metabase/frontend/src/metabase/lib/i18n-debug.js

import React from "react";

import { HAS_LOCAL_STORAGE } from "metabase/lib/dom";
import MetabaseSettings from "metabase/lib/settings";

// 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",
]);

const obfuscateString = (original, string) => {
  if (SPECIAL_STRINGS.has(original)) {
    return string.toUpperCase();
  } else {
    // divide by 2 because Unicode `FULL BLOCK` is quite wide
    if (window.localStorage["metabase-i18n-debug"]) {
      return new Array(Math.ceil(string.length / 2) + 1).join("█");
    } else {
      return string.replace(/Metabase/g, MetabaseSettings.get("application-name") || MetabaseSettings.get("application_name"));
    }
  }
};

export function enableTranslatedStringReplacement() {
  const c3po = require("ttag");
  const _t = c3po.t;
  const _jt = c3po.jt;
  const _ngettext = c3po.ngettext;
  c3po.t = (...args) => {
    return obfuscateString(args[0][0], _t(...args));
  };
  c3po.ngettext = (...args) => {
    return obfuscateString(args[0][0], _ngettext(...args));
  };
  // eslint-disable-next-line react/display-name
  c3po.jt = (...args) => {
    const elements = _jt(...args).map(function (item,index) {
      if (item && typeof item === "string") {
        return item.replace(/Metabase/g, MetabaseSettings.get("application-name") || MetabaseSettings.get("application_name"));
      }
      return item;
    });
    return <span>{elements}</span>;
    // return <span style={{ backgroundColor: "currentcolor" }}>{elements}</span>;
  };
}

if (HAS_LOCAL_STORAGE ) {
  enableTranslatedStringReplacement();
}

图四

注意
该文实现的功能只能针对前台展示的国际化中的metabase字样进行替换，以下情况无法替换
前台写死的metabase字样
后台涉及到的metabase字样无法替换