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;