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

frontend/src/helpers/roles.ts

@@ -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);

frontend/src/hooks/api/externalGroupOrgRoleMappings/index.ts

@@ -0,0 +1,3 @@
+export * from "./mutations";
+export * from "./queries";
+export * from "./types";

frontend/src/hooks/api/externalGroupOrgRoleMappings/mutations.tsx

@@ -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());
+    }
+  });
+};

frontend/src/hooks/api/externalGroupOrgRoleMappings/queries.tsx

@@ -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
+  });
+};

frontend/src/hooks/api/externalGroupOrgRoleMappings/types.ts

@@ -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[];

frontend/src/hooks/api/integrationAuth/index.tsx

@@ -1,3 +1,4 @@
+export { useDuplicateIntegrationAuth } from "./mutations";
 export {
   useAuthorizeIntegration,
   useDeleteIntegrationAuth,

frontend/src/hooks/api/integrationAuth/mutations.tsx

@@ -0,0 +1,19 @@
+import { useMutation } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { IntegrationAuth, TDuplicateIntegrationAuthDTO } from "./types";
+
+// For now, this should only be used in the Github app integration flow.
+export const useDuplicateIntegrationAuth = () => {
+  return useMutation<IntegrationAuth, {}, TDuplicateIntegrationAuthDTO>({
+    mutationFn: async (body) => {
+      const { data } = await apiRequest.post<{ integrationAuth: IntegrationAuth }>(
+        `/api/v1/integration-auth/${body.integrationAuthId}/duplicate`,
+        body
+      );
+
+      return data.integrationAuth;
+    }
+  });
+};

frontend/src/hooks/api/integrationAuth/queries.tsx

@@ -777,11 +777,13 @@ export const useAuthorizeIntegration = () => {
       workspaceId,
       code,
       integration,
+      installationId,
       url
     }: {
       workspaceId: string;
       code: string;
       integration: string;
+      installationId?: string;
       url?: string;
     }) => {
       const {
@@ -790,6 +792,7 @@ export const useAuthorizeIntegration = () => {
         workspaceId,
         code,
         integration,
+        installationId,
         url
       });
 

frontend/src/hooks/api/integrationAuth/types.ts

@@ -9,6 +9,10 @@ export type IntegrationAuth = {
   keyEncoding: string;
   url?: string;
   teamId?: string;
+  metadata: {
+    installationName?: string;
+    installationId?: string;
+  };
 };
 
 export type App = {
@@ -84,3 +88,8 @@ export type TeamCityBuildConfig = {
   name: string;
   buildConfigId: string;
 };
+
+export type TDuplicateIntegrationAuthDTO = {
+  integrationAuthId: string;
+  projectId: string;
+};

frontend/src/hooks/api/organization/index.ts

@@ -8,8 +8,9 @@ export {
   useDeleteOrgTaxId,
   useGetIdentityMembershipOrgs,
   useGetOrganizationGroups,
-  useGetOrganizations, 
+  useGetOrganizations,
   useGetOrgBillingDetails,
+  useGetOrgIntegrationAuths,
   useGetOrgInvoices,
   useGetOrgLicenses,
   useGetOrgPlanBillingInfo,
@@ -20,4 +21,4 @@ export {
   useGetOrgTrialUrl,
   useUpdateOrg,
   useUpdateOrgBillingDetails
-} from "./queries";
+} from "./queries";

frontend/src/hooks/api/organization/queries.tsx

@@ -4,6 +4,7 @@ import { apiRequest } from "@app/config/request";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 
 import { TGroupOrgMembership } from "../groups/types";
+import { IntegrationAuth } from "../types";
 import {
   BillingDetails,
   Invoice,
@@ -39,7 +40,8 @@ export const organizationKeys = {
     ...params
   }: TListOrgIdentitiesDTO) =>
     [...organizationKeys.getOrgIdentityMemberships(orgId), params] as const,
-  getOrgGroups: (orgId: string) => [{ orgId }, "organization-groups"] as const
+  getOrgGroups: (orgId: string) => [{ orgId }, "organization-groups"] as const,
+  getOrgIntegrationAuths: (orgId: string) => [{ orgId }, "integration-auths"] as const
 };
 
 export const fetchOrganizations = async () => {
@@ -473,3 +475,21 @@ export const useGetOrganizationGroups = (organizationId: string) => {
     }
   });
 };
