Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(admin-ui): add page to update webhook #865

Merged
merged 5 commits into from
Feb 5, 2025
Merged

feat(admin-ui): add page to update webhook #865

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
260fd1a
refactor: move webhook events to utils folder
rsbh Feb 5, 2025
7199274
feat: add action dropdown for service user
rsbh Feb 5, 2025
71f594c
chore: add callback function to edit webhook button
rsbh Feb 5, 2025
14704de
feat: add page to update webhook
rsbh Feb 5, 2025
fb20704
fix: typo
rsbh Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 86 additions & 77 deletions ui/src/components/CustomField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,11 @@ import React, { CSSProperties } from "react";
import { Control, Controller, UseFormRegister } from "react-hook-form";
import { capitalizeFirstLetter } from "~/utils/helper";
import { MultiSelect } from "./multiselect";
import Skeleton from "react-loading-skeleton";

type CustomFieldNameProps = {
name: string;
isLoading?: boolean;
title?: string;
disabled?: boolean;
register: UseFormRegister<any>;
Expand All @@ -33,6 +35,7 @@ export const CustomFieldName = ({
style = {},
placeholder,
options = [],
isLoading = false,
...props
}: FormFieldProps &
CustomFieldNameProps &
Expand Down Expand Up @@ -64,86 +67,92 @@ export const CustomFieldName = ({
</FormMessage>
</Flex>
<FormControl asChild>
<Controller
defaultValue={props.defaultValue}
name={name}
control={control}
render={({ field }) => {
switch (variant) {
case "textarea": {
return (
<textarea
{...field}
placeholder={
placeholder ||
`Enter your ${title?.toLowerCase() || name}`
}
style={style}
/>
);
}
case "select": {
const { ref, ...rest } = field;
return (
<Select
{...rest}
onValueChange={(value: any) => field.onChange(value)}
>
<Select.Trigger
ref={ref}
style={{ height: "26px", width: "100%" }}
{isLoading ? (
<Skeleton />
) : (
<Controller
defaultValue={props.defaultValue}
name={name}
control={control}
render={({ field }) => {
switch (variant) {
case "textarea": {
return (
<textarea
{...field}
defaultValue={props?.defaultValue}
placeholder={
placeholder ||
`Enter your ${title?.toLowerCase() || name}`
}
style={style}
/>
);
}
case "select": {
const { ref, ...rest } = field;
return (
<Select
{...rest}
onValueChange={(value: any) => field.onChange(value)}
>
<Select.Value placeholder={`Select ${inputTitle}`} />
</Select.Trigger>
<Select.Content style={{ width: "320px" }}>
<Select.Group>
{options.map((opt) => (
<Select.Item key={opt.value} value={opt.value}>
{opt.label}
</Select.Item>
))}
</Select.Group>
</Select.Content>
</Select>
);
}
case "multiselect": {
const { onChange, value, ...rest } = field;
return (
<MultiSelect<string>
{...rest}
options={options}
onSelect={onChange}
selected={value}
/>
);
}
case "switch": {
const { onChange, value, ...rest } = field;
return (
<Switch
{...rest}
checked={value}
onCheckedChange={onChange}
/>
);
}
<Select.Trigger
ref={ref}
style={{ height: "26px", width: "100%" }}
>
<Select.Value placeholder={`Select ${inputTitle}`} />
</Select.Trigger>
<Select.Content style={{ width: "320px" }}>
<Select.Group>
{options.map((opt) => (
<Select.Item key={opt.value} value={opt.value}>
{opt.label}
</Select.Item>
))}
</Select.Group>
</Select.Content>
</Select>
);
}
case "multiselect": {
const { onChange, value, ...rest } = field;
return (
<MultiSelect<string>
{...rest}
options={options}
onSelect={onChange}
selected={value || props?.defaultValue}
/>
);
}
case "switch": {
const { onChange, value, ...rest } = field;
return (
<Switch
{...rest}
defaultChecked={props?.defaultChecked}
checked={value}
onCheckedChange={onChange}
/>
);
}

default: {
return (
<TextField
{...field}
placeholder={
placeholder ||
`Enter your ${title?.toLowerCase() || name}`
}
disabled={disabled}
/>
);
default: {
return (
<TextField
{...field}
placeholder={
placeholder ||
`Enter your ${title?.toLowerCase() || name}`
}
disabled={disabled}
/>
);
}
}
}
}}
/>
}}
/>
)}
</FormControl>
</Flex>
</FormField>
Expand Down
44 changes: 41 additions & 3 deletions ui/src/containers/webhooks/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
import { ApsaraColumnDef } from "@raystack/apsara";
import { DotsVerticalIcon, TrashIcon, UpdateIcon } from "@radix-ui/react-icons";
import { ApsaraColumnDef, DropdownMenu, Flex } from "@raystack/apsara";
import { V1Beta1Webhook } from "@raystack/frontier";

export const getColumns: () => ApsaraColumnDef<V1Beta1Webhook>[] = () => {
interface getColumnsOptions {
openEditPage: (id: string) => void;
}

export const getColumns: (
opt: getColumnsOptions
) => ApsaraColumnDef<V1Beta1Webhook>[] = ({ openEditPage }) => {
return [
{
header: "Description",
Expand Down Expand Up @@ -33,7 +40,38 @@ export const getColumns: () => ApsaraColumnDef<V1Beta1Webhook>[] = () => {
{
header: "Action",
accessorKey: "id",
cell: () => null,
cell: ({ getValue }) => (
<DropdownMenu style={{ padding: "0 !important" }}>
<DropdownMenu.Trigger asChild style={{ cursor: "pointer" }}>
<DotsVerticalIcon />
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Group style={{ padding: 0 }}>
<DropdownMenu.Item style={{ padding: 0 }}>
<Flex
style={{ padding: "12px" }}
gap={"small"}
data-test-id="admin-ui-webhook-update-btn"
onClick={() => openEditPage(getValue())}
>
<UpdateIcon />
Update
</Flex>
</DropdownMenu.Item>
<DropdownMenu.Item style={{ padding: 0 }} disabled>
<Flex
style={{ padding: "12px" }}
gap={"small"}
data-test-id="admin-ui-webhook-delete-btn"
>
<TrashIcon />
Delete
</Flex>
</DropdownMenu.Item>
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu>
),
},
];
};
8 changes: 6 additions & 2 deletions ui/src/containers/webhooks/create/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { FormProvider, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form, FormSubmit } from "@radix-ui/react-form";
import { CustomFieldName } from "~/components/CustomField";
import events from "./events";
import events from "~/utils/webhook_events";
import { SheetFooter } from "~/components/sheet/footer";
import { useFrontier } from "@raystack/frontier/react";
import { V1Beta1WebhookRequestBody } from "@raystack/frontier";
Expand Down Expand Up @@ -77,7 +77,11 @@ export default function CreateWebhooks() {
>
<FormProvider {...methods}>
<Form onSubmit={methods.handleSubmit(onSubmit)}>
<SheetHeader title="Add new Webhook" onClick={onOpenChange} data-test-id="admin-ui-add-new-webhook-btn" />
<SheetHeader
title="Add new Webhook"
onClick={onOpenChange}
data-test-id="admin-ui-add-new-webhook-btn"
/>
<Flex direction="column" gap="large" style={styles.main}>
<CustomFieldName
name="url"
Expand Down
9 changes: 7 additions & 2 deletions ui/src/containers/webhooks/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@ import { useFrontier } from "@raystack/frontier/react";
import { useEffect, useState } from "react";
import { getColumns } from "./columns";
import { WebhooksHeader } from "./header";
import { Outlet } from "react-router-dom";
import { Outlet, useNavigate } from "react-router-dom";

export default function WebhooksList() {
const tableStyle = { width: "100%" };
const naviagte = useNavigate();
rsbh marked this conversation as resolved.
Show resolved Hide resolved
const { client } = useFrontier();
const [webhooks, setWebhooks] = useState<V1Beta1Webhook[]>([]);
const [isLoading, setIsLoading] = useState(false);
Expand All @@ -28,7 +29,11 @@ export default function WebhooksList() {
fetchWebhooks();
}, [client]);

const columns = getColumns();
function openEditPage(id: string) {
naviagte(`/webhooks/${id}`);
rsbh marked this conversation as resolved.
Show resolved Hide resolved
}

const columns = getColumns({ openEditPage });
return (
<Flex direction="row" style={{ height: "100%", width: "100%" }}>
<DataTable
Expand Down
Loading
Loading