[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/test/configure/__snapshots__/general.spec.tsx.snap

@@ -118,6 +118,81 @@ exports[`renders configure general 1`] = `
           className="Box-root HorizontalGutter-root HorizontalGutter-double"
           data-testid="configure-generalContainer"
         >
+          <div
+            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+          >
+            <div
+              className="Box-root HorizontalGutter-root HorizontalGutter-full"
+            >
+              <label
+                className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
+                htmlFor="configure-locale-locale"
+              >
+                Language
+              </label>
+              <p
+                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
+              >
+                Choose the language for your Coral community.
+              </p>
+              <span
+                className="SelectField-root"
+              >
+                <select
+                  className="SelectField-select"
+                  disabled={false}
+                  id="configure-locale-locale"
+                  name="locale"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  value="en-US"
+                >
+                  <option
+                    value="en-US"
+                  >
+                    English
+                  </option>
+                  <option
+                    value="pt-BR"
+                  >
+                    Português brasileiro
+                  </option>
+                  <option
+                    value="es"
+                  >
+                    Español
+                  </option>
+                  <option
+                    value="de"
+                  >
+                    Deutsch
+                  </option>
+                  <option
+                    value="nl-NL"
+                  >
+                    Nederlands
+                  </option>
+                  <option
+                    value="da"
+                  >
+                    Dansk
+                  </option>
+                </select>
+                <span
+                  aria-hidden={true}
+                  className="SelectField-afterWrapper"
+                >
+                  <i
+                    aria-hidden="true"
+                    className="Icon-root Icon-sm"
+                  >
+                    expand_more
+                  </i>
+                </span>
+              </span>
+            </div>
+          </div>
           <fieldset
             className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
           >

src/core/client/admin/test/configure/general.spec.tsx

@@ -1,3 +1,5 @@
+import { SinonStub } from "sinon";
+
 import { ERROR_CODES } from "coral-common/errors";
 import { pureMerge } from "coral-common/utils";
 import { InvalidRequestError } from "coral-framework/lib/errors";
@@ -63,6 +65,48 @@ it("renders configure general", async () => {
   expect(within(configureContainer).toJSON()).toMatchSnapshot();
 });
 
+it("change language", async () => {
+  const resolvers = createResolversStub<GQLResolver>({
+    Mutation: {
+      updateSettings: ({ variables }) => {
+        expectAndFail(variables.settings.locale).toEqual("es");
+        return {
+          settings: pureMerge(settings, variables.settings),
+        };
+      },
+    },
+  });
+  const {
+    context: { changeLocale },
+    configureContainer,
+    generalContainer,
+    saveChangesButton,
+  } = await createTestRenderer({ resolvers });
+
+  const languageField = within(generalContainer).getByLabelText("Language");
+
+  // Let's change the language.
+  languageField.props.onChange("es");
+
+  // Send form
+  within(configureContainer)
+    .getByType("form")
+    .props.onSubmit();
+
+  // Submit button and text field should be disabled.
+  expect(saveChangesButton.props.disabled).toBe(true);
+
+  // Wait for submission to be finished
+  await wait(() => {
+    expect(resolvers.Mutation!.updateSettings!.called).toBe(true);
+  });
+
+  // Wait for client to change language.
+  await wait(() => {
+    expect((changeLocale as SinonStub).called).toBe(true);
+  });
+});
+
 it("change site wide commenting", async () => {
   const resolvers = createResolversStub<GQLResolver>({
     Mutation: {

src/core/client/admin/test/fixtures.ts

@@ -24,6 +24,7 @@ export const settings = createFixture<GQLSettings>({
   id: "settings",
   moderation: GQLMODERATION_MODE.POST,
   premodLinksEnable: false,
+  locale: "en-US",
   live: {
     enabled: true,
     configurable: true,