[CORL-800] Fluent Upgrade (#2739)

* feat: upgraded fluent libraries * fix: adjustments to support fluent upgrade
2026-06-27 19:33:06 +08:00 · 2019-12-20 23:18:49 +00:00
parent 7581f0201d
commit 9d050e8b51
294 changed files with 433 additions and 395 deletions
@@ -2346,6 +2346,43 @@
      "integrity": "sha512-n/VQ4mbfr81aqkx/XmVicOLjviMuy02eenSdJY33SVA7S2J42EU0P1H0mOogfYedb3wXA0d/LVtBrgTSm04WEA==",
      "dev": true
    },
+    "@fluent/bundle": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@fluent/bundle/-/bundle-0.14.0.tgz",
+      "integrity": "sha512-ENcZYWq6Q5ut39n3hSQiL3seCTAajuPXIkpnPBeO4xcJFTUebNhKh5VpmwJngoS5lkRVYOzJGmupADzQy/ODYw=="
+    },
+    "@fluent/dom": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@fluent/dom/-/dom-0.6.0.tgz",
+      "integrity": "sha512-xdRYUMl4mgyFyzWLFlQWmX66j11phqRRmdMNtyfEpse1vHXRuoO6pxzbyXCcj+MqWLNp2jnbgU64IMgva5LNSw==",
+      "requires": {
+        "cached-iterable": "^0.3"
+      },
+      "dependencies": {
+        "cached-iterable": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/cached-iterable/-/cached-iterable-0.3.0.tgz",
+          "integrity": "sha512-MDqM6TpBVebZD4UDtmlFp8EjVtRcsB6xt9aRdWymjk0fWVUUGgmt/V7o0H0gkI2Tkvv8B0ucjidZm4mLosdlWw=="
+        }
+      }
+    },
+    "@fluent/react": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@fluent/react/-/react-0.10.0.tgz",
+      "integrity": "sha512-SDuvLpSSbgX346UwjAqQtVZCI/NQBKiIonRX2rCvaBUL90jFYSBQTnS9c429p1cSqPvOiB1OH/Qiqq63SkPi4w==",
+      "dev": true,
+      "requires": {
+        "@fluent/sequence": "0.4.0",
+        "cached-iterable": "^0.2.1",
+        "prop-types": "^15.6.0"
+      }
+    },
+    "@fluent/sequence": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@fluent/sequence/-/sequence-0.4.0.tgz",
+      "integrity": "sha512-ADP/GYbmQZ8DxBHzLGN4I1Vrq0h+ujQuIa9O8E4+Fh5MiSUtPNW0sSH/NzikmAPPQ5cnz5cb53OBv54ANrsvCw==",
+      "dev": true
+    },
    "@gulp-sourcemaps/identity-map": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/@gulp-sourcemaps/identity-map/-/identity-map-1.0.2.tgz",
@@ -7842,7 +7879,8 @@
    "cached-iterable": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/cached-iterable/-/cached-iterable-0.2.1.tgz",
-      "integrity": "sha512-8zAVjMjdn/S/QXJaOnqsko0+ZJzXT2Dum2u9TMGg5YR9fxONPrUjuO9VYqnb1AoldXeYVAcNJLgT5Q8WaIJSgA=="
+      "integrity": "sha512-8zAVjMjdn/S/QXJaOnqsko0+ZJzXT2Dum2u9TMGg5YR9fxONPrUjuO9VYqnb1AoldXeYVAcNJLgT5Q8WaIJSgA==",
+      "dev": true
    },
    "call-me-maybe": {
      "version": "1.0.1",
@@ -14861,19 +14899,6 @@
      "resolved": "https://registry.npmjs.org/flexbuffer/-/flexbuffer-0.0.6.tgz",
      "integrity": "sha1-A5/fI/iCPkQMOPMnfm/vEXQhWzA="
    },
-    "fluent": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/fluent/-/fluent-0.10.0.tgz",
-      "integrity": "sha512-2I6xaHecA76FiGavw6eKurXaHd6p25eenAgRYKSaMwJEpbvWpAlwFWAnC+BGzrGIKINUHwDlCQRtRenJvlbqQQ=="
-    },
-    "fluent-dom": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/fluent-dom/-/fluent-dom-0.4.1.tgz",
-      "integrity": "sha512-3V78Kl5OdL2fRLiuO2R2XkJSmSQuOPHgBPA53J9hiZXPnvoN+J4KIpGAa4tJxwIrdEpVCVz8fv77wrZVk+SZVw==",
-      "requires": {
-        "cached-iterable": "^0.2.1"
-      }
-    },
    "fluent-intl-polyfill": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/fluent-intl-polyfill/-/fluent-intl-polyfill-0.1.0.tgz",
@@ -14883,29 +14908,6 @@
        "intl-pluralrules": "github:projectfluent/IntlPluralRules#module"
      }
    },
