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

@@ -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)};

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>
+              {env.SLACK_KEY && (
                 <SidebarLink
                   to="/settings/integrations/slack"
                   icon={<SlackIcon color="currentColor" />}
                   label="Slack"
                 />
+              )}
               {isHosted && (
                 <SidebarLink
                   to="/settings/integrations/zapier"

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} />
+      {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>

app/scenes/Settings/Slack.js

@@ -103,7 +103,7 @@ function Slack() {
                   />
                 }
                 actions={
-                  <Button onClick={integration.delete}>
+                  <Button onClick={integration.delete} neutral>
                     {t("Disconnect")}
                   </Button>
                 }