Introduce UI for Custom Roles

packages/back-end/src/models/OrganizationModel.ts

@@ -515,6 +515,12 @@ export async function removeCustomRole(
   teams: TeamInterface[],
   id: string
 ) {
+  // Make sure the id isn't the org's default
+  if (org.settings?.defaultRole?.role === id) {
+    throw new Error(
+      "Cannot delete role. This role is set as the organization's default role."
+    );
+  }
   // Make sure no members, invites, pending members, or teams are using the role
   if (org.members.some((m) => usingRole(m, id))) {
     throw new Error("Role is currently being used by at least one member");

packages/back-end/src/routers/organizations/organizations.controller.ts

@@ -733,6 +733,7 @@ export async function getOrganization(req: AuthRequest, res: Response) {
       freeTrialDate: org.freeTrialDate,
       discountCode: org.discountCode || "",
       slackTeam: connections?.slack?.team,
+      customRoles: org.customRoles,
       settings: {
         ...settings,
         attributeSchema: filteredAttributes,

packages/back-end/src/util/migrations.ts

@@ -5,7 +5,8 @@ import {
   DEFAULT_SEQUENTIAL_TESTING_TUNING_PARAMETER,
   DEFAULT_STATS_ENGINE,
 } from "shared/constants";
-import { getDefaultRole } from "shared/permissions";
+import { RESERVED_ROLE_IDS, getDefaultRole } from "shared/permissions";
+import { accountFeatures, getAccountPlan } from "enterprise";
 import { LegacyReportInterface, ReportInterface } from "@back-end/types/report";
 import { SdkWebHookLogDocument } from "../models/SdkWebhookLogModel";
 import { LegacyMetricInterface, MetricInterface } from "../../types/metric";
@@ -388,6 +389,7 @@ export function upgradeOrganizationDoc(
   doc: OrganizationInterface
 ): OrganizationInterface {
   const org = cloneDeep(doc);
+  const commercialFeatures = [...accountFeatures[getAccountPlan(org)]];
 
   // Add settings from config.json
   const configSettings = getConfigOrganizationSettings();
@@ -409,6 +411,18 @@ export function upgradeOrganizationDoc(
   // Add a default role if one doesn't exist
   if (!org.settings.defaultRole) {
     org.settings.defaultRole = getDefaultRole(org);
+  } else {
+    // if the defaultRole is a custom role and the org no longer has that feature, default to collaborator
+    if (
+      !RESERVED_ROLE_IDS.includes(org.settings.defaultRole.role) &&
+      !commercialFeatures.includes("custom-roles")
+    ) {
+      org.settings.defaultRole = {
+        role: "collaborator",
+        environments: [],
+        limitAccessByEnvironment: false,
+      };
+    }
   }
 
   // Default attribute schema for backwards compatibility

packages/front-end/components/Button.tsx

@@ -20,6 +20,7 @@ interface Props
   children: ReactNode;
   loading?: boolean;
   stopPropagation?: boolean;
+  loadingCta?: string;
 }
 
 const Button: FC<Props> = ({
@@ -31,6 +32,7 @@ const Button: FC<Props> = ({
   disabled,
   loading: _externalLoading,
   stopPropagation,
+  loadingCta = "Loading",
   ...otherProps
 }) => {
   const [_internalLoading, setLoading] = useState(false);
@@ -64,7 +66,7 @@ const Button: FC<Props> = ({
       >
         {loading ? (
           <>
-            <LoadingSpinner /> Loading
+            <LoadingSpinner /> {loadingCta}
           </>
         ) : (
           children

packages/front-end/components/Layout/Layout.tsx

@@ -155,7 +155,7 @@ const navlinks: SidebarLinkProps[] = [
           permissionsUtils.canManageOrgSettings(),
       },
       {
-        name: "Team",
+        name: "Members",
         href: "/settings/team",
         path: /^settings\/team/,
         filter: ({ permissionsUtils }) => permissionsUtils.canManageTeam(),

packages/front-end/components/Settings/Team/InviteModal.tsx

@@ -148,6 +148,7 @@ const InviteModal: FC<{ mutate: () => void; close: () => void }> = ({
       header="Invite Member"
       open={true}
       cta="Invite"
+      size="lg"
       closeCta={
         successfulInvites.length || failedInvites.length ? "Close" : "Cancel"
       }

packages/front-end/components/Settings/Team/SingleRoleSelector.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useMemo } from "react";
 import { MemberRoleInfo } from "back-end/types/organization";
 import uniqid from "uniqid";
-import { roleSupportsEnvLimit } from "shared/permissions";
+import { RESERVED_ROLE_IDS, roleSupportsEnvLimit } from "shared/permissions";
 import { useUser } from "@/services/UserContext";
 import { useEnvironments } from "@/services/features";
 import MultiSelectField from "@/components/Forms/MultiSelectField";
@@ -24,6 +24,7 @@ export default function SingleRoleSelector({
 }) {
   const { roles, hasCommercialFeature, organization } = useUser();
   const hasFeature = hasCommercialFeature("advanced-permissions");
+  const hasCustomRolesFeature = hasCommercialFeature("custom-roles");
 
   const isNoAccessRoleEnabled = hasCommercialFeature("no-access-role");
 
@@ -33,10 +34,42 @@ export default function SingleRoleSelector({
     roleOptions = roles.filter((r) => r.id !== "noaccess");
   }
 
+  if (!includeAdminRole) {
+    roleOptions = roleOptions.filter((r) => r.id !== "admin");
+  }
+
+  const standardOptions: { label: string; value: string }[] = [];
+  const customOptions: { label: string; value: string }[] = [];
+
+  roleOptions.forEach((r) => {
+    if (RESERVED_ROLE_IDS.includes(r.id)) {
+      standardOptions.push({ label: r.id, value: r.id });
+    } else {
+      if (hasCustomRolesFeature) {
+        customOptions.push({ label: r.id, value: r.id });
+      }
+    }
+  });
+
+  const groupedOptions = [
+    {
+      label: "Standard",
+      options: standardOptions,
+    },
+    {
+      label: "Custom",
+      options: customOptions,
+    },
+  ];
+
   const availableEnvs = useEnvironments();
 
   const id = useMemo(() => uniqid(), []);
 
+  const formatGroupLabel = (data) => (
+    <div className={data.label === "Custom" ? "border-bottom my-3" : ""}></div>
+  );
+
   return (
     <div>
       <SelectField
@@ -48,23 +81,16 @@ export default function SingleRoleSelector({
             role,
           });
         }}
-        options={roleOptions
-          .filter((r) => includeAdminRole || r.id !== "admin")
-          .map((r) => ({
-            label: r.id,
-            value: r.id,
-          }))}
+        options={groupedOptions}
         sort={false}
+        formatGroupLabel={formatGroupLabel}
         formatOptionLabel={(value) => {
           const r = roles.find((r) => r.id === value.label);
+          if (!r) return <strong>{value.label}</strong>;
           return (
-            <div className="d-flex align-items-center">
-              {/* @ts-expect-error TS(2532) If you come across this, please fix it!: Object is possibly 'undefined'. */}
-              <strong style={{ width: 110 }}>{r.id}</strong>
-              <small className="ml-2">
-                {/* @ts-expect-error TS(2532) If you come across this, please fix it!: Object is possibly 'undefined'. */}
-                <em>{r.description}</em>
-              </small>
+            <div>
+              <strong className="pr-2">{r.id}.</strong>
+              {r.description}
             </div>
           );
         }}

packages/front-end/components/Settings/Team/UpdateDefaultRoleForm.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { getDefaultRole } from "shared/permissions";
+import { RESERVED_ROLE_IDS, getDefaultRole } from "shared/permissions";
 import Button from "@/components/Button";
 import SelectField from "@/components/Forms/SelectField";
 import { useUser } from "@/services/UserContext";
@@ -11,6 +11,29 @@ export default function UpdateDefaultRoleForm() {
   const [defaultRoleError, setDefaultRoleError] = useState<string | null>(null);
 
   const { apiCall } = useAuth();
+  const roleOptions = [...roles];
+
+  const standardOptions: { label: string; value: string }[] = [];
+  const customOptions: { label: string; value: string }[] = [];
+
+  roleOptions.forEach((r) => {
+    if (RESERVED_ROLE_IDS.includes(r.id)) {
+      standardOptions.push({ label: r.id, value: r.id });
+    } else {
+      customOptions.push({ label: r.id, value: r.id });
+    }
+  });
+
+  const groupedOptions = [
+    {
+      label: "Standard",
+      options: standardOptions,
+    },
+    {
+      label: "Custom",
+      options: customOptions,
+    },
+  ];
 
   const form = useForm({
     defaultValues: {
@@ -36,6 +59,11 @@ export default function UpdateDefaultRoleForm() {
       setDefaultRoleError(e.message);
     }
   });
+
+  const formatGroupLabel = (data) => (
+    <div className={data.label === "Custom" ? "border-bottom my-3" : ""}></div>
+  );
+
   return (
     <div className="bg-white p-3 border mt-5 mb-5">
       <div className="row">
@@ -50,20 +78,16 @@ export default function UpdateDefaultRoleForm() {
             onChange={async (role: string) => {
               form.setValue("defaultRole", role);
             }}
-            options={roles.map((r) => ({
-              label: r.id,
-              value: r.id,
-            }))}
+            options={groupedOptions}
             sort={false}
+            formatGroupLabel={formatGroupLabel}
             formatOptionLabel={(value) => {
-              const r = roles.find((r) => r.id === value.value);
-              if (!r) return value.label;
+              const r = roles.find((r) => r.id === value.label);
+              if (!r) return <strong>{value.label}</strong>;
               return (
-                <div className="d-flex align-items-center">
-                  <strong style={{ width: 110 }}>{r.id}</strong>
-                  <small className="ml-2">
-                    <em>{r.description}</em>
-                  </small>
+                <div>
+                  <strong className="pr-2">{r.id}.</strong>
+                  {r.description}
                 </div>
               );
             }}