chore: Remove 'DEPLOYMENT' env option

Add 'Installation' section

.env.sample

@@ -17,7 +17,6 @@ PORT=3000
 # set to false if  your SSL is terminated at a loadbalancer, for example
 FORCE_HTTPS=true
 
-DEPLOYMENT=self
 ENABLE_UPDATES=true
 WEBSOCKETS_ENABLED=true
 DEBUG=cache,presenters,events

app.json

@@ -35,11 +35,6 @@
       "generator": "secret",
       "required": true
     },
-    "DEPLOYMENT": {
-      "description": "Should be 'self' for self hosted installations, turns off things like pricing pages",
-      "value": "self",
-      "required": true
-    },
     "ENABLE_UPDATES": {
       "value": "true",
       "required": true
@@ -149,4 +144,4 @@
       "required": false
     }
   }
-}
+}

app/components/Sidebar/Settings.js

@@ -26,6 +26,7 @@ import Section from './components/Section';
 import Header from './components/Header';
 import SidebarLink from './components/SidebarLink';
 import HeaderBlock from './components/HeaderBlock';
+import Version from './components/Version';
 import PoliciesStore from 'stores/PoliciesStore';
 import AuthStore from 'stores/AuthStore';
 
@@ -67,17 +68,17 @@ class SettingsSidebar extends React.Component<Props> {
               <Header>Account</Header>
               <SidebarLink
                 to="/settings"
-                icon={<ProfileIcon />}
+                icon={<ProfileIcon color="currentColor" />}
                 label="Profile"
               />
               <SidebarLink
                 to="/settings/notifications"
-                icon={<EmailIcon />}
+                icon={<EmailIcon color="currentColor" />}
                 label="Notifications"
               />
               <SidebarLink
                 to="/settings/tokens"
-                icon={<CodeIcon />}
+                icon={<CodeIcon color="currentColor" />}
                 label="API Tokens"
               />
             </Section>
@@ -86,45 +87,45 @@ class SettingsSidebar extends React.Component<Props> {
               {can.update && (
                 <SidebarLink
                   to="/settings/details"
-                  icon={<TeamIcon />}
+                  icon={<TeamIcon color="currentColor" />}
                   label="Details"
                 />
               )}
               {can.update && (
                 <SidebarLink
                   to="/settings/security"
-                  icon={<PadlockIcon />}
+                  icon={<PadlockIcon color="currentColor" />}
                   label="Security"
                 />
               )}
               <SidebarLink
                 to="/settings/people"
-                icon={<UserIcon />}
+                icon={<UserIcon color="currentColor" />}
                 exact={false}
                 label="People"
               />
               <SidebarLink
                 to="/settings/groups"
-                icon={<GroupIcon />}
+                icon={<GroupIcon color="currentColor" />}
                 exact={false}
                 label="Groups"
               />
               <SidebarLink
                 to="/settings/shares"
-                icon={<LinkIcon />}
+                icon={<LinkIcon color="currentColor" />}
                 label="Share Links"
               />
               {can.auditLog && (
                 <SidebarLink
                   to="/settings/events"
-                  icon={<BulletedListIcon />}
+                  icon={<BulletedListIcon color="currentColor" />}
                   label="Audit Log"
                 />
               )}
               {can.export && (
                 <SidebarLink
                   to="/settings/export"
-                  icon={<DocumentIcon />}
+                  icon={<DocumentIcon color="currentColor" />}
                   label="Export Data"
                 />
               )}
@@ -134,16 +135,23 @@ class SettingsSidebar extends React.Component<Props> {
                 <Header>Integrations</Header>
                 <SidebarLink
                   to="/settings/integrations/slack"
-                  icon={<SlackIcon />}
+                  icon={<SlackIcon color="currentColor" />}
                   label="Slack"
                 />
                 <SidebarLink
                   to="/settings/integrations/zapier"
-                  icon={<ZapierIcon />}
+                  icon={<ZapierIcon color="currentColor" />}
                   label="Zapier"
                 />
               </Section>
             )}
+            {can.update &&
+              process.env.DEPLOYMENT !== 'hosted' && (
+                <Section>
+                  <Header>Installation</Header>
+                  <Version />
+                </Section>
+              )}
           </Scrollable>
         </Flex>
       </Sidebar>

app/components/Sidebar/components/SidebarLink.js

@@ -9,6 +9,7 @@ import Flex from 'shared/components/Flex';
 
 type Props = {
   to?: string | Object,
+  href?: string | Object,
   onClick?: (SyntheticEvent<>) => void,
   children?: React.Node,
   icon?: React.Node,
@@ -63,6 +64,7 @@ class SidebarLink extends React.Component<Props> {
       menuOpen,
       hideDisclosure,
       exact,
+      href,
     } = this.props;
     const showDisclosure = !!children && !hideDisclosure;
     const activeStyle = {
@@ -80,7 +82,8 @@ class SidebarLink extends React.Component<Props> {
           onClick={onClick}
           exact={exact !== false}
           to={to}
-          as={to ? undefined : 'div'}
+          as={to ? undefined : href ? 'a' : 'div'}
+          href={href}
         >
           {icon && <IconWrapper>{icon}</IconWrapper>}
           <Label onClick={this.handleExpand}>

app/components/Sidebar/components/Version.js

@@ -0,0 +1,53 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import Badge from 'components/Badge';
+import SidebarLink from './SidebarLink';
+import { version } from '../../../../package.json';
+
+export default function Version() {
+  // $FlowFixMe
+  const [releasesBehind, setReleasesBehind] = React.useState(0);
+
+  // $FlowFixMe
+  React.useEffect(() => {
+    async function loadReleases() {
+      let out = 0;
+      const res = await fetch(
+        'https://api.github.com/repos/outline/outline/releases'
+      );
+      const releases = await res.json();
+      for (const release of releases) {
+        if (release.tag_name === `v${version}`) {
+          return setReleasesBehind(out);
+        } else {
+          out++;
+        }
+      }
+    }
+    loadReleases();
+  }, []);
+
+  return (
+    <SidebarLink
+      href="https://github.com/outline/outline/releases"
+      label={
+        <React.Fragment>
+          v{version}
+          <br />
+          <LilBadge>
+            {releasesBehind === 0
+              ? 'Up to date'
+              : `${releasesBehind} version${
+                  releasesBehind === 1 ? '' : 's'
+                } behind`}
+          </LilBadge>
+        </React.Fragment>
+      }
+    />
+  );
+}
+
+const LilBadge = styled(Badge)`
+  margin-left: 0;
+`;

app/components/Sidebar/icons/Slack.js

@@ -1,10 +1,14 @@
 // @flow
 import * as React from 'react';
 
-export default function SlackIcon() {
+type Props = {
+  color?: string,
+};
+
+export default function SlackIcon({ color = '#4E5C6E' }: Props) {
   return (
     <svg
-      fill="#4E5C6E"
+      fill={color}
       width="24px"
       height="24px"
       viewBox="0 0 24 24"

app/components/Sidebar/icons/Zapier.js

@@ -1,10 +1,14 @@
 // @flow
 import * as React from 'react';
 
-export default function ZapierIcon() {
+type Props = {
+  color?: string,
+};
+
+export default function ZapierIcon({ color = '#4E5C6E' }: Props) {
   return (
     <svg
-      fill="#4E5C6E"
+      fill={color}
       width="24px"
       height="24px"
       viewBox="0 0 24 24"

server/app.js

@@ -149,6 +149,7 @@ app.use(
         "'self'",
         process.env.AWS_S3_UPLOAD_BUCKET_URL.replace('s3:', 'localhost:'),
         'www.google-analytics.com',
+        'api.github.com',
         'sentry.io',
       ]),
     },