[CORL-406] Tenant Locale Selection (#2450)

* feat: added preload config

* feat: support changing locale

* fix: name case

* fix: removed unused code

* feat: added translations for default reactions

* fix: do not translate icon

* fix: shorter i18n keys

src/core/client/admin/routes/Configure/ConfigureRoute.tsx

@@ -1,6 +1,7 @@
 import { FormApi, FormState } from "final-form";
 import React from "react";
 
+import { CoralContext, withContext } from "coral-framework/lib/bootstrap";
 import { SubmitHookHandler } from "coral-framework/lib/form";
 import { MutationProp, withMutation } from "coral-framework/lib/relay";
 
@@ -9,6 +10,7 @@ import NavigationWarningContainer from "./NavigationWarningContainer";
 import UpdateSettingsMutation from "./UpdateSettingsMutation";
 
 interface Props {
+  changeLocale: CoralContext["changeLocale"];
   updateSettings: MutationProp<typeof UpdateSettingsMutation>;
   children: React.ReactElement;
 }
@@ -27,6 +29,10 @@ class ConfigureRoute extends React.Component<Props, State> {
     form: FormApi
   ) => {
     await this.props.updateSettings({ settings: data });
+    const localeFieldState = form.getFieldState("locale");
+    if (localeFieldState && localeFieldState.dirty) {
+      await this.props.changeLocale(data.locale);
+    }
     form.initialize(data);
   };
 
@@ -52,6 +58,8 @@ class ConfigureRoute extends React.Component<Props, State> {
   }
 }
 
-const enhanced = withMutation(UpdateSettingsMutation)(ConfigureRoute);
+const enhanced = withContext(({ changeLocale }) => ({ changeLocale }))(
+  withMutation(UpdateSettingsMutation)(ConfigureRoute)
+);
 
 export default enhanced;

src/core/client/admin/routes/Configure/sections/General/GeneralConfig.tsx

@@ -8,6 +8,7 @@ import ClosingCommentStreamsConfigContainer from "./ClosingCommentStreamsConfigC
 import CommentEditingConfigContainer from "./CommentEditingConfigContainer";
 import CommentLengthConfigContainer from "./CommentLengthConfigContainer";
 import GuidelinesConfigContainer from "./GuidelinesConfigContainer";
+import LocaleConfigContainer from "./LocaleConfigContainer";
 import ReactionConfigContainer from "./ReactionConfigContainer";
 import SitewideCommentingConfigContainer from "./SitewideCommentingConfigContainer";
 
@@ -19,7 +20,8 @@ interface Props {
     PropTypesOf<typeof ClosedStreamMessageConfigContainer>["settings"] &
     PropTypesOf<typeof ReactionConfigContainer>["settings"] &
     PropTypesOf<typeof ClosingCommentStreamsConfigContainer>["settings"] &
-    PropTypesOf<typeof SitewideCommentingConfigContainer>["settings"];
+    PropTypesOf<typeof SitewideCommentingConfigContainer>["settings"] &
+    PropTypesOf<typeof LocaleConfigContainer>["settings"];
   onInitValues: (values: any) => void;
 }
 
@@ -29,6 +31,11 @@ const General: FunctionComponent<Props> = ({
   onInitValues,
 }) => (
   <HorizontalGutter size="double" data-testid="configure-generalContainer">
+    <LocaleConfigContainer
+      disabled={disabled}
+      settings={settings}
+      onInitValues={onInitValues}
+    />
     <SitewideCommentingConfigContainer
       disabled={disabled}
       settings={settings}

src/core/client/admin/routes/Configure/sections/General/GeneralConfigContainer.tsx

@@ -45,6 +45,7 @@ class GeneralConfigContainer extends React.Component<Props> {
 const enhanced = withFragmentContainer<Props>({
   settings: graphql`
     fragment GeneralConfigContainer_settings on Settings {
+      ...LocaleConfigContainer_settings
       ...GuidelinesConfigContainer_settings
       ...CommentLengthConfigContainer_settings
       ...CommentEditingConfigContainer_settings

src/core/client/admin/routes/Configure/sections/General/LocaleConfigContainer.tsx

@@ -0,0 +1,64 @@
+import { Localized } from "fluent-react/compat";
+import React, { useMemo } from "react";
+import { Field } from "react-final-form";
+import { graphql } from "react-relay";
+
+import { LocaleConfigContainer_settings } from "coral-admin/__generated__/LocaleConfigContainer_settings.graphql";
+import { LocaleField } from "coral-framework/components";
+import { withFragmentContainer } from "coral-framework/lib/relay";
+import { required } from "coral-framework/lib/validation";
+import { FormField, HorizontalGutter, Typography } from "coral-ui/components";
+
+import Header from "../../Header";
+import ValidationMessage from "../../ValidationMessage";
+
+interface Props {
+  settings: LocaleConfigContainer_settings;
+  onInitValues: (values: LocaleConfigContainer_settings) => void;
+  disabled: boolean;
+}
+
+const LocaleConfigContainer: React.FunctionComponent<Props> = props => {
+  useMemo(() => props.onInitValues(props.settings), [props.onInitValues]);
+  return (
+    <FormField>
+      <HorizontalGutter size="full">
+        <Localized id="configure-general-locale-language">
+          <Header container={<label htmlFor="configure-locale-locale" />}>
+            Language
+          </Header>
+        </Localized>
+        <Localized
+          id="configure-general-locale-chooseLanguage"
+          strong={<strong />}
+        >
+          <Typography variant="detail">
+            Choose the language for your Coral community.
+          </Typography>
+        </Localized>
+        <Field name="locale" validate={required}>
+          {({ input, meta }) => (
+            <>
+              <LocaleField
+                id={`configure-locale-${input.name}`}
+                disabled={props.disabled}
+                {...input}
+              />
+              <ValidationMessage meta={meta} fullWidth />
+            </>
+          )}
+        </Field>
+      </HorizontalGutter>
+    </FormField>
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  settings: graphql`
+    fragment LocaleConfigContainer_settings on Settings {
+      locale
+    }
+  `,
+})(LocaleConfigContainer);
+
+export default enhanced;