Stash

app/components/Sidebar/Settings.js

@@ -73,20 +73,23 @@ class SettingsSidebar extends React.Component<Props> {
               <SidebarLink to="/settings/shares" icon={<LinkIcon />}>
                 Share Links
               </SidebarLink>
-              {user.isAdmin && (
-                <SidebarLink
-                  to="/settings/integrations/slack"
-                  icon={<SettingsIcon />}
-                >
-                  Integrations
-                </SidebarLink>
-              )}
               {user.isAdmin && (
                 <SidebarLink to="/settings/export" icon={<DocumentIcon />}>
                   Export Data
                 </SidebarLink>
               )}
             </Section>
+            {user.isAdmin && (
+              <Section>
+                <Header>Integrations</Header>
+                <SidebarLink to="/settings/integrations/slack">
+                  Slack
+                </SidebarLink>
+                <SidebarLink to="/settings/integrations/zapier">
+                  Zapier
+                </SidebarLink>
+              </Section>
+            )}
           </Scrollable>
         </Flex>
       </Sidebar>

app/routes.js

@@ -14,6 +14,7 @@ import Details from 'scenes/Settings/Details';
 import Security from 'scenes/Settings/Security';
 import People from 'scenes/Settings/People';
 import Slack from 'scenes/Settings/Slack';
+import Zapier from 'scenes/Settings/Zapier';
 import Shares from 'scenes/Settings/Shares';
 import Tokens from 'scenes/Settings/Tokens';
 import Export from 'scenes/Settings/Export';
@@ -53,6 +54,11 @@ export default function Routes() {
               path="/settings/integrations/slack"
               component={Slack}
             />
+            <Route
+              exact
+              path="/settings/integrations/zapier"
+              component={Zapier}
+            />
             <Route exact path="/settings/export" component={Export} />
             <Route exact path="/collections/:id" component={Collection} />
             <Route exact path={`/d/${slug}`} component={RedirectDocument} />

app/scenes/Settings/Zapier.js

@@ -0,0 +1,19 @@
+// @flow
+import * as React from 'react';
+import CenteredContent from 'components/CenteredContent';
+import PageTitle from 'components/PageTitle';
+import HelpText from 'components/HelpText';
+
+class Zapier extends React.Component<*> {
+  render() {
+    return (
+      <CenteredContent>
+        <PageTitle title="Zapier" />
+        <h1>Zapier</h1>
+        <HelpText>Boop</HelpText>
+      </CenteredContent>
+    );
+  }
+}
+
+export default Zapier;