From bb51173e7b46f76ca554238a5075891e1d5f69e7 Mon Sep 17 00:00:00 2001
From: Alaister Young <alaister@users.noreply.github.com>
Date: Wed, 27 Nov 2024 21:01:00 +0800
Subject: [PATCH] feat: cal.com wrapper (#30563)

* feat: cal.com wrapper

* add description for cal wrapper

* Fix logo

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
---
 .../Wrappers/WrapperDynamicColumns.tsx        |   2 +-
 .../Integrations/Wrappers/WrapperRow.tsx      |   2 +-
 .../Wrappers/Wrappers.constants.ts            | 208 ++++++++++++++++++
 .../ColumnEditor/ColumnType.tsx               |   3 +-
 apps/studio/public/img/icons/cal-com-icon.svg |   1 +
 .../integrations/cal_wrapper/overview.md      |   3 +
 6 files changed, 216 insertions(+), 3 deletions(-)
 create mode 100644 apps/studio/public/img/icons/cal-com-icon.svg
 create mode 100644 apps/studio/static-data/integrations/cal_wrapper/overview.md

diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperDynamicColumns.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperDynamicColumns.tsx
index 6c9f5cdebc..001e453513 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperDynamicColumns.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperDynamicColumns.tsx
@@ -117,7 +117,7 @@ const WrapperDynamicColumns = ({
       <div className="flex flex-col gap-4">
         {columns.map((column, idx) => (
           <div key={column.id} className="flex flex-col">
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-x-2">
               <Input
                 className="flex-1 [&_label]:!p-0"
                 layout="vertical"
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperRow.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperRow.tsx
index 1ca1738225..7e58349989 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperRow.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperRow.tsx
@@ -133,7 +133,7 @@ const WrapperRow = ({ wrapper }: WrapperRowProps) => {
         </TableCell>
       </TableRow>
       <Sheet open={editWrapperShown} onOpenChange={() => setisClosingEditWrapper(true)}>
-        <SheetContent size="default" tabIndex={undefined}>
+        <SheetContent size="lg" tabIndex={undefined}>
           <EditWrapperSheet
             wrapper={wrapper}
             wrapperMeta={integration.meta}
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/Wrappers.constants.ts b/apps/studio/components/interfaces/Integrations/Wrappers/Wrappers.constants.ts
index 88e0ab6935..2a3674c7f9 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/Wrappers.constants.ts
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/Wrappers.constants.ts
@@ -15,6 +15,7 @@ export const WRAPPER_HANDLERS = {
   REDIS: 'redis_fdw_handler',
   PADDLE: 'wasm_fdw_handler',
   SNOWFLAKE: 'wasm_fdw_handler',
+  CAL: 'wasm_fdw_handler',
 }
 
 export const WRAPPERS: WrapperMeta[] = [
@@ -2084,4 +2085,211 @@ export const WRAPPERS: WrapperMeta[] = [
       },
     ],
   },
+  {
+    name: 'cal_wrapper',
+    description: 'Cal.com is a scheduling platform',
+    handlerName: WRAPPER_HANDLERS.CAL,
+    validatorName: 'wasm_fdw_validator',
+    icon: `${BASE_PATH}/img/icons/cal-com-icon.svg`,
+    extensionName: 'calFdw',
+    label: 'Cal.com',
+    docsUrl: 'https://supabase.com/docs/guides/database/extensions/wrappers/cal',
+    minimumExtensionVersion: '0.4.0',
+    server: {
+      options: [
+        {
+          name: 'fdw_package_url',
+          label: 'FDW Package URL',
+          required: true,
+          encrypted: false,
+          secureEntry: false,
+          defaultValue:
+            'https://github.com/supabase/wrappers/releases/download/wasm_cal_fdw_v0.1.0/cal_fdw.wasm',
+          hidden: true,
+        },
+        {
+          name: 'fdw_package_name',
+          label: 'FDW Package Name',
+          required: true,
+          encrypted: false,
+          secureEntry: false,
+          defaultValue: 'supabase:cal-fdw',
+          hidden: true,
+        },
+        {
+          name: 'fdw_package_version',
+          label: 'FDW Package Version',
+          required: true,
+          encrypted: false,
+          secureEntry: false,
+          defaultValue: '0.1.0',
+          hidden: true,
+        },
+        {
+          name: 'fdw_package_checksum',
+          label: 'FDW Package Checksum',
+          required: true,
+          encrypted: false,
+          secureEntry: false,
+          defaultValue: 'bca8a82d6c5f8da0aa58011940c4ddb40bb2c909c02dd89b488289c4fff890c1',
+          hidden: true,
+        },
+        {
+          name: 'api_url',
+          label: 'API URL',
+          required: false,
+          encrypted: false,
+          secureEntry: false,
+          defaultValue: 'https://api.cal.com/v2',
+        },
+        {
+          name: 'api_key_id',
+          label: 'API Key ID',
+          required: true,
+          encrypted: true,
+          secureEntry: true,
+        },
+      ],
+    },
+    tables: [
+      {
+        label: 'My Profile',
+        description: 'Shows your Cal profile',
+        availableColumns: [
+          {
+            name: 'id',
+            type: 'bigint',
+          },
+          {
+            name: 'username',
+            type: 'text',
+          },
+          {
+            name: 'email',
+            type: 'text',
+          },
+          {
+            name: 'attrs',
+            type: 'jsonb',
+          },
+        ],
+        options: [
+          {
+            name: 'object',
+            defaultValue: 'my_profile',
+            editable: false,
+            required: true,
+            type: 'text',
+          },
+        ],
+      },
+      {
+        label: 'Event Types',
+        description: 'Shows your Event Types',
+        availableColumns: [
+          {
+            name: 'attrs',
+            type: 'jsonb',
+          },
+        ],
+        options: [
+          {
+            name: 'object',
+            defaultValue: 'event-types',
+            editable: false,
+            required: true,
+            type: 'text',
+          },
+        ],
+      },
+      {
+        label: 'Bookings',
+        description: 'Shows your Bookings',
+        availableColumns: [
+          {
+            name: 'attrs',
+            type: 'jsonb',
+          },
+        ],
+        options: [
+          {
+            name: 'object',
+            defaultValue: 'bookings',
+            editable: false,
+            required: true,
+            type: 'text',
+          },
+        ],
+      },
+      {
+        label: 'Calendars',
+        description: 'Shows your Calendars',
+        availableColumns: [
+          {
+            name: 'attrs',
+            type: 'jsonb',
+          },
+        ],
+        options: [
+          {
+            name: 'object',
+            defaultValue: 'calendars',
+            editable: false,
+            required: true,
+            type: 'text',
+          },
+        ],
+      },
+      {
+        label: 'Schedules',
+        description: 'Shows your Schedules',
+        availableColumns: [
+          {
+            name: 'id',
+            type: 'bigint',
+          },
+          {
+            name: 'name',
+            type: 'text',
+          },
+          {
+            name: 'attrs',
+            type: 'jsonb',
+          },
+        ],
+        options: [
+          {
+            name: 'object',
+            defaultValue: 'schedules',
+            editable: false,
+            required: true,
+            type: 'text',
+          },
+        ],
+      },
+      {
+        label: 'Conferencing',
+        description: 'Shows conferencing',
+        availableColumns: [
+          {
+            name: 'id',
+            type: 'bigint',
+          },
+          {
+            name: 'attrs',
+            type: 'jsonb',
+          },
+        ],
+        options: [
+          {
+            name: 'object',
+            defaultValue: 'conferencing',
+            editable: false,
+            required: true,
+            type: 'text',
+          },
+        ],
+      },
+    ],
+  },
 ]
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
index 9d8902cd8a..11a48a2ba8 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
@@ -57,6 +57,7 @@ interface ColumnTypeProps {
 
 const ColumnType = ({
   value,
+  className,
   enumTypes = [],
   disabled = false,
   showLabel = true,
@@ -184,7 +185,7 @@ const ColumnType = ({
   }
 
   return (
-    <div className="flex flex-col gap-y-2">
+    <div className={cn('flex flex-col gap-y-2', className)}>
       {showLabel && <Label_Shadcn_ className="text-foreground-light">Type</Label_Shadcn_>}
       <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
         <PopoverTrigger_Shadcn_ asChild>
diff --git a/apps/studio/public/img/icons/cal-com-icon.svg b/apps/studio/public/img/icons/cal-com-icon.svg
new file mode 100644
index 0000000000..dd74ef165d
--- /dev/null
+++ b/apps/studio/public/img/icons/cal-com-icon.svg
@@ -0,0 +1 @@
+<svg width="700" height="700" xmlns="http://www.w3.org/2000/svg"><path d="M180.17 535.867C77.404 535.867 0 454.547 0 354.117c0-100.735 73.444-182.734 180.17-182.734 56.66 0 95.854 17.392 126.486 57.228l-49.405 41.178c-20.761-22.103-45.786-33.136-77.08-33.136-69.503 0-107.712 53.197-107.712 117.464s41.845 116.48 107.712 116.48c30.972 0 57.322-11.034 78.065-33.137l48.742 42.845c-29.306 38.152-69.503 55.562-126.807 55.562Zm339.597-267.44h66.53V529.49h-66.53v-38.152c-13.829 27.119-36.9 45.191-81.02 45.191-70.488 0-126.825-61.258-126.825-136.558 0-75.318 56.337-136.558 126.825-136.558 43.798 0 67.177 18.073 81.02 45.173v-40.158Zm1.973 131.544c0-40.839-28-74.638-72.137-74.638-42.49 0-70.148 34.14-70.148 74.638 0 39.495 27.658 74.638 70.148 74.638 43.814 0 72.137-34.14 72.137-74.638ZM633.412 163h66.53v366.168h-66.53V163Z" fill="#000" fill-rule="nonzero"/></svg>
\ No newline at end of file
diff --git a/apps/studio/static-data/integrations/cal_wrapper/overview.md b/apps/studio/static-data/integrations/cal_wrapper/overview.md
new file mode 100644
index 0000000000..92ec97f291
--- /dev/null
+++ b/apps/studio/static-data/integrations/cal_wrapper/overview.md
@@ -0,0 +1,3 @@
+Cal.com is a calendar and scheduling service that allows you to create and share events with others.
+
+The Cal.com Wrapper allows you to read data from Cal.com within your Postgres database.