calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-22 00:35:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Showing the paid feature

Browse Source
This commit is contained in:
Owen
2026-04-17 15:33:26 -07:00
parent f74791111e
commit 008ad0a1de
5 changed files with 792 additions and 657 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
messages/en-US.json
View File

@@ -2971,6 +2971,14 @@
"httpDestAddTitle": "Add HTTP Destination", "httpDestAddTitle": "Add HTTP Destination",
"httpDestEditDescription": "Update the configuration for this HTTP event streaming destination.", "httpDestEditDescription": "Update the configuration for this HTTP event streaming destination.",
"httpDestAddDescription": "Configure a new HTTP endpoint to receive your organization's events.", "httpDestAddDescription": "Configure a new HTTP endpoint to receive your organization's events.",
"S3DestEditTitle": "Edit Destination",
"S3DestAddTitle": "Add S3 Destination",
"S3DestEditDescription": "Update the configuration for this S3 event streaming destination.",
"S3DestAddDescription": "Configure a new S3 endpoint to receive your organization's events.",
"datadogDestEditTitle": "Edit Destination",
"datadogDestAddTitle": "Add Datadog Destination",
"datadogDestEditDescription": "Update the configuration for this Datadog event streaming destination.",
"datadogDestAddDescription": "Configure a new Datadog endpoint to receive your organization's events.",
"httpDestTabSettings": "Settings", "httpDestTabSettings": "Settings",
"httpDestTabHeaders": "Headers", "httpDestTabHeaders": "Headers",
"httpDestTabBody": "Body", "httpDestTabBody": "Body",

115
src/app/[orgId]/settings/logs/streaming/page.tsx
View File