+
+export const useGetOrgIntegrationAuths = <TData = IntegrationAuth[],>(
+  organizationId: string,
+  select?: (data: IntegrationAuth[]) => TData
+) => {
+  return useQuery({
+    queryKey: organizationKeys.getOrgIntegrationAuths(organizationId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ authorizations: IntegrationAuth[] }>(
+        `/api/v1/organization/${organizationId}/integration-authorizations`
+      );
+
+      return data.authorizations;
+    },
+    enabled: Boolean(organizationId),
+    select
+  });
+};

frontend/src/hooks/api/users/types.ts

@@ -56,6 +56,7 @@ export type OrgUser = {
     lastName: string;
     id: string;
     publicKey: string;
+    superAdmin: boolean;
   };
   inviteEmail: string;
   organization: string;

frontend/src/layouts/AdminLayout/AdminLayout.tsx

@@ -157,7 +157,7 @@ export const AdminLayout = ({ children }: LayoutProps) => {
                         {user?.superAdmin && (
                           <Link href="/admin" legacyBehavior>
                             <DropdownMenuItem className="mt-1 border-t border-mineshaft-600">
-                              Admin Panel
+                              Server Admin Console
                             </DropdownMenuItem>
                           </Link>
                         )}

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -510,7 +510,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                         {user?.superAdmin && (
                           <Link href="/admin" legacyBehavior>
                             <DropdownMenuItem className="mt-1 border-t border-mineshaft-600">
-                              Server Admin Panel
+                              Server Admin Console
                             </DropdownMenuItem>
                           </Link>
                         )}

frontend/src/pages/integrations/github/auth-mode-selection.tsx

@@ -0,0 +1,108 @@
+import crypto from "crypto";
+
+import { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  Button,
+  Card,
+  CardBody,
+  CardTitle,
+  FormControl,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { useGetCloudIntegrations } from "@app/hooks/api";
+
+enum AuthMethod {
+  APP = "APP",
+  OAUTH = "OAUTH"
+}
+
+export default function GithubIntegrationAuthModeSelectionPage() {
+  const router = useRouter();
+  const { data: cloudIntegrations } = useGetCloudIntegrations();
+  const githubIntegration = cloudIntegrations?.find((integration) => integration.slug === "github");
+  const [selectedAuthMethod, setSelectedAuthMethod] = useState<AuthMethod>(AuthMethod.APP);
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Head>
+        <title>Select GitHub Integration Auth</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle
+          className="px-6 text-left text-xl"
+          subTitle="Select how you'd like to integrate with GitHub. We recommend using the GitHub App method for fine-grained access."
+        >
+          <div className="flex flex-row items-center">
+            <div className="flex items-center pb-0.5">
+              <Image
+                src="/images/integrations/GitHub.png"
+                height={30}
+                width={30}
+                alt="Github logo"
+              />
+            </div>
+            <span className="ml-2.5">GitHub Integration </span>
+            <Link href="https://infisical.com/docs/integrations/cicd/githubactions" passHref>
+              <a target="_blank" rel="noopener noreferrer">
+                <div className="ml-2 mb-1 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                  Docs
+                  <FontAwesomeIcon
+                    icon={faArrowUpRightFromSquare}
+                    className="ml-1.5 mb-[0.07rem] text-xxs"
+                  />
+                </div>
+              </a>
+            </Link>
+          </div>
+        </CardTitle>
+        <CardBody>
+          <FormControl label="Select authentication method">
+            <Select
+              value={selectedAuthMethod}
+              onValueChange={(val) => {
+                setSelectedAuthMethod(val as AuthMethod);
+              }}
+              className="w-full border border-mineshaft-500"
+            >
+              <SelectItem value={AuthMethod.APP}>GitHub App (Recommended)</SelectItem>
+              <SelectItem value={AuthMethod.OAUTH}>OAuth</SelectItem>
+            </Select>
+          </FormControl>
+          <div className="flex items-end">
+            <Button
+              onClick={() => {
+                if (selectedAuthMethod === AuthMethod.APP) {
+                  router.push("/integrations/select-integration-auth?integrationSlug=github");
+                } else {
+                  const state = crypto.randomBytes(16).toString("hex");
+                  localStorage.setItem("latestCSRFToken", state);
+
+                  window.location.assign(
+                    `https://github.com/login/oauth/authorize?client_id=${githubIntegration?.clientId}&response_type=code&scope=repo,admin:org&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`
+                  );
+                }
+              }}
+              colorSchema="primary"
+              variant="outline_bg"
+              className="mt-4 ml-auto w-min"
+            >
+              Connect to GitHub
+            </Button>
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  );
+}
+
+GithubIntegrationAuthModeSelectionPage.requireAuth = true;

frontend/src/pages/integrations/github/create.tsx

@@ -478,7 +478,7 @@ export default function GitHubCreateIntegrationPage() {
                           errorText={
                             integrationAuthOrgs?.length ? error?.message : "No organizations found"
                           }
-                          isError={Boolean(integrationAuthOrgs?.length && error?.message)}
+                          isError={Boolean(integrationAuthOrgs?.length || error?.message)}
                         >
                           <Select
                             value={field.value}

frontend/src/pages/integrations/github/oauth2/callback.tsx

@@ -8,18 +8,23 @@ export default function GitHubOAuth2CallbackPage() {
   const router = useRouter();
   const { mutateAsync } = useAuthorizeIntegration();
 
-  const { code, state } = queryString.parse(router.asPath.split("?")[1]);
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const { code, state, installation_id } = queryString.parse(router.asPath.split("?")[1]);
 
   useEffect(() => {
     (async () => {
       try {
         // validate state
-        if (state !== localStorage.getItem("latestCSRFToken")) return;
+        if (state !== localStorage.getItem("latestCSRFToken")) {
+          return;
+        }
+
         localStorage.removeItem("latestCSRFToken");
 
         const integrationAuth = await mutateAsync({
           workspaceId: localStorage.getItem("projectData.id") as string,
           code: code as string,
+          installationId: installation_id as string,
           integration: "github"
         });
 

frontend/src/pages/integrations/select-integration-auth.tsx

@@ -0,0 +1,193 @@
+import crypto from "crypto";
+
+import { useCallback, useEffect } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import { Button, Card, CardTitle, ContentLoader } from "@app/components/v2";
+import { useOrganization, useWorkspace } from "@app/context";
+import {
+  useDuplicateIntegrationAuth,
+  useGetCloudIntegrations,
+  useGetOrgIntegrationAuths
+} from "@app/hooks/api";
+import { IntegrationAuth } from "@app/hooks/api/types";
+
+export default function SelectIntegrationAuthPage() {
+  const router = useRouter();
+  const { data: cloudIntegrations } = useGetCloudIntegrations();
+  const { currentOrg } = useOrganization();
+  const { currentWorkspace } = useWorkspace();
+  const orgId = currentOrg?.id || "";
+
+  const integrationSlug = router.query.integrationSlug as string;
+
+  const currentIntegration = cloudIntegrations?.find(
+    (integration) => integration.slug === integrationSlug
+  );
+  const { mutateAsync: duplicateIntegrationAuth, isLoading: isIntegrationAuthSelectLoading } =
+    useDuplicateIntegrationAuth();
+
+  // for Github, we want to reuse the same connection across the Infisical organization
+  // when we do need to reuse this page for other integrations, add handling to fetch workspace integration auths instead
+  const {
+    data: integrationAuths,
+    isLoading: isLoadingIntegrationAuths,
+    isSuccess: isLoadingIntegrationAuthsSuccess
+  } = useGetOrgIntegrationAuths(
+    orgId,
+    useCallback(
+      (data: IntegrationAuth[]) => {
+        const filteredIntegrationAuths = data.filter(
+          (integrationAuth) => integrationAuth.integration === integrationSlug
+        );
+
+        if (integrationSlug === "github") {
+          const sameProjectIntegrationAuths = filteredIntegrationAuths.filter(
+            (auth) => auth.projectId === currentWorkspace?.id
+          );
+          const differentProjectIntegrationAuths = filteredIntegrationAuths.filter(
+            (auth) => auth.projectId !== currentWorkspace?.id
+          );
+
+          const installationIds = new Set<string>();
+
+          // for now, we only display the integration auths for Github apps
+          return (
+            // we concatenate it this way so that integration auths from the same project are prioritized for display
+            sameProjectIntegrationAuths
+              .concat(differentProjectIntegrationAuths)
+              .filter((integrationAuth) => Boolean(integrationAuth.metadata?.installationId))
+              // we filter it so that we only show unique installations because the same installation/connection
+              // can be used in multiple integration auths
+              .filter((integrationAuth) => {
+                const isProcessedInstallationId = installationIds.has(
+                  integrationAuth.metadata.installationId as string
+                );
+
+                if (!isProcessedInstallationId) {
+                  installationIds.add(integrationAuth.metadata.installationId as string);
+                }
+
+                return !isProcessedInstallationId;
+              })
+          );
+        }
+
+        return [];
+      },
+      [integrationSlug]
+    )
+  );
+
+  const handleNewConnection = () => {
+    const state = crypto.randomBytes(16).toString("hex");
+    localStorage.setItem("latestCSRFToken", state);
+
+    if (integrationSlug === "github") {
+      // for now we only handle Github apps
+      window.location.assign(
+        `https://github.com/apps/${currentIntegration?.clientSlug}/installations/new?state=${state}`
+      );
+    }
+  };
+
+  useEffect(() => {
+    if (
+      !isLoadingIntegrationAuths &&
+      integrationAuths?.length === 0 &&
+      isLoadingIntegrationAuthsSuccess
+    ) {
+      handleNewConnection();
+    }
+  }, [isLoadingIntegrationAuths, integrationAuths, isLoadingIntegrationAuthsSuccess]);
+
+  const logo = integrationSlug === "github" ? "/images/integrations/GitHub.png" : "";
+
+  const handleConnectionSelect = async (integrationAuth: IntegrationAuth) => {
+    if (integrationSlug === "github") {
+      if (integrationAuth.projectId === currentWorkspace?.id) {
+        router.push(`/integrations/github/create?integrationAuthId=${integrationAuth.id}`);
+      } else {
+        // we create a copy of the existing integration auth from another project to the current project
+        const newIntegrationAuth = await duplicateIntegrationAuth({
+          projectId: currentWorkspace?.id || "",
+          integrationAuthId: integrationAuth.id
+        });
+
+        router.push(`/integrations/github/create?integrationAuthId=${newIntegrationAuth.id}`);
+      }
+    }
+  };
+
+  if (
+    isLoadingIntegrationAuths ||
+    (integrationAuths?.length === 0 && isLoadingIntegrationAuthsSuccess)
+  ) {
+    return <ContentLoader />;
+  }
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Head>
+        <title>Select Connection</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
+        <CardTitle
+          className="px-6 text-left text-xl"
+          subTitle="Select an existing connection below or create a new one for your integration."
+        >
+          <div className="flex flex-row items-center">
+            <div className="flex items-center pb-0.5">
+              <Image src={logo} height={30} width={30} alt="Integration logo" />
+            </div>
+            <span className="ml-2.5">Select Connection</span>
+          </div>
+        </CardTitle>
+        <div className="mb-7 flex flex-col items-center">
+          {!isLoadingIntegrationAuths && integrationAuths?.length
+            ? integrationAuths.map((integrationAuth) => {
+                let connectionName = "";
+
+                if (integrationAuth.integration === "github") {
+                  connectionName = integrationAuth.metadata?.installationName || "";
+                }
+
+                return (
+                  <Button
+                    colorSchema="secondary"
+                    className="mt-3 w-3/4"
+                    isDisabled={isIntegrationAuthSelectLoading}
+                    key={integrationAuth.id}
+                    size="sm"
+                    type="submit"
+                    onClick={() => handleConnectionSelect(integrationAuth)}
+                  >
+                    {connectionName}
+                  </Button>
+                );
+              })
+            : undefined}
+          <div className="mt-6 flex w-full flex-row items-center justify-center">
+            <div className="w-1/5 border-t border-mineshaft-400" />
+            <p className="mx-4 text-xs text-gray-400">OR</p>
+            <div className="w-1/5 border-t border-mineshaft-400" />
+          </div>
+          <Button
+            colorSchema="primary"
+            className="mt-6 w-3/4"
+            size="sm"
+            type="submit"
+            onClick={handleNewConnection}
+          >
+            Create New Connection
+          </Button>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+SelectIntegrationAuthPage.requireAuth = true;

frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx

@@ -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`;

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx

@@ -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";
 

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -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

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx

@@ -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();

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/ExternalGroupOrgRoleMappings.tsx

@@ -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>
+  );
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx

@@ -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>

frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx

@@ -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

frontend/src/views/admin/DashboardPage/DashboardPage.tsx

@@ -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>

frontend/src/views/admin/DashboardPage/UserPanel.tsx

@@ -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 && (