From 4f34b69cfa8bc1e491bd0551cbae554f541c2c1a Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 14 Oct 2021 21:49:35 -0700
Subject: [PATCH] Display notice instead of hide when Slack integration
 unavailable

---
 app/routes/settings.js       |   4 +-
 app/scenes/Settings/Slack.js | 142 +++++++++++++++++++----------------
 2 files changed, 80 insertions(+), 66 deletions(-)

diff --git a/app/routes/settings.js b/app/routes/settings.js
index b03a8bf0..967c98b8 100644
--- a/app/routes/settings.js
+++ b/app/routes/settings.js
@@ -30,9 +30,7 @@ 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} />
-      )}
+      <Route exact path="/settings/integrations/slack" component={Slack} />
       {isHosted && (
         <Route exact path="/settings/integrations/zapier" component={Zapier} />
       )}
diff --git a/app/scenes/Settings/Slack.js b/app/scenes/Settings/Slack.js
index 24b7b319..bc0941b0 100644
--- a/app/scenes/Settings/Slack.js
+++ b/app/scenes/Settings/Slack.js
@@ -39,6 +39,7 @@ function Slack() {
   return (
     <Scene title="Slack" icon={<SlackIcon color="currentColor" />}>
       <Heading>Slack</Heading>
+
       {error === "access_denied" && (
         <Notice>
           <Trans>
@@ -62,72 +63,87 @@ function Slack() {
           components={{ em: <Code /> }}
         />
       </HelpText>
-      <p>
-        {commandIntegration ? (
-          <Button onClick={commandIntegration.delete}>{t("Disconnect")}</Button>
-        ) : (
-          <SlackButton
-            scopes={["commands", "links:read", "links:write"]}
-            redirectUri={`${env.URL}/auth/slack.commands`}
-            state={team.id}
-          />
-        )}
-      </p>
-      <p>&nbsp;</p>
-
-      <h2>{t("Collections")}</h2>
-      <HelpText>
-        <Trans>
-          Connect Outline collections to Slack channels and messages will be
-          automatically posted to Slack when documents are published or updated.
-        </Trans>
-      </HelpText>
-
-      <List>
-        {collections.orderedData.map((collection) => {
-          const integration = find(integrations.slackIntegrations, {
-            collectionId: collection.id,
-          });
-
-          if (integration) {
-            return (
-              <ListItem
-                key={integration.id}
-                title={collection.name}
-                image={<CollectionIcon collection={collection} />}
-                subtitle={
-                  <Trans
-                    defaults={`Connected to the <em>{{ channelName }}</em> channel`}
-                    values={{ channelName: integration.settings.channel }}
-                    components={{ em: <strong /> }}
-                  />
-                }
-                actions={
-                  <Button onClick={integration.delete} neutral>
-                    {t("Disconnect")}
-                  </Button>
-                }
+      {env.SLACK_KEY ? (
+        <>
+          <p>
+            {commandIntegration ? (
+              <Button onClick={commandIntegration.delete}>
+                {t("Disconnect")}
+              </Button>
+            ) : (
+              <SlackButton
+                scopes={["commands", "links:read", "links:write"]}
+                redirectUri={`${env.URL}/auth/slack.commands`}
+                state={team.id}
               />
-            );
-          }
+            )}
+          </p>
+          <p>&nbsp;</p>
 
-          return (
-            <ListItem
-              key={collection.id}
-              title={collection.name}
-              image={<CollectionIcon collection={collection} />}
-              actions={
-                <SlackButton
-                  scopes={["incoming-webhook"]}
-                  redirectUri={`${env.URL}/auth/slack.post`}
-                  state={collection.id}
-                  label={t("Connect")}
-                />
+          <h2>{t("Collections")}</h2>
+          <HelpText>
+            <Trans>
+              Connect Outline collections to Slack channels and messages will be
+              automatically posted to Slack when documents are published or
+              updated.
+            </Trans>
+          </HelpText>
+
+          <List>
+            {collections.orderedData.map((collection) => {
+              const integration = find(integrations.slackIntegrations, {
+                collectionId: collection.id,
+              });
+
+              if (integration) {
+                return (
+                  <ListItem
+                    key={integration.id}
+                    title={collection.name}
+                    image={<CollectionIcon collection={collection} />}
+                    subtitle={
+                      <Trans
+                        defaults={`Connected to the <em>{{ channelName }}</em> channel`}
+                        values={{ channelName: integration.settings.channel }}
+                        components={{ em: <strong /> }}
+                      />
+                    }
+                    actions={
+                      <Button onClick={integration.delete} neutral>
+                        {t("Disconnect")}
+                      </Button>
+                    }
+                  />
+                );
               }
-            />
-          );
-        })}
-      </List>
+
+              return (
+                <ListItem
+                  key={collection.id}
+                  title={collection.name}
+                  image={<CollectionIcon collection={collection} />}
+                  actions={
+                    <SlackButton
+                      scopes={["incoming-webhook"]}
+                      redirectUri={`${env.URL}/auth/slack.post`}
+                      state={collection.id}
+                      label={t("Connect")}
+                    />
+                  }
+                />
+              );
+            })}
+          </List>
+        </>
+      ) : (
+        <Notice>
+          <Trans>
+            The Slack integration is currently disabled. Please set the
+            associated environment variables and restart the server to enable
+            the integration.
+          </Trans>
+        </Notice>
+      )}
     </Scene>
   );
 }