diff --git a/docs/documentation/platform/workflow-integrations/slack-integration.mdx b/docs/documentation/platform/workflow-integrations/slack-integration.mdx index 18172a2a5..92b3feeca 100644 --- a/docs/documentation/platform/workflow-integrations/slack-integration.mdx +++ b/docs/documentation/platform/workflow-integrations/slack-integration.mdx @@ -5,9 +5,11 @@ description: "Learn how to setup Slack integration" This guide will provide step by step instructions on how to configure Slack integration for your Infisical projects. +## Setting up Slack integration in your projects + - ## Create Slack workflow integration + ### Create Slack workflow integration In order to use Slack integration in your projects, you will first have to @@ -32,7 +34,7 @@ This guide will provide step by step instructions on how to configure Slack inte - ## Configure project to use Slack workflow integration + ### Configure project to use Slack workflow integration @@ -56,7 +58,7 @@ This guide will provide step by step instructions on how to configure Slack inte - ## Configure admin settings + ### Configure admin settings Note that this step only has to be done once for the entire instance. @@ -90,7 +92,7 @@ This guide will provide step by step instructions on how to configure Slack inte - ## Create Slack workflow integration + ### Create Slack workflow integration @@ -116,7 +118,7 @@ This guide will provide step by step instructions on how to configure Slack inte - ## Configure project to use Slack workflow integration + ### Configure project to use Slack workflow integration @@ -140,3 +142,23 @@ This guide will provide step by step instructions on how to configure Slack inte + +## Using the Slack integration in your private channels + + + + ![private slack setup + menu](/images/platform/workflow-integrations/slack-integration/private-slack-setup-menu.png) + + + ![private slack setup + add](/images/platform/workflow-integrations/slack-integration/private-slack-setup-add.png) + + + ![private slack setup + form](/images/platform/workflow-integrations/slack-integration/private-slack-setup-form.png) + You can now view the private channels in the Slack channel selection fields! + ![private slack setup + channels](/images/platform/workflow-integrations/slack-integration/private-slack-setup-channel-field.png) + + diff --git a/docs/images/platform/workflow-integrations/slack-integration/private-slack-setup-add.png b/docs/images/platform/workflow-integrations/slack-integration/private-slack-setup-add.png new file mode 100644 index 000000000..1945313e8 Binary files /dev/null and b/docs/images/platform/workflow-integrations/slack-integration/private-slack-setup-add.png differ diff --git a/docs/images/platform/workflow-integrations/slack-integration/private-slack-setup-channel-field.png b/docs/images/platform/workflow-integrations/slack-integration/private-slack-setup-channel-field.png new file mode 100644 index 000000000..3f6bd0d1d Binary files /dev/null and b/docs/images/platform/workflow-integrations/slack-integration/private-slack-setup-channel-field.png differ diff --git a/docs/images/platform/workflow-integrations/slack-integration/private-slack-setup-form.png b/docs/images/platform/workflow-integrations/slack-integration/private-slack-setup-form.png new file mode 100644 index 000000000..7d5ac0560 Binary files /dev/null and b/docs/images/platform/workflow-integrations/slack-integration/private-slack-setup-form.png differ diff --git a/docs/images/platform/workflow-integrations/slack-integration/private-slack-setup-menu.png b/docs/images/platform/workflow-integrations/slack-integration/private-slack-setup-menu.png new file mode 100644 index 000000000..087f31483 Binary files /dev/null and b/docs/images/platform/workflow-integrations/slack-integration/private-slack-setup-menu.png differ diff --git a/frontend/src/views/admin/DashboardPage/IntegrationPanel.tsx b/frontend/src/views/admin/DashboardPage/IntegrationPanel.tsx index b07dde77e..9bb005ce4 100644 --- a/frontend/src/views/admin/DashboardPage/IntegrationPanel.tsx +++ b/frontend/src/views/admin/DashboardPage/IntegrationPanel.tsx @@ -5,6 +5,7 @@ import { z } from "zod"; import { createNotification } from "@app/components/notifications"; import { Button, FormControl, Input } from "@app/components/v2"; +import { useToggle } from "@app/hooks"; import { useGetAdminSlackConfig, useUpdateServerConfig } from "@app/hooks/api"; const slackFormSchema = z.object({ @@ -65,6 +66,8 @@ export const IntegrationPanel = () => { const { data: adminSlackConfig } = useGetAdminSlackConfig(); const { mutateAsync: updateAdminServerConfig } = useUpdateServerConfig(); + const [isSlackClientIdFocused, setIsSlackClientIdFocused] = useToggle(); + const [isSlackClientSecretFocused, setIsSlackClientSecretFocused] = useToggle(); useEffect(() => { if (adminSlackConfig) { @@ -120,6 +123,9 @@ export const IntegrationPanel = () => { setIsSlackClientIdFocused.on()} + onBlur={() => setIsSlackClientIdFocused.off()} onChange={(e) => field.onChange(e.target.value)} /> @@ -138,6 +144,9 @@ export const IntegrationPanel = () => { setIsSlackClientSecretFocused.on()} + onBlur={() => setIsSlackClientSecretFocused.off()} onChange={(e) => field.onChange(e.target.value)} />