feature: warehouse

apps/studio/components/interfaces/DataWarehouse/CreateWarehouseAccessToken.tsx

@@ -0,0 +1,69 @@
+import { set } from 'lodash'
+import React from 'react'
+import { Button, Input, Modal } from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+type Props = {
+  onSubmit: (values: { description: string }) => Promise<void>
+}
+
+const CreateWarehouseAccessToken = (props: Props) => {
+  const [open, setOpen] = React.useState(false)
+  const [loading, setLoading] = React.useState(false)
+  const [description, setDescription] = React.useState('')
+
+  async function onConfirm() {
+    setLoading(true)
+
+    await props.onSubmit({
+      description,
+    })
+    setDescription('')
+    setLoading(false)
+    setOpen(false)
+  }
+
+  return (
+    <>
+      <Button type="outline" onClick={() => setOpen(true)}>
+        Create access token
+      </Button>
+      <Modal
+        size="medium"
+        onCancel={() => {
+          setOpen(false)
+        }}
+        header="Create access token"
+        visible={open}
+        alignFooter="right"
+        loading={loading}
+        onConfirm={onConfirm}
+      >
+        <Modal.Content className="py-4">
+          <form
+            onSubmit={async (e) => {
+              e.preventDefault()
+              onConfirm()
+            }}
+          >
+            <FormItemLayout
+              label="Description"
+              description="A short description identifying this access token."
+              isReactForm={false}
+            >
+              <Input
+                placeholder="Description"
+                name="description"
+                id="description"
+                onChange={(e) => setDescription(e.target.value)}
+                value={description}
+              />
+            </FormItemLayout>
+          </form>
+        </Modal.Content>
+      </Modal>
+    </>
+  )
+}
+
+export default CreateWarehouseAccessToken

apps/studio/components/interfaces/DataWarehouse/CreateWarehouseCollection.tsx

@@ -0,0 +1,98 @@
+import { useParams } from 'common'
+import { useCreateCollection } from 'data/analytics/warehouse-collections-create-mutation'
+import { useRouter } from 'next/router'
+import React from 'react'
+import toast from 'react-hot-toast'
+import { Button, IconPlus, Input, Modal } from 'ui'
+
+type Props = {}
+
+export const CreateWarehouseCollectionModal = (props: Props) => {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const router = useRouter()
+  const { ref } = useParams()
+
+  const {
+    mutateAsync: createCollection,
+    isLoading,
+    data: newCollection,
+  } = useCreateCollection({
+    projectRef: ref || 'default',
+    onSuccess: (data) => {
+      router.push(`/project/${ref}/logs/collections/${data.data?.token}`)
+    },
+  })
+
+  return (
+    <>
+      <Button
+        type="default"
+        className="justify-start flex-grow w-full"
+        icon={<IconPlus size="tiny" />}
+        onClick={() => {
+          setIsOpen(!isOpen)
+        }}
+      >
+        New collection
+      </Button>
+      <Modal
+        size="medium"
+        onCancel={() => setIsOpen(!isOpen)}
+        header="Create an event collection"
+        visible={isOpen}
+        hideFooter
+      >
+        <form
+          onSubmit={async (e) => {
+            e.preventDefault()
+            try {
+              const formData = new FormData(e.target as HTMLFormElement)
+              const values = {
+                name: formData.get('name') as string,
+              }
+              await createCollection(values)
+              toast.success(`Collection ${values.name} created`)
+            } catch (error) {
+              console.error(error)
+              toast.error(`Failed to create collection. Check the console for more details.`)
+            } finally {
+              setIsOpen(false)
+            }
+          }}
+        >
+          <div className="py-4">
+            <Modal.Content>
+              <p className="pb-5 text-scale-1100 text-sm">
+                An event collection stores generic timeseries events and metadata in
+                Supabase-managed analytics infrastructure. Events can be then be queried using SQL,
+                without impacting transactional workloads.
+              </p>
+              <div className="space-y-6">
+                <Input
+                  required
+                  layout="horizontal"
+                  label="Collection name"
+                  id="name"
+                  name="name"
+                  autoComplete="off"
+                />
+              </div>
+            </Modal.Content>
+          </div>
+          <div className="py-3 border-t bg-surface-100">
+            <Modal.Content>
+              <div className="flex items-center justify-end gap-2">
+                <Button size="tiny" type="default" onClick={() => setIsOpen(!isOpen)}>
+                  Cancel
+                </Button>
+                <Button size="tiny" loading={isLoading} disabled={isLoading} htmlType="submit">
+                  Create table
+                </Button>
+              </div>
+            </Modal.Content>
+          </div>
+        </form>
+      </Modal>
+    </>
+  )
+}

