From ec93789cff3135d7cca9f33f426887504b6fd12d Mon Sep 17 00:00:00 2001 From: Nick Funk Date: Mon, 9 Dec 2019 14:29:57 -0700 Subject: [PATCH] [CORL-645] Resolve mismanaged branch merging (#2746) * Create preliminary schema for setting Slack channels CORL-645 * Implement preliminary slack notification using tenant slack channels CORL-645 * Very preliminarily get data loading with FieldArray's for slack channels CORL-645 * Update settings input on schema to allow saving Slack settings to tenant CORL-645 * Filter off UNMODERATED queue events from slack channels We don't send these to slack through our filters, we only care about pending, reported, and featured CORL-645 * Include a moderation link in comments pushed to Slack CORL-645 * Hook up proper callback functions for adding/removing slack channels CORL-645 * Add missing translation for Slack navigation item CORL-645 * Update snapshots for preliminary Slack configuration changes CORL-645 * Add some FormField wrappers around slack config elements Makes the UI appear a little nicer CORL-645 * Set up slack config to only provide one slack channel We need to do this until we can get ArrayField's working in final-form. CORL-645 * Disable the other trigger checkboxes when "All Comments" is checked CORL-645 * Clean up the formatting of Slack messages CORL-645 * Add error handling around sending comments to Slack CORL-645 * Add links to external Slack setup documentation CORL-645 * Replace form state with wrapped field element CORL-645 * Clean up fetch request sending Slack notifications CORL-645 * Prefer global string replacement over RegEx CORL-645 * Use URL class to construct comment URL's CORL-645 * Require slack configuration in schema CORL-645 * Initialize Slack in fixtures Also fix up a flaky test that wasn't waiting on form submission and on-change events. CORL-645 * Preliminarily fix up styles to match other config pages CORL-645 * Create placeholder add/remove buttons * Convert SlackConfigContainer to FunctionalComponent CORL-645 * Add name field to slack channels CORL-645 * Disable inner fields on Slack channel when not enabled CORL-645 * Improve the delete channel button CORL-645 * Use pureMerge to extract slack channel settings CORL-645 * Do a bit of cleanup on the add channel button CORL-645 * Update the styling of the Slack config - Use sub header for channel headings - Update add channel button text - Move the remove channel button down - Other minor spacing tweaks CORL-645 --- package-lock.json | 2 +- .../Configure/sections/Slack/SlackChannel.css | 43 +- .../Configure/sections/Slack/SlackChannel.tsx | 403 ++++++++++-------- .../sections/Slack/SlackConfigContainer.css | 5 + .../sections/Slack/SlackConfigContainer.tsx | 4 +- src/locales/en-US/admin.ftl | 5 +- 6 files changed, 255 insertions(+), 207 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5a9a48199..f016035fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24980,7 +24980,7 @@ "dependencies": { "async": { "version": "1.5.2", - "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", + "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz", "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=", "dev": true } diff --git a/src/core/client/admin/routes/Configure/sections/Slack/SlackChannel.css b/src/core/client/admin/routes/Configure/sections/Slack/SlackChannel.css index 6d335ada8..f948feff5 100644 --- a/src/core/client/admin/routes/Configure/sections/Slack/SlackChannel.css +++ b/src/core/client/admin/routes/Configure/sections/Slack/SlackChannel.css @@ -1,28 +1,41 @@ -.header { - flex: 1; -} - .description { - padding-bottom: var(--spacing-1); + padding-bottom: var(--v2-spacing-1); } -.channelName { - margin-right: var(--spacing-2); +.enabledCheckbox { + margin-right: var(--v2-spacing-1); } .trigger { - padding-left: var(--spacing-1); + padding-left: var(--v2-spacing-1); + padding-bottom: var(--v2-spacing-2); +} + +.button { + padding-top: var(--v2-spacing-1); + padding-bottom: var(--v2-spacing-1); } .removeButton { - padding-top: 0px; - padding-bottom: 0px; - - margin-bottom: 2px; - - float: right; + margin-bottom: var(--v2-spacing-1); } .buttonIcon { - padding-right: var(--spacing-1); + padding-right: var(--v2-spacing-1); +} + +.content { + padding: var(--v2-spacing-3) var(--v2-spacing-2) 0 var(--v2-spacing-2); +} + +.textField { + padding-bottom: var(--v2-spacing-4); +} + +.notificationsLabel { + padding-bottom: var(--v2-spacing-1); +} + +.notificationToggles { + padding-bottom: var(--v2-spacing-3); } diff --git a/src/core/client/admin/routes/Configure/sections/Slack/SlackChannel.tsx b/src/core/client/admin/routes/Configure/sections/Slack/SlackChannel.tsx index fd263d089..e3bff0b79 100644 --- a/src/core/client/admin/routes/Configure/sections/Slack/SlackChannel.tsx +++ b/src/core/client/admin/routes/Configure/sections/Slack/SlackChannel.tsx @@ -1,21 +1,22 @@ +import cn from "classnames"; import { Localized } from "fluent-react/compat"; import React, { FunctionComponent, useCallback } from "react"; import { Field } from "react-final-form"; import { parseBool } from "coral-framework/lib/form"; import { ExternalLink } from "coral-framework/lib/i18n/components"; -import { InputDescription, InputLabel } from "coral-ui/components"; import { + Box, Button, - ButtonIcon, CheckBox, Flex, FormField, + FormFieldDescription, + Label, TextField, } from "coral-ui/components/v2"; -import Header from "../../Header"; -import ConfigBoxWithToggleField from "../Auth/ConfigBoxWithToggleField"; +import Subheader from "../../Subheader"; import styles from "./SlackChannel.css"; @@ -37,193 +38,221 @@ const SlackChannel: FunctionComponent = ({ }, [index, onRemoveClicked]); return ( - -
- - {({ input }) => ( -
{input.value}
- )} - -
-
- -
- - } - name={`${channel}.enabled`} - disabled={disabled} - > - {(disabledInside: boolean) => ( - <> - - - {({ input, meta }) => ( - <> - - Name + <> + + {({ input }) => ( + + +
+ {input.value ? ( + input.value + ) : ( + + New channel - - - 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: enabledInput }) => ( + - - All Comments - + Enabled - )} - - - {({ input }) => ( - - - Reported Comments - - - )} - - - {({ input }) => ( - - - Pending Comments - - - )} - - - {({ input }) => ( - - - Featured Comments - - - )} - - - )} - - - - )} - + + )} + +
+ + + )} + + + {({ input: { value: channelEnabled } }) => ( + + + + {({ input }) => ( + <> + + + + + + 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 }) => ( + <> + + + + + } + > + + Slack provides a channel-specific URL to activate + webhook connections. To find the URL for one of your + Slack channels, follow the instructions here. + + + + + )} + + + +
+ + + +
+ + {({ input: { value: allCommentsValue } }) => ( +
+ + {({ input }) => ( + + + All Comments + + + )} + + + {({ input }) => ( + + + Reported Comments + + + )} + + + {({ input }) => ( + + + Pending Comments + + + )} + + + {({ input }) => ( + + + Featured Comments + + + )} + +
+ )} + + +
+ +
+ + )} + + ); }; diff --git a/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.css b/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.css index 846f4d313..feeac7b15 100644 --- a/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.css +++ b/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.css @@ -1,3 +1,8 @@ .icon { padding-right: var(--spacing-2); } + +.button { + padding-top: var(--v2-spacing-1); + padding-bottom: var(--v2-spacing-1); +} diff --git a/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.tsx index ce558baad..ff4910218 100644 --- a/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.tsx +++ b/src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.tsx @@ -112,13 +112,13 @@ const SlackConfigContainer: FunctionComponent = ({ form, settings }) => { {({ fields }) => diff --git a/src/locales/en-US/admin.ftl b/src/locales/en-US/admin.ftl index b74c1b14c..c33392c8c 100644 --- a/src/locales/en-US/admin.ftl +++ b/src/locales/en-US/admin.ftl @@ -388,10 +388,11 @@ configure-slack-description = Automatically send comments from Coral moderation queues to Slack channels. You will need Slack admin access to set this up. For steps on how to create a Slack App see our documentation. -configure-slack-addChannel = Add +configure-slack-addChannel = Add Channel +configure-slack-channel-defaultName = New channel configure-slack-channel-enabled = Enabled -configure-slack-channel-remove = Remove +configure-slack-channel-remove = Remove Channel configure-slack-channel-name-label = Name configure-slack-channel-name-description = This is only for your information, to easily identify