Merge pull request #781 from outline/zapier

Zapier

app/components/Sidebar/Settings.js

@@ -4,13 +4,14 @@ import { observer, inject } from 'mobx-react';
 import {
   DocumentIcon,
   ProfileIcon,
-  SettingsIcon,
   PadlockIcon,
   CodeIcon,
   UserIcon,
   LinkIcon,
   TeamIcon,
 } from 'outline-icons';
+import ZapierIcon from './icons/Zapier';
+import SlackIcon from './icons/Slack';
 
 import Flex from 'shared/components/Flex';
 import Sidebar, { Section } from './Sidebar';
@@ -73,20 +74,29 @@ 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"
+                  icon={<SlackIcon />}
+                >
+                  Slack
+                </SidebarLink>
+                <SidebarLink
+                  to="/settings/integrations/zapier"
+                  icon={<ZapierIcon />}
+                >
+                  Zapier
+                </SidebarLink>
+              </Section>
+            )}
           </Scrollable>
         </Flex>
       </Sidebar>

app/components/Sidebar/icons/Slack.js

@@ -0,0 +1,17 @@
+// @flow
+import * as React from 'react';
+
+export default function SlackIcon(props: *) {
+  return (
+    <svg
+      fill="#4E5C6E"
+      width="24px"
+      height="24px"
+      viewBox="0 0 24 24"
+      version="1.1"
+      {...props}
+    >
+      <path d="M15.9018268,8.96000576 C16.2381704,9.99629846 16.5967585,11.1014349 16.9335817,12.1400859 L18.4745653,11.6377075 C19.26999,11.3865207 20.1212341,11.8191201 20.3863757,12.6145449 C20.6375624,13.4099697 20.204963,14.2612137 19.4095382,14.5263553 C19.4095382,14.5263553 18.8135221,14.7204231 17.886368,15.0222122 C17.8870669,15.0243862 17.8877652,15.0265585 17.8884628,15.0287289 C17.8827569,15.0305629 17.8770383,15.0324014 17.8713072,15.0342444 C18.1785729,15.9839578 18.3768815,16.599336 18.3768815,16.6056236 C18.6420231,17.3870935 18.1536044,18.2383376 17.3442248,18.4755695 C16.5767097,18.6988466 15.7673301,18.280202 15.5021885,17.5405965 L14.9897096,15.9648608 C13.9505623,16.3029433 12.8424387,16.6633667 11.8014153,17.001772 C11.8023317,17.0046222 11.8032469,17.0074694 11.8041611,17.0103134 C12.1094193,17.9552905 12.3065346,18.5669846 12.3065346,18.5732533 C12.5716762,19.3547232 12.0832575,20.2059672 11.2738779,20.4431992 C10.5063628,20.6664763 9.69698319,20.2478317 9.43184161,19.5082262 L8.92276608,17.9429548 C8.9203462,17.9437328 8.91792859,17.94451 8.91551325,17.9452863 L8.91369431,17.9396666 C7.96180947,18.2483792 7.34491029,18.4476599 7.33861854,18.4476599 C6.55714859,18.7128015 5.70590454,18.2243827 5.46867259,17.4150032 C5.24539547,16.647488 5.66404008,15.8381084 6.40364557,15.5729669 L7.98119682,15.0586669 L7.98054028,15.0566385 L7.98371132,15.0556121 L6.94355227,11.8574006 C5.99316621,12.1648847 5.37727905,12.3633581 5.37098885,12.3633581 C4.58951891,12.6284997 3.73827486,12.140081 3.50104291,11.3307014 C3.27776578,10.5631863 3.6964104,9.75380672 4.43601588,9.48866513 L6.0069939,8.97773362 L5.51053706,7.45126134 C5.25935029,6.65583658 5.69194972,5.80459253 6.48737449,5.53945094 C7.28279925,5.28826417 8.1340433,5.72086361 8.39918489,6.51628837 C8.39918489,6.51628837 8.59272947,7.11212918 8.89366761,8.03889643 L12.0753884,7.0041007 L11.580884,5.48363166 C11.3296972,4.68820689 11.7622966,3.83696284 12.5577214,3.57182126 C13.3531462,3.32063449 14.2043902,3.75323392 14.4695318,4.54865869 C14.4695318,4.54865869 14.6622407,5.14192682 14.9620649,6.06526261 L16.4929808,5.56736058 C17.2884055,5.31617381 18.1396496,5.74877325 18.4047912,6.54419801 C18.6559779,7.33962278 18.2233785,8.19086683 17.4279537,8.45600842 C17.4279537,8.45600842 16.831726,8.64967867 15.904443,8.95078425 C15.9052547,8.95331644 15.9060665,8.95584901 15.9068783,8.95838195 C15.9051956,8.95892283 15.9035117,8.9594641 15.9018268,8.96000576 Z M9.83147852,10.9276312 C10.168933,11.9673468 10.5287794,13.0763618 10.8665705,14.1180017 L14.051371,13.0797199 L13.013726,9.88923839 C11.9776926,10.2254976 10.8729922,10.583944 9.83480241,10.9206174 C9.8353787,10.9224153 9.83595503,10.9242134 9.8365314,10.9260116 C9.83484694,10.9265515 9.83316265,10.9270914 9.83147852,10.9276312 Z" />
+    </svg>
+  );
+}

app/components/Sidebar/icons/Zapier.js

