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
+
+
+
+ 
+
+
+ 
+
+
+ 
+ You can now view the private channels in the Slack channel selection fields!
+ 
+
+
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)}
/>