@@ -22,8 +22,7 @@ import {
} from "@app/components/Credenza"; } from "@app/components/Credenza";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { Switch } from "@app/components/ui/switch"; import { Switch } from "@app/components/ui/switch";
import { Globe, MoreHorizontal, Plus, ExternalLink, KeyRound } from "lucide-react"; import { Globe, MoreHorizontal, Plus } from "lucide-react";
import Link from "next/link";
import { AxiosResponse } from "axios"; import { AxiosResponse } from "axios";
import { build } from "@server/build"; import { build } from "@server/build";
import Image from "next/image"; import Image from "next/image";
@@ -39,6 +38,8 @@ import {
HttpDestinationCredenza, HttpDestinationCredenza,
parseHttpConfig parseHttpConfig
} from "@app/components/HttpDestinationCredenza"; } from "@app/components/HttpDestinationCredenza";
import { S3DestinationCredenza } from "@app/components/S3DestinationCredenza";
import { DatadogDestinationCredenza } from "@app/components/DatadogDestinationCredenza";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
// ── Re-export Destination so the rest of the file can use it ────────────────── // ── Re-export Destination so the rest of the file can use it ──────────────────
@@ -182,65 +183,6 @@ interface DestinationTypePickerProps {
isPaywalled?: boolean; isPaywalled?: boolean;
} }
const BOOK_A_DEMO_URL = "https://click.fossorial.io/ep922";
const CONTACT_URL = "https://pangolin.net/contact";
function ContactSalesDialog({
open,
onOpenChange
}: {
open: boolean;
onOpenChange: (open: boolean) => void;
}) {
const t = useTranslations();
return (
<Credenza open={open} onOpenChange={onOpenChange}>
<CredenzaContent className="sm:max-w-md">
<CredenzaHeader>
<CredenzaTitle>{t("streamingAddDestination")}</CredenzaTitle>
</CredenzaHeader>
<CredenzaBody>
<div className="mb-2 rounded-md border border-black-500/30 bg-linear-to-br from-black-500/10 via-background to-background overflow-hidden">
<div className="py-3 px-4">
<div className="flex items-center gap-2.5 text-sm text-muted-foreground">
<KeyRound className="size-4 shrink-0 text-black-500" />
<span>
Contact sales to enable this feature.{" "}
<Link
href={BOOK_A_DEMO_URL}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
>
Book a demo
<ExternalLink className="size-3.5 shrink-0" />
</Link>
{" or "}
<Link
href={CONTACT_URL}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
>
contact us
<ExternalLink className="size-3.5 shrink-0" />
</Link>
.
</span>
</div>
</div>
</div>
</CredenzaBody>
<CredenzaFooter>
<CredenzaClose asChild>
<Button variant="outline">{t("cancel")}</Button>
</CredenzaClose>
</CredenzaFooter>
</CredenzaContent>
</Credenza>
);
}
function DestinationTypePicker({ function DestinationTypePicker({
open, open,
onOpenChange, onOpenChange,
@@ -249,17 +191,6 @@ function DestinationTypePicker({
}: DestinationTypePickerProps) { }: DestinationTypePickerProps) {
const t = useTranslations(); const t = useTranslations();
const [selected, setSelected] = useState<DestinationType>("http"); const [selected, setSelected] = useState<DestinationType>("http");
const [contactSalesOpen, setContactSalesOpen] = useState(false);
const ENTERPRISE_ONLY_TYPES: DestinationType[] = ["s3", "datadog"];
function handleOptionSelect(type: DestinationType) {
if (ENTERPRISE_ONLY_TYPES.includes(type)) {
setContactSalesOpen(true);
} else {
onSelect(type);
}
}
const destinationTypeOptions: ReadonlyArray< const destinationTypeOptions: ReadonlyArray<
StrategyOption<DestinationType> StrategyOption<DestinationType>
@@ -305,11 +236,6 @@ function DestinationTypePicker({
}, [open]); }, [open]);
return ( return (
<>
<ContactSalesDialog
open={contactSalesOpen}
onOpenChange={setContactSalesOpen}
/>
<Credenza open={open} onOpenChange={onOpenChange}> <Credenza open={open} onOpenChange={onOpenChange}>
<CredenzaContent className="sm:max-w-lg"> <CredenzaContent className="sm:max-w-lg">
<CredenzaHeader> <CredenzaHeader>
@@ -329,12 +255,7 @@ function DestinationTypePicker({
<StrategySelect <StrategySelect
options={destinationTypeOptions} options={destinationTypeOptions}
value={selected} value={selected}
onChange={(type) => { onChange={(type) => setSelected(type)}
setSelected(type);
if (ENTERPRISE_ONLY_TYPES.includes(type)) {
setContactSalesOpen(true);
}
}}
cols={1} cols={1}
/> />
</div> </div>
@@ -344,7 +265,7 @@ function DestinationTypePicker({
<Button variant="outline">{t("cancel")}</Button> <Button variant="outline">{t("cancel")}</Button>
</CredenzaClose> </CredenzaClose>
<Button <Button
onClick={() => handleOptionSelect(selected)} onClick={() => onSelect(selected)}
disabled={isPaywalled} disabled={isPaywalled}
> >
{t("continue")} {t("continue")}
@@ -352,7 +273,6 @@ function DestinationTypePicker({
</CredenzaFooter> </CredenzaFooter>
</CredenzaContent> </CredenzaContent>
</Credenza> </Credenza>
</>
); );
} }
@@ -371,6 +291,7 @@ export default function StreamingDestinationsPage() {
const [typePickerOpen, setTypePickerOpen] = useState(false); const [typePickerOpen, setTypePickerOpen] = useState(false);
const [editingDestination, setEditingDestination] = const [editingDestination, setEditingDestination] =
useState<Destination | null>(null); useState<Destination | null>(null);
const [pickedType, setPickedType] = useState<DestinationType>("http");
const [togglingIds, setTogglingIds] = useState<Set<number>>(new Set()); const [togglingIds, setTogglingIds] = useState<Set<number>>(new Set());
// Delete state // Delete state
@@ -472,7 +393,8 @@ export default function StreamingDestinationsPage() {
setTypePickerOpen(true); setTypePickerOpen(true);
}; };
const handleTypePicked = (_type: DestinationType) => { const handleTypePicked = (type: DestinationType) => {
setPickedType(type);
setTypePickerOpen(false); setTypePickerOpen(false);
setEditingDestination(null); setEditingDestination(null);
setModalOpen(true); setModalOpen(true);
@@ -480,6 +402,7 @@ export default function StreamingDestinationsPage() {
const openEdit = (destination: Destination) => { const openEdit = (destination: Destination) => {
setEditingDestination(destination); setEditingDestination(destination);
setPickedType((destination.type as DestinationType) ?? "http");
setModalOpen(true); setModalOpen(true);
}; };
@@ -526,6 +449,7 @@ export default function StreamingDestinationsPage() {
isPaywalled={!isEnterprise} isPaywalled={!isEnterprise}
/> />
{pickedType === "http" && (
<HttpDestinationCredenza <HttpDestinationCredenza
open={modalOpen} open={modalOpen}
onOpenChange={setModalOpen} onOpenChange={setModalOpen}
@@ -533,6 +457,25 @@ export default function StreamingDestinationsPage() {
orgId={orgId} orgId={orgId}
onSaved={loadDestinations} onSaved={loadDestinations}
/> />
)}
{pickedType === "s3" && (
<S3DestinationCredenza
open={modalOpen}
onOpenChange={setModalOpen}
editing={editingDestination}
orgId={orgId}
onSaved={loadDestinations}
/>
)}
{pickedType === "datadog" && (
<DatadogDestinationCredenza
open={modalOpen}
onOpenChange={setModalOpen}
editing={editingDestination}
orgId={orgId}
onSaved={loadDestinations}
/>
)}
{deleteTarget && ( {deleteTarget && (
<ConfirmDeleteDialog <ConfirmDeleteDialog

93
src/components/DatadogDestinationCredenza.tsx Normal file
View File

@@ -0,0 +1,93 @@
"use client";
import { useState, useEffect } from "react";
import {
Credenza,
CredenzaBody,
CredenzaClose,
CredenzaContent,
CredenzaDescription,
CredenzaFooter,
CredenzaHeader,
CredenzaTitle
} from "@app/components/Credenza";
import { Button } from "@app/components/ui/button";
import { Plus, X, KeyRound, ExternalLink } from "lucide-react";
import Link from "next/link";
import { useTranslations } from "next-intl";
export interface DatadogDestinationCredenzaProps {
open: boolean;
onOpenChange: (open: boolean) => void;
editing: any;
orgId: string;
onSaved: () => void;
}
export function DatadogDestinationCredenza({
open,
onOpenChange,
editing,
orgId,
onSaved,
}: DatadogDestinationCredenzaProps) {
const t = useTranslations();
return (
<Credenza open={open} onOpenChange={onOpenChange}>
<CredenzaContent className="sm:max-w-2xl">
<CredenzaHeader>
<CredenzaTitle>
{editing
? t("datadogDestEditTitle")
: t("datadogDestAddTitle")}
</CredenzaTitle>
<CredenzaDescription>
{editing
? t("datadogDestEditDescription")
: t("datadogDestAddDescription")}
</CredenzaDescription>
</CredenzaHeader>
<CredenzaBody>
<div className="rounded-md border border-black-500/30 bg-linear-to-br from-black-500/10 via-background to-background overflow-hidden">
<div className="py-3 px-4">
<div className="flex items-center gap-2.5 text-sm text-muted-foreground">
<KeyRound className="size-4 shrink-0 text-black-500" />
<span>
Contact sales to enable this feature.{" "}
<Link
href="https://click.fossorial.io/ep922"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
>
Book a demo
<ExternalLink className="size-3.5 shrink-0" />
</Link>
{" or "}
<Link
href="https://pangolin.net/contact"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
>
contact us
<ExternalLink className="size-3.5 shrink-0" />
</Link>
.
</span>
</div>
</div>
</div>
</CredenzaBody>
<CredenzaFooter>
<CredenzaClose asChild>
<Button variant="outline">{t("cancel")}</Button>
</CredenzaClose>
</CredenzaFooter>
</CredenzaContent>
</Credenza>
);
}

208
src/components/HealthCheckFormFields.tsx
View File

@@ -1,6 +1,5 @@
"use client"; "use client";
import { useState } from "react";
import { UseFormReturn } from "react-hook-form"; import { UseFormReturn } from "react-hook-form";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@@ -22,78 +21,9 @@ import {
FormLabel, FormLabel,
FormMessage FormMessage
} from "@/components/ui/form"; } from "@/components/ui/form";
import {
Credenza,
CredenzaBody,
CredenzaClose,
CredenzaContent,
CredenzaFooter,
CredenzaHeader,
CredenzaTitle
} from "@app/components/Credenza";
import { Button } from "@/components/ui/button";
import { ExternalLink, KeyRound } from "lucide-react"; import { ExternalLink, KeyRound } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
const BOOK_A_DEMO_URL = "https://click.fossorial.io/ep922";
const CONTACT_URL = "https://pangolin.net/contact";
const UNIMPLEMENTED_MODES = ["snmp", "icmp"];
function ContactSalesDialog({
open,
onOpenChange
}: {
open: boolean;
onOpenChange: (open: boolean) => void;
}) {
return (
<Credenza open={open} onOpenChange={onOpenChange}>
<CredenzaContent className="sm:max-w-md">
<CredenzaHeader>
<CredenzaTitle>Coming Soon</CredenzaTitle>
</CredenzaHeader>
<CredenzaBody>
<div className="mb-2 rounded-md border border-black-500/30 bg-linear-to-br from-black-500/10 via-background to-background overflow-hidden">
<div className="py-3 px-4">
<div className="flex items-center gap-2.5 text-sm text-muted-foreground">
<KeyRound className="size-4 shrink-0 text-black-500" />
<span>
Contact sales to enable this feature.{" "}
<Link
href={BOOK_A_DEMO_URL}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
>
Book a demo
<ExternalLink className="size-3.5 shrink-0" />
</Link>
{" or "}
<Link
href={CONTACT_URL}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
>
contact us
<ExternalLink className="size-3.5 shrink-0" />
</Link>
.
</span>
</div>
</div>
</div>
</CredenzaBody>
<CredenzaFooter>
<CredenzaClose asChild>
<Button variant="outline">Close</Button>
</CredenzaClose>
</CredenzaFooter>
</CredenzaContent>
</Credenza>
);
}
type HealthCheckFormFieldsProps = { type HealthCheckFormFieldsProps = {
form: UseFormReturn<any>; form: UseFormReturn<any>;
onFieldChange?: (fieldName: string, value: any) => void; onFieldChange?: (fieldName: string, value: any) => void;
@@ -112,7 +42,6 @@ export function HealthCheckFormFields({
watchedMode watchedMode
}: HealthCheckFormFieldsProps) { }: HealthCheckFormFieldsProps) {
const t = useTranslations(); const t = useTranslations();
const [contactSalesOpen, setContactSalesOpen] = useState(false);
const showFields = hideEnabledField || watchedEnabled; const showFields = hideEnabledField || watchedEnabled;
@@ -121,10 +50,6 @@ export function HealthCheckFormFields({
value: any, value: any,
fieldOnChange: (v: any) => void fieldOnChange: (v: any) => void
) => { ) => {
if (fieldName === "hcMode" && UNIMPLEMENTED_MODES.includes(value)) {
setContactSalesOpen(true);
return;
}
fieldOnChange(value); fieldOnChange(value);
if (onFieldChange) { if (onFieldChange) {
onFieldChange(fieldName, value); onFieldChange(fieldName, value);
@@ -133,10 +58,6 @@ export function HealthCheckFormFields({
return ( return (
<> <>
<ContactSalesDialog
open={contactSalesOpen}
onOpenChange={setContactSalesOpen}
/>
{/* Name */} {/* Name */}
{showNameField && ( {showNameField && (
<FormField <FormField
@@ -194,9 +115,6 @@ export function HealthCheckFormFields({
name="hcMode" name="hcMode"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>
{t("healthCheckStrategy")}
</FormLabel>
<FormControl> <FormControl>
<StrategySelect <StrategySelect
cols={2} cols={2}
@@ -204,22 +122,30 @@ export function HealthCheckFormFields({
{ {
id: "http", id: "http",
title: "HTTP", title: "HTTP",
description: t("healthCheckStrategyHttp") description: t(
"healthCheckStrategyHttp"
)
}, },
{ {
id: "tcp", id: "tcp",
title: "TCP", title: "TCP",
description: t("healthCheckStrategyTcp") description: t(
"healthCheckStrategyTcp"
)
}, },
{ {
id: "snmp", id: "snmp",
title: "SNMP", title: "SNMP",
description: t("healthCheckStrategySnmp") description: t(
"healthCheckStrategySnmp"
)
}, },
{ {
id: "icmp", id: "icmp",
title: "Ping (ICMP)", title: "Ping (ICMP)",
description: t("healthCheckStrategyIcmp") description: t(
"healthCheckStrategyIcmp"
)
} }
]} ]}
value={field.value} value={field.value}
@@ -237,6 +163,43 @@ export function HealthCheckFormFields({
)} )}
/> />
{/* Inline contact-sales banner for SNMP / ICMP */}
{(watchedMode === "snmp" || watchedMode === "icmp") && (
<div className="rounded-md border border-black-500/30 bg-linear-to-br from-black-500/10 via-background to-background overflow-hidden">
<div className="py-3 px-4">
<div className="flex items-center gap-2.5 text-sm text-muted-foreground">
<KeyRound className="size-4 shrink-0 text-black-500" />
<span>
Contact sales to enable this feature.{" "}
<Link
href="https://click.fossorial.io/ep922"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
>
Book a demo
<ExternalLink className="size-3.5 shrink-0" />
</Link>
{" or "}
<Link
href="https://pangolin.net/contact"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
>
contact us
<ExternalLink className="size-3.5 shrink-0" />
</Link>
.
</span>
</div>
</div>
</div>
)}
{/* Connection fields + all remaining config — hidden for SNMP / ICMP */}
{watchedMode !== "snmp" && watchedMode !== "icmp" && (
<>
{/* Connection fields */} {/* Connection fields */}
{watchedMode === "tcp" ? ( {watchedMode === "tcp" ? (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -255,7 +218,10 @@ export function HealthCheckFormFields({
handleChange( handleChange(
"hcHostname", "hcHostname",
e.target.value, e.target.value,
(v) => field.onChange(e) (v) =>
field.onChange(
e
)
) )
} }
/> />
@@ -269,7 +235,9 @@ export function HealthCheckFormFields({
name="hcPort" name="hcPort"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("healthPort")}</FormLabel> <FormLabel>
{t("healthPort")}
</FormLabel>
<FormControl> <FormControl>
<Input <Input
{...field} {...field}
@@ -349,7 +317,10 @@ export function HealthCheckFormFields({
handleChange( handleChange(
"hcHostname", "hcHostname",
e.target.value, e.target.value,
(v) => field.onChange(e) (v) =>
field.onChange(
e
)
) )
} }
/> />
@@ -363,7 +334,9 @@ export function HealthCheckFormFields({
name="hcPort" name="hcPort"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("healthPort")}</FormLabel> <FormLabel>
{t("healthPort")}
</FormLabel>
<FormControl> <FormControl>
<Input <Input
{...field} {...field}
@@ -388,7 +361,7 @@ export function HealthCheckFormFields({
</div> </div>
)} )}
{/* HTTP Method + Timeout (shown when not TCP) */} {/* HTTP Method + Path + Timeout (shown when not TCP) */}
{watchedMode !== "tcp" && ( {watchedMode !== "tcp" && (
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<FormField <FormField
@@ -396,7 +369,9 @@ export function HealthCheckFormFields({
name="hcMethod" name="hcMethod"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("httpMethod")}</FormLabel> <FormLabel>
{t("httpMethod")}
</FormLabel>
<Select <Select
onValueChange={(value) => onValueChange={(value) =>
handleChange( handleChange(
@@ -453,7 +428,10 @@ export function HealthCheckFormFields({
handleChange( handleChange(
"hcPath", "hcPath",
e.target.value, e.target.value,
(v) => field.onChange(e) (v) =>
field.onChange(
e
)
) )
} }
/> />
@@ -475,8 +453,10 @@ export function HealthCheckFormFields({
type="number" type="number"
{...field} {...field}
onChange={(e) => { onChange={(e) => {
const value = parseInt( const value =
e.target.value parseInt(
e.target
.value
); );
handleChange( handleChange(
"hcTimeout", "hcTimeout",
@@ -500,7 +480,9 @@ export function HealthCheckFormFields({
name="hcTimeout" name="hcTimeout"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("timeoutSeconds")}</FormLabel> <FormLabel>
{t("timeoutSeconds")}
</FormLabel>
<FormControl> <FormControl>
<Input <Input
type="number" type="number"
@@ -646,7 +628,7 @@ export function HealthCheckFormFields({
{/* HTTP-only fields */} {/* HTTP-only fields */}
{watchedMode !== "tcp" && ( {watchedMode !== "tcp" && (
<> <>
{/* Expected Response Codes + TLS Server Name + Follow Redirects */} {/* Expected Response Codes + TLS Server Name */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField <FormField
control={form.control} control={form.control}
@@ -654,17 +636,26 @@ export function HealthCheckFormFields({
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel> <FormLabel>
{t("expectedResponseCodes")} {t(
"expectedResponseCodes"
)}
</FormLabel> </FormLabel>
<FormControl> <FormControl>
<Input <Input
type="number" type="number"
value={field.value ?? ""} value={
field.value ??
""
}
onChange={(e) => { onChange={(e) => {
const val = const val =
e.target.value; e.target
const value = val .value;
? parseInt(val) const value =
val
? parseInt(
val
)
: null; : null;
handleChange( handleChange(
"hcStatus", "hcStatus",
@@ -692,7 +683,8 @@ export function HealthCheckFormFields({
onChange={(e) => onChange={(e) =>
handleChange( handleChange(
"hcTlsServerName", "hcTlsServerName",
e.target.value, e.target
.value,
(v) => (v) =>
field.onChange( field.onChange(
e e
@@ -719,7 +711,9 @@ export function HealthCheckFormFields({
<FormControl> <FormControl>
<Switch <Switch
checked={field.value} checked={field.value}
onCheckedChange={(value) => onCheckedChange={(
value
) =>
handleChange( handleChange(
"hcFollowRedirects", "hcFollowRedirects",
value, value,
@@ -755,7 +749,9 @@ export function HealthCheckFormFields({
/> />
</FormControl> </FormControl>
<FormDescription> <FormDescription>
{t("customHeadersDescription")} {t(
"customHeadersDescription"
)}
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@@ -763,6 +759,8 @@ export function HealthCheckFormFields({
/> />
</> </>
)} )}
</>
)}
</div> </div>
)} )}
</> </>

93
src/components/S3DestinationCredenza.tsx Normal file
View File

@@ -0,0 +1,93 @@
"use client";
import { useState, useEffect } from "react";
import {
Credenza,
CredenzaBody,
CredenzaClose,
CredenzaContent,
CredenzaDescription,
CredenzaFooter,
CredenzaHeader,
CredenzaTitle
} from "@app/components/Credenza";
import { Button } from "@app/components/ui/button";
import { Plus, X, KeyRound, ExternalLink } from "lucide-react";
import Link from "next/link";
import { useTranslations } from "next-intl";
export interface S3DestinationCredenzaProps {
open: boolean;
onOpenChange: (open: boolean) => void;
editing: any;
orgId: string;
onSaved: () => void;
}
export function S3DestinationCredenza({
open,
onOpenChange,
editing,
orgId,
onSaved,
}: S3DestinationCredenzaProps) {
const t = useTranslations();
return (
<Credenza open={open} onOpenChange={onOpenChange}>
<CredenzaContent className="sm:max-w-2xl">
<CredenzaHeader>
<CredenzaTitle>
{editing
? t("S3DestEditTitle")
: t("S3DestAddTitle")}
</CredenzaTitle>
<CredenzaDescription>
{editing
? t("S3DestEditDescription")
: t("S3DestAddDescription")}
</CredenzaDescription>
</CredenzaHeader>
<CredenzaBody>
<div className="rounded-md border border-black-500/30 bg-linear-to-br from-black-500/10 via-background to-background overflow-hidden">
<div className="py-3 px-4">
<div className="flex items-center gap-2.5 text-sm text-muted-foreground">
<KeyRound className="size-4 shrink-0 text-black-500" />
<span>
Contact sales to enable this feature.{" "}
<Link
href="https://click.fossorial.io/ep922"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
>
Book a demo
<ExternalLink className="size-3.5 shrink-0" />
</Link>
{" or "}
<Link
href="https://pangolin.net/contact"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 font-medium text-black-600 underline"
>
contact us
<ExternalLink className="size-3.5 shrink-0" />
</Link>
.
</span>
</div>
</div>
</div>
</CredenzaBody>
<CredenzaFooter>
<CredenzaClose asChild>
<Button variant="outline">{t("cancel")}</Button>
</CredenzaClose>
</CredenzaFooter>
</CredenzaContent>
</Credenza>
);
}