From 37383968f65889f4434097b6c245b3a411ac3522 Mon Sep 17 00:00:00 2001
From: Ben White <ben@posthog.com>
Date: Thu, 20 Jun 2024 12:35:54 +0200
Subject: [PATCH] Move things around

---
 .../integrations/SlackIntegrationHelpers.tsx  | 34 +++++++++++++-
 .../HogFunctionInputIntegration.tsx           | 31 +------------
 .../settings/project/SlackIntegration.tsx     | 45 ++++++-------------
 3 files changed, 49 insertions(+), 61 deletions(-)

diff --git a/frontend/src/lib/integrations/SlackIntegrationHelpers.tsx b/frontend/src/lib/integrations/SlackIntegrationHelpers.tsx
index 31f1f9ab9d546..43864b07ed37f 100644
--- a/frontend/src/lib/integrations/SlackIntegrationHelpers.tsx
+++ b/frontend/src/lib/integrations/SlackIntegrationHelpers.tsx
@@ -1,6 +1,7 @@
 import { LemonBanner, LemonButton, LemonInputSelect, LemonInputSelectOption, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { IconSlackExternal } from 'lib/lemon-ui/icons'
+import { UserActivityIndicator } from 'lib/components/UserActivityIndicator/UserActivityIndicator'
+import { IconSlack, IconSlackExternal } from 'lib/lemon-ui/icons'
 import { useMemo } from 'react'
 
 import { IntegrationType, SlackChannelType } from '~/types'
@@ -82,3 +83,34 @@ export function SlackChannelPicker({ onChange, value, integration, disabled }: S
         </>
     )
 }
+
+export function SlackIntegrationView({
+    integration,
+    suffix,
+}: {
+    integration: IntegrationType
+    suffix?: JSX.Element
+}): JSX.Element {
+    return (
+        <div className="rounded border flex justify-between items-center p-2 bg-bg-light">
+            <div className="flex items-center gap-4 ml-2">
+                <IconSlack className="text-2xl" />
+                <div>
+                    <div>
+                        Connected to <strong>{integration.config.team.name}</strong> workspace
+                    </div>
+                    {integration.created_by ? (
+                        <UserActivityIndicator
+                            at={integration.created_at}
+                            by={integration.created_by}
+                            prefix="Updated"
+                            className="text-muted"
+                        />
+                    ) : null}
+                </div>
+            </div>
+
+            {suffix}
+        </div>
+    )
+}
diff --git a/frontend/src/scenes/pipeline/hogfunctions/integrations/HogFunctionInputIntegration.tsx b/frontend/src/scenes/pipeline/hogfunctions/integrations/HogFunctionInputIntegration.tsx
index e581edd1695b9..cf234b6b2a03a 100644
--- a/frontend/src/scenes/pipeline/hogfunctions/integrations/HogFunctionInputIntegration.tsx
+++ b/frontend/src/scenes/pipeline/hogfunctions/integrations/HogFunctionInputIntegration.tsx
@@ -1,7 +1,7 @@
 import { LemonButton, LemonMenu, LemonSkeleton } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
-import { UserActivityIndicator } from 'lib/components/UserActivityIndicator/UserActivityIndicator'
 import { integrationsLogic } from 'lib/integrations/integrationsLogic'
+import { SlackIntegrationView } from 'lib/integrations/SlackIntegrationHelpers'
 import { IconSlack } from 'lib/lemon-ui/icons'
 
 import { HogFunctionInputSchemaType } from '~/types'
@@ -60,32 +60,5 @@ export function HogFunctionIntegrationSlackConnection({
         </LemonMenu>
     )
 
-    return (
-        <>
-            {integration ? (
-                <div className="rounded border flex justify-between items-center p-2 bg-bg-light">
-                    <div className="flex items-center gap-4 ml-2">
-                        <IconSlack className="text-2xl" />
-                        <div>
-                            <div>
-                                Connected to <strong>{integration.config.team.name}</strong> workspace
-                            </div>
-                            {integration.created_by ? (
-                                <UserActivityIndicator
-                                    at={integration.created_at}
-                                    by={integration.created_by}
-                                    prefix="Updated"
-                                    className="text-muted"
-                                />
-                            ) : null}
-                        </div>
-                    </div>
-
-                    {button}
-                </div>
-            ) : (
-                button
-            )}
-        </>
-    )
+    return <>{integration ? <SlackIntegrationView integration={integration} suffix={button} /> : button}</>
 }
diff --git a/frontend/src/scenes/settings/project/SlackIntegration.tsx b/frontend/src/scenes/settings/project/SlackIntegration.tsx
index 9fd89cc630abc..31297bbd689ba 100644
--- a/frontend/src/scenes/settings/project/SlackIntegration.tsx
+++ b/frontend/src/scenes/settings/project/SlackIntegration.tsx
@@ -2,9 +2,8 @@ import { IconTrash } from '@posthog/icons'
 import { LemonButton, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { CodeSnippet, Language } from 'lib/components/CodeSnippet'
-import { UserActivityIndicator } from 'lib/components/UserActivityIndicator/UserActivityIndicator'
 import { getSlackAppManifest, integrationsLogic } from 'lib/integrations/integrationsLogic'
-import { IconSlack } from 'lib/lemon-ui/icons'
+import { SlackIntegrationView } from 'lib/integrations/SlackIntegrationHelpers'
 import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
 import { useState } from 'react'
 import { urls } from 'scenes/urls'
@@ -50,36 +49,20 @@ export function SlackIntegration(): JSX.Element {
 
             <div className="space-y-2">
                 {slackIntegrations?.map((integration) => (
-                    <div
+                    <SlackIntegrationView
                         key={integration.id}
-                        className="rounded border flex justify-between items-center p-2 bg-bg-light"
-                    >
-                        <div className="flex items-center gap-4 ml-2">
-                            <IconSlack className="text-2xl" />
-                            <div>
-                                <div>
-                                    Connected to <strong>{integration.config.team.name}</strong> workspace
-                                </div>
-                                {integration.created_by ? (
-                                    <UserActivityIndicator
-                                        at={integration.created_at}
-                                        by={integration.created_by}
-                                        prefix="Updated"
-                                        className="text-muted"
-                                    />
-                                ) : null}
-                            </div>
-                        </div>
-
-                        <LemonButton
-                            type="secondary"
-                            status="danger"
-                            onClick={() => onDeleteClick(integration.id)}
-                            icon={<IconTrash />}
-                        >
-                            Disconnect
-                        </LemonButton>
-                    </div>
+                        integration={integration}
+                        suffix={
+                            <LemonButton
+                                type="secondary"
+                                status="danger"
+                                onClick={() => onDeleteClick(integration.id)}
+                                icon={<IconTrash />}
+                            >
+                                Disconnect
+                            </LemonButton>
+                        }
+                    />
                 ))}
 
                 <div>