Display improvements

apps/bridge-frontend/app/(main)/[...segment]/@create/_components/Create.tsx

@@ -39,7 +39,9 @@ export const Create: FC<CreateProps> = ({ service }) => {
       formState={formState}
     >
       <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
-        {fields.map((field) => (
+        {fields.map(
+          (field) =>
+            !field.hidden && (
               <Grid key={field.name} item xs={field.size ?? 6}>
                 <TextField
                   name={field.name}
@@ -50,7 +52,8 @@ export const Create: FC<CreateProps> = ({ service }) => {
                   helperText={field.helperText}
                 />
               </Grid>
-        ))}
+            ),
+        )}
       </Grid>
     </InternalCreate>
   );

apps/bridge-frontend/app/(main)/[...segment]/@edit/_components/Edit.tsx

@@ -46,6 +46,8 @@ export const Edit: FC<EditProps> = ({ service, row }) => {
               name={field.name}
               label={field.label}
               lines={field.lines ?? 1}
+              disabled={field.disabled ?? false}
+              refreshable={field.refreshable ?? false}
               required={field.required ?? false}
               formState={formState}
               helperText={field.helperText}

apps/bridge-frontend/app/_actions/service.ts

@@ -3,6 +3,15 @@
 import { revalidatePath } from "next/cache";
 import { db, Database } from "@/app/_lib/database";
 import { FieldDescription, Entity } from "@/app/_lib/service";
+import crypto from "crypto";
+
+const generateToken = () => {
+  const length = 20;
+  const randomBytes = crypto.randomBytes(length);
+  const randomString = randomBytes.toString("hex").slice(0, length);
+
+  return randomString;
+};
 
 type CreateActionArgs = {
   entity: Entity;
@@ -20,8 +29,12 @@ export const createAction = async ({
   formData,
 }: CreateActionArgs) => {
   const newRecord = fields.reduce(
-    (acc: Record<string, string>, field: FieldDescription) => {
+    (acc: Record<string, any>, field: FieldDescription) => {
-      // @ts-expect-error
+      if (field.autogenerated === "token") {
+        acc[field.name] = generateToken();
+        return acc;
+      }
+
       acc[field.name] = formData.get(field.name)?.toString() ?? null;
       return acc;
     },
@@ -56,8 +69,7 @@ export const updateAction = async ({
 }: UpdateActionArgs) => {
   const id = currentState.values.id;
   const updatedRecord = fields.reduce(
-    (acc: Record<string, string>, field: FieldDescription) => {
+    (acc: Record<string, any>, field: FieldDescription) => {
-      // @ts-expect-error
       acc[field.name] = formData.get(field.name)?.toString() ?? null;
       return acc;
     },

apps/bridge-frontend/app/_lib/facebook.ts

@@ -26,6 +26,20 @@ export const facebookConfig: ServiceConfig = {
       label: "Page Access Token",
       required: true,
     },
+    {
+      name: "token",
+      label: "Token",
+      hidden: true,
+      required: true,
+      autogenerated: "token",
+    },
+    {
+      name: "verifyToken",
+      label: "Verify Token",
+      hidden: true,
+      required: true,
+      autogenerated: "token",
+    },
   ],
   updateFields: [
     { name: "name", label: "Name", required: true, size: 12 },
@@ -35,6 +49,18 @@ export const facebookConfig: ServiceConfig = {
       size: 12,
       lines: 3,
     },
+    {
+      name: "token",
+      label: "Token",
+      disabled: true,
+      refreshable: true,
+    },
+    {
+      name: "verifyToken",
+      label: "Verify Token",
+      disabled: true,
+      refreshable: true,
+    },
     { name: "appId", label: "App ID", required: true },
     { name: "appSecret", label: "App Secret", required: true },
     { name: "pageId", label: "Page ID", required: true },
@@ -52,6 +78,17 @@ export const facebookConfig: ServiceConfig = {
       required: true,
       size: 12,
     },
+    {
+      name: "token",
+      label: "Token",
+      copyable: true,
+    },
+    {
+      name: "verifyToken",
+      label: "Verify Token",
+      copyable: true,
+    },
+
     { name: "appId", label: "App ID", required: true },
     { name: "appSecret", label: "App Secret", required: true },
     {

apps/bridge-frontend/app/_lib/service.ts

@@ -16,9 +16,12 @@ export type Entity = (typeof entities)[number];
 export type FieldDescription = {
   name: string;
   label: string;
+  autogenerated?: "token";
+  hidden?: boolean;
   type?: string;
   lines?: number;
   copyable?: boolean;
+  refreshable?: boolean;
   defaultValue?: string;
   required?: boolean;
   disabled?: boolean;

apps/bridge-frontend/app/_lib/signal.ts

@@ -23,13 +23,19 @@ export const signalConfig: ServiceConfig = {
       label: "phoneNumber",
       required: true,
     },
+    {
+      name: "token",
+      label: "Token",
+      hidden: true,
+      required: true,
+      autogenerated: "token",
+    },
   ],
   updateFields: [
     { name: "name", label: "Name", required: true, size: 12 },
     {
       name: "description",
       label: "Description",
-      required: true,
       size: 12,
     },
     {
@@ -43,13 +49,16 @@ export const signalConfig: ServiceConfig = {
     {
       name: "description",
       label: "Description",
-      required: true,
       size: 12,
     },
     {
       name: "phoneNumber",
       label: "phoneNumber",
-      required: true,
+    },
+    {
+      name: "token",
+      label: "Token",
+      copyable: true,
     },
   ],
   listColumns: [

apps/bridge-frontend/app/_lib/whatsapp.ts

@@ -23,13 +23,19 @@ export const whatsappConfig: ServiceConfig = {
       label: "Phone Number",
       required: true,
     },
+    {
+      name: "token",
+      label: "Token",
+      hidden: true,
+      required: true,
+      autogenerated: "token",
+    },
   ],
   updateFields: [
     { name: "name", label: "Name", required: true, size: 12 },
     {
       name: "description",
       label: "Description",
-      required: true,
       size: 12,
     },
     {
@@ -43,13 +49,16 @@ export const whatsappConfig: ServiceConfig = {
     {
       name: "description",
       label: "Description",
-      required: true,
       size: 12,
     },
     {
       name: "phoneNumber",
       label: "Phone Number",
-      required: true,
+    },
+    {
+      name: "token",
+      label: "Token",
+      copyable: true,
     },
   ],
   listColumns: [

apps/bridge-frontend/database/migrations/0006-add-webhooks.ts

@@ -10,7 +10,6 @@ export async function up(db: Kysely<any>): Promise<void> {
     .addColumn("description", "text")
     .addColumn("backend_type", "text", (col) => col.notNull())
     .addColumn("backend_id", "uuid", (col) => col.notNull())
-    .addColumn("name", "text", (col) => col.notNull())
     .addColumn("endpoint_url", "text", (col) =>
       col.notNull().check(sql`endpoint_url ~ '^https?://[^/]+'`),
     )

packages/ui/components/DisplayTextField.tsx

@@ -48,8 +48,8 @@ export const DisplayTextField: FC<DisplayTextFieldProps> = ({
         "& .MuiFormLabel-root": {
           fontSize: 18,
           color: darkGray,
-          minWidth: 0,
         },
+        width: "100%",
       }}
       InputProps={{
         endAdornment: copyable ? (