From 8c1979465f39b65d298c771cfd7764ccfa398cd2 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 14 Oct 2021 21:37:04 -0700
Subject: [PATCH] fix: Slack integration should not display if not configured
 in self hosted fix: Alignment of Slack channels in settings closes #2553

---
 app/components/List/Item.js        |  5 ++---
 app/components/Sidebar/Settings.js | 14 ++++++++------
 app/routes/settings.js             | 11 +++++++++--
 app/scenes/Settings/Slack.js       |  2 +-
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/app/components/List/Item.js b/app/components/List/Item.js
index ad149ba23..7098d9fe2 100644
--- a/app/components/List/Item.js
+++ b/app/components/List/Item.js
@@ -25,7 +25,7 @@ const ListItem = (
     <>
       {image && <Image>{image}</Image>}
       <Content
-        align={compact ? "center" : undefined}
+        justify={compact ? "center" : undefined}
         column={!compact}
         $selected={selected}
       >
@@ -90,8 +90,7 @@ const Heading = styled.p`
   margin: 0;
 `;
 
-const Content = styled.div`
-  display: flex;
+const Content = styled(Flex)`
   flex-direction: column;
   flex-grow: 1;
   color: ${(props) => (props.$selected ? props.theme.white : props.theme.text)};
diff --git a/app/components/Sidebar/Settings.js b/app/components/Sidebar/Settings.js
index b0a95978f..903b39c96 100644
--- a/app/components/Sidebar/Settings.js
+++ b/app/components/Sidebar/Settings.js
@@ -130,14 +130,16 @@ function SettingsSidebar() {
               />
             )}
           </Section>
-          {can.update && (
+          {can.update && (env.SLACK_KEY || isHosted) && (
             <Section>
               <Header>{t("Integrations")}</Header>
-              <SidebarLink
-                to="/settings/integrations/slack"
-                icon={<SlackIcon color="currentColor" />}
-                label="Slack"
-              />
+              {env.SLACK_KEY && (
+                <SidebarLink
+                  to="/settings/integrations/slack"
+                  icon={<SlackIcon color="currentColor" />}
+                  label="Slack"
+                />
+              )}
               {isHosted && (
                 <SidebarLink
                   to="/settings/integrations/zapier"
diff --git a/app/routes/settings.js b/app/routes/settings.js
index 8901286a0..b03a8bf0b 100644
--- a/app/routes/settings.js
+++ b/app/routes/settings.js
@@ -14,6 +14,9 @@ import Slack from "scenes/Settings/Slack";
 import Tokens from "scenes/Settings/Tokens";
 import Zapier from "scenes/Settings/Zapier";
 import Route from "components/ProfiledRoute";
+import env from "env";
+
+const isHosted = env.DEPLOYMENT === "hosted";
 
 export default function SettingsRoutes() {
   return (
@@ -27,8 +30,12 @@ export default function SettingsRoutes() {
       <Route exact path="/settings/shares" component={Shares} />
       <Route exact path="/settings/tokens" component={Tokens} />
       <Route exact path="/settings/notifications" component={Notifications} />
-      <Route exact path="/settings/integrations/slack" component={Slack} />
-      <Route exact path="/settings/integrations/zapier" component={Zapier} />
+      {env.SLACK_KEY && (
+        <Route exact path="/settings/integrations/slack" component={Slack} />
+      )}
+      {isHosted && (
+        <Route exact path="/settings/integrations/zapier" component={Zapier} />
+      )}
       <Route exact path="/settings/import-export" component={ImportExport} />
       <Redirect from="/settings/people" to="/settings/members" />
     </Switch>
diff --git a/app/scenes/Settings/Slack.js b/app/scenes/Settings/Slack.js
index 8d2e5a4a3..24b7b3197 100644
--- a/app/scenes/Settings/Slack.js
+++ b/app/scenes/Settings/Slack.js
@@ -103,7 +103,7 @@ function Slack() {
                   />
                 }
                 actions={
-                  <Button onClick={integration.delete}>
+                  <Button onClick={integration.delete} neutral>
                     {t("Disconnect")}
                   </Button>
                 }