From 7f71124b5ad7554199d68b4de07ebb463b9485db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@getprobo.com>
Date: Sat, 31 Jan 2026 13:38:53 +0400
Subject: [PATCH] Fix slack connection empty case
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Émile Ré <emile@getprobo.com>
---
 .../CompliancePageSlackSection.tsx            | 67 ++++++++++---------
 1 file changed, 35 insertions(+), 32 deletions(-)

diff --git a/apps/console/src/pages/organizations/compliance-page/overview/_components/CompliancePageSlackSection.tsx b/apps/console/src/pages/organizations/compliance-page/overview/_components/CompliancePageSlackSection.tsx
index 9acae58ce..47af85ad9 100644
--- a/apps/console/src/pages/organizations/compliance-page/overview/_components/CompliancePageSlackSection.tsx
+++ b/apps/console/src/pages/organizations/compliance-page/overview/_components/CompliancePageSlackSection.tsx
@@ -44,46 +44,49 @@ export function CompliancePageSlackSection(props: { fragmentRef: CompliancePageS
               className="flex items-center gap-3"
             >
               <div>
-                <img src={`/${slackConnection.id.toLowerCase()}.png`} alt="" />
+                <img src="/slack.png" alt="" />
               </div>
               <div className="mr-auto">
                 <h3 className="text-base font-semibold">Slack</h3>
                 <p className="text-sm text-txt-tertiary">
-                  {slackConnection.createdAt
-                    ? (
-                        <>
-                          {sprintf(
-                            __("Connected on %s"),
-                            dateTimeFormat(slackConnection.createdAt),
-                          )}
-                          {slackConnection.channel && (
-                            <>
-                              {" • "}
-                              {sprintf(__("Channel: %s"), slackConnection.channel)}
-                            </>
-                          )}
-                        </>
-                      )
-                    : __("Manage your compliance page access with slack")}
+                  {sprintf(
+                    __("Connected on %s"),
+                    dateTimeFormat(slackConnection.createdAt),
+                  )}
+                  {slackConnection.channel && (
+                    <>
+                      {" • "}
+                      {sprintf(__("Channel: %s"), slackConnection.channel)}
+                    </>
+                  )}
                 </p>
               </div>
-              {slackConnection.createdAt
-                ? (
-                    <div>
-                      <Badge variant="success" size="md">
-                        {__("Connected")}
-                      </Badge>
-                    </div>
-                  )
-                : (
-                    organization.compliancePage?.canUpdate && (
-                      <Button variant="secondary" asChild>
-                        <a href={getSlackConnectionUrl(organizationId)}>{__("Connect")}</a>
-                      </Button>
-                    )
-                  )}
+              <div>
+                <Badge variant="success" size="md">
+                  {__("Connected")}
+                </Badge>
+              </div>
             </Card>
           ))}
+          {organization.compliancePage?.canUpdate && organization.slackConnections.edges.length === 0 && (
+            <Card
+              padded
+              className="flex items-center gap-3"
+            >
+              <div>
+                <img src="/slack.png" alt="" />
+              </div>
+              <div className="mr-auto">
+                <h3 className="text-base font-semibold">Slack</h3>
+                <p className="text-sm text-txt-tertiary">
+                  {__("Manage your compliance page access with slack")}
+                </p>
+              </div>
+              <Button variant="secondary" asChild>
+                <a href={getSlackConnectionUrl(organizationId)}>{__("Connect")}</a>
+              </Button>
+            </Card>
+          )}
         </div>
       </Card>
     </div>