apps/studio/components/interfaces/DataWarehouse/TestCollectionDialog.tsx

@@ -0,0 +1,153 @@
+import { SelectContent, SelectItem, SelectTrigger, Select } from '@ui/components/shadcn/ui/select'
+import { useWarehouseCollectionsQuery } from 'data/analytics/warehouse-collections-query'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import {
+  Button,
+  CodeBlock,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogSection,
+  DialogSectionSeparator,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  TooltipContent_Shadcn_,
+  TooltipTrigger_Shadcn_,
+  Tooltip_Shadcn_,
+} from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+export function TestCollectionDialog({
+  accessTokens,
+  collectionToken,
+  collections,
+}: {
+  accessTokens: {
+    id: string
+    token: string
+    description?: string
+  }[]
+  collections: {
+    id: number
+    token: string
+    name: string
+  }[]
+  collectionToken: string
+  projectRef: string
+}) {
+  const BASE_WAREHOUSE_URL = `https://api.warehouse.tech/api/events`
+  const [testAccessToken, setTestAccessToken] = useState('')
+  const [selectedCollection, setSelectedCollection] = useState(collectionToken || '')
+
+  useEffect(() => {
+    setSelectedCollection(collectionToken)
+  }, [collectionToken])
+
+  useEffect(() => {
+    if (accessTokens.length > 0) {
+      setTestAccessToken(accessTokens[0].token)
+    }
+  }, [accessTokens])
+
+  const selectedAccessToken = accessTokens.find((token) => token.token === testAccessToken)
+  const selectedCollectionName = collections.find((col) => col.token === selectedCollection)?.name
+
+  return (
+    <Dialog>
+      <Tooltip_Shadcn_>
+        <TooltipTrigger_Shadcn_ asChild>
+          <DialogTrigger asChild>
+            <Button disabled={accessTokens.length === 0} type="outline">
+              Connect
+            </Button>
+          </DialogTrigger>
+        </TooltipTrigger_Shadcn_>
+        {accessTokens.length === 0 && (
+          <TooltipContent_Shadcn_>
+            Create an access token to connect to your collection
+          </TooltipContent_Shadcn_>
+        )}
+      </Tooltip_Shadcn_>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Send events to this collection</DialogTitle>
+          <DialogDescription>
+            Use the following curl command to send events to this collection
+          </DialogDescription>
+        </DialogHeader>
+        <DialogSectionSeparator />
+        <DialogSection className="flex flex-col gap-4 overflow-auto">
+          <div className="flex gap-2 *:flex-1">
+            <FormItemLayout label="Collection" isReactForm={false}>
+              <Select value={selectedCollection} onValueChange={setSelectedCollection}>
+                <SelectTrigger>
+                  <span className="text-ellipsis">{selectedCollectionName || 'Collection'}</span>
+                </SelectTrigger>
+                <SelectContent>
+                  {collections.map((col) => (
+                    <SelectItem key={col.id + '-collection'} value={col.token}>
+                      {col.name || 'No name'}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormItemLayout>
+            <FormItemLayout label="Token" isReactForm={false}>
+              <Select value={testAccessToken} onValueChange={setTestAccessToken}>
+                <SelectTrigger>
+                  <span className="text-ellipsis">
+                    {selectedAccessToken?.description || 'Access token'}
+                  </span>
+                </SelectTrigger>
+                <SelectContent>
+                  {accessTokens?.map((token: any) => (
+                    <SelectItem key={token.id + '-token'} value={token.token}>
+                      {token.description || 'No description'}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormItemLayout>
+          </div>
+
+          <FormItemLayout label="Ingest URL" isReactForm={false}>
+            <Input
+              className="font-mono tracking-tighter"
+              value={BASE_WAREHOUSE_URL}
+              readOnly
+              copy
+            />
+          </FormItemLayout>
+
+          <div>
+            <CodeBlock className="p-1 language-bash prose" language="bash">
+              {`curl -X "POST" "${BASE_WAREHOUSE_URL}?source=${selectedCollection}" \\
+  -H 'Content-Type: application/json' \\
+  -H 'X-API-KEY: ${testAccessToken || 'ACCESS_TOKEN'}' \\
+  -d $'{
+    "event_message": "Test event message",
+    "metadata": {
+      "ip_address": "100.100.100.100",
+      "request_method": "POST",
+      "custom_user_data": {
+        "foo": "bar"
+      },
+      "datacenter": "aws",
+      "request_headers": {
+        "connection": "close",
+        "user_agent": "chrome"
+      }
+    }
+  }'
+`}
+            </CodeBlock>
+          </div>
+        </DialogSection>
+      </DialogContent>
+    </Dialog>
+  )
+}