Merge remote-tracking branch 'origin/main' into feat/moved-mfa-to-org-level

2026-10-15 15:41:27 +00:00 · 2024-10-18 20:07:59 +08:00
parent 25b30e441a d7d88f3356
commit 5debeb421d
94 changed files with 2353 additions and 265 deletions
@@ -60,7 +60,7 @@ export const redirectForProviderAuth = (integrationOption: TCloudIntegration) =>
        link = `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/integrations/netlify/oauth2/callback`;
        break;
      case "github":
-        link = `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo,admin:org&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`;
+        link = `${window.location.origin}/integrations/github/auth-mode-selection`;
        break;
      case "gitlab":
        link = `${window.location.origin}/integrations/gitlab/authorize`;
@@ -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";

@@ -7,6 +7,7 @@ import { twMerge } from "tailwind-merge";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
+  Badge,
  Button,
  DropdownMenu,
  DropdownMenuContent,
@@ -188,7 +189,14 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                      className="h-10 w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
                      onClick={() => router.push(`/org/${orgId}/memberships/${orgMembershipId}`)}
                    >
-                      <Td className={isActive ? "" : "text-mineshaft-400"}>{name}</Td>
+                      <Td className={isActive ? "" : "text-mineshaft-400"}>
+                        {name}
+                        {u.superAdmin && (
+                          <Badge variant="primary" className="ml-2">
+                            Server Admin
+                          </Badge>
+                        )}
+                      </Td>
                      <Td className={isActive ? "" : "text-mineshaft-400"}>{username}</Td>
                      <Td>
                        <OrgPermissionCan
@@ -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
@@ -125,7 +125,7 @@ export const AdminDashboardPage = () => {
    <div className="container mx-auto max-w-7xl px-4 pb-12 text-white dark:[color-scheme:dark]">
      <div className="mx-auto mb-6 w-full max-w-7xl pt-6">
        <div className="mb-8 flex flex-col items-start justify-between text-xl">
-          <h1 className="text-3xl font-semibold">Admin Dashboard</h1>
+          <h1 className="text-3xl font-semibold">Server Admin Console</h1>
          <p className="text-base text-bunker-300">Manage your instance level configurations.</p>
        </div>
      </div>
@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import { createNotification } from "@app/components/notifications";
 import {
+  Badge,
  Button,
  DeleteActionModal,
  EmptyState,
@@ -69,12 +70,19 @@ const UserPanelTable = ({
              {isLoading && <TableSkeleton columns={4} innerKey="users" />}
              {!isLoading &&
                data?.pages?.map((users) =>
-                  users.map(({ username, email, firstName, lastName, id }) => {
+                  users.map(({ username, email, firstName, lastName, id, superAdmin }) => {
                    const name = firstName || lastName ? `${firstName} ${lastName}` : "-";

                    return (
                      <Tr key={`user-${id}`} className="w-full">
-                        <Td className="w-5/12">{name}</Td>
+                        <Td className="w-5/12">
+                          {name}
+                          {superAdmin && (
+                            <Badge variant="primary" className="ml-2">
+                              Server Admin
+                            </Badge>
+                          )}
+                        </Td>
                        <Td className="w-5/12">{email}</Td>
                        <Td>
                          {userId !== id && (