Develop

apps/metamigo-frontend/app/_components/webhooks/WebhookCreate.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import {
+  SimpleForm,
+  FormDataConsumer,
+  TextInput,
+  Create,
+  ArrayInput,
+  SimpleFormIterator,
+  regex,
+  required,
+  CreateProps,
+} from "react-admin";
+import { BackendTypeInput, BackendIdInput, HttpMethodInput } from "./shared";
+/*
+
+
+        <ReferenceInput
+          label="Voice Line"
+          source="voiceLineId"
+          reference="voiceLines"
+          validate={[required()]}
+        >
+          <SelectInput optionText="number" />
+        </ReferenceInput>
+*/
+const WebhookCreate = (props: CreateProps) => (
+  <Create {...props} title="Create Webhooks">
+    <SimpleForm>
+      <TextInput source="name" validate={[required()]} />
+      <BackendTypeInput />
+      <FormDataConsumer subscription={{ values: true }}>
+        {BackendIdInput}
+      </FormDataConsumer>
+      <TextInput
+        source="endpointUrl"
+        validate={[required(), regex(/^https?:\/\/[^/]+/, "validation.url")]}
+      />
+      <HttpMethodInput />
+      <ArrayInput source="headers">
+        <SimpleFormIterator>
+          <TextInput
+            source="header"
+            validate={[required(), regex(/^[\w-]+$/, "validation.headerName")]}
+          />
+          <TextInput source="value" validate={[required()]} />
+        </SimpleFormIterator>
+      </ArrayInput>
+    </SimpleForm>
+  </Create>
+);
+
+export default WebhookCreate;

apps/metamigo-frontend/app/_components/webhooks/WebhookEdit.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import {
+  SimpleForm,
+  TextInput,
+  Edit,
+  ArrayInput,
+  SimpleFormIterator,
+  regex,
+  required,
+  EditProps,
+  FormDataConsumer,
+} from "react-admin";
+import { BackendTypeInput, BackendIdInput, HttpMethodInput } from "./shared";
+
+const WebhookTitle = ({ record }: any) => {
+  let title = "";
+  if (record) title = record.name ?? record.email;
+  return <span>Webhook {title}</span>;
+};
+
+const WebhookEdit = (props: EditProps) => (
+  <Edit title={<WebhookTitle />} {...props}>
+    <SimpleForm>
+      <TextInput source="name" validate={[required()]} />
+      <BackendTypeInput />
+      <FormDataConsumer subscription={{ values: true }}>
+        {BackendIdInput}
+      </FormDataConsumer>
+      <TextInput
+        source="endpointUrl"
+        validate={[required(), regex(/^https?:\/\/[^/]+/, "validation.url")]}
+      />
+      <HttpMethodInput />
+      <ArrayInput source="headers">
+        <SimpleFormIterator>
+          <TextInput
+            source="header"
+            validate={[required(), regex(/^[\w-]+$/, "validation.headerName")]}
+          />
+          <TextInput source="value" validate={[required()]} />
+        </SimpleFormIterator>
+      </ArrayInput>
+    </SimpleForm>
+  </Edit>
+);
+
+export default WebhookEdit;

apps/metamigo-frontend/app/_components/webhooks/WebhookList.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { List, Datagrid, DateField, TextField, ListProps } from "react-admin";
+import { BackendIdField } from "./shared";
+
+const WebhookList = (props: ListProps) => (
+  <List {...props} exporter={false}>
+    <Datagrid rowClick="edit">
+      <TextField source="name" />
+      <TextField source="backendType" />
+      <BackendIdField source="backendId" />
+      <DateField source="createdAt" />
+      <DateField source="updatedAt" />
+    </Datagrid>
+  </List>
+);
+
+export default WebhookList;

apps/metamigo-frontend/app/_components/webhooks/index.ts

@@ -0,0 +1,14 @@
+"use client";
+
+import WebhookIcon from "@mui/icons-material/Send";
+import WebhookList from "./WebhookList";
+import WebhookEdit from "./WebhookEdit";
+import WebhookCreate from "./WebhookCreate";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  list: WebhookList,
+  create: WebhookCreate,
+  edit: WebhookEdit,
+  icon: WebhookIcon,
+};

apps/metamigo-frontend/app/_components/webhooks/shared.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { SelectInput, required } from "react-admin";
+
+import {
+  VoiceLineField,
+  VoiceLineSelectInput,
+} from "../voice/voicelines/shared";
+import {
+  WhatsAppBotField,
+  WhatsAppBotSelectInput,
+} from "../whatsapp/bots/shared";
+import { SignalBotField, SignalBotSelectInput } from "../signal/bots/shared";
+
+const httpChoices = [
+  { id: "post", name: "POST" },
+  { id: "put", name: "PUT" },
+];
+export const HttpMethodInput = (props: any) => (
+  <SelectInput
+    source="httpMethod"
+    choices={httpChoices}
+    validate={[required()]}
+    initialValue="post"
+    {...props}
+  />
+);
+
+const backendChoices = [
+  { id: "signal", name: "Signal" },
+  { id: "whatsapp", name: "WhatsApp" },
+  { id: "voice", name: "Voice" },
+];
+
+const backendInputComponents = {
+  whatsapp: WhatsAppBotSelectInput("backendId"),
+  signal: SignalBotSelectInput("backendId"),
+  voice: VoiceLineSelectInput("backendId"),
+};
+
+const backendFieldComponents = {
+  whatsapp: WhatsAppBotField("backendId"),
+  signal: SignalBotField("backendId"),
+  voice: VoiceLineField("backendId"),
+};
+
+export const BackendTypeInput = (props: any) => (
+  <SelectInput
+    source="backendType"
+    choices={backendChoices}
+    validate={[required()]}
+    {...props}
+  />
+);
+
+export const BackendIdInput = (form: any, ...rest: any[]) => {
+  const Component = form.formData.backendType
+    ? // @ts-expect-error
+      backendInputComponents[form.formData.backendType]
+    : false;
+  return <>{Component && <Component form={form} {...rest} />}</>;
+};
+
+export const BackendIdField = (form: any, ...rest: any[]) => {
+  console.log(form);
+
+  const Component = form.record.backendType
+    ? // @ts-expect-error
+      backendFieldComponents[form.record.backendType]
+    : false;
+  return <>{Component && <Component form={form} {...rest} />}</>;
+};