Skip to content

Commit

Permalink
✨ Added filter to scopes for webhook + custom oAuth
Browse files Browse the repository at this point in the history
  • Loading branch information
@naelob
naelob committed May 19, 2024
1 parent 23c2c1d commit b69d27b
Show file tree
Hide file tree
Showing 7 changed files with 352 additions and 195 deletions.
4 changes: 2 additions & 2 deletions apps/client-ts/src/app/(Dashboard)/configuration/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default function Page() {

const { data: linkedUsers, isLoading, error } = useLinkedUsers();
const { data: webhooks, isLoading: isWebhooksLoading, error: isWebhooksError } = useWebhooks();
const {data: ConnectionStrategies, isLoading: isConnectionStrategiesLoading,error: isConnectionStategiesError} = useConnectionStrategies()
const {data: connectionStrategies, isLoading: isConnectionStrategiesLoading,error: isConnectionStategiesError} = useConnectionStrategies()

const { data: mappings, isLoading: isFieldMappingsLoading, error: isFieldMappingsError } = useFieldMappings();
const [open, setOpen] = useState(false);
Expand Down Expand Up @@ -101,7 +101,7 @@ export default function Page() {

// console.log(ConnectionStrategies)

const mappingConnectionStrategies = ConnectionStrategies?.map(cs => ({
const mappingConnectionStrategies = connectionStrategies?.map(cs => ({
id_cs : cs.id_connection_strategy,
provider_name : extractProvider(cs.type),
auth_type: extractAuthMode(cs.type),
Expand Down
211 changes: 96 additions & 115 deletions apps/client-ts/src/components/Configuration/AddWebhook.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { Button } from "@/components/ui/button"
import {
Dialog,
DialogContent,

DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
Expand All @@ -28,20 +27,13 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { scopes } from "@panora/shared/src/webhookScopes"
import { cn } from "@/lib/utils"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"
import { usePostHog } from 'posthog-js/react'
import config from "@/lib/config"
import { DataTableFacetedFilterWebhook } from "../shared/data-table-webhook-scopes"


const formSchema = z.object({
Expand All @@ -51,7 +43,7 @@ const formSchema = z.object({
url: z.string().min(2, {
message: "url must be at least 2 characters.",
}),
event: z.string(),
scopes: z.string(),
})

const AddWebhook = () => {
Expand All @@ -66,141 +58,130 @@ const AddWebhook = () => {
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
description: "",
url: "",
event: scopes[0]
description: "",
url: "",
scopes: "",
},
})
})


const handleOpenChange = (openVal : boolean) => {
setOpen(openVal);
form.reset();
};

function onSubmit(values: z.infer<typeof formSchema>) {
console.log(values)
mutate({
const selectedScopes = values.scopes ? values.scopes.split(' ') : [];
console.log({ ...values, scopes: selectedScopes });
mutate({
url: values.url,
description: values.description,
id_project: idProject,
scope: [values.event],
scope: selectedScopes,
});
handleOpenChange(false);
handleOpenChange(false);
posthog?.capture("webhook_created", {
id_project: idProject,
mode: config.DISTRIBUTION
})
}

return (
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className={cn("w-[160px] justify-between")}
onClick={ () => {
posthog?.capture("add_webhook_button_clicked", {
id_project: idProject,
mode: config.DISTRIBUTION
})
}}
>
<PlusCircledIcon className=" h-5 w-5" />
Add Webhook
</Button>
</DialogTrigger>
<DialogContent className="sm:w-[450px]">
<Form {...form}>
return (
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className={cn("w-[160px] justify-between")}
onClick={ () => {
posthog?.capture("add_webhook_button_clicked", {
id_project: idProject,
mode: config.DISTRIBUTION
})
}}
>
<PlusCircledIcon className=" h-5 w-5" />
Add Webhook
</Button>
</DialogTrigger>
<DialogContent className="sm:w-[450px]">
<Form {...form}>

<form onSubmit={form.handleSubmit(onSubmit)}>
<CardHeader>
<CardTitle>Create a webhook</CardTitle>
<CardDescription>
Set up your webhook endpoint to receive live events from Panora.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-6">
<div className="grid gap-4">
<div className="grid gap-2">
<form onSubmit={form.handleSubmit(onSubmit)}>
<CardHeader>
<CardTitle>Create a webhook</CardTitle>
<CardDescription>
Set up your webhook endpoint to receive live events from Panora.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-6">
<div className="grid gap-4">
<div className="grid gap-2">
<FormField
control={form.control}
name="event"
name="scopes"
render={({ field }) => (
<FormItem>
<FormLabel htmlFor="event">Event</FormLabel>
<FormLabel htmlFor="scopes">Scopes</FormLabel>
<FormControl>
<Select
onValueChange={field.onChange} defaultValue={field.value}
>
<SelectTrigger>
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
{
scopes.map((scope) => {
return (
<SelectItem key={scope} value={scope}>{scope}</SelectItem>
)
})
}
</SelectContent>
</Select>
<div className="flex flex-col">
<DataTableFacetedFilterWebhook title="Add" field={field} />
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
</div>
<div className="grid gap-2">
<FormField
control={form.control}
name="url"
render={({ field }) => (
<FormItem>
<FormLabel>Endpoint URL</FormLabel>
<FormControl>
<Input
placeholder="https://yourdomain/webhook_endpoint" {...field}
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</FormControl>
<FormDescription>
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid gap-2">
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>Description</FormLabel>
<FormControl>
<Input
placeholder="Give your endpoint a short, descriptive name." {...field}
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
</div>
<div className="grid gap-2">
<FormField
control={form.control}
name="url"
render={({ field }) => (
<FormItem>
<FormLabel>Endpoint URL</FormLabel>
<FormControl>
<Input
placeholder="https://yourdomain/webhook_endpoint" {...field}
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</FormControl>
<FormDescription>
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid gap-2">
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>Description</FormLabel>
<FormControl>
<Input
placeholder="Give your endpoint a short, descriptive name." {...field}
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
</CardContent>
<CardFooter className="justify-between space-x-2">
<Button type="submit">Add Endpoint</Button>
</CardFooter>
</form>
</Form>
</DialogContent>
</Dialog>
)
</CardContent>
<CardFooter className="justify-between space-x-2">
<Button type="submit">Add Endpoint</Button>
</CardFooter>
</form>
</Form>
</DialogContent>
</Dialog>
)
}

export default AddWebhook;
28 changes: 26 additions & 2 deletions apps/client-ts/src/components/Configuration/Connector/ConnectorDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,35 @@ import useConnectionStrategyAuthCredentialsMutation from "@/hooks/mutations/useC
import { usePostHog } from 'posthog-js/react'
import { Input } from "@/components/ui/input"
import useConnectionStrategies from "@/hooks/useConnectionStrategies"
import { DataTableFacetedFilter } from "@/components/shared/data-table-faceted-filter"

interface ItemDisplayProps {
item?: Provider
}

export const statuses = [
{
value: "backlog",
label: "Backlog",
},
{
value: "todo",
label: "Todo",
},
{
value: "in progress",
label: "In Progress",
},
{
value: "done",
label: "Done",
},
{
value: "canceled",
label: "Canceled",
},
]

const formSchema = z.object({
client_id : z.string({
required_error: "Please Enter a Client ID",
Expand Down Expand Up @@ -305,9 +329,9 @@ export function ConnectorDisplay({ item }: ItemDisplayProps) {
control={form.control}
render={({ field }) => (
<FormItem>
<FormLabel className="flex flex-col">Scope</FormLabel>
<FormLabel className="flex flex-col">Scopes</FormLabel>
<FormControl>
<Input {...field} placeholder="Enter Scopes" />
<DataTableFacetedFilter title="Add" field={field} />
</FormControl>
<FormMessage />
</FormItem>
Expand Down
6 changes: 4 additions & 2 deletions apps/client-ts/src/components/Configuration/WebhooksPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function WebhooksPage({

useEffect(() => {
setWebhooks(initialWebhooks);
}, [initialWebhooks]);
}, [initialWebhooks]);

return (
<div className="space-y-8">
Expand All @@ -47,7 +47,9 @@ export function WebhooksPage({

<div className="ml-4 space-y-1">
<p className="text-sm text-left text-muted-foreground mb-2">
<Badge className="">{isLoading ? <Skeleton className="w-[100px] h-[20px] rounded-md" /> : webhook.scope}</Badge>
{(webhook.scope as string[]).map((scope)=> {
return (<Badge className="mr-2">{isLoading ? <Skeleton className="w-[100px] h-[20px] rounded-md" /> : scope}</Badge>)
})}
</p>
<p className="text-sm font-medium text-left leading-none">
<Badge variant="outline">{isLoading ? <Skeleton className="w-[100px] h-[20px] rounded-md" /> : webhook.url}</Badge>
Expand Down
Loading

0 comments on commit b69d27b

Please sign in to comment.