+
+
+ {({ input }) => (
+
+ )}
+
+
+
+
+
+
+ }
+ name={`${channel}.enabled`}
+ disabled={disabled}
+ >
+ {(disabledInside: boolean) => (
+ <>
+
+
+ {({ input, meta }) => (
+ <>
+
+ Name
+
+
+
+ This is only for your information, to easily identify each
+ Slack connection. Slack does not tell us the name of the
+ channel/s you're connecting to Coral.
+
+
+
+
+ )}
+
+
+
+
+ {({ input, meta }) => (
+ <>
+
+ Webhook URL
+
+
+ }
+ >
+
+ Slack provides a channel-specific URL to activate webhook
+ connections. To find the URL for one of your Slack
+ channels, follow the instructions here.
+
+
+
+
+ )}
+
+
+
+
+
+ Receive notifications in this Slack channel for
+
+
+
+ {({ input: { value } }) => (
+ <>
+
+ {({ input }) => (
+
+ )}
+
+
+ {({ input }) => (
+
+ )}
+
+
+ {({ input }) => (
+
+ )}
+
+
+ {({ input }) => (
+
+ )}
+
+
+ )}
+
+
+
+ )}
+
+ );
+};
+
+export default SlackChannel;
diff --git a/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.css b/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.css
new file mode 100644
index 000000000..846f4d313
--- /dev/null
+++ b/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.css
@@ -0,0 +1,3 @@
+.icon {
+ padding-right: var(--spacing-2);
+}
diff --git a/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.tsx
new file mode 100644
index 000000000..ce558baad
--- /dev/null
+++ b/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.tsx
@@ -0,0 +1,162 @@
+import { FormApi } from "final-form";
+import { Localized } from "fluent-react/compat";
+import React, {
+ FunctionComponent,
+ useCallback,
+ useMemo,
+ useState,
+} from "react";
+import { FieldArray } from "react-final-form-arrays";
+
+import { pureMerge } from "coral-common/utils";
+import { ExternalLink } from "coral-framework/lib/i18n/components";
+import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
+import {
+ Button,
+ ButtonIcon,
+ FormFieldDescription,
+ HorizontalGutter,
+} from "coral-ui/components/v2";
+
+import { SlackConfigContainer_settings } from "coral-admin/__generated__/SlackConfigContainer_settings.graphql";
+
+import ConfigBox from "../../ConfigBox";
+import Header from "../../Header";
+import SlackChannel from "./SlackChannel";
+
+import styles from "./SlackConfigContainer.css";
+
+interface Props {
+ form: FormApi;
+ submitting: boolean;
+ settings: SlackConfigContainer_settings;
+}
+
+const SlackConfigContainer: FunctionComponent