feat: use type column from db for resource list table (#332)

### TL;DR

Refactor the handling of resource types in the dashboard components to use the "type" field directly from the data source instead of deriving it from other fields.

### What changed?

- Modified `ResourceTable`, `ResourceTableMenu`, and `TitleCell` components to use the `type` field directly.
- Updated the `ResourceTableMenuProps` and `TitleCellProps` interfaces to align with the new data structure.
- Adjusted the server-side `page.router` to include the `Resource.type` field in queries.
- Removed the outdated `ResourceType` type and `getResourceType` function.
- Updated mock data in `msw` handlers to include the `type` field.

### How to test?

1. Verify that the dashboard displays resources correctly, with the appropriate icons and menu items for each resource type.
2. Check the functionality of resource-specific actions, such as editing page settings.
3. Ensure API responses include the `type` field and components consume it properly.

### Why make this change?

This refactor simplifies the code by reducing the need to derive the resource type from other fields and aligns the front-end representation directly with the back-end data model.

apps/studio/src/features/dashboard/components/ResourceTable/ResourceTable.tsx

@@ -27,7 +27,7 @@ const columns = [
       <TitleCell
         title={row.original.title}
         permalink={`/${row.original.permalink}`}
-        type={row.original.mainBlobId ? "page" : "folder"}
+        type={row.original.type}
       />
     ),
   }),
@@ -38,7 +38,7 @@ const columns = [
       <ResourceTableMenu
         title={row.original.title}
         resourceId={row.original.id}
-        type={row.original.mainBlobId ? "page" : "folder"}
+        type={row.original.type}
       />
     ),
     size: 24,

apps/studio/src/features/dashboard/components/ResourceTable/ResourceTableMenu.tsx

@@ -9,13 +9,12 @@ import {
 } from "react-icons/bi"
 
 import type { ResourceTableData } from "./types"
-import type { ResourceType } from "~/utils/resource"
 import { MenuItem } from "~/components/Menu"
 
 interface ResourceTableMenuProps {
   title: ResourceTableData["title"]
   resourceId: ResourceTableData["id"]
-  type: ResourceType
+  type: ResourceTableData["type"]
 }
 
 export const ResourceTableMenu = ({ title, type }: ResourceTableMenuProps) => {
@@ -31,7 +30,7 @@ export const ResourceTableMenu = ({ title, type }: ResourceTableMenuProps) => {
       <Portal>
         <MenuList>
           {/* TODO: Open edit modal depending on resource  */}
-          {type === "page" ? (
+          {type === "Page" ? (
             <>
               <MenuItem icon={<BiCog fontSize="1rem" />}>
                 Edit page settings

apps/studio/src/features/dashboard/components/ResourceTable/TitleCell.tsx

@@ -2,13 +2,11 @@ import { HStack, Icon, Text, VStack } from "@chakra-ui/react"
 import { BiFileBlank, BiFolder } from "react-icons/bi"
 
 import type { ResourceTableData } from "./types"
-import type { ResourceType } from "~/utils/resource"
 
-export interface TitleCellProps {
-  title: ResourceTableData["title"]
-  permalink?: ResourceTableData["permalink"]
-  type: ResourceType
-}
+export type TitleCellProps = Pick<
+  ResourceTableData,
+  "title" | "permalink" | "type"
+>
 
 export const TitleCell = ({
   title,
@@ -19,7 +17,7 @@ export const TitleCell = ({
     <HStack align="center" spacing="0.625rem">
       <Icon
         fontSize="1.25rem"
-        as={type === "page" ? BiFileBlank : BiFolder}
+        as={type === "Page" ? BiFileBlank : BiFolder}
         color="base.content.strong"
       />
       <VStack spacing="0.25rem" align="start">

apps/studio/src/server/modules/page/page.router.ts

@@ -71,6 +71,7 @@ export const pageRouter = router({
           "Resource.title",
           "Resource.mainBlobId",
           "Resource.draftBlobId",
+          "Resource.type",
         ])
         .execute()
     }),

apps/studio/tests/msw/handlers/page.ts

@@ -15,20 +15,23 @@ const pageListQuery = (wait?: DelayMode | number) => {
         title: "Test page 1",
         mainBlobId: 3,
         draftBlobId: null,
+        type: "Page",
       },
       {
         id: 5,
         permalink: "test-page-2",
         title: "Test page 2",
         mainBlobId: 4,
         draftBlobId: null,
+        type: "Page",
       },
       {
         id: 6,
         permalink: "folder",
         title: "Test folder 1",
         mainBlobId: null,
         draftBlobId: null,
+        type: "Folder",
       },
     ]
   })