diff --git a/app/components/Sidebar/Settings.js b/app/components/Sidebar/Settings.js index 9d9ffa52c..b0a95978f 100644 --- a/app/components/Sidebar/Settings.js +++ b/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" && ( + } + label={t("Features")} + /> + )} } diff --git a/app/routes/settings.js b/app/routes/settings.js index c52b96116..8901286a0 100644 --- a/app/routes/settings.js +++ b/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() { + diff --git a/app/scenes/Settings/Features.js b/app/scenes/Settings/Features.js new file mode 100644 index 000000000..80e041688 --- /dev/null +++ b/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 ( + }> + + Features + + + + Manage optional and beta features. Changing these settings will affect + all team members. + + + + {env.COLLABORATION_URL && ( + + )} + + ); +} + +export default observer(Features); diff --git a/server/presenters/team.js b/server/presenters/team.js index 3f91c1e3a..f90b81be4 100644 --- a/server/presenters/team.js +++ b/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, diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json index a80e689f8..d20cda745 100644 --- a/shared/i18n/locales/en_US/translation.json +++ b/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",