feat: allow ad-hoc creation of new teams (#3964)

Co-authored-by: Tom Moor <tom@getoutline.com>

app/scenes/CollectionPermissions/index.tsx

@@ -213,7 +213,7 @@ function CollectionPermissions({ collectionId }: Props) {
       <PermissionExplainer size="small">
         {!collection.permission && (
           <Trans
-            defaults="The <em>{{ collectionName }}</em> collection is private. Team members have no access to it by default."
+            defaults="The <em>{{ collectionName }}</em> collection is private. Workspace members have no access to it by default."
             values={{
               collectionName,
             }}
@@ -224,8 +224,7 @@ function CollectionPermissions({ collectionId }: Props) {
         )}
         {collection.permission === CollectionPermission.ReadWrite && (
           <Trans
-            defaults="Team members can view and edit documents in the <em>{{ collectionName }}</em> collection by
-          default."
+            defaults="Workspace members can view and edit documents in the <em>{{ collectionName }}</em> collection by default."
             values={{
               collectionName,
             }}
@@ -236,7 +235,8 @@ function CollectionPermissions({ collectionId }: Props) {
         )}
         {collection.permission === CollectionPermission.Read && (
           <Trans
-            defaults="Team members can view documents in the <em>{{ collectionName }}</em> collection by default."
+            defaults="Workspace members can view documents in the <em>{{ collectionName }}</em> collection by
+          default."
             values={{
               collectionName,
             }}
@@ -288,9 +288,7 @@ function CollectionPermissions({ collectionId }: Props) {
       <Divider />
       {isEmpty && (
         <Empty>
-          <Trans>
-            Add specific access for individual groups and team members
-          </Trans>
+          <Trans>Add additional access for individual members and groups</Trans>
         </Empty>
       )}
       <PaginatedList

app/scenes/Document/components/SharePopover.tsx

@@ -165,7 +165,7 @@ function SharePopover({
             <SwitchText>
               {share?.published
                 ? t("Anyone with the link can view this document")
-                : t("Only team members with permission can view")}
+                : t("Only members with permission can view")}
               {share?.lastAccessedAt && (
                 <>
                   .{" "}
@@ -185,7 +185,7 @@ function SharePopover({
         </SwitchWrapper>
       ) : (
         <Text type="secondary">
-          {t("Only team members with permission can view")}
+          {t("Only members with permission can view")}
         </Text>
       )}
 

app/scenes/DocumentReparent.tsx

@@ -71,7 +71,7 @@ function DocumentReparent({ collection, item, onSubmit, onCancel }: Props) {
       <form onSubmit={handleSubmit}>
         <Text type="secondary">
           <Trans
-            defaults="Heads up – moving the document <em>{{ title }}</em> to the <em>{{ newCollectionName }}</em> collection will grant all team members <em>{{ newPermission }}</em>, they currently have {{ prevPermission }}."
+            defaults="Heads up – moving the document <em>{{ title }}</em> to the <em>{{ newCollectionName }}</em> collection will grant all members of the workspace <em>{{ newPermission }}</em>, they currently have {{ prevPermission }}."
             values={{
               title: item.title,
               prevCollectionName: prevCollection?.name,

app/scenes/GroupMembers/AddPeopleToGroup.tsx

@@ -84,7 +84,7 @@ class AddPeopleToGroup extends React.Component<Props> {
       <Flex column>
         <Text type="secondary">
           {t(
-            "Add team members below to give them access to the group. Need to add someone who’s not yet on the team yet?"
+            "Add members below to give them access to the group. Need to add someone who’s not yet a member?"
           )}{" "}
           <ButtonLink onClick={this.handleInviteModalOpen}>
             {t("Invite them to {{teamName}}", {

app/scenes/GroupMembers/GroupMembers.tsx

@@ -59,7 +59,7 @@ function GroupMembers({ group }: Props) {
         <>
           <Text type="secondary">
             <Trans
-              defaults="Add and remove team members in the <em>{{groupName}}</em> group. Adding people to the group will give them access to any collections this group has been added to."
+              defaults="Add and remove members to the <em>{{groupName}}</em> group. Members of the group will have access to any collections this group has been added to."
               values={{
                 groupName: group.name,
               }}
@@ -82,7 +82,7 @@ function GroupMembers({ group }: Props) {
       ) : (
         <Text type="secondary">
           <Trans
-            defaults="Listing team members in the <em>{{groupName}}</em> group."
+            defaults="Listing members of the <em>{{groupName}}</em> group."
             values={{
               groupName: group.name,
             }}

app/scenes/Invite.tsx

@@ -150,7 +150,7 @@ function Invite({ onSubmit }: Props) {
       {team.guestSignin ? (
         <Text type="secondary">
           <Trans
-            defaults="Invite team members or guests to join your knowledge base. Team members can sign in with {{signinMethods}} or use their email address."
+            defaults="Invite members or guests to join your workspace. They can sign in with {{signinMethods}} or use their email address."
             values={{
               signinMethods: team.signinMethods,
             }}
@@ -159,7 +159,7 @@ function Invite({ onSubmit }: Props) {
       ) : (
         <Text type="secondary">
           <Trans
-            defaults="Invite team members to join your knowledge base. They will need to sign in with {{signinMethods}}."
+            defaults="Invite members to join your workspace. They will need to sign in with {{signinMethods}}."
             values={{
               signinMethods: team.signinMethods,
             }}

app/scenes/Login/index.tsx

@@ -185,7 +185,7 @@ function Login({ children }: Props) {
             <StyledHeading centered>{t("Create an account")}</StyledHeading>
             <GetStarted>
               {t(
-                "Get started by choosing a sign-in method for your new team below…"
+                "Get started by choosing a sign-in method for your new workspace below…"
               )}
             </GetStarted>
           </>

app/scenes/Settings/Details.tsx

@@ -123,7 +123,7 @@ function Details() {
           label={t("Name")}
           name="name"
           description={t(
-            "The team name, usually the same as your company name."
+            "The workspace name, usually the same as your company name."
           )}
         >
           <Input
@@ -165,7 +165,7 @@ function Details() {
           label={t("Start view")}
           name="defaultCollectionId"
           description={t(
-            "This is the screen that team members will first see when they sign in."
+            "This is the screen that workspace members will first see when they sign in."
           )}
         >
           <DefaultCollectionInputSelect

app/scenes/Settings/Features.tsx

@@ -38,7 +38,7 @@ function Features() {
       <Text type="secondary">
         <Trans>
           Manage optional and beta features. Changing these settings will affect
-          the experience for all team members.
+          the experience for all members of the workspace.
         </Trans>
       </Text>
       {team.collaborativeEditing && (

app/scenes/Settings/Security.tsx

@@ -207,7 +207,7 @@ function Security() {
         label={t("Public document sharing")}
         name="sharing"
         description={t(
-          "When enabled, documents can be shared publicly on the internet by any team member"
+          "When enabled, documents can be shared publicly on the internet by any member of the workspace"
         )}
       >
         <Switch id="sharing" checked={data.sharing} onChange={handleChange} />

app/scenes/TeamNew.tsx

@@ -0,0 +1,88 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import User from "~/models/User";
+import Button from "~/components/Button";
+import Flex from "~/components/Flex";
+import Input from "~/components/Input";
+import Text from "~/components/Text";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+
+type Props = {
+  user: User;
+};
+
+function TeamNew({ user }: Props) {
+  const { auth } = useStores();
+  const { t } = useTranslation();
+  const { showToast } = useToasts();
+  const [name, setName] = React.useState("");
+  const [isSaving, setIsSaving] = React.useState(false);
+
+  const handleSubmit = async (ev: React.SyntheticEvent) => {
+    ev.preventDefault();
+    setIsSaving(true);
+
+    try {
+      if (name.trim().length > 1) {
+        await auth.createTeam({
+          name: name.trim(),
+        });
+      }
+    } catch (err) {
+      showToast(err.message, {
+        type: "error",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleNameChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    setName(ev.target.value);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit}>
+        <Text type="secondary">
+          <Trans
+            defaults="Your are creating a new workspace using your current account — <em>{{email}}</em>"
+            values={{
+              email: user.email,
+            }}
+            components={{
+              em: <strong />,
+            }}
+          />
+        </Text>
+
+        <Flex>
+          <Input
+            type="text"
+            label={t("Workspace name")}
+            onChange={handleNameChange}
+            value={name}
+            required
+            autoFocus
+            flex
+          />
+        </Flex>
+        <Text type="secondary">
+          <Trans>
+            When your new workspace is created, you will be the admin, meaning
+            you will have the highest level of permissions and the ability to
+            invite others.
+          </Trans>
+        </Text>
+
+        <Button type="submit" disabled={isSaving || !(name.trim().length > 1)}>
+          {isSaving ? `${t("Creating")}…` : t("Create")}
+        </Button>
+      </form>
+    </>
+  );
+}
+
+export default observer(TeamNew);