feat: Add setting to allow users to send invites (#6488)

app/components/InputSelectRole.tsx

@@ -1,39 +0,0 @@
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { $Diff } from "utility-types";
-import InputSelect, { Props, Option } from "~/components/InputSelect";
-
-const InputSelectRole = (
-  props: $Diff<
-    Props,
-    {
-      options: Array<Option>;
-      ariaLabel: string;
-    }
-  >
-) => {
-  const { t } = useTranslation();
-  return (
-    <InputSelect
-      label={t("Role")}
-      options={[
-        {
-          label: t("Editor"),
-          value: "member",
-        },
-        {
-          label: t("Viewer"),
-          value: "viewer",
-        },
-        {
-          label: t("Admin"),
-          value: "admin",
-        },
-      ]}
-      ariaLabel={t("Role")}
-      {...props}
-    />
-  );
-};
-
-export default InputSelectRole;

app/scenes/Invite.tsx

@@ -12,7 +12,7 @@ import Button from "~/components/Button";
 import CopyToClipboard from "~/components/CopyToClipboard";
 import Flex from "~/components/Flex";
 import Input from "~/components/Input";
-import InputSelectRole from "~/components/InputSelectRole";
+import InputSelect from "~/components/InputSelect";
 import NudeButton from "~/components/NudeButton";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
 import Text from "~/components/Text";
@@ -157,6 +157,28 @@ function Invite({ onSubmit }: Props) {
     </span>
   );
 
+  const options = React.useMemo(() => {
+    const options = [
+      {
+        label: t("Editor"),
+        value: "member",
+      },
+      {
+        label: t("Viewer"),
+        value: "viewer",
+      },
+    ];
+
+    if (user.isAdmin) {
+      options.push({
+        label: t("Admin"),
+        value: "admin",
+      });
+    }
+
+    return options;
+  }, [t, user]);
+
   return (
     <form onSubmit={handleSubmit}>
       {team.guestSignin ? (
@@ -236,7 +258,10 @@ function Invite({ onSubmit }: Props) {
               required={!!invite.email}
               flex
             />
-            <InputSelectRole
+            <InputSelect
+              label={t("Role")}
+              ariaLabel={t("Role")}
+              options={options}
               onChange={(role: UserRole) => handleRoleChange(role, index)}
               value={invite.role}
               labelHidden={index !== 0}

app/scenes/Settings/Security.tsx

@@ -60,7 +60,7 @@ function Security() {
   const saveData = React.useCallback(
     async (newData) => {
       try {
-        setData(newData);
+        setData((prev) => ({ ...prev, ...newData }));
         await team.save(newData);
         showSuccessMessage();
       } catch (err) {
@@ -72,16 +72,16 @@ function Security() {
 
   const handleChange = React.useCallback(
     async (ev: React.ChangeEvent<HTMLInputElement>) => {
-      await saveData({ ...data, [ev.target.id]: ev.target.checked });
+      await saveData({ [ev.target.id]: ev.target.checked });
     },
-    [data, saveData]
+    [saveData]
   );
 
   const handleDefaultRoleChange = React.useCallback(
     async (newDefaultRole: string) => {
-      await saveData({ ...data, defaultUserRole: newDefaultRole });
+      await saveData({ defaultUserRole: newDefaultRole });
     },
-    [data, saveData]
+    [saveData]
   );
 
   const handlePreferenceChange = React.useCallback(
@@ -192,6 +192,17 @@ function Security() {
       </SettingRow>
 
       <h2>{t("Access")}</h2>
+      <SettingRow
+        label={t("Allow users to send invites")}
+        name={TeamPreference.MembersCanInvite}
+        description={t("Allow editors to invite other people to the workspace")}
+      >
+        <Switch
+          id={TeamPreference.MembersCanInvite}
+          checked={team.getPreference(TeamPreference.MembersCanInvite)}
+          onChange={handlePreferenceChange}
+        />
+      </SettingRow>
       {isCloudHosted && (
         <SettingRow
           label={t("Require invites")}
@@ -280,7 +291,7 @@ function Security() {
         label={t("Collection creation")}
         name="memberCollectionCreate"
         description={t(
-          "Allow members to create new collections within the workspace"
+          "Allow editors to create new collections within the workspace"
         )}
       >
         <Switch