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>
-              <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"