Refactor code to use useParams and useRouter in CreateWarehouseCollection.tsx, WarehouseCollectionDetail.tsx, and LogsLayout.tsx

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

@@ -1,5 +1,5 @@
+import { useParams } from 'common'
 import { useCreateCollection } from 'data/analytics/warehouse-collections-create-mutation'
-import { useSelectedProject } from 'hooks'
 import { useRouter } from 'next/router'
 import React from 'react'
 import toast from 'react-hot-toast'
@@ -9,9 +9,18 @@ type Props = {}
 
 export const CreateWarehouseCollectionModal = (props: Props) => {
   const [isOpen, setIsOpen] = React.useState(false)
-  const project = useSelectedProject()
-  const { mutateAsync: createCollection, isLoading } = useCreateCollection({
-    projectRef: project?.ref!,
+  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 (
@@ -38,7 +47,6 @@ export const CreateWarehouseCollectionModal = (props: Props) => {
             e.preventDefault()
             try {
               const formData = new FormData(e.target as HTMLFormElement)
-              console.log(formData)
               const values = {
                 name: formData.get('name') as string,
               }

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

@@ -45,15 +45,19 @@ export const WarehouseCollectionDetail = () => {
       <div className="relative flex flex-col flex-grow h-full">
         <ShimmerLine active={isLoading} />
         <LoadingOpacity active={isLoading}>
-          <LogTable
-            projectRef={projectRef}
-            isLoading={isLoading}
-            hideHeader={true}
-            data={results}
-            params={params}
-            error={isError ? 'Error loading data' : undefined}
-            maxHeight="calc(100vh - 3rem - 44px)"
-          />
+          <div>
+            <h2 className="p-3">{collection?.name}</h2>
+            <pre className="overflow-auto max-h-[300px]">{JSON.stringify(collection, null, 2)}</pre>
+            <LogTable
+              projectRef={projectRef}
+              isLoading={isLoading}
+              hideHeader={true}
+              data={results}
+              params={params}
+              error={isError ? 'Error loading data' : undefined}
+              maxHeight="calc(100vh - 3rem - 44px)"
+            />
+          </div>
         </LoadingOpacity>
         {!isError && (
           <div className="border-t flex flex-row justify-between p-2">

apps/studio/components/layouts/LogsLayout/LogsLayout.tsx

@@ -19,6 +19,7 @@ import { CreateWarehouseCollectionModal } from 'components/interfaces/DataWareho
 import { WarehouseMenuItem } from 'components/interfaces/DataWarehouse/WarehouseMenuItem'
 import { useWarehouseCollectionsQuery } from 'data/analytics/warehouse-collections-query'
 import { useWarehouseTenantQuery } from 'data/analytics/warehouse-tenant-query'
+import { useParams } from 'common'
 interface LogsLayoutProps {
   title?: string
 }
@@ -36,7 +37,8 @@ const LogsLayout = ({ title, children }: PropsWithChildren<LogsLayoutProps>) =>
 
   const showWarehouse = useFlag('warehouse')
   const project = useSelectedProject()
-  const projectRef = project?.ref || 'default'
+  const { ref } = useParams()
+  const projectRef = ref || 'default'
 
   const { data: tenant } = useWarehouseTenantQuery({ projectRef })
   const { data: collections, isLoading: collectionsLoading } = useWarehouseCollectionsQuery(

apps/studio/data/analytics/warehouse-collections-create-mutation.ts

@@ -2,37 +2,43 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { analyticsKeys } from './keys'
 import { post } from 'data/fetchers'
 
-type CreateCollectionArgs = {
-  projectRef: string
-}
 type CreateCollectionPayload = {
   name: string
   id: string
   token: string
 }
-export function useCreateCollection({ projectRef }: CreateCollectionArgs) {
+async function createCollection(ref: string, payload: CreateCollectionPayload) {
+  await post(`/platform/projects/{ref}/analytics/warehouse/tenant`, {
+    params: {
+      path: { ref },
+    },
+  })
+
+  const res = await post(`/platform/projects/{ref}/analytics/warehouse/collections`, {
+    params: {
+      path: { ref },
+    },
+    body: payload,
+  })
+
+  return res
+}
+
+type CreateCollectionArgs = {
+  projectRef: string
+  onSuccess: (data: Awaited<ReturnType<typeof createCollection>>) => void
+}
+
+export function useCreateCollection({ projectRef, onSuccess }: CreateCollectionArgs) {
   const queryClient = useQueryClient()
   const mutation = useMutation({
-    mutationFn: async (payload: CreateCollectionPayload) => {
-      const tenantRes = await post(`/platform/projects/{ref}/analytics/warehouse/tenant`, {
-        params: {
-          path: { ref: projectRef },
-        },
-      })
-      console.log('DEBUG TENANT', tenantRes.data)
-
-      const res = await post(`/platform/projects/{ref}/analytics/warehouse/collections`, {
-        params: {
-          path: { ref: projectRef },
-        },
-        body: payload as any,
-      })
-
+    mutationFn: (payload: CreateCollectionPayload) => createCollection(projectRef, payload),
+    mutationKey: analyticsKeys.warehouseCollections(projectRef),
+    onSuccess: (data) => {
+      onSuccess(data)
       const keysToInvalidate = analyticsKeys.warehouseCollections(projectRef)
       queryClient.invalidateQueries(keysToInvalidate)
-      return res
     },
-    mutationKey: analyticsKeys.warehouseCollections(projectRef),
   })
 
   return mutation