start initial work on a translating tool

src/pages.tsx

@@ -44,6 +44,7 @@ import { UserPassUserEdit } from "./ui/pages/Access/Auth/userpass/UserPassUserEd
 import { UserPassUserNew } from "./ui/pages/Access/Auth/userpass/UserPassUserNew";
 import { UserPassUserView } from "./ui/pages/Access/Auth/userpass/UserPassUserView";
 import { UserPassUsersList } from "./ui/pages/Access/Auth/userpass/UserPassUsersList";
+import { InternalTranslateTool } from "./ui/pages/InternalTranslateTool";
 
 export const Main = () => (
   <Router>
@@ -54,6 +55,7 @@ export const Main = () => (
     <SetVaultURL path="/set_vault_url" settings={settings} api={api} />
     <Unseal path="/unseal" settings={settings} api={api} />
     <SetLanguage path="/set_language" settings={settings} api={api} />
+    <InternalTranslateTool path="/internal_translate_tool" />
 
     <Secrets path="/secrets" settings={settings} api={api} />
     <DeleteSecretsEngine path="/secrets/delete_engine/:mount" settings={settings} api={api} />

src/ui/pages/InternalTranslateTool.tsx

@@ -0,0 +1,122 @@
+import { Component, JSX, createRef } from "preact";
+import i18next from "i18next";
+
+import { InputWithTitle } from "../elements/InputWithTitle"
+
+// @ts-ignore
+import translations from "../../translations/index.mjs";
+import { CodeEditor } from "../elements/CodeEditor";
+import { getObjectKeys } from "../../utils";
+// ts-unignore
+
+function SplitView(props: { children: JSX.Element | JSX.Element[] }) {
+  return (
+    <div style="flex: 0 200px;">
+      {props.children}
+    </div>
+  )
+}
+
+
+const languageIDs = Object.getOwnPropertyNames(translations);
+
+class LanguageSelector extends Component<{ onLanguageChange: (id: string) => void }> {
+  selectRef = createRef<HTMLSelectElement>()
+  render() {
+    return (
+      <select ref={this.selectRef} class="uk-select uk-form-width-large" name="language" onChange={() => {
+        this.props.onLanguageChange(this.selectRef.current.value)
+      }}>
+        {languageIDs.map((languageID) => (
+          <option value={languageID} selected={languageID == "en"}>
+            {i18next.getFixedT(languageID, null)("language_name")}
+          </option>
+        ))}
+      </select>
+    )
+  }
+}
+
+function arrayDiff(a: string[], b: string[]): {missing: string[], extra: string[]} {
+  return {
+    missing: a.filter(x => !b.includes(x)),
+    extra: b.filter(x => !a.includes(x)),
+  };
+}
+
+
+type InternalTranslateToolState = {
+  sourceLangID: string;
+  targetLangID: string;
+  targetTranslationData: Record<string, unknown>
+}
+
+export class InternalTranslateTool extends Component<unknown, InternalTranslateToolState> {
+  constructor() {
+    super()
+    this.setState({
+      sourceLangID: "en",
+      targetLangID: "en",
+    })
+  }
+
+  render() {
+    let diff = arrayDiff(
+      getObjectKeys(translations[this.state.sourceLangID]),
+      getObjectKeys(this.state.targetTranslationData || translations[this.state.targetLangID])
+    );
+
+    return (
+      <>
+        <h3>Internal Translation Tool</h3>
+
+        <InputWithTitle title="Source Language">
+          <LanguageSelector onLanguageChange={(id) => { this.setState({ sourceLangID: id }) }} />
+        </InputWithTitle>
+
+        <InputWithTitle title="Target Language">
+          <LanguageSelector onLanguageChange={(id) => {
+            this.setState({
+              targetLangID: id,
+              targetTranslationData: translations[id]
+            })
+          }} />
+        </InputWithTitle>
+
+        <br />
+
+        <h4>Source Language</h4>
+
+        <CodeEditor
+          tabSize={4}
+          language="json"
+          code={JSON.stringify(translations[this.state.sourceLangID], null, 2)}
+          onUpdate={() => { }}
+        />
+
+        <h4>Target Language</h4>
+
+        <h4>Missing from target language:</h4>
+        <ul>
+          {diff.missing.map((value) => <li>- {value}</li>)}
+        </ul>
+
+        <h4>Extra Keys (maybe deprecated, renamed or no longer exists, check git log)</h4>
+        <ul>
+          {diff.extra.map((value) => <li>- {value}</li>)}
+        </ul>
+
+        <CodeEditor
+          tabSize={4}
+          language="json"
+          code={JSON.stringify(translations[this.state.targetLangID], null, 2)}
+          onUpdate={(code) => {
+            this.setState({
+              targetTranslationData: JSON.parse(code)
+            })
+          }}
+        />
+      </>
+    )
+  }
+}