Merge pull request #2453 from Infisical/misc/slack-doc-and-admin-page-updates

misc: updates to admin slack integration page and docs

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
+
 <Tabs>
   <Tab title="Infisical Cloud">
-    ## Create Slack workflow integration
+    ### Create Slack workflow integration
     <Steps>
       <Step title="Navigate to the Workflow Integrations tab in your organization settings">
         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
 
     </Steps>
 
-    ## Configure project to use Slack workflow integration
+    ### Configure project to use Slack workflow integration
 
     <Steps>
       <Step title="Navigate to the Workflow Integrations tab in the project settings">
@@ -56,7 +58,7 @@ This guide will provide step by step instructions on how to configure Slack inte
 
   </Tab>
   <Tab title="Self-hosted setup">
-    ## Configure admin settings
+    ### Configure admin settings
     Note that this step only has to be done once for the entire instance.
 
     <Steps>
@@ -90,7 +92,7 @@ This guide will provide step by step instructions on how to configure Slack inte
 
     </Steps>
 
-    ## Create Slack workflow integration
+    ### Create Slack workflow integration
 
     <Steps>
       <Step title="Navigate to the Workflow Integrations tab in your organization settings">
@@ -116,7 +118,7 @@ This guide will provide step by step instructions on how to configure Slack inte
 
     </Steps>
 
-    ## Configure project to use Slack workflow integration
+    ### Configure project to use Slack workflow integration
 
     <Steps>
       <Step title="Navigate to the Workflow Integrations tab in the project settings">
@@ -140,3 +142,23 @@ This guide will provide step by step instructions on how to configure Slack inte
 
   </Tab>
 </Tabs>
+
+## Using the Slack integration in your private channels
+
+<Steps>
+  <Step title="In the Apps section on Slack, find the Infisical app and view the app details">
+    ![private slack setup
+    menu](/images/platform/workflow-integrations/slack-integration/private-slack-setup-menu.png)
+  </Step>
+  <Step title="Select Add this app to a channel">
+    ![private slack setup
+    add](/images/platform/workflow-integrations/slack-integration/private-slack-setup-add.png)
+  </Step>
+  <Step title="Find the private channel you want to setup notifications for and press Add">
+    ![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)
+  </Step>
+</Steps>

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 = () => {
               <Input
                 {...field}
                 value={field.value || ""}
+                type={isSlackClientIdFocused ? "text" : "password"}
+                onFocus={() => setIsSlackClientIdFocused.on()}
+                onBlur={() => setIsSlackClientIdFocused.off()}
                 onChange={(e) => field.onChange(e.target.value)}
               />
             </FormControl>
@@ -138,6 +144,9 @@ export const IntegrationPanel = () => {
               <Input
                 {...field}
                 value={field.value || ""}
+                type={isSlackClientSecretFocused ? "text" : "password"}
+                onFocus={() => setIsSlackClientSecretFocused.on()}
+                onBlur={() => setIsSlackClientSecretFocused.off()}
                 onChange={(e) => field.onChange(e.target.value)}
               />
             </FormControl>