-    "fluent-langneg": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/fluent-langneg/-/fluent-langneg-0.1.1.tgz",
-      "integrity": "sha512-7lCFviLfesnxV4SnwAJh1epnKw97doF1Fmrjx3rAjq1/bbgrmuC43rpL7Qx81keB4Eu+YsjFZ7hCMg2mM25SyA==",
-      "dev": true
-    },
-    "fluent-react": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/fluent-react/-/fluent-react-0.8.4.tgz",
-      "integrity": "sha512-7iPKD9pwh982i2Mwqnf6vNbdRFdwIBBVyXrEuv48LX8s4vNgcowD9A/FRNY8b8mXy4XLv8jhIo8dlwgFOtW40w==",
-      "dev": true,
-      "requires": {
-        "cached-iterable": "^0.2.1",
-        "fluent-sequence": "^0.2.0",
-        "prop-types": "^15.6.0"
-      }
-    },
-    "fluent-sequence": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/fluent-sequence/-/fluent-sequence-0.2.0.tgz",
-      "integrity": "sha512-t8fc4rHvzO9Yk8otP8LkTqWo6mzjdemooQcnHlDrNzrYAnwsSbVFIlthnkzK2pLsRnO9Ybmw4lXOYUx+fAIyJw==",
-      "dev": true
-    },
    "flush-write-stream": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.0.3.tgz",
