mirror of
https://github.com/fosrl/pangolin.git
synced 2026-05-03 19:14:26 +00:00
Merge branch 'cross-org-idp' into dev
This commit is contained in:
miloschwartz
@@ -97,7 +97,8 @@ export default function GeneralPage() {
|
||||
emailPath: z.string().nullable().optional(),
|
||||
namePath: z.string().nullable().optional(),
|
||||
scopes: z.string().min(1, { message: t("idpScopeRequired") }),
|
||||
autoProvision: z.boolean().default(false)
|
||||
autoProvision: z.boolean().default(false),
|
||||
orgMapping: z.string().optional()
|
||||
});
|
||||
|
||||
// Google form schema (simplified)
|
||||
@@ -109,7 +110,8 @@ export default function GeneralPage() {
|
||||
.min(1, { message: t("idpClientSecretRequired") }),
|
||||
roleMapping: z.string().nullable().optional(),
|
||||
roleId: z.number().nullable().optional(),
|
||||
autoProvision: z.boolean().default(false)
|
||||
autoProvision: z.boolean().default(false),
|
||||
orgMapping: z.string().optional()
|
||||
});
|
||||
|
||||
// Azure form schema (simplified with tenant ID)
|
||||
@@ -122,7 +124,8 @@ export default function GeneralPage() {
|
||||
tenantId: z.string().min(1, { message: t("idpTenantIdRequired") }),
|
||||
roleMapping: z.string().nullable().optional(),
|
||||
roleId: z.number().nullable().optional(),
|
||||
autoProvision: z.boolean().default(false)
|
||||
autoProvision: z.boolean().default(false),
|
||||
orgMapping: z.string().optional()
|
||||
});
|
||||
|
||||
type OidcFormValues = z.infer<typeof OidcFormSchema>;
|
||||
@@ -160,7 +163,8 @@ export default function GeneralPage() {
|
||||
autoProvision: true,
|
||||
roleMapping: null,
|
||||
roleId: null,
|
||||
tenantId: ""
|
||||
tenantId: "",
|
||||
orgMapping: ""
|
||||
}
|
||||
});
|
||||
|
||||
@@ -227,7 +231,8 @@ export default function GeneralPage() {
|
||||
clientSecret: data.idpOidcConfig.clientSecret,
|
||||
autoProvision: data.idp.autoProvision,
|
||||
roleMapping: roleMapping || null,
|
||||
roleId: null
|
||||
roleId: null,
|
||||
orgMapping: data.idpOrg?.orgMapping ?? ""
|
||||
};
|
||||
|
||||
// Add variant-specific fields
|
||||
@@ -344,12 +349,14 @@ export default function GeneralPage() {
|
||||
}
|
||||
|
||||
// Build payload based on variant
|
||||
const orgMappingTrimmed = data.orgMapping?.trim() ?? "";
|
||||
let payload: any = {
|
||||
name: data.name,
|
||||
clientId: data.clientId,
|
||||
clientSecret: data.clientSecret,
|
||||
autoProvision: data.autoProvision,
|
||||
roleMapping: roleMappingExpression
|
||||
roleMapping: roleMappingExpression,
|
||||
orgMapping: orgMappingTrimmed === "" ? null : orgMappingTrimmed
|
||||
};
|
||||
|
||||
// Add variant-specific fields
|
||||
@@ -532,6 +539,10 @@ export default function GeneralPage() {
|
||||
}
|
||||
rawExpression={rawRoleExpression}
|
||||
onRawExpressionChange={setRawRoleExpression}
|
||||
orgMappingField={{
|
||||
control: form.control,
|
||||
name: "orgMapping"
|
||||
}}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
@@ -91,7 +91,8 @@ export default function Page() {
|
||||
tenantId: z.string().optional(),
|
||||
autoProvision: z.boolean().default(false),
|
||||
roleMapping: z.string().nullable().optional(),
|
||||
roleId: z.number().nullable().optional()
|
||||
roleId: z.number().nullable().optional(),
|
||||
orgMapping: z.string().optional()
|
||||
});
|
||||
|
||||
type CreateIdpFormValues = z.infer<typeof createIdpFormSchema>;
|
||||
@@ -112,7 +113,8 @@ export default function Page() {
|
||||
tenantId: "",
|
||||
autoProvision: false,
|
||||
roleMapping: null,
|
||||
roleId: null
|
||||
roleId: null,
|
||||
orgMapping: ""
|
||||
}
|
||||
});
|
||||
|
||||
@@ -177,7 +179,7 @@ export default function Page() {
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
const payload: Record<string, unknown> = {
|
||||
name: data.name,
|
||||
clientId: data.clientId,
|
||||
clientSecret: data.clientSecret,
|
||||
@@ -191,6 +193,10 @@ export default function Page() {
|
||||
scopes: data.scopes,
|
||||
variant: data.type
|
||||
};
|
||||
const trimmedOrgMapping = data.orgMapping?.trim();
|
||||
if (trimmedOrgMapping) {
|
||||
payload.orgMapping = trimmedOrgMapping;
|
||||
}
|
||||
|
||||
// Use the appropriate endpoint based on provider type
|
||||
const endpoint = "oidc";
|
||||
@@ -336,6 +342,10 @@ export default function Page() {
|
||||
}
|
||||
rawExpression={rawRoleExpression}
|
||||
onRawExpressionChange={setRawRoleExpression}
|
||||
orgMappingField={{
|
||||
control: form.control,
|
||||
name: "orgMapping"
|
||||
}}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
@@ -46,7 +46,7 @@ import { Checkbox } from "@app/components/ui/checkbox";
|
||||
import { ListIdpsResponse } from "@server/routers/idp";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { build } from "@server/build";
|
||||
import Image from "next/image";
|
||||
import IdpTypeIcon from "@app/components/IdpTypeIcon";
|
||||
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||
import OrgRolesTagField from "@app/components/OrgRolesTagField";
|
||||
@@ -152,31 +152,8 @@ export default function Page() {
|
||||
|
||||
const getIdpIcon = (variant: string | null) => {
|
||||
if (!variant) return null;
|
||||
|
||||
switch (variant.toLowerCase()) {
|
||||
case "google":
|
||||
return (
|
||||
<Image
|
||||
src="/idp/google.png"
|
||||
alt={t("idpGoogleAlt")}
|
||||
width={24}
|
||||
height={24}
|
||||
className="rounded"
|
||||
/>
|
||||
);
|
||||
case "azure":
|
||||
return (
|
||||
<Image
|
||||
src="/idp/azure.png"
|
||||
alt={t("idpAzureAlt")}
|
||||
width={24}
|
||||
height={24}
|
||||
className="rounded"
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
const type = variant.toLowerCase();
|
||||
return <IdpTypeIcon type={type} size={24} />;
|
||||
};
|
||||
|
||||
const validFor = [
|
||||
@@ -340,15 +317,16 @@ export default function Page() {
|
||||
|
||||
const roleIds = values.roles.map((r) => parseInt(r.id, 10));
|
||||
|
||||
const res = await api.post<AxiosResponse<InviteUserResponse>>(
|
||||
`/org/${orgId}/create-invite`,
|
||||
{
|
||||
email: values.email,
|
||||
roleIds,
|
||||
validHours: parseInt(values.validForHours),
|
||||
sendEmail
|
||||
}
|
||||
)
|
||||
const res = await api
|
||||
.post<AxiosResponse<InviteUserResponse>>(
|
||||
`/org/${orgId}/create-invite`,
|
||||
{
|
||||
email: values.email,
|
||||
roleIds,
|
||||
validHours: parseInt(values.validForHours),
|
||||
sendEmail
|
||||
}
|
||||
)
|
||||
.catch((e) => {
|
||||
if (e.response?.status === 409) {
|
||||
toast({
|
||||
|
||||
@@ -20,7 +20,6 @@ import {
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
@@ -63,7 +62,7 @@ import {
|
||||
SettingsSectionForm
|
||||
} from "@app/components/Settings";
|
||||
import { useTranslations } from "next-intl";
|
||||
import RoleMappingConfigFields from "@app/components/RoleMappingConfigFields";
|
||||
import AutoProvisionConfigWidget from "@app/components/AutoProvisionConfigWidget";
|
||||
import {
|
||||
compileRoleMappingExpression,
|
||||
createMappingBuilderRule,
|
||||
@@ -499,9 +498,17 @@ export default function PoliciesPage() {
|
||||
id="policy-default-mappings-form"
|
||||
className="space-y-6"
|
||||
>
|
||||
<RoleMappingConfigFields
|
||||
fieldIdPrefix="admin-idp-default-role"
|
||||
showFreeformRoleNamesHint={true}
|
||||
<AutoProvisionConfigWidget
|
||||
showAutoProvisionSwitch={false}
|
||||
autoProvision={true}
|
||||
onAutoProvisionChange={() => {}}
|
||||
orgMappingField={{
|
||||
control: defaultMappingsForm.control,
|
||||
name: "defaultOrgMapping",
|
||||
labelKey: "defaultMappingsOrg"
|
||||
}}
|
||||
roleMappingFieldIdPrefix="admin-idp-default-role"
|
||||
showFreeformRoleNamesHint
|
||||
roleMappingMode={defaultRoleMappingMode}
|
||||
onRoleMappingModeChange={
|
||||
setDefaultRoleMappingMode
|
||||
@@ -528,27 +535,6 @@ export default function PoliciesPage() {
|
||||
setDefaultRawRoleExpression
|
||||
}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={defaultMappingsForm.control}
|
||||
name="defaultOrgMapping"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("defaultMappingsOrg")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
{t(
|
||||
"defaultMappingsOrgDescription"
|
||||
)}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
<SettingsSectionFooter>
|
||||
@@ -687,9 +673,15 @@ export default function PoliciesPage() {
|
||||
)}
|
||||
/>
|
||||
|
||||
<RoleMappingConfigFields
|
||||
fieldIdPrefix="admin-idp-policy-role"
|
||||
showFreeformRoleNamesHint={false}
|
||||
<AutoProvisionConfigWidget
|
||||
showAutoProvisionSwitch={false}
|
||||
autoProvision={true}
|
||||
onAutoProvisionChange={() => {}}
|
||||
orgMappingField={{
|
||||
control: form.control,
|
||||
name: "orgMapping"
|
||||
}}
|
||||
roleMappingFieldIdPrefix="admin-idp-policy-role"
|
||||
roleMappingMode={policyRoleMappingMode}
|
||||
onRoleMappingModeChange={
|
||||
setPolicyRoleMappingMode
|
||||
@@ -716,27 +708,6 @@ export default function PoliciesPage() {
|
||||
setPolicyRawRoleExpression
|
||||
}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="orgMapping"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("orgMappingPathOptional")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
{t(
|
||||
"defaultMappingsOrgDescription"
|
||||
)}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
</CredenzaBody>
|
||||
|
||||
@@ -24,7 +24,6 @@ import {
|
||||
import HeaderTitle from "@app/components/SettingsSectionTitle";
|
||||
import IdpAutoProvisionUsersDescription from "@app/components/IdpAutoProvisionUsersDescription";
|
||||
import { SwitchInput } from "@app/components/SwitchInput";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { Input } from "@app/components/ui/input";
|
||||
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||
@@ -34,7 +33,6 @@ import { createApiClient, formatAxiosError } from "@app/lib/api";
|
||||
import { applyOidcIdpProviderType } from "@app/lib/idp/oidcIdpProviderDefaults";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||
import { InfoIcon } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
@@ -220,23 +218,6 @@ export default function Page() {
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex items-start mb-0">
|
||||
<SwitchInput
|
||||
id="auto-provision-toggle"
|
||||
label={t(
|
||||
"idpAutoProvisionUsers"
|
||||
)}
|
||||
defaultChecked={form.getValues(
|
||||
"autoProvision"
|
||||
)}
|
||||
onCheckedChange={(checked) => {
|
||||
form.setValue(
|
||||
"autoProvision",
|
||||
checked
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</SettingsSectionForm>
|
||||
@@ -244,6 +225,32 @@ export default function Page() {
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
|
||||
<SettingsSection>
|
||||
<SettingsSectionHeader>
|
||||
<SettingsSectionTitle>
|
||||
{t("idpAutoProvisionUsers")}
|
||||
</SettingsSectionTitle>
|
||||
<SettingsSectionDescription>
|
||||
<IdpAutoProvisionUsersDescription />
|
||||
</SettingsSectionDescription>
|
||||
</SettingsSectionHeader>
|
||||
<SettingsSectionBody>
|
||||
<div className="space-y-2">
|
||||
<SwitchInput
|
||||
id="auto-provision-toggle"
|
||||
label={t("idpAutoProvisionUsers")}
|
||||
defaultChecked={form.getValues("autoProvision")}
|
||||
onCheckedChange={(checked) => {
|
||||
form.setValue("autoProvision", checked);
|
||||
}}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("idpAutoProvisionConfigureAfterCreate")}
|
||||
</p>
|
||||
</div>
|
||||
</SettingsSectionBody>
|
||||
</SettingsSection>
|
||||
|
||||
<fieldset
|
||||
disabled={templatesLocked}
|
||||
className="min-w-0 border-0 p-0 m-0 disabled:pointer-events-none disabled:opacity-60"
|
||||
|
||||
@@ -1,19 +1,33 @@
|
||||
"use client";
|
||||
|
||||
import IdpAutoProvisionUsersDescription from "@app/components/IdpAutoProvisionUsersDescription";
|
||||
import { FormDescription } from "@app/components/ui/form";
|
||||
import { HorizontalTabs } from "@app/components/HorizontalTabs";
|
||||
import RoleMappingConfigFields from "@app/components/RoleMappingConfigFields";
|
||||
import { SwitchInput } from "@app/components/SwitchInput";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage
|
||||
} from "@app/components/ui/form";
|
||||
import { Input } from "@app/components/ui/input";
|
||||
import { MappingBuilderRule, RoleMappingMode } from "@app/lib/idpRoleMapping";
|
||||
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||
import { MappingBuilderRule, RoleMappingMode } from "@app/lib/idpRoleMapping";
|
||||
import RoleMappingConfigFields from "@app/components/RoleMappingConfigFields";
|
||||
import { useTranslations } from "next-intl";
|
||||
import type { Control } from "react-hook-form";
|
||||
|
||||
type Role = {
|
||||
roleId: number;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type IdpOrgMappingFieldBinding = {
|
||||
control: unknown;
|
||||
name: string;
|
||||
labelKey?: string;
|
||||
};
|
||||
|
||||
type AutoProvisionConfigWidgetProps = {
|
||||
autoProvision: boolean;
|
||||
onAutoProvisionChange: (checked: boolean) => void;
|
||||
@@ -28,6 +42,11 @@ type AutoProvisionConfigWidgetProps = {
|
||||
onMappingBuilderRulesChange: (rules: MappingBuilderRule[]) => void;
|
||||
rawExpression: string;
|
||||
onRawExpressionChange: (expression: string) => void;
|
||||
orgMappingField: IdpOrgMappingFieldBinding;
|
||||
showAutoProvisionSwitch?: boolean;
|
||||
roleMappingFieldIdPrefix?: string;
|
||||
showFreeformRoleNamesHint?: boolean;
|
||||
autoProvisionSwitchId?: string;
|
||||
};
|
||||
|
||||
export default function AutoProvisionConfigWidget({
|
||||
@@ -43,41 +62,95 @@ export default function AutoProvisionConfigWidget({
|
||||
mappingBuilderRules,
|
||||
onMappingBuilderRulesChange,
|
||||
rawExpression,
|
||||
onRawExpressionChange
|
||||
onRawExpressionChange,
|
||||
orgMappingField,
|
||||
showAutoProvisionSwitch = true,
|
||||
roleMappingFieldIdPrefix = "org-idp-auto-provision",
|
||||
showFreeformRoleNamesHint = false,
|
||||
autoProvisionSwitchId = "auto-provision-toggle"
|
||||
}: AutoProvisionConfigWidgetProps) {
|
||||
const t = useTranslations();
|
||||
const { isPaidUser } = usePaidStatus();
|
||||
|
||||
const showMappingTabs = showAutoProvisionSwitch === false || autoProvision;
|
||||
|
||||
const orgMappingLabelKey =
|
||||
orgMappingField.labelKey ?? "orgMappingPathOptional";
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="mb-4">
|
||||
<SwitchInput
|
||||
id="auto-provision-toggle"
|
||||
label={t("idpAutoProvisionUsers")}
|
||||
defaultChecked={autoProvision}
|
||||
onCheckedChange={onAutoProvisionChange}
|
||||
disabled={!isPaidUser(tierMatrix.autoProvisioning)}
|
||||
/>
|
||||
</div>
|
||||
{showAutoProvisionSwitch && (
|
||||
<div className="mb-4">
|
||||
<SwitchInput
|
||||
id={autoProvisionSwitchId}
|
||||
label={t("idpAutoProvisionUsers")}
|
||||
defaultChecked={autoProvision}
|
||||
onCheckedChange={onAutoProvisionChange}
|
||||
disabled={!isPaidUser(tierMatrix.autoProvisioning)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{autoProvision && (
|
||||
<RoleMappingConfigFields
|
||||
fieldIdPrefix="org-idp-auto-provision"
|
||||
showFreeformRoleNamesHint={false}
|
||||
roleMappingMode={roleMappingMode}
|
||||
onRoleMappingModeChange={onRoleMappingModeChange}
|
||||
roles={roles}
|
||||
fixedRoleNames={fixedRoleNames}
|
||||
onFixedRoleNamesChange={onFixedRoleNamesChange}
|
||||
mappingBuilderClaimPath={mappingBuilderClaimPath}
|
||||
onMappingBuilderClaimPathChange={
|
||||
onMappingBuilderClaimPathChange
|
||||
}
|
||||
mappingBuilderRules={mappingBuilderRules}
|
||||
onMappingBuilderRulesChange={onMappingBuilderRulesChange}
|
||||
rawExpression={rawExpression}
|
||||
onRawExpressionChange={onRawExpressionChange}
|
||||
/>
|
||||
{showMappingTabs && (
|
||||
<HorizontalTabs
|
||||
clientSide
|
||||
defaultTab={0}
|
||||
items={[
|
||||
{ title: t("roleMapping"), href: "#" },
|
||||
{ title: t("orgMapping"), href: "#" }
|
||||
]}
|
||||
>
|
||||
<div className="space-y-4 mt-4 p-1">
|
||||
<RoleMappingConfigFields
|
||||
fieldIdPrefix={roleMappingFieldIdPrefix}
|
||||
showFreeformRoleNamesHint={
|
||||
showFreeformRoleNamesHint
|
||||
}
|
||||
roleMappingMode={roleMappingMode}
|
||||
onRoleMappingModeChange={onRoleMappingModeChange}
|
||||
roles={roles}
|
||||
fixedRoleNames={fixedRoleNames}
|
||||
onFixedRoleNamesChange={onFixedRoleNamesChange}
|
||||
mappingBuilderClaimPath={mappingBuilderClaimPath}
|
||||
onMappingBuilderClaimPathChange={
|
||||
onMappingBuilderClaimPathChange
|
||||
}
|
||||
mappingBuilderRules={mappingBuilderRules}
|
||||
onMappingBuilderRulesChange={
|
||||
onMappingBuilderRulesChange
|
||||
}
|
||||
rawExpression={rawExpression}
|
||||
onRawExpressionChange={onRawExpressionChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4 mt-4 p-1">
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("defaultMappingsOrgDescription")}
|
||||
</p>
|
||||
<FormField
|
||||
control={
|
||||
orgMappingField.control as Control<any>
|
||||
}
|
||||
name={orgMappingField.name}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t(orgMappingLabelKey)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="e.g., ends_with(email, '@organization.com')"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</HorizontalTabs>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { Alert, AlertDescription } from "@app/components/ui/alert";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
import IdpTypeIcon from "@app/components/IdpTypeIcon";
|
||||
import {
|
||||
generateOidcUrlProxy,
|
||||
type GenerateOidcUrlResponse
|
||||
@@ -135,24 +135,7 @@ export default function IdpLoginButtons({
|
||||
disabled={loading}
|
||||
loading={loading}
|
||||
>
|
||||
{effectiveType === "google" && (
|
||||
<Image
|
||||
src="/idp/google.png"
|
||||
alt="Google"
|
||||
width={16}
|
||||
height={16}
|
||||
className="rounded"
|
||||
/>
|
||||
)}
|
||||
{effectiveType === "azure" && (
|
||||
<Image
|
||||
src="/idp/azure.png"
|
||||
alt="Azure"
|
||||
width={16}
|
||||
height={16}
|
||||
className="rounded"
|
||||
/>
|
||||
)}
|
||||
<IdpTypeIcon type={effectiveType} size={16} />
|
||||
<span>{idp.name}</span>
|
||||
</Button>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { Badge } from "@app/components/ui/badge";
|
||||
import Image from "next/image";
|
||||
import IdpTypeIcon from "@app/components/IdpTypeIcon";
|
||||
|
||||
type IdpTypeBadgeProps = {
|
||||
type: string;
|
||||
@@ -29,34 +29,8 @@ export default function IdpTypeBadge({
|
||||
variant="secondary"
|
||||
className="inline-flex items-center space-x-1 w-fit"
|
||||
>
|
||||
{effectiveType === "google" && (
|
||||
<>
|
||||
<Image
|
||||
src="/idp/google.png"
|
||||
alt="Google"
|
||||
width={16}
|
||||
height={16}
|
||||
className="rounded"
|
||||
/>
|
||||
<span>{effectiveName}</span>
|
||||
</>
|
||||
)}
|
||||
{effectiveType === "azure" && (
|
||||
<>
|
||||
<Image
|
||||
src="/idp/azure.png"
|
||||
alt="Azure"
|
||||
width={16}
|
||||
height={16}
|
||||
className="rounded"
|
||||
/>
|
||||
<span>{effectiveName}</span>
|
||||
</>
|
||||
)}
|
||||
{effectiveType === "oidc" && <span>{effectiveName}</span>}
|
||||
{!["google", "azure", "oidc"].includes(effectiveType) && (
|
||||
<span>{effectiveName}</span>
|
||||
)}
|
||||
<IdpTypeIcon type={effectiveType} size={16} />
|
||||
<span>{effectiveName}</span>
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
53
src/components/IdpTypeIcon.tsx
Normal file
53
src/components/IdpTypeIcon.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@app/lib/cn";
|
||||
import Image from "next/image";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
type Props = {
|
||||
type?: string | null;
|
||||
variant?: string | null;
|
||||
size?: number;
|
||||
className?: string;
|
||||
alt?: string;
|
||||
fallback?: ReactNode;
|
||||
};
|
||||
|
||||
export default function IdpTypeIcon({
|
||||
type,
|
||||
variant,
|
||||
size = 16,
|
||||
className,
|
||||
alt,
|
||||
fallback = null
|
||||
}: Props) {
|
||||
const effectiveType = (variant || type || "").toLowerCase();
|
||||
|
||||
let src: string | null = null;
|
||||
let defaultAlt = "";
|
||||
|
||||
if (effectiveType === "google") {
|
||||
src = "/idp/google.png";
|
||||
defaultAlt = "Google";
|
||||
} else if (effectiveType === "azure") {
|
||||
src = "/idp/azure.png";
|
||||
defaultAlt = "Azure";
|
||||
} else if (effectiveType === "oidc") {
|
||||
src = "/idp/openid.png";
|
||||
defaultAlt = "OAuth2/OIDC";
|
||||
}
|
||||
|
||||
if (!src) {
|
||||
return <>{fallback}</>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt ?? defaultAlt}
|
||||
width={size}
|
||||
height={size}
|
||||
className={cn("shrink-0 rounded", className)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -27,7 +27,6 @@ import { LockIcon } from "lucide-react";
|
||||
import SecurityKeyAuthButton from "@app/components/SecurityKeyAuthButton";
|
||||
import { createApiClient } from "@app/lib/api";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { GenerateOidcUrlResponse } from "@server/routers/idp";
|
||||
import { Separator } from "./ui/separator";
|
||||
import { useTranslations } from "next-intl";
|
||||
@@ -37,6 +36,7 @@ import {
|
||||
} from "@app/actions/server";
|
||||
import { redirect as redirectTo } from "next/navigation";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import IdpTypeIcon from "@app/components/IdpTypeIcon";
|
||||
// @ts-ignore
|
||||
import { loadReoScript } from "reodotdev";
|
||||
import { build } from "@server/build";
|
||||
@@ -393,24 +393,7 @@ export default function LoginForm({
|
||||
loginWithIdp(idp.idpId);
|
||||
}}
|
||||
>
|
||||
{effectiveType === "google" && (
|
||||
<Image
|
||||
src="/idp/google.png"
|
||||
alt="Google"
|
||||
width={16}
|
||||
height={16}
|
||||
className="rounded"
|
||||
/>
|
||||
)}
|
||||
{effectiveType === "azure" && (
|
||||
<Image
|
||||
src="/idp/azure.png"
|
||||
alt="Azure"
|
||||
width={16}
|
||||
height={16}
|
||||
className="rounded"
|
||||
/>
|
||||
)}
|
||||
<IdpTypeIcon type={effectiveType} size={16} />
|
||||
<span>{idp.name}</span>
|
||||
</Button>
|
||||
);
|
||||
|
||||
@@ -1,19 +1,24 @@
|
||||
"use client";
|
||||
|
||||
import { ColumnDef } from "@tanstack/react-table";
|
||||
import { DataTable } from "@app/components/ui/data-table";
|
||||
import {
|
||||
DataTable,
|
||||
type DataTableAddAction
|
||||
} from "@app/components/ui/data-table";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
interface DataTableProps<TData, TValue> {
|
||||
columns: ColumnDef<TData, TValue>[];
|
||||
data: TData[];
|
||||
onAdd?: () => void;
|
||||
addActions?: DataTableAddAction[];
|
||||
}
|
||||
|
||||
export function IdpDataTable<TData, TValue>({
|
||||
columns,
|
||||
data,
|
||||
onAdd
|
||||
onAdd,
|
||||
addActions
|
||||
}: DataTableProps<TData, TValue>) {
|
||||
const t = useTranslations();
|
||||
|
||||
@@ -27,6 +32,7 @@ export function IdpDataTable<TData, TValue>({
|
||||
searchColumn="name"
|
||||
addButtonText={t("idpAdd")}
|
||||
onAdd={onAdd}
|
||||
addActions={addActions}
|
||||
enableColumnVisibility={true}
|
||||
stickyRightColumn="actions"
|
||||
/>
|
||||
|
||||
@@ -4,13 +4,37 @@ import { ColumnDef } from "@tanstack/react-table";
|
||||
import { ExtendedColumnDef } from "@app/components/ui/data-table";
|
||||
import { IdpDataTable } from "@app/components/OrgIdpDataTable";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList
|
||||
} from "@app/components/ui/command";
|
||||
import {
|
||||
Credenza,
|
||||
CredenzaBody,
|
||||
CredenzaClose,
|
||||
CredenzaContent,
|
||||
CredenzaDescription,
|
||||
CredenzaFooter,
|
||||
CredenzaHeader,
|
||||
CredenzaTitle
|
||||
} from "@app/components/Credenza";
|
||||
import {
|
||||
ArrowRight,
|
||||
ArrowUpDown,
|
||||
KeyRound,
|
||||
MoreHorizontal
|
||||
} from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import { formatAxiosError } from "@app/lib/api";
|
||||
import { createApiClient } from "@app/lib/api";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { useUserContext } from "@app/hooks/useUserContext";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
DropdownMenu,
|
||||
@@ -21,6 +45,13 @@ import {
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
import IdpTypeBadge from "@app/components/IdpTypeBadge";
|
||||
import IdpTypeIcon from "@app/components/IdpTypeIcon";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useDebounce } from "use-debounce";
|
||||
import type { ListUserAdminOrgIdpsResponse } from "@server/routers/orgIdp/types";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||
import { tierMatrix } from "@server/lib/billing/tierMatrix";
|
||||
|
||||
export type IdpRow = {
|
||||
idpId: number;
|
||||
@@ -29,6 +60,15 @@ export type IdpRow = {
|
||||
variant?: string;
|
||||
};
|
||||
|
||||
type AdminIdpRow = ListUserAdminOrgIdpsResponse["idps"][number];
|
||||
|
||||
function IdpImportRowIcon({
|
||||
type,
|
||||
variant
|
||||
}: Pick<AdminIdpRow, "type" | "variant">) {
|
||||
return <IdpTypeIcon type={type} variant={variant} size={20} />;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
idps: IdpRow[];
|
||||
orgId: string;
|
||||
@@ -37,10 +77,51 @@ type Props = {
|
||||
export default function IdpTable({ idps, orgId }: Props) {
|
||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const [selectedIdp, setSelectedIdp] = useState<IdpRow | null>(null);
|
||||
const [isUnassociateModalOpen, setIsUnassociateModalOpen] = useState(false);
|
||||
const [selectedUnassociateIdp, setSelectedUnassociateIdp] =
|
||||
useState<IdpRow | null>(null);
|
||||
const [importDialogOpen, setImportDialogOpen] = useState(false);
|
||||
const [importSearchQuery, setImportSearchQuery] = useState("");
|
||||
const [importSubmitting, setImportSubmitting] = useState(false);
|
||||
const [debouncedImportSearch] = useDebounce(importSearchQuery, 150);
|
||||
|
||||
const api = createApiClient(useEnvContext());
|
||||
const { user } = useUserContext();
|
||||
const { isPaidUser } = usePaidStatus();
|
||||
const router = useRouter();
|
||||
const t = useTranslations();
|
||||
|
||||
const canImportOrgOidcIdp = isPaidUser(tierMatrix.orgOidc);
|
||||
|
||||
const { data: adminIdpsRaw = [] } = useQuery({
|
||||
queryKey: ["admin-org-idps", user.userId],
|
||||
queryFn: async () => {
|
||||
const res = await api.get<{
|
||||
data: ListUserAdminOrgIdpsResponse;
|
||||
}>(`/user/${user.userId}/admin-org-idps`);
|
||||
return res.data.data.idps;
|
||||
},
|
||||
enabled: importDialogOpen && !!user?.userId
|
||||
});
|
||||
|
||||
const importableIdps = useMemo(() => {
|
||||
const localIds = new Set(idps.map((i) => i.idpId));
|
||||
return adminIdpsRaw.filter(
|
||||
(row) => row.orgId !== orgId && !localIds.has(row.idpId)
|
||||
);
|
||||
}, [adminIdpsRaw, orgId, idps]);
|
||||
|
||||
const shownImportIdps = useMemo(() => {
|
||||
const q = debouncedImportSearch.trim().toLowerCase();
|
||||
if (!q) {
|
||||
return importableIdps;
|
||||
}
|
||||
return importableIdps.filter((row) => {
|
||||
const hay = `${row.orgName} ${row.name}`.toLowerCase();
|
||||
return hay.includes(q);
|
||||
});
|
||||
}, [importableIdps, debouncedImportSearch]);
|
||||
|
||||
const deleteIdp = async (idpId: number) => {
|
||||
try {
|
||||
await api.delete(`/org/${orgId}/idp/${idpId}`);
|
||||
@@ -59,6 +140,49 @@ export default function IdpTable({ idps, orgId }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
const importIdp = async (row: AdminIdpRow) => {
|
||||
setImportSubmitting(true);
|
||||
try {
|
||||
await api.post(`/org/${orgId}/idp/${row.idpId}/import`, {
|
||||
sourceOrgId: row.orgId
|
||||
});
|
||||
toast({
|
||||
title: t("success"),
|
||||
description: t("idpImportedDescription")
|
||||
});
|
||||
setImportDialogOpen(false);
|
||||
setImportSearchQuery("");
|
||||
router.refresh();
|
||||
router.push(`/${orgId}/settings/idp/${row.idpId}/general`);
|
||||
} catch (e) {
|
||||
toast({
|
||||
title: t("error"),
|
||||
description: formatAxiosError(e),
|
||||
variant: "destructive"
|
||||
});
|
||||
} finally {
|
||||
setImportSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const unassociateIdp = async (idpId: number) => {
|
||||
try {
|
||||
await api.delete(`/org/${orgId}/idp/${idpId}/association`);
|
||||
toast({
|
||||
title: t("success"),
|
||||
description: t("idpUnassociatedDescription")
|
||||
});
|
||||
setIsUnassociateModalOpen(false);
|
||||
router.refresh();
|
||||
} catch (e) {
|
||||
toast({
|
||||
title: t("error"),
|
||||
description: formatAxiosError(e),
|
||||
variant: "destructive"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ExtendedColumnDef<IdpRow>[] = [
|
||||
{
|
||||
accessorKey: "idpId",
|
||||
@@ -142,6 +266,14 @@ export default function IdpTable({ idps, orgId }: Props) {
|
||||
{t("viewSettings")}
|
||||
</DropdownMenuItem>
|
||||
</Link>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setSelectedUnassociateIdp(siteRow);
|
||||
setIsUnassociateModalOpen(true);
|
||||
}}
|
||||
>
|
||||
{t("idpUnassociateMenu")}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setSelectedIdp(siteRow);
|
||||
@@ -149,7 +281,7 @@ export default function IdpTable({ idps, orgId }: Props) {
|
||||
}}
|
||||
>
|
||||
<span className="text-red-500">
|
||||
{t("delete")}
|
||||
{t("idpDeleteAllOrgsMenu")}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
@@ -179,8 +311,8 @@ export default function IdpTable({ idps, orgId }: Props) {
|
||||
}}
|
||||
dialog={
|
||||
<div className="space-y-2">
|
||||
<p>{t("idpQuestionRemove")}</p>
|
||||
<p>{t("idpMessageRemove")}</p>
|
||||
<p>{t("idpDeleteGlobalQuestion")}</p>
|
||||
<p>{t("idpDeleteGlobalDescription")}</p>
|
||||
</div>
|
||||
}
|
||||
buttonText={t("idpConfirmDelete")}
|
||||
@@ -189,11 +321,126 @@ export default function IdpTable({ idps, orgId }: Props) {
|
||||
title={t("idpDelete")}
|
||||
/>
|
||||
)}
|
||||
{selectedUnassociateIdp && (
|
||||
<ConfirmDeleteDialog
|
||||
open={isUnassociateModalOpen}
|
||||
setOpen={(val) => {
|
||||
setIsUnassociateModalOpen(val);
|
||||
setSelectedUnassociateIdp(null);
|
||||
}}
|
||||
dialog={
|
||||
<div className="space-y-2">
|
||||
<p>{t("idpUnassociateQuestion")}</p>
|
||||
<p>{t("idpUnassociateDescription")}</p>
|
||||
</div>
|
||||
}
|
||||
buttonText={t("idpUnassociateConfirm")}
|
||||
onConfirm={async () =>
|
||||
unassociateIdp(selectedUnassociateIdp.idpId)
|
||||
}
|
||||
string={selectedUnassociateIdp.name}
|
||||
title={t("idpUnassociateTitle")}
|
||||
warningText={t("idpUnassociateWarning")}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Credenza
|
||||
open={importDialogOpen}
|
||||
onOpenChange={(open) => {
|
||||
setImportDialogOpen(open);
|
||||
if (!open) {
|
||||
setImportSearchQuery("");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<CredenzaContent className="sm:max-w-lg">
|
||||
<CredenzaHeader>
|
||||
<CredenzaTitle>
|
||||
{t("idpImportDialogTitle")}
|
||||
</CredenzaTitle>
|
||||
<CredenzaDescription>
|
||||
{t("idpImportDialogDescription")}
|
||||
</CredenzaDescription>
|
||||
</CredenzaHeader>
|
||||
<CredenzaBody
|
||||
className={cn(
|
||||
importSubmitting && "pointer-events-none opacity-60"
|
||||
)}
|
||||
>
|
||||
<Command shouldFilter={false}>
|
||||
<CommandInput
|
||||
placeholder={t("idpImportSearchPlaceholder")}
|
||||
value={importSearchQuery}
|
||||
onValueChange={setImportSearchQuery}
|
||||
/>
|
||||
<CommandList>
|
||||
<CommandEmpty>
|
||||
{t("idpImportEmpty")}
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{shownImportIdps.map((row) => (
|
||||
<CommandItem
|
||||
key={`${row.idpId}:${row.orgId}`}
|
||||
className="items-start gap-3 py-2.5"
|
||||
value={`${row.idpId}:${row.orgId}:${row.orgName}:${row.name}`}
|
||||
disabled={!canImportOrgOidcIdp}
|
||||
onSelect={() => {
|
||||
if (!canImportOrgOidcIdp) {
|
||||
return;
|
||||
}
|
||||
void importIdp(row);
|
||||
}}
|
||||
>
|
||||
<div className="mt-0.5 shrink-0">
|
||||
<IdpImportRowIcon
|
||||
type={row.type}
|
||||
variant={row.variant}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 text-left">
|
||||
<div className="truncate font-medium leading-tight">
|
||||
{row.orgName}
|
||||
</div>
|
||||
<div className="truncate text-sm leading-tight text-muted-foreground">
|
||||
{row.name}
|
||||
</div>
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</CredenzaBody>
|
||||
<CredenzaFooter>
|
||||
<CredenzaClose asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={importSubmitting}
|
||||
>
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</CredenzaClose>
|
||||
</CredenzaFooter>
|
||||
</CredenzaContent>
|
||||
</Credenza>
|
||||
|
||||
<IdpDataTable
|
||||
columns={columns}
|
||||
data={idps}
|
||||
onAdd={() => router.push(`/${orgId}/settings/idp/create`)}
|
||||
addActions={[
|
||||
{
|
||||
label: t("idpAddActionCreateNew"),
|
||||
onSelect: () => {
|
||||
router.push(`/${orgId}/settings/idp/create`);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: t("idpAddActionImportFromOrg"),
|
||||
onSelect: () => {
|
||||
setImportDialogOpen(true);
|
||||
}
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -79,10 +79,7 @@ export default function RoleMappingConfigFields({
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
!supportsMultipleRolesPerUser &&
|
||||
mappingBuilderRules.length > 1
|
||||
) {
|
||||
if (!supportsMultipleRolesPerUser && mappingBuilderRules.length > 1) {
|
||||
onMappingBuilderRulesChange([mappingBuilderRules[0]]);
|
||||
}
|
||||
}, [
|
||||
@@ -95,11 +92,7 @@ export default function RoleMappingConfigFields({
|
||||
if (!supportsMultipleRolesPerUser && fixedRoleNames.length > 1) {
|
||||
onFixedRoleNamesChange([fixedRoleNames[0]]);
|
||||
}
|
||||
}, [
|
||||
supportsMultipleRolesPerUser,
|
||||
fixedRoleNames,
|
||||
onFixedRoleNamesChange
|
||||
]);
|
||||
}, [supportsMultipleRolesPerUser, fixedRoleNames, onFixedRoleNamesChange]);
|
||||
|
||||
const fixedRadioId = `${fieldIdPrefix}-fixed-roles-mode`;
|
||||
const builderRadioId = `${fieldIdPrefix}-mapping-builder-mode`;
|
||||
@@ -116,7 +109,6 @@ export default function RoleMappingConfigFields({
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<FormLabel className="mb-2">{t("roleMapping")}</FormLabel>
|
||||
<FormDescription className="mb-4">
|
||||
{t("roleMappingDescription")}
|
||||
</FormDescription>
|
||||
@@ -272,7 +264,9 @@ export default function RoleMappingConfigFields({
|
||||
supportsMultipleRolesPerUser={
|
||||
supportsMultipleRolesPerUser
|
||||
}
|
||||
showRemoveButton={mappingBuilderShowsRemoveColumn}
|
||||
showRemoveButton={
|
||||
mappingBuilderShowsRemoveColumn
|
||||
}
|
||||
rule={rule}
|
||||
onChange={(nextRule) => {
|
||||
const nextRules = mappingBuilderRules.map(
|
||||
@@ -390,12 +384,10 @@ function BuilderRuleRow({
|
||||
text: name
|
||||
}))}
|
||||
setTags={(nextTags) => {
|
||||
const prevRoleTags = rule.roleNames.map(
|
||||
(name) => ({
|
||||
id: name,
|
||||
text: name
|
||||
})
|
||||
);
|
||||
const prevRoleTags = rule.roleNames.map((name) => ({
|
||||
id: name,
|
||||
text: name
|
||||
}));
|
||||
const next =
|
||||
typeof nextTags === "function"
|
||||
? nextTags(prevRoleTags)
|
||||
|
||||
@@ -6,8 +6,8 @@ import {
|
||||
} from "@app/components/StrategySelect";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import type { IdpOidcProviderType } from "@app/lib/idp/oidcIdpProviderDefaults";
|
||||
import IdpTypeIcon from "@app/components/IdpTypeIcon";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
import { useEffect, useMemo } from "react";
|
||||
|
||||
type Props = {
|
||||
@@ -32,7 +32,8 @@ export function OidcIdpProviderTypeSelect({ value, onTypeChange }: Props) {
|
||||
{
|
||||
id: "oidc",
|
||||
title: "OAuth2/OIDC",
|
||||
description: t("idpOidcDescription")
|
||||
description: t("idpOidcDescription"),
|
||||
icon: <IdpTypeIcon type="oidc" size={24} />
|
||||
}
|
||||
];
|
||||
if (hideTemplates) {
|
||||
@@ -44,29 +45,13 @@ export function OidcIdpProviderTypeSelect({ value, onTypeChange }: Props) {
|
||||
id: "google",
|
||||
title: t("idpGoogleTitle"),
|
||||
description: t("idpGoogleDescription"),
|
||||
icon: (
|
||||
<Image
|
||||
src="/idp/google.png"
|
||||
alt={t("idpGoogleAlt")}
|
||||
width={24}
|
||||
height={24}
|
||||
className="rounded"
|
||||
/>
|
||||
)
|
||||
icon: <IdpTypeIcon type="google" size={24} />
|
||||
},
|
||||
{
|
||||
id: "azure",
|
||||
title: t("idpAzureTitle"),
|
||||
description: t("idpAzureDescription"),
|
||||
icon: (
|
||||
<Image
|
||||
src="/idp/azure.png"
|
||||
alt={t("idpAzureAlt")}
|
||||
width={24}
|
||||
height={24}
|
||||
className="rounded"
|
||||
/>
|
||||
)
|
||||
icon: <IdpTypeIcon type="azure" size={24} />
|
||||
}
|
||||
];
|
||||
}, [hideTemplates, t]);
|
||||
|
||||
@@ -18,12 +18,14 @@ import {
|
||||
TableRow
|
||||
} from "@/components/ui/table";
|
||||
import { DataTablePagination } from "@app/components/DataTablePagination";
|
||||
import type { DataTableAddAction } from "@app/components/ui/data-table";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { Card, CardContent, CardHeader } from "@app/components/ui/card";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger
|
||||
@@ -31,7 +33,14 @@ import {
|
||||
import { Input } from "@app/components/ui/input";
|
||||
import { useStoredColumnVisibility } from "@app/hooks/useStoredColumnVisibility";
|
||||
|
||||
import { Columns, Filter, Plus, RefreshCw, Search } from "lucide-react";
|
||||
import {
|
||||
ChevronDown,
|
||||
Columns,
|
||||
Filter,
|
||||
Plus,
|
||||
RefreshCw,
|
||||
Search
|
||||
} from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useMemo, useState } from "react";
|
||||
|
||||
@@ -67,6 +76,8 @@ type ControlledDataTableProps<TData, TValue> = {
|
||||
tableId: string;
|
||||
addButtonText?: string;
|
||||
onAdd?: () => void;
|
||||
addActions?: DataTableAddAction[];
|
||||
addButtonDisabled?: boolean;
|
||||
onRefresh?: () => void;
|
||||
isRefreshing?: boolean;
|
||||
refreshButtonDisabled?: boolean;
|
||||
@@ -90,6 +101,8 @@ export function ControlledDataTable<TData, TValue>({
|
||||
rows,
|
||||
addButtonText,
|
||||
onAdd,
|
||||
addActions,
|
||||
addButtonDisabled = false,
|
||||
onRefresh,
|
||||
isRefreshing,
|
||||
refreshButtonDisabled = false,
|
||||
@@ -348,16 +361,49 @@ export function ControlledDataTable<TData, TValue>({
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{onAdd && addButtonText && (
|
||||
{addActions && addActions.length > 0 && addButtonText ? (
|
||||
<div>
|
||||
<Button
|
||||
onClick={onAdd}
|
||||
loading={isNavigatingToAddPage}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{addButtonText}
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
disabled={
|
||||
addButtonDisabled ||
|
||||
isNavigatingToAddPage
|
||||
}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{addButtonText}
|
||||
<ChevronDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{addActions.map((action, i) => (
|
||||
<DropdownMenuItem
|
||||
key={i}
|
||||
onSelect={() =>
|
||||
action.onSelect()
|
||||
}
|
||||
>
|
||||
{action.label}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
) : (
|
||||
onAdd &&
|
||||
addButtonText && (
|
||||
<div>
|
||||
<Button
|
||||
onClick={onAdd}
|
||||
loading={isNavigatingToAddPage}
|
||||
disabled={addButtonDisabled}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{addButtonText}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
@@ -33,7 +33,7 @@ import { Button } from "@app/components/ui/button";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Input } from "@app/components/ui/input";
|
||||
import { DataTablePagination } from "@app/components/DataTablePagination";
|
||||
import { Plus, Search, RefreshCw, Columns, Filter } from "lucide-react";
|
||||
import { ChevronDown, Plus, Search, RefreshCw, Columns, Filter } from "lucide-react";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -46,6 +46,7 @@ import {
|
||||
DropdownMenu,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger
|
||||
@@ -165,12 +166,20 @@ export type DataTablePaginationState = PaginationState & {
|
||||
|
||||
export type DataTablePaginationUpdateFn = (newPage: PaginationState) => void;
|
||||
|
||||
/** When set (non-empty), replaces the single add button with a dropdown; `onAdd` is not used. */
|
||||
export type DataTableAddAction = {
|
||||
label: string;
|
||||
onSelect: () => void;
|
||||
};
|
||||
|
||||
type DataTableProps<TData, TValue> = {
|
||||
columns: ExtendedColumnDef<TData, TValue>[];
|
||||
data: TData[];
|
||||
title?: string;
|
||||
addButtonText?: string;
|
||||
onAdd?: () => void;
|
||||
/** Prefer over `onAdd` when non-empty. */
|
||||
addActions?: DataTableAddAction[];
|
||||
addButtonDisabled?: boolean;
|
||||
onRefresh?: () => void;
|
||||
isRefreshing?: boolean;
|
||||
@@ -205,6 +214,7 @@ export function DataTable<TData, TValue>({
|
||||
title,
|
||||
addButtonText,
|
||||
onAdd,
|
||||
addActions,
|
||||
addButtonDisabled = false,
|
||||
onRefresh,
|
||||
isRefreshing,
|
||||
@@ -637,13 +647,45 @@ export function DataTable<TData, TValue>({
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{onAdd && addButtonText && (
|
||||
{addActions && addActions.length > 0 && addButtonText ? (
|
||||
<div>
|
||||
<Button onClick={onAdd} disabled={addButtonDisabled}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{addButtonText}
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
disabled={addButtonDisabled}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{addButtonText}
|
||||
<ChevronDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{addActions.map((action, i) => (
|
||||
<DropdownMenuItem
|
||||
key={i}
|
||||
onSelect={() =>
|
||||
action.onSelect()
|
||||
}
|
||||
>
|
||||
{action.label}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
) : (
|
||||
onAdd &&
|
||||
addButtonText && (
|
||||
<div>
|
||||
<Button
|
||||
onClick={onAdd}
|
||||
disabled={addButtonDisabled}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{addButtonText}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
Reference in New Issue
Block a user