Display notice instead of hide when Slack integration unavailable

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} />
       )}

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>
+      {env.SLACK_KEY ? (
-        {commandIntegration ? (
+        <>
-          <Button onClick={commandIntegration.delete}>{t("Disconnect")}</Button>
+          <p>
-        ) : (
+            {commandIntegration ? (
-          <SlackButton
+              <Button onClick={commandIntegration.delete}>
-            scopes={["commands", "links:read", "links:write"]}
+                {t("Disconnect")}
-            redirectUri={`${env.URL}/auth/slack.commands`}
+              </Button>
-            state={team.id}
+            ) : (
-          />
+              <SlackButton
-        )}
+                scopes={["commands", "links:read", "links:write"]}
-      </p>
+                redirectUri={`${env.URL}/auth/slack.commands`}
-      <p>&nbsp;</p>
+                state={team.id}
-
-      <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>
-                }
               />
-            );
+            )}
-          }
+          </p>
+          <p>&nbsp;</p>
 
-          return (
+          <h2>{t("Collections")}</h2>
-            <ListItem
+          <HelpText>
-              key={collection.id}
+            <Trans>
-              title={collection.name}
+              Connect Outline collections to Slack channels and messages will be
-              image={<CollectionIcon collection={collection} />}
+              automatically posted to Slack when documents are published or
-              actions={
+              updated.
-                <SlackButton
+            </Trans>
-                  scopes={["incoming-webhook"]}
+          </HelpText>
-                  redirectUri={`${env.URL}/auth/slack.post`}
+
-                  state={collection.id}
+          <List>
-                  label={t("Connect")}
+            {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>
+                    }
+                  />
+                );
               }
-            />
+
-          );
+              return (
-        })}
+                <ListItem
-      </List>
+                  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>
   );
 }