Merge pull request #2410 from Infisical/misc/slack-integration-doc-and-ui-updates

misc: added cloud users guide for slack and channel dropdown fix

docs/documentation/platform/workflow-integrations/slack-integration.mdx

@@ -6,6 +6,55 @@ 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.
 
 <Tabs>
+  <Tab title="Infisical Cloud">
+    ## 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
+        configure a Slack workflow integration in your organization.
+        ![org-slack-overview](/images/platform/workflow-integrations/slack-integration/org-slack-integration-overview.png)
+      </Step>
+      <Step title="Install Slack app to workspace">
+        Press "Add" and select "Slack" as the platform.
+        ![org-slack-initial-add](/images/platform/workflow-integrations/slack-integration/org-slack-integration-initial-add.png)
+
+        Give your Slack integration a descriptive alias. You will use this to select the Slack integration for your project.
+        ![org-slack-add-form](/images/platform/workflow-integrations/slack-integration/org-slack-integration-add-form.png)
+
+        Press **Connect Slack**. This opens up the Slack app installation flow. Select the Slack workspace you want to install the custom Slack app to and press **Allow**.
+        ![org-slack-authenticate](/images/platform/workflow-integrations/slack-integration/cloud-org-slack-integration-authenticate.png)
+
+        This completes the workflow integration creation flow. The projects in your organization can now use this Slack integration to send real-time updates to your Slack workspace.
+        ![org-slack-workspace](/images/platform/workflow-integrations/slack-integration/cloud-org-slack-integration-workspace.png)
+        ![org-slack-created](/images/platform/workflow-integrations/slack-integration/org-slack-integration-created.png)
+
+      </Step>
+
+    </Steps>
+
+    ## Configure project to use Slack workflow integration
+
+    <Steps>
+      <Step title="Navigate to the Workflow Integrations tab in the project settings">
+        ![project-slack-overview](/images/platform/workflow-integrations/slack-integration/project-slack-integration-overview.png)
+      </Step>
+      <Step title="Select the Slack integration to use for the project">
+        Your project will send notifications to the connected Slack workspace of the
+        selected Slack integration when the configured events are triggered.
+        ![project-slack-select](/images/platform/workflow-integrations/slack-integration/project-slack-integration-select.png)
+      </Step>
+      <Step title="Configure the Slack notification settings for the project and click Save.">
+        ![project-slack-select](/images/platform/workflow-integrations/slack-integration/project-slack-integration-config.png)
+        <Info>
+          To enable notifications in private Slack channels, you need to invite the Infisical Slack bot to join those channels.
+        </Info>
+        You now have a working native integration with Slack!
+
+      </Step>
+
+    </Steps>
+
+  </Tab>
   <Tab title="Self-hosted setup">
     ## Configure admin settings
     Note that this step only has to be done once for the entire instance.
@@ -41,7 +90,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">
@@ -67,26 +116,27 @@ 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>
+    <Steps>
-  <Step title="Navigate to the Workflow Integrations tab in the project settings">
+      <Step title="Navigate to the Workflow Integrations tab in the project settings">
-    ![project-slack-overview](/images/platform/workflow-integrations/slack-integration/project-slack-integration-overview.png)
+        ![project-slack-overview](/images/platform/workflow-integrations/slack-integration/project-slack-integration-overview.png)
-  </Step>
+      </Step>
-  <Step title="Select the Slack integration to use for the project">
+      <Step title="Select the Slack integration to use for the project">
-    Your project will send notifications to the connected Slack workspace of the
+        Your project will send notifications to the connected Slack workspace of the
-    selected Slack integration when the configured events are triggered.
+        selected Slack integration when the configured events are triggered.
-    ![project-slack-select](/images/platform/workflow-integrations/slack-integration/project-slack-integration-select.png)
+        ![project-slack-select](/images/platform/workflow-integrations/slack-integration/project-slack-integration-select.png)
-  </Step>
+      </Step>
-  <Step title="Configure the Slack notification settings for the project and click Save.">
+      <Step title="Configure the Slack notification settings for the project and click Save.">
-    ![project-slack-select](/images/platform/workflow-integrations/slack-integration/project-slack-integration-config.png)
+        ![project-slack-select](/images/platform/workflow-integrations/slack-integration/project-slack-integration-config.png)
-    <Info>
+        <Info>
-      To enable notifications in private Slack channels, you need to invite your Slack bot to join those channels.
+          To enable notifications in private Slack channels, you need to invite your Slack bot to join those channels.
-    </Info>
+        </Info>
-    You now have a working native integration with Slack!
+        You now have a working native integration with Slack!
 
-  </Step>
+      </Step>
-</Steps>
+
+    </Steps>
 
   </Tab>
 </Tabs>

frontend/src/views/Settings/ProjectSettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx

@@ -222,7 +222,12 @@ export const WorkflowIntegrationTab = () => {
                         />
                       </DropdownMenuTrigger>
                       <DropdownMenuContent
-                        style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
+                        style={{
+                          width: "var(--radix-dropdown-menu-trigger-width)",
+                          maxHeight: "350px",
+                          overflowY: "auto"
+                        }}
+                        side="bottom"
                         align="start"
                       >
                         {sortedSlackChannels?.map((slackChannel) => {
@@ -290,7 +295,12 @@ export const WorkflowIntegrationTab = () => {
                         />
                       </DropdownMenuTrigger>
                       <DropdownMenuContent
-                        style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
+                        style={{
+                          width: "var(--radix-dropdown-menu-trigger-width)",
+                          maxHeight: "350px",
+                          overflowY: "auto"
+                        }}
+                        side="bottom"
                         align="start"
                       >
                         {sortedSlackChannels?.map((slackChannel) => {