@@ -24980,7 +24982,7 @@
      "dependencies": {
        "async": {
          "version": "1.5.2",
-          "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
          "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
          "dev": true
        }
@@ -58,6 +58,8 @@
  "license": "Apache-2.0",
  "dependencies": {
    "@coralproject/bunyan-prettystream": "^0.1.4",
+    "@fluent/bundle": "^0.14.0",
+    "@fluent/dom": "^0.6.0",
    "@metascraper/helpers": "^5.7.21",
    "@types/prettier": "^1.19.0",
    "abort-controller": "^3.0.0",
@@ -85,8 +87,6 @@
    "express": "^4.16.3",
    "express-enforces-ssl": "^1.1.0",
    "express-static-gzip": "^0.3.2",
-    "fluent": "^0.10.0",
-    "fluent-dom": "^0.4.1",
    "fs-extra": "^6.0.1",
    "graphql": "^0.13.2",
    "graphql-config": "^2.0.1",
@@ -152,6 +152,7 @@
    "@babel/preset-typescript": "^7.3.3",
    "@coralproject/npm-run-all": "^4.1.5",
    "@coralproject/rte": "^0.11.0",
+    "@fluent/react": "^0.10.0",
    "@intervolga/optimize-cssnano-plugin": "^1.0.6",
    "@types/agent-base": "^4.2.0",
    "@types/archiver": "^3.0.0",
@@ -286,8 +287,6 @@
    "final-form-arrays": "1.1.2",
    "flat": "^4.1.0",
    "fluent-intl-polyfill": "^0.1.0",
-    "fluent-langneg": "^0.1.1",
-    "fluent-react": "^0.8.4",
    "fork-ts-checker-webpack-plugin": "^1.5.0",
    "found": "^0.4.0-alpha.17",
    "found-relay": "^0.4.0-alpha.8",
@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
-import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";

 import { Flex, HorizontalGutter, Icon, Typography } from "coral-ui/components";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";

 import { Button, HorizontalGutter } from "coral-ui/components";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import { CallOut, Flex, Icon } from "coral-ui/components";
@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import { FORM_ERROR } from "final-form";
-import { Localized } from "fluent-react/compat";
 import React, { useCallback } from "react";
 import { Form } from "react-final-form";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React from "react";

 import { CallOut, HorizontalGutter, Typography } from "coral-ui/components";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React from "react";

 import { HorizontalGutter, Typography } from "coral-ui/components";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React from "react";

 import { CallOut, HorizontalGutter, Typography } from "coral-ui/components";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React from "react";

 import { HorizontalGutter, Typography } from "coral-ui/components";
@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import { FORM_ERROR } from "final-form";
-import { Localized } from "fluent-react/compat";
 import React, { useCallback } from "react";
 import { Form } from "react-final-form";

@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import { FORM_ERROR } from "final-form";
-import { Localized } from "fluent-react/compat";
 import React, { useCallback } from "react";
 import { Field, Form } from "react-final-form";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React from "react";

 import { CallOut, HorizontalGutter, Typography } from "coral-ui/components";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React from "react";

 import { HorizontalGutter, Typography } from "coral-ui/components";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import ApprovedIcon from "./ApprovedIcon";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import {
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import { Flex } from "coral-ui/components/v2";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import { Link } from "found";
 import React, { FunctionComponent } from "react";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import DecisionItem from "./DecisionItem";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import { BaseButton } from "coral-ui/components/v2";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import { Flex, Icon } from "coral-ui/components/v2";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import { AppBarNavigation } from "coral-ui/components/v2";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import {
@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
-import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";

 import { PropTypesOf } from "coral-framework/types";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
-import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";

 import { PropTypesOf } from "coral-framework/types";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import { BaseButton, Flex, Icon } from "coral-ui/components/v2";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";

 import { useUUID } from "coral-framework/hooks";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React from "react";
 import { graphql } from "react-relay";

@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
-import { Localized } from "fluent-react/compat";
 import key from "keymaster";
 import { noop } from "lodash";
 import React, {
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useState } from "react";
 import { graphql } from "react-relay";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { useCallback } from "react";
 import { graphql } from "react-relay";

@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
-import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";

 import { PropTypesOf } from "coral-framework/types";
@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
-import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";

 import { Counter } from "coral-ui/components/v2";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import styles from "./NotAvailable.css";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React from "react";

 import { GQLUSER_ROLE, GQLUSER_ROLE_RL } from "coral-framework/schema";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React from "react";

 import { GQLSTORY_STATUS, GQLSTORY_STATUS_RL } from "coral-framework/schema";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 export interface BanActionProps {
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useCallback } from "react";

 import { Button, ButtonIcon, Flex, Timestamp } from "coral-ui/components/v2";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 export interface PremodActionProps {
@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
-import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";

 import { reduceSeconds, UNIT } from "coral-common/helpers/i18n";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import { reduceSeconds } from "coral-common/helpers/i18n";
@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
-import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";

 import {
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useMemo } from "react";

 import { useCoralContext } from "coral-framework/lib/bootstrap";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";

@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import { FormApi } from "final-form";
-import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 import { Field, Form } from "react-final-form";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 import { graphql, RelayPaginationProp } from "react-relay";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import { UserStatusChangeContainer } from "coral-admin/components/UserStatus";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 import { graphql, RelayPaginationProp } from "react-relay";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useMemo } from "react";

 import { useCoralContext } from "coral-framework/lib/bootstrap";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import styles from "./UsernameChangeAction.css";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import TranslatedRole from "coral-admin/components/TranslatedRole";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useCallback, useMemo } from "react";
 import { Field, Form } from "react-final-form";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import NotAvailable from "coral-admin/components/NotAvailable";
@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import { Mutator } from "final-form";
-import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, RefObject, useCallback } from "react";
 import { Field, Form } from "react-final-form";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";

 import NotAvailable from "coral-admin/components/NotAvailable";
@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
-import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";

 import { Flex } from "coral-ui/components/v2";
@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
-import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";

 import {
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import { Message } from "coral-ui/components";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import AuthBox from "coral-admin/components/AuthBox";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import styles from "./EmptyMessage.css";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";

 import { Button, Modal } from "coral-ui/components/v2";
@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import { FORM_ERROR } from "final-form";
-import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";
 import { Form, FormSpy } from "react-final-form";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";

 import {
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import { Box, Button, CheckIcon, Flex } from "coral-ui/components";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useCallback } from "react";

 import NotAvailable from "coral-admin/components/NotAvailable";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";

 import AutoLoadMore from "coral-admin/components/AutoLoadMore";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { Field, Form } from "react-final-form";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import Subheader from "./Subheader";
@@ -1,6 +1,6 @@
+import { Localized } from "@fluent/react/compat";
 import { FormApi, FormState } from "final-form";
 import arrayMutators from "final-form-arrays";
-import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Form, FormSpy } from "react-final-form";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 import { graphql } from "react-relay";
@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import { stripIndent } from "common-tags";
-import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useMemo } from "react";

 import { CopyButton } from "coral-framework/components";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 import { graphql } from "react-relay";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 import { graphql } from "react-relay";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";

@@ -1,5 +1,5 @@
+import { Localized } from "@fluent/react/compat";
 import { FORM_ERROR, FormApi } from "final-form";
-import { Localized } from "fluent-react/compat";
 import { RouteProps } from "found";
 import React from "react";
 import { graphql } from "react-relay";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 import { graphql } from "react-relay";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import { CopyButton } from "coral-framework/components";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";

 import {
@@ -41,11 +41,16 @@ const SSOKeyField: FunctionComponent<Props> = ({
      showPasswordTitle="Hide SSO Key"
      fullWidth
    />
-    <Localized id="configure-auth-sso-regenerateAt" $date={keyGeneratedAt}>
-      <HelperText className={styles.keyGenerated}>
-        KEY GENERATED AT: {keyGeneratedAt}
-      </HelperText>
-    </Localized>
+    {keyGeneratedAt && (
+      <Localized
+        id="configure-auth-sso-regenerateAt"
+        $date={new Date(keyGeneratedAt)}
+      >
+        <HelperText className={styles.keyGenerated}>
+          KEY GENERATED AT: {keyGeneratedAt}
+        </HelperText>
+      </Localized>
+    )}
    <div className={styles.warningSection}>
      <Flex direction="row" itemGutter="half">
        <Icon className={styles.warnIcon}>warning</Icon>
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 import { graphql } from "react-relay";
@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";

@@ -1,4 +1,4 @@
-import { Localized } from "fluent-react/compat";
+import { Localized } from "@fluent/react/compat";
 import React, { useMemo } from "react";
 import { useForm } from "react-final-form";
 import { graphql } from "react-relay";
--- a/Show More
+++ b/Show More