@@ -0,0 +1,17 @@
+// @flow
+import * as React from 'react';
+
+export default function ZapierIcon(props: *) {
+  return (
+    <svg
+      fill="#4E5C6E"
+      width="24px"
+      height="24px"
+      viewBox="0 0 24 24"
+      version="1.1"
+      {...props}
+    >
+      <path d="M14,12.00348 C13.9996,12.59796 13.89092,13.16708 13.6928,13.69244 C13.16752,13.89072 12.59816,13.99964 12.00344,14.00004 L11.99656,14.00004 C11.40216,13.99964 10.83296,13.89104 10.30768,13.69284 C10.10952,13.16764 10.0004,12.59828 10,12.00364 L10,11.99672 C10.0004,11.40224 10.10928,10.83312 10.30712,10.3078 C10.83264,10.10964 11.40192,10.0006 11.99656,10.0002 L12.00344,10.0002 C12.59816,10.0006 13.16752,10.10964 13.69276,10.3078 C13.89076,10.83316 13.99956,11.40228 13.99996,11.99676 L13.99996,12.00368 L13.99996,12.0036 L14,12.00348 Z M19.8888,10.66668 L15.21896,10.66668 L18.52096,7.36468 C18.2617173,7.00059444 17.9725547,6.65876921 17.65648,6.34276 L17.65632,6.34244 C17.340564,6.02673022 16.9990638,5.73786527 16.63536,5.47884 L13.33336,8.78084 L13.33336,4.11128 C12.894135,4.03747693 12.4495423,4.00025584 12.00416,4 L11.99568,4 C11.5503533,4.00023789 11.1058145,4.03743219 10.66664,4.1112 L10.66664,8.78108 L7.36464,5.47908 C7.00075543,5.7381962 6.65910565,6.02719699 6.34324,6.34308 L6.34204,6.34416 C6.02660762,6.65978768 5.73799769,7.00112635 5.4792,7.36464 L8.7812,10.66664 L4.1112,10.66664 C4.1112,10.66664 4.00016,11.54384 4,11.99704 L4,12.00284 C4.00016664,12.4487002 4.03736113,12.8937765 4.1112,13.33348 L8.78104,13.33348 L5.47904,16.63548 C5.99830995,17.3645251 6.63559493,18.0018101 7.36464,18.52108 L10.66664,15.21916 L10.66664,19.8888 C11.1053956,19.962476 11.5495017,19.9996699 11.9944,20 L12.00584,20 C12.4506842,19.999644 12.8947349,19.9624502 13.33344,19.8888 L13.33344,15.21892 L16.63544,18.52092 C16.9992044,18.2618792 17.3407586,17.972987 17.65656,17.65724 L17.65736,17.65664 C17.9730579,17.3408301 18.2619218,16.9992911 18.52096,16.63556 L15.21896,13.33348 L19.8888,13.33348 C19.9624671,12.8947771 19.999661,12.4507249 20,12.00588 L20,11.9944 C19.999644,11.5495558 19.9624502,11.1055051 19.8888,10.6668 L19.8888,10.66668 Z" />
+    </svg>
+  );
+}

app/menus/RevisionMenu.js

@@ -7,7 +7,7 @@ import { MoreIcon } from 'outline-icons';
 import CopyToClipboard from 'components/CopyToClipboard';
 import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 import { documentHistoryUrl } from 'utils/routeHelpers';
-import { Revision } from 'types';
+import type { Revision } from 'types';
 import Document from 'models/Document';
 import UiStore from 'stores/UiStore';
 

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,41 @@
+// @flow
+import * as React from 'react';
+import CenteredContent from 'components/CenteredContent';
+import PageTitle from 'components/PageTitle';
+import HelpText from 'components/HelpText';
+import Button from 'components/Button';
+
+class Zapier extends React.Component<*> {
+  goToZapier = () => {
+    window.open(
+      'https://zapier.com/platform/public-invite/5927/a0b2747dbb017723b55fc54f4f0cdcae/'
+    );
+  };
+  render() {
+    return (
+      <CenteredContent>
+        <PageTitle title="Zapier" />
+        <h1>Zapier</h1>
+        <HelpText>
+          There is now an Outline app on{' '}
+          <a
+            href="https://zapier.com"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Zapier
+          </a>{' '}
+          to allow easy integration with hundreds of other business services. It
+          is currently in early access, to use the integration and hook up to
+          your wiki simply accept the public invite below. All configuration is
+          done within Zapier itself.
+        </HelpText>
+        <p>
+          <Button onClick={this.goToZapier}>Zapier Public Invite</Button>
+        </p>
+      </CenteredContent>
+    );
+  }
+}
+
+export default Zapier;

app/scenes/Settings/components/ImageUpload.js

@@ -39,6 +39,7 @@ class DropToImport extends React.Component<Props> {
   };
 
   handleCrop = async () => {
+    this.isUploading = true;
     const canvas = this.avatarEditorRef.getImage();
     const imageBlob = dataUrlToBlob(canvas.toDataURL());
     try {
@@ -70,6 +71,7 @@ class DropToImport extends React.Component<Props> {
     return (
       <Modal isOpen onRequestClose={this.handleClose} title="">
         <Flex auto column align="center" justify="center">
+          {this.isUploading && <LoadingIndicator />}
           <AvatarEditorContainer>
             <AvatarEditor
               ref={ref => (this.avatarEditorRef = ref)}
@@ -91,9 +93,8 @@ class DropToImport extends React.Component<Props> {
             defaultValue="1"
             onChange={this.handleZoom}
           />
-          {this.isUploading && <LoadingIndicator />}
           <CropButton onClick={this.handleCrop} disabled={this.isUploading}>
-            {submitText}
+            {this.isUploading ? 'Uploading…' : submitText}
           </CropButton>
         </Flex>
       </Modal>