Merge pull request #2589 from scott-ray-wilson/entra-group-role-mapping

Feature: SCIM Group to Organization Role Mapping
2026-10-05 19:26:38 +00:00 · 2024-10-16 20:31:26 -04:00
parent 849cad054e 44544e0491
commit 2cff772caa
26 changed files with 801 additions and 41 deletions
@@ -0,0 +1,8 @@
+enum OrgMembershipRole {
+  Admin = "admin",
+  Member = "member",
+  NoAccess = "no-access"
+}
+
+export const isCustomOrgRole = (slug: string) =>
+  !Object.values(OrgMembershipRole).includes(slug as OrgMembershipRole);
@@ -0,0 +1,3 @@
+export * from "./mutations";
+export * from "./queries";
+export * from "./types";
@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+import { externalGroupOrgRoleMappingKeys } from "@app/hooks/api/externalGroupOrgRoleMappings/queries";
+import { TSyncExternalGroupOrgRoleMappingsDTO } from "@app/hooks/api/externalGroupOrgRoleMappings/types";
+
+export const useUpdateExternalGroupOrgRoleMappings = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload: TSyncExternalGroupOrgRoleMappingsDTO) => {
+      const { data } = await apiRequest.put("/api/v1/external-group-mappings", payload);
+
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(externalGroupOrgRoleMappingKeys.list());
+    }
+  });
+};
@@ -0,0 +1,33 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+import { TExternalGroupOrgRoleMappingList } from "@app/hooks/api/externalGroupOrgRoleMappings/types";
+
+export const externalGroupOrgRoleMappingKeys = {
+  all: ["external-group-org-role-mapping"] as const,
+  list: () => [...externalGroupOrgRoleMappingKeys.all, "list"] as const
+};
+
+export const useGetExternalGroupOrgRoleMappings = (
+  options?: Omit<
+    UseQueryOptions<
+      TExternalGroupOrgRoleMappingList,
+      unknown,
+      TExternalGroupOrgRoleMappingList,
+      ReturnType<typeof externalGroupOrgRoleMappingKeys.list>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: externalGroupOrgRoleMappingKeys.list(),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TExternalGroupOrgRoleMappingList>(
+        "/api/v1/external-group-mappings"
+      );
+
+      return data;
+    },
+    ...options
+  });
+};
@@ -0,0 +1,18 @@
+export type TSyncExternalGroupOrgRoleMappingsDTO = {
+  mappings: {
+    groupName: string;
+    roleSlug: string;
+  }[];
+};
+
+export type TExternalGroupOrgRoleMapping = {
+  id: string;
+  groupName: string;
+  role: string;
+  roleId: string;
+  orgId: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type TExternalGroupOrgRoleMappingList = TExternalGroupOrgRoleMapping[];
@@ -25,6 +25,7 @@ import {
  Tooltip
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
+import { isCustomOrgRole } from "@app/helpers/roles";
 import {
  useAddUsersToOrg,
  useFetchServerStatus,
@@ -34,7 +35,6 @@ import {
 import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
 import { ProjectVersion } from "@app/hooks/api/workspace/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
-import { isCustomOrgRole } from "@app/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable";

 import { OrgInviteLink } from "./OrgInviteLink";

@@ -30,20 +30,12 @@ import {
  useOrganization,
  useSubscription
 } from "@app/context";
+import { isCustomOrgRole } from "@app/helpers/roles";
 import { usePopUp } from "@app/hooks";
 import { useDeleteOrgRole, useGetOrgRoles, useUpdateOrg } from "@app/hooks/api";
 import { TOrgRole } from "@app/hooks/api/roles/types";
 import { RoleModal } from "@app/views/Org/RolePage/components";

-enum OrgMembershipRole {
-  Admin = "admin",
-  Member = "member",
-  NoAccess = "no-access"
-}
-
-export const isCustomOrgRole = (slug: string) =>
-  !Object.values(OrgMembershipRole).includes(slug as OrgMembershipRole);
-
 export const OrgRoleTable = () => {
  const router = useRouter();
  const { currentOrg } = useOrganization();
@@ -0,0 +1,213 @@
+import { useEffect } from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  IconButton,
+  Input,
+  Select,
+  SelectItem,
+  Spinner
+} from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useOrgPermission
+} from "@app/context";
+import { isCustomOrgRole } from "@app/helpers/roles";
+import { useGetOrgRoles } from "@app/hooks/api";
+import {
+  useGetExternalGroupOrgRoleMappings,
+  useUpdateExternalGroupOrgRoleMappings
+} from "@app/hooks/api/externalGroupOrgRoleMappings";
+
+const formSchema = z.object({
+  mappings: z
+    .object({
+      groupName: z.string().trim().min(1, { message: "Group name is required" }),
+      roleSlug: z.string()
+    })
+    .array()
+});
+
+type TForm = z.infer<typeof formSchema>;
+
+export const ExternalGroupOrgRoleMappings = () => {
+  const { currentOrg } = useOrganization();
+  const { data: roles, isLoading: isRolesLoading } = useGetOrgRoles(currentOrg?.id!);
+  const { data: mappings } = useGetExternalGroupOrgRoleMappings();
+  const updateMappings = useUpdateExternalGroupOrgRoleMappings();
+  const { permission } = useOrgPermission();
+
+  const {
+    control,
+    formState: { isDirty },
+    handleSubmit,
+    reset
+  } = useForm<TForm>({
+    defaultValues: { mappings: [] },
+    resolver: zodResolver(formSchema)
+  });
+
+  useEffect(() => {
+    if (!mappings || !roles) return;
+
+    reset({
+      mappings: mappings.map((mapping) => ({
+        groupName: mapping.groupName,
+        roleSlug:
+          mapping.role === "custom"
+            ? roles.find((role) => mapping.roleId === role.id)!.slug
+            : mapping.role
+      }))
+    });
+  }, [mappings, roles]);
+
+  const mappingField = useFieldArray({ control, name: "mappings" });
+
+  const handleUpdateMappings = async (form: TForm) => {
+    try {
+      await updateMappings.mutateAsync(form);
+      createNotification({
+        text: "Group organization role mappings updated.",
+        type: "success"
+      });
+    } catch (e) {
+      console.error(e);
+      createNotification({
+        text: "Failed to update group organization role mappings.",
+        type: "error"
+      });
+    }
+  };
+
+  const disableScimEdit = permission.cannot(OrgPermissionActions.Edit, OrgPermissionSubjects.Scim);
+
+  return (
+    <div className="py-4">
+      <h2 className="text-md text-mineshaft-100">SCIM Group to Organization Role Mappings</h2>
+      <p className="text-sm text-mineshaft-300">
+        Assign newly provisioned users a default organization role based on their SCIM group.
+      </p>
+      <form onSubmit={handleSubmit(handleUpdateMappings)} className="pt-4">
+        {isRolesLoading || isRolesLoading ? (
+          <Spinner className="self-center" size="sm" />
+        ) : (
+          <div className="mb-2 flex flex-col space-y-2">
+            {mappingField.fields.map(({ id: scopeFieldId }, i) => (
+              <div key={scopeFieldId} className="flex items-end space-x-2">
+                <div className="flex-grow">
+                  {i === 0 && (
+                    <FormLabel
+                      label="SCIM Group Name"
+                      className="text-xs text-mineshaft-400"
+                      tooltipClassName="max-w-md whitespace-pre-line"
+                      tooltipText="The name associated with this group in your SCIM provider"
+                    />
+                  )}
+                  <Controller
+                    control={control}
+                    name={`mappings.${i}.groupName`}
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        className="mb-0 flex-grow"
+                      >
+                        <Input
+                          isDisabled={disableScimEdit}
+                          {...field}
+                          placeholder="SCIM group identifier..."
+                        />
+                      </FormControl>
+                    )}
+                  />
+                </div>
+                <div className="flex-1">
+                  {i === 0 && (
+                    <span className="text-xs text-mineshaft-400">
+                      Role to Assign Users in this Group
+                    </span>
+                  )}
+                  <Controller
+                    control={control}
+                    name={`mappings.${i}.roleSlug`}
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        className="mb-0 flex-grow"
+                      >
+                        <Select
+                          isDisabled={disableScimEdit}
+                          {...field}
+                          onValueChange={(e) => field.onChange(e)}
+                          className="w-full"
+                        >
+                          {roles?.map((role) => (
+                            <SelectItem value={role.slug} key={`role-${role.id}`}>
+                              {role.name}
+                            </SelectItem>
+                          ))}
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                </div>
+                <IconButton
+                  ariaLabel="delete key"
+                  className="bottom-0.5 h-9"
+                  variant="outline_bg"
+                  isDisabled={disableScimEdit}
+                  onClick={() => {
+                    mappingField.remove(i);
+                  }}
+                >
+                  <FontAwesomeIcon icon={faTrash} />
+                </IconButton>
+              </div>
+            ))}
+            <div>
+              <Button
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                size="xs"
+                variant="outline_bg"
+                isDisabled={disableScimEdit}
+                onClick={() =>
+                  mappingField.append({
+                    groupName: "",
+                    roleSlug: isCustomOrgRole(currentOrg!.defaultMembershipRole)
+                      ? roles?.find((role) => currentOrg?.defaultMembershipRole === role.id)?.slug!
+                      : currentOrg!.defaultMembershipRole
+                  })
+                }
+              >
+                Add Mapping
+              </Button>
+            </div>
+            {isDirty && (
+              <div className="flex w-full justify-end">
+                <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Scim}>
+                  {(isAllowed) => (
+                    <Button isDisabled={!isAllowed} colorSchema="secondary" type="submit">
+                      Update Mappings
+                    </Button>
+                  )}
+                </OrgPermissionCan>
+              </div>
+            )}
+          </div>
+        )}
+      </form>
+    </div>
+  );
+};
@@ -9,6 +9,7 @@ import {
 } from "@app/context";
 import { useUpdateOrg } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
+import { ExternalGroupOrgRoleMappings } from "@app/views/Settings/OrgSettingsPage/components/OrgAuthTab/ExternalGroupOrgRoleMappings";

 import { ScimTokenModal } from "./ScimTokenModal";

@@ -76,6 +77,7 @@ export const OrgScimSection = () => {
        </div>
        <p className="text-sm text-mineshaft-300">Manage SCIM configuration</p>
      </div>
+      <ExternalGroupOrgRoleMappings />
      <div className="py-4">
        <div className="mb-2 flex items-center justify-between">
          <h2 className="text-md text-mineshaft-100">Enable SCIM</h2>
@@ -12,8 +12,8 @@ import {
  useOrganization,
  useOrgPermission
 } from "@app/context";
+import { isCustomOrgRole } from "@app/helpers/roles";
 import { useGetOrgRoles, useUpdateOrg } from "@app/hooks/api";
-import { isCustomOrgRole } from "@app/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable";

 const formSchema = yup.object({
  name: yup