feat: Add admin UI for enabling collab editing

app/components/Sidebar/Settings.js

@@ -11,6 +11,7 @@ import {
   LinkIcon,
   TeamIcon,
   ExpandedIcon,
+  BeakerIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -95,6 +96,15 @@ function SettingsSidebar() {
                 label={t("Security")}
               />
             )}
+            {can.update &&
+              env.COLLABORATION_URL &&
+              env.DEPLOYMENT !== "hosted" && (
+                <SidebarLink
+                  to="/settings/features"
+                  icon={<BeakerIcon color="currentColor" />}
+                  label={t("Features")}
+                />
+              )}
             <SidebarLink
               to="/settings/members"
               icon={<UserIcon color="currentColor" />}

app/routes/settings.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import { Switch, Redirect } from "react-router-dom";
 import Details from "scenes/Settings/Details";
+import Features from "scenes/Settings/Features";
 import Groups from "scenes/Settings/Groups";
 import ImportExport from "scenes/Settings/ImportExport";
 import Notifications from "scenes/Settings/Notifications";
@@ -21,6 +22,7 @@ export default function SettingsRoutes() {
       <Route exact path="/settings/details" component={Details} />
       <Route exact path="/settings/security" component={Security} />
       <Route exact path="/settings/members" component={People} />
+      <Route exact path="/settings/features" component={Features} />
       <Route exact path="/settings/groups" component={Groups} />
       <Route exact path="/settings/shares" component={Shares} />
       <Route exact path="/settings/tokens" component={Tokens} />

app/scenes/Settings/Features.js

@@ -0,0 +1,70 @@
+// @flow
+import { debounce } from "lodash";
+import { observer } from "mobx-react";
+import { BeakerIcon } from "outline-icons";
+import * as React from "react";
+import { useState } from "react";
+import { useTranslation, Trans } from "react-i18next";
+import Checkbox from "components/Checkbox";
+import Heading from "components/Heading";
+import HelpText from "components/HelpText";
+import Scene from "components/Scene";
+import env from "env";
+import useCurrentTeam from "hooks/useCurrentTeam";
+import useStores from "hooks/useStores";
+import useToasts from "hooks/useToasts";
+
+function Features() {
+  const { auth } = useStores();
+  const team = useCurrentTeam();
+  const { t } = useTranslation();
+  const { showToast } = useToasts();
+  const [data, setData] = useState({
+    collaborativeEditing: team.collaborativeEditing,
+  });
+
+  const showSuccessMessage = React.useCallback(
+    debounce(() => {
+      showToast(t("Settings saved"), { type: "success" });
+    }, 250),
+    [t, showToast]
+  );
+
+  const handleChange = React.useCallback(
+    async (ev: SyntheticInputEvent<*>) => {
+      const newData = { ...data, [ev.target.name]: ev.target.checked };
+      setData(newData);
+
+      await auth.updateTeam(newData);
+
+      showSuccessMessage();
+    },
+    [auth, data, showSuccessMessage]
+  );
+
+  return (
+    <Scene title={t("Features")} icon={<BeakerIcon color="currentColor" />}>
+      <Heading>
+        <Trans>Features</Trans>
+      </Heading>
+      <HelpText>
+        <Trans>
+          Manage optional and beta features. Changing these settings will affect
+          all team members.
+        </Trans>
+      </HelpText>
+
+      {env.COLLABORATION_URL && (
+        <Checkbox
+          label={t("Collaborative editing")}
+          name="collaborativeEditing"
+          checked={data.collaborativeEditing}
+          onChange={handleChange}
+          note="When enabled multiple people can edit documents at the same time (Beta)"
+        />
+      )}
+    </Scene>
+  );
+}
+
+export default observer(Features);

server/presenters/team.js

@@ -8,7 +8,9 @@ export default function present(team: Team) {
     name: team.name,
     avatarUrl: team.logoUrl,
     sharing: team.sharing,
-    collaborativeEditing: team.collaborativeEditing && env.COLLABORATION_URL,
+    collaborativeEditing: !!(
+      team.collaborativeEditing && env.COLLABORATION_URL
+    ),
     documentEmbeds: team.documentEmbeds,
     guestSignin: team.guestSignin,
     subdomain: team.subdomain,

shared/i18n/locales/en_US/translation.json

@@ -165,6 +165,7 @@
   "Team": "Team",
   "Details": "Details",
   "Security": "Security",
+  "Features": "Features",
   "Members": "Members",
   "Groups": "Groups",
   "Share Links": "Share Links",
@@ -509,6 +510,8 @@
   "Upload": "Upload",
   "Subdomain": "Subdomain",
   "Your knowledge base will be accessible at": "Your knowledge base will be accessible at",
+  "Manage optional and beta features.": "Manage optional and beta features.",
+  "Collaborative editing": "Collaborative editing",
   "New group": "New group",
   "Groups can be used to organize and manage the people on your team.": "Groups can be used to organize and manage the people on your team.",
   "All groups": "All groups",