link-stack/packages/bridge-ui/config/webhooks.ts

import { selectAllAction } from "../actions/service";
import { ServiceConfig } from "../lib/service";
import { getServiceTable } from "../config/config";

const getHTTPMethodOptions = async () => [
  { value: "post", label: "POST" },
  { value: "put", label: "PUT" },
];

const getBackendTypeOptions = async (_formState: any) => [
  { value: "whatsapp", label: "WhatsApp" },
  { value: "facebook", label: "Facebook" },
  { value: "signal", label: "Signal" },
];

const getBackendIDOptions = async (formState: any) => {
  if (!formState || !formState.values.backendType) {
    return [];
  }

  const table = getServiceTable(formState.values.backendType);
  const result = await selectAllAction(table);

  return result.map((item: any) => ({
    value: item.id,
    label: item.name,
  }));
};

export const webhooksConfig: ServiceConfig = {
  entity: "webhooks",
  table: "Webhook",
  displayName: "Webhook",
  createFields: [
    {
      name: "name",
      label: "Name",
      required: true,
      size: 12,
    },
    {
      name: "description",
      label: "Description",
      size: 12,
      lines: 3,
    },
    {
      name: "httpMethod",
      label: "HTTP Method",
      kind: "select",
      getOptions: getHTTPMethodOptions,
      defaultValue: "post",
      required: true,
      size: 2,
    },
    {
      name: "endpointUrl",
      label: "Endpoint",
      required: true,
      size: 10,
    },
    {
      name: "backendType",
      label: "Backend Type",
      kind: "select",
      getOptions: getBackendTypeOptions,
      defaultValue: "facebook",
      required: true,
    },
    {
      name: "backendId",
      label: "Backend ID",
      kind: "select",
      getOptions: getBackendIDOptions,
      required: true,
    },
    {
      name: "headers",
      label: "HTTP Headers",
      kind: "multi",
      size: 12,
      helperText: "Useful for authentication, etc.",
    },
  ],
  updateFields: [
    {
      name: "name",
      label: "Name",
      required: true,
      size: 12,
    },
    {
      name: "description",
      label: "Description",
      size: 12,
      lines: 3,
    },
    {
      name: "httpMethod",
      label: "HTTP Method",
      kind: "select",
      getOptions: getHTTPMethodOptions,
      defaultValue: "post",
      required: true,
      size: 2,
    },
    {
      name: "endpointUrl",
      label: "Endpoint",
      required: true,
      size: 10,
    },
    {
      name: "backendType",
      label: "Backend Type",
      kind: "select",
      getOptions: getBackendTypeOptions,
      defaultValue: "facebook",
      required: true,
    },
    {
      name: "backendId",
      label: "Backend ID",
      kind: "select",
      getOptions: getBackendIDOptions,
      required: true,
    },
    {
      name: "headers",
      label: "HTTP Headers",
      kind: "multi",
      size: 12,
      helperText: "Useful for authentication, etc.",
    },
  ],
  displayFields: [
    { name: "name", label: "Name", required: true, size: 12 },
    {
      name: "description",
      label: "Description",
      required: true,
      size: 12,
    },
  ],
  listColumns: [
    {
      field: "name",
      headerName: "Name",
      flex: 1,
    },
    {
      field: "backendType",
      headerName: "Type",
      flex: 1,
    },
    {
      field: "endpointUrl",
      headerName: "Endpoint",
      flex: 1,
    },
    {
      field: "updatedAt",
      headerName: "Updated At",
      valueGetter: (value: any) => new Date(value).toLocaleString(),
      flex: 1,
    },
  ],
};