allow organization url config (#2531)

src/core/client/admin/routes/Configure/sections/Organization/OrganizationConfig.tsx

@@ -5,11 +5,13 @@ import { HorizontalGutter } from "coral-ui/components";
 
 import OrganizationContactEmailConfigContainer from "./OrganizationContactEmailConfigContainer";
 import OrganizationNameConfigContainer from "./OrganizationNameConfigContainer";
+import OrganizationURLConfigContainer from "./OrganizationURLConfigContainer";
 
 interface Props {
   disabled: boolean;
   settings: PropTypesOf<typeof OrganizationNameConfigContainer>["settings"] &
-    PropTypesOf<typeof OrganizationContactEmailConfigContainer>["settings"];
+    PropTypesOf<typeof OrganizationContactEmailConfigContainer>["settings"] &
+    PropTypesOf<typeof OrganizationURLConfigContainer>["settings"];
   onInitValues: (values: any) => void;
 }
 
@@ -29,6 +31,11 @@ const OrganizationConfig: FunctionComponent<Props> = ({
       settings={settings}
       onInitValues={onInitValues}
     />
+    <OrganizationURLConfigContainer
+      disabled={disabled}
+      settings={settings}
+      onInitValues={onInitValues}
+    />
   </HorizontalGutter>
 );
 

src/core/client/admin/routes/Configure/sections/Organization/OrganizationConfigContainer.tsx

@@ -47,6 +47,7 @@ const enhanced = withFragmentContainer<Props>({
     fragment OrganizationConfigContainer_settings on Settings {
       ...OrganizationNameConfigContainer_settings
       ...OrganizationContactEmailConfigContainer_settings
+      ...OrganizationURLConfigContainer_settings
     }
   `,
 })(OrganizationConfigContainer);

src/core/client/admin/routes/Configure/sections/Organization/OrganizationURLConfig.tsx

@@ -0,0 +1,63 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+import { Field } from "react-final-form";
+
+import {
+  composeValidators,
+  required,
+  validateURL,
+} from "coral-framework/lib/validation";
+import {
+  FormField,
+  HorizontalGutter,
+  TextField,
+  Typography,
+} from "coral-ui/components";
+
+import Header from "../../Header";
+import ValidationMessage from "../../ValidationMessage";
+
+interface Props {
+  disabled: boolean;
+}
+
+const OrganizationURLConfig: FunctionComponent<Props> = ({ disabled }) => (
+  <FormField>
+    <HorizontalGutter size="full">
+      <Localized id="configure-organization-url">
+        <Header
+          container={
+            <label htmlFor="configure-organization-organization.url" />
+          }
+        >
+          Organization URL
+        </Header>
+      </Localized>
+      <Localized id="configure-organization-urlExplanation" strong={<strong />}>
+        <Typography variant="detail">This URL will be used</Typography>
+      </Localized>
+      <Field
+        name="organization.url"
+        validate={composeValidators(required, validateURL)}
+      >
+        {({ input, meta }) => (
+          <>
+            <TextField
+              id={`configure-organization-${input.name}`}
+              disabled={disabled}
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck={false}
+              fullWidth
+              {...input}
+            />
+            <ValidationMessage fullWidth meta={meta} />
+          </>
+        )}
+      </Field>
+    </HorizontalGutter>
+  </FormField>
+);
+
+export default OrganizationURLConfig;

src/core/client/admin/routes/Configure/sections/Organization/OrganizationURLConfigContainer.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { graphql } from "react-relay";
+
+import { OrganizationURLConfigContainer_settings as SettingsData } from "coral-admin/__generated__/OrganizationURLConfigContainer_settings.graphql";
+import { withFragmentContainer } from "coral-framework/lib/relay";
+
+import OrganizationURLConfig from "./OrganizationURLConfig";
+
+interface Props {
+  settings: SettingsData;
+  onInitValues: (values: SettingsData) => void;
+  disabled: boolean;
+}
+
+class OrganizationURLConfigContainer extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+    props.onInitValues(props.settings);
+  }
+
+  public render() {
+    const { disabled } = this.props;
+    return <OrganizationURLConfig disabled={disabled} />;
+  }
+}
+
+const enhanced = withFragmentContainer<Props>({
+  settings: graphql`
+    fragment OrganizationURLConfigContainer_settings on Settings {
+      organization {
+        url
+      }
+    }
+  `,
+})(OrganizationURLConfigContainer);
+
+export default enhanced;

src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap

@@ -199,6 +199,45 @@ status of their accounts or moderation questions.
               </div>
             </div>
           </div>
+          <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-organization-organization.url"
+              >
+                Organization URL
+              </label>
+              <p
+                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
+              >
+                Your organization url will appear on emails sent by Coral to your community and organization members.
+              </p>
+              <div
+                className="TextField-root TextField-fullWidth"
+              >
+                <input
+                  autoCapitalize="off"
+                  autoComplete="off"
+                  autoCorrect="off"
+                  className="TextField-input TextField-colorRegular"
+                  disabled={false}
+                  id="configure-organization-organization.url"
+                  name="organization.url"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  placeholder=""
+                  spellCheck={false}
+                  type="text"
+                  value="https://test.com/"
+                />
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/locales/en-US/admin.ftl

@@ -155,6 +155,9 @@ configure-organization-emailExplanation =
   the platform for community members to get in touch with
   the organization should they have any questions about the
   status of their accounts or moderation questions.
+configure-organization-url = Organization URL
+configure-organization-urlExplanation =
+  Your organization url will appear on emails sent by { -product-name } to your community and organization members.
 
 ### Email