Upgrade to Flow 0.71

server/api/documents.js

@@ -1,6 +1,6 @@
 // @flow
 import Router from 'koa-router';
-import { Op } from 'sequelize';
+import Sequelize from 'sequelize';
 import auth from './middlewares/authentication';
 import pagination from './middlewares/pagination';
 import { presentDocument, presentRevision } from '../presenters';
@@ -9,6 +9,7 @@ import { InvalidRequestError } from '../errors';
 import events from '../events';
 import policy from '../policies';
 
+const Op = Sequelize.Op;
 const { authorize } = policy;
 const router = new Router();
 
@@ -50,6 +51,7 @@ router.post('documents.pinned', auth(), pagination(), async ctx => {
       teamId: user.teamId,
       atlasId: collection,
       pinnedById: {
+        // $FlowFixMe
         [Op.ne]: null,
       },
     },
@@ -138,6 +140,7 @@ router.post('documents.drafts', auth(), pagination(), async ctx => {
 
   const user = ctx.state.user;
   const documents = await Document.findAll({
+    // $FlowFixMe
     where: { userId: user.id, publishedAt: { [Op.eq]: null } },
     order: [[sort, direction]],
     offset: ctx.state.pagination.offset,

server/emails/WelcomeEmail.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import EmailTemplate from './components/EmailLayout';
 import Body from './components/Body';
 import Button from './components/Button';

server/emails/components/Body.js

@@ -1,11 +1,11 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { Table, TBody, TR, TD } from 'oy-vey';
 
 import EmptySpace from './EmptySpace';
 
 type Props = {
-  children: React$Element<*>,
+  children: React.Node,
 };
 
 export default ({ children }: Props) => {

server/emails/components/Button.js

@@ -1,7 +1,9 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 
-export default (props: { href: string, children: React.Element<*> }) => {
+type Props = { href: string, children: React.Node };
+
+export default (props: Props) => {
   const style = {
     display: 'inline-block',
     padding: '10px 20px',
@@ -13,5 +15,5 @@ export default (props: { href: string, children: React.Element<*> }) => {
     cursor: 'pointer',
   };
 
-  return <a {...props} style={style} />;
+  return <a {...props} style={style}>{props.children}</a>;
 };

server/emails/components/EmailLayout.js

@@ -1,10 +1,10 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { Table, TBody, TR, TD } from 'oy-vey';
 import { fonts } from '../../../shared/styles/constants';
 
 type Props = {
-  children: React$Element<*>,
+  children: React.Node,
 };
 
 export default (props: Props) => (

server/emails/components/EmptySpace.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { Table, TBody, TR, TD } from 'oy-vey';
 
 const EmptySpace = ({ height }: { height?: number }) => {

server/emails/components/Footer.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { Table, TBody, TR, TD } from 'oy-vey';
 import { color } from '../../../shared/styles/constants';
 import { twitterUrl, spectrumUrl } from '../../../shared/utils/routeHelpers';

server/emails/components/Header.js

@@ -1,8 +1,7 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { Table, TBody, TR, TD } from 'oy-vey';
 import EmptySpace from './EmptySpace';
-import { color } from '../../../shared/styles/constants';
 
 export default () => {
   return (
@@ -12,6 +11,7 @@ export default () => {
           <TD>
             <EmptySpace height={40} />
             <img
+              alt="Outline"
               src={`${process.env.URL}/email/header-logo.png`}
               height="55"
               width="32"

server/emails/components/Heading.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 
 const style = {
   fontWeight: 500,
@@ -7,7 +7,7 @@ const style = {
 };
 
 type Props = {
-  children: React$Element<*>,
+  children: React.Node,
 };
 
 export default ({ children }: Props) => (

server/mailer.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import nodemailer from 'nodemailer';
 import Oy from 'oy-vey';
 import Queue from 'bull';
@@ -12,7 +12,7 @@ type SendMailType = {
   title: string,
   previewText?: string,
   text: string,
-  html: React.Element<*>,
+  html: React.Node,
   headCSS?: string,
 };
 

server/models/Document.js

@@ -4,7 +4,7 @@ import _ from 'lodash';
 import randomstring from 'randomstring';
 import MarkdownSerializer from 'slate-md-serializer';
 import Plain from 'slate-plain-serializer';
-import { Op } from 'sequelize';
+import Sequelize from 'sequelize';
 
 import isUUID from 'validator/lib/isUUID';
 import { Collection } from '../models';
@@ -13,6 +13,7 @@ import events from '../events';
 import parseTitle from '../../shared/utils/parseTitle';
 import Revision from './Revision';
 
+const Op = Sequelize.Op;
 const Markdown = new MarkdownSerializer();
 const URL_REGEX = /^[a-zA-Z0-9-]*-([a-zA-Z0-9]{10,15})$/;
 const DEFAULT_TITLE = 'Untitled document';
@@ -144,6 +145,7 @@ Document.associate = models => {
       ],
       where: {
         publishedAt: {
+          // $FlowFixMe
           [Op.ne]: null,
         },
       },
@@ -202,7 +204,7 @@ Document.searchForUser = async (
         LIMIT :limit OFFSET :offset;
         `;
 
-  const ids = await sequelize
+  const results = await sequelize
     .query(sql, {
       replacements: {
         query,
@@ -211,7 +213,7 @@ Document.searchForUser = async (
       },
       model: Document,
     })
-    .map(document => document.id);
+  const ids = results.map(document => document.id);
 
   // Second query to get views for the data
   const withViewsScope = { method: ['withViews', user.id] };

server/models/Team.js

@@ -51,6 +51,7 @@ Team.prototype.removeAdmin = async function(user: User) {
       teamId: this.id,
       isAdmin: true,
       id: {
+        // $FlowFixMe
         [Op.ne]: user.id,
       },
     },

server/pages/About.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import Grid from 'styled-components-grid';
 import styled from 'styled-components';
 import { Helmet } from 'react-helmet';
@@ -68,7 +68,7 @@ export default function About() {
               <strong>Jori Lallo</strong>
             </div>
             <div>
-              <a href="https://twitter.com/jorilallo" target="_blank">
+              <a href="https://twitter.com/jorilallo" target="_blank" rel="noopener noreferrer">
                 @jorilallo
               </a>
             </div>
@@ -80,7 +80,7 @@ export default function About() {
               <strong>Tom Moor</strong>
             </div>
             <div>
-              <a href="https://twitter.com/tommoor" target="_blank">
+              <a href="https://twitter.com/tommoor" target="_blank" rel="noopener noreferrer">
                 @tommoor
               </a>
             </div>
@@ -93,6 +93,7 @@ export default function About() {
           <a
             href="https://github.com/outline/outline/graphs/contributors"
             target="_blank"
+            rel="noopener noreferrer"
           >
             maintainers
           </a>, we believe in being honest and transparent.
@@ -141,6 +142,7 @@ export default function About() {
           <a
             href="https://spectrum.chat/outline/feature-requests?thread=a851c20d-251a-4c7b-8977-e1438894db51"
             target="_blank"
+            rel="noopener noreferrer"
           >
             here
           </a>.

server/pages/Api.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import Grid from 'styled-components-grid';
 import { Helmet } from 'react-helmet';
 import styled from 'styled-components';
@@ -589,7 +589,7 @@ const MethodList = styled.ul`
   margin-bottom: 80px;
 `;
 
-const Methods = (props: { children: React.Element<*> }) => {
+const Methods = (props: { children: React.Node }) => {
   const children = React.Children.toArray(props.children);
   const methods = children.map(child => child.props.method);
 
@@ -618,16 +618,16 @@ const Request = styled.h4`
 type MethodProps = {
   method: string,
   label: string,
-  children: React.Element<*>,
+  children: React.Node,
 };
 
-const Description = (props: { children: React.Element<*> }) => (
+const Description = (props: { children: React.Node }) => (
   <p>{props.children}</p>
 );
 
 type ArgumentsProps = {
   pagination?: boolean,
-  children?: React.Element<*> | string,
+  children?: React.Node | string,
 };
 
 const Arguments = (props: ArgumentsProps) => (
@@ -673,7 +673,7 @@ const Method = (props: MethodProps) => {
 type ArgumentProps = {
   id: string,
   required?: boolean,
-  description: React.Element<*> | string,
+  description: React.Node | string,
 };
 
 const Argument = (props: ArgumentProps) => (

server/pages/Changelog.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import Grid from 'styled-components-grid';
 import ReactMarkdown from 'react-markdown';

server/pages/Home.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import styled from 'styled-components';
 import Grid from 'styled-components-grid';

server/pages/Pricing.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import Grid from 'styled-components-grid';
 import { Helmet } from 'react-helmet';
 import Hero from './components/Hero';

server/pages/Privacy.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import Grid from 'styled-components-grid';
 import { Helmet } from 'react-helmet';
 import Header from './components/Header';

server/pages/components/Layout.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import { TopNavigation, BottomNavigation } from './Navigation';
 import Analytics from '../../../shared/components/Analytics';
@@ -13,7 +13,7 @@ export const description =
 export const screenshotUrl = `${process.env.URL}/screenshot.png`;
 
 type Props = {
-  children?: React$Element<*>,
+  children?: React.Node,
 };
 
 export default function Layout({ children }: Props) {

server/pages/components/Navigation.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 import {

server/pages/components/SignupButton.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import { signin } from '../../../shared/utils/routeHelpers';
 import SlackLogo from '../../../shared/components/SlackLogo';

server/presenters/document.js

@@ -1,10 +1,12 @@
 // @flow
 import _ from 'lodash';
-import { Op } from 'sequelize';
+import Sequelize from 'sequelize';
 import { User, Document } from '../models';
 import presentUser from './user';
 import presentCollection from './collection';
 
+const Op = Sequelize.Op;
+
 type Options = {
   includeCollaborators?: boolean,
 };
@@ -61,7 +63,10 @@ async function present(ctx: Object, document: Document, options: ?Options) {
     // This could be further optimized by using ctx.cache
     data.collaborators = await User.findAll({
       where: {
-        id: { [Op.in]: _.takeRight(document.collaboratorIds, 10) || [] },
+        id: {
+          // $FlowFixMe
+          [Op.in]: _.takeRight(document.collaboratorIds, 10) || [],
+        },
       },
     }).map(user => presentUser(ctx, user));
 

server/routes.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import path from 'path';
 import fs from 'fs-extra';
 import Koa from 'koa';

server/test/support.js

@@ -4,9 +4,10 @@ import { sequelize } from '../sequelize';
 
 export function flushdb() {
   const sql = sequelize.getQueryInterface();
-  const tables = Object.keys(sequelize.models).map(model =>
-    sql.quoteTable(sequelize.models[model].getTableName())
-  );
+  const tables = Object.keys(sequelize.models).map(model => {
+    const n = sequelize.models[model].getTableName();
+    return sql.quoteTable(typeof n === 'string' ? n : n.tableName);
+  });
 
   const query = `TRUNCATE ${tables.join(', ')} CASCADE`;
   return sequelize.query(query);

server/utils/prefetchTags.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import fs from 'fs';
 import path from 'path';
 import webpackConfig from '../../webpack.config';

server/utils/renderpage.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { Helmet } from 'react-helmet';
 import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
@@ -7,7 +7,7 @@ import Layout from '../pages/components/Layout';
 
 const sheet = new ServerStyleSheet();
 
-export default function renderpage(ctx: Object, children: React$Element<*>) {
+export default function renderpage(ctx: Object, children: React.Node) {
   const html = ReactDOMServer.renderToString(
     <StyleSheetManager sheet={sheet.instance}>
       <Layout>{children}</Layout>
@@ -17,6 +17,7 @@ export default function renderpage(ctx: Object, children: React$Element<*>) {
   // helmet returns an object of meta tags with toString methods, urgh.
   const helmet = Helmet.renderStatic();
   let head = '';
+  // $FlowFixMe
   Object.keys(helmet).forEach(key => (head += helmet[key].toString()));
 
   ctx.body = html