feat(collections): add pdf collection item (#782)

* chore: add new migration

* refactor: add new tyupes

* refactor: make resource id required

* chore: update collection pdf json

update to the correct layout and permalink so we can show the correct
view

* refactor: shift preview into 2 components

1 handle sitemap, 1 accepts sitemap as is

* fix: update wizard

remove merging of title for collection

* refactor: use new preview for creation modals

* refactor: backend to allow for collection files

* fix: remove url from schema for links

* chore: update dates

* feat: add new icon

* refactor: update to `/links`

* chore: add new migration

* chore: update references to be link

* chore: update icons

* fix: add collection to resource

* chore: add new migration

* chore: utils

update sitemap to have homepage layout

* feat: add new layout for link

* fix: filter for collection link

we need to return collection link because it's a valid child

* feat: add new getSiblingsOf method

* feat: add new page for link editing

* chore: update thedetails for colletion sitemap

1. no more file layout
2. removed file details due to 1.

* refactor: add previews

1. add new preview for links
2. shifts shared code for viewport out into new file

* refactor: preview layout for collections

1. swap `file` -> `link`

* fix: invalid date feor previvew

pass date properly to the preview

* chore: rename site edit navbar to page

* feat: add new link edit navbar

* feat: util method for generating preview sitemap

shift method into new util file

* chore: components

export layout maps

* fix: fix type errors

* chore: generate types

* chore: update ref for links

* feat: json forms link control

add file attachment in

* refactor: link attachment layout

* chore: styilng

* refactor: use `ref` format for link page

* fix: update select for getchildrenof

* refactor: introduce 1 more layer of indirection to link modal

1. previously, it was taking editor directly which made it harder to
reuse
2. now, we want to show the modal also on json forms so we need to
abstract the `editor` prop

* fix: linkeditormodal

remove extra deps which we implictly have due to using the zod schema

* refactor: link modal now accepts a link types to decide what to render

* fix: update typing + export new type

* chore: tidy up types

* feat: add new form control

* chore: componnet changes

* chore: aded new link type

* feat: edit link page

* fix: edit link preview

use the correct title to render

* chore: remove console logs

* chore: refactor link editor drawer

shift error provider out so we can call it inside the component

* chore: squash components for edit link

* feat: add backend capabilities

* feat: update atom typing

* chore: format

* feat: seed with backend ata

* chore: relocate collection schemas to proper folder

* chore: update typings

* fix: use correct prop

1. use `description` rather than `summary`
2. update various wordings

* refactor: full width button at bottom

* fix: use correct schema

* fix: update only the draftblob

* fix(links): add validation to components that are links or refs (#789)

* feat: add https on frontend

* fix: add validation for all our links

* chore: add correct states to each component

* chore: fix bugs with link editor

* add comment

---------

Co-authored-by: adriangohjw <[email protected]>

* fix: remove showing children

* fix: remove form error message

the attachment lib already exports their own so we are good iwth the
error messages

* fix: add defaults

* fix: use resourcetype

* fix: validation

* chore: change copy and icon

* chore: update ui

* chore: shift shared wording out

* chore: add validation

* chore: remove unused

* fix: add extra property for perms boundary

* fix: width for error page

* chore: add stories

* chore: add stories

* fix: remove extra story

* chore: add default title and styling

* fix: design review

* fix: remove non-working stories

* fix: styling for text

* fix: remove link editing tab

* fix: add category

* chore: update for perms

* fix: links

add in draft retrieval for blobs

* chore: remove unused

---------

Co-authored-by: adriangohjw <[email protected]>

Author: seaerchin

apps/studio/prisma/generated/generatedEnums.ts

@@ -8,6 +8,7 @@ export const ResourceType = {
   Page: "Page",
   Folder: "Folder",
   Collection: "Collection",
+  CollectionLink: "CollectionLink",
   CollectionPage: "CollectionPage",
   IndexPage: "IndexPage",
 } as const

apps/studio/prisma/generated/selectableTypes.ts

@@ -6,7 +6,6 @@ import type * as T from "./generatedTypes"
 export type Blob = Selectable<T.Blob>
 export type Footer = Selectable<T.Footer>
 export type Navbar = Selectable<T.Navbar>
-export type Permission = Selectable<T.Permission>
 export type RateLimiterFlexible = Selectable<T.RateLimiterFlexible>
 export type Resource = Selectable<T.Resource>
 export type ResourcePermission = Selectable<T.ResourcePermission>

apps/studio/prisma/migrations/20241014063853_add_new_collection_resource_type/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "ResourceType" ADD VALUE 'CollectionFile';

apps/studio/prisma/migrations/20241015055654_change_name_to_link/migration.sql

@@ -0,0 +1,14 @@
+/*
+  Warnings:
+
+  - The values [CollectionFile] on the enum `ResourceType` will be removed. If these variants are still used in the database, this will fail.
+
+*/
+-- AlterEnum
+BEGIN;
+CREATE TYPE "ResourceType_new" AS ENUM ('RootPage', 'Page', 'Folder', 'Collection', 'CollectionLink', 'CollectionPage');
+ALTER TABLE "Resource" ALTER COLUMN "type" TYPE "ResourceType_new" USING ("type"::text::"ResourceType_new");
+ALTER TYPE "ResourceType" RENAME TO "ResourceType_old";
+ALTER TYPE "ResourceType_new" RENAME TO "ResourceType";
+DROP TYPE "ResourceType_old";
+COMMIT;

apps/studio/prisma/migrations/20241015073853_add_enum/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "ResourceType" ADD VALUE 'IndexPage';

apps/studio/prisma/schema.prisma

@@ -103,6 +103,7 @@ enum ResourceType {
   Page
   Folder
   Collection
+  CollectionLink // Can only ever be inside collection
   CollectionPage // Can only live inside `Collection` resources
   IndexPage // This denotes the index page of a folder or a collection
 }

apps/studio/public/assets/css/preview-tw.css

@@ -2376,6 +2376,11 @@ video {
   background-color: transparent;
 }
 
+.bg-utility-feedback-info-faint {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 242 255 / var(--tw-bg-opacity));
+}
+
 .bg-utility-feedback-info-subtle {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
@@ -3585,6 +3590,10 @@ video {
   grid-template-rows: auto 1fr;
 }
 
+.\[resource\:some-resource\] {
+  resource: some-resource;
+}
+
 .current\:prose-label-md-medium[data-current] {
   font-weight: 500;
   letter-spacing: 0;
@@ -4652,6 +4661,10 @@ video {
     height: 13rem;
   }
 
+  .md\:h-60 {
+    height: 15rem;
+  }
+
   .md\:h-\[240px\] {
     height: 240px;
   }

apps/studio/src/components/AuthWrappers/PermissionsBoundary.tsx

@@ -32,6 +32,12 @@ const ERROR_COMPONENT_PROPS: Record<ResourceType, ErrorProps> = {
       "To have access, ask your site admins to assign this page to you",
     buttonText: "Back to Site Content",
   },
+  CollectionLink: {
+    title: "You don't have access to edit this item.",
+    description:
+      "To have access, ask your site admins to assign this item to you",
+    buttonText: "Back to Site Content",
+  },
   CollectionPage: {
     title: "You don't have access to edit this page.",
     description:

apps/studio/src/components/PageEditor/ComponentSelector.tsx

@@ -176,6 +176,7 @@ function ComponentSelector() {
       case "CollectionPage":
         return ARTICLE_ALLOWED_BLOCKS
       case "Collection":
+      case "CollectionLink":
       case "IndexPage":
         return []
       case "Folder":

apps/studio/src/components/PageEditor/FileAttachment.tsx

@@ -1,27 +1,27 @@
+import type { AttachmentProps } from "@opengovsg/design-system-react"
 import { useEffect, useState } from "react"
 import { FormControl, Skeleton, Text } from "@chakra-ui/react"
-import { Attachment, FormErrorMessage } from "@opengovsg/design-system-react"
+import { Attachment } from "@opengovsg/design-system-react"
 
 import { MAX_PDF_FILE_SIZE_BYTES } from "~/features/editing-experience/components/form-builder/renderers/controls/constants"
 import { useUploadAssetMutation } from "~/hooks/useUploadAssetMutation"
 import { getPresignedPutUrlSchema } from "~/schemas/asset"
 
 interface FileAttachmentProps {
-  setHref: (href: string) => void
+  setHref: (href?: string) => void
   siteId: number
-  error?: string
-  setError: (error: string) => void
-  clearError: () => void
+  value?: File
 }
 
+type FileRejections = AttachmentProps<false>["rejections"]
+
 export const FileAttachment = ({
   setHref,
   siteId,
-  error,
-  setError,
-  clearError,
+  value,
 }: FileAttachmentProps) => {
-  const [file, setFile] = useState<File | undefined>(undefined)
+  const [file, setFile] = useState<File | undefined>(value)
+  const [rejections, setRejections] = useState<FileRejections>([])
   // TODO: Add a mutation for deletion next time of s3 resources
   const { mutate: uploadFile, isLoading } = useUploadAssetMutation({
     siteId,
@@ -40,11 +40,12 @@ export const FileAttachment = ({
           name="file-upload"
           multiple={false}
           value={file}
+          rejections={rejections}
+          onRejection={setRejections}
           onChange={(file) => {
             setFile(file)
             if (!file) {
-              setHref("")
-              setError("Please make sure you upload a file!")
+              setHref()
               return
             }
 
@@ -53,12 +54,10 @@ export const FileAttachment = ({
               {
                 onSuccess: ({ path }) => {
                   setHref(path)
-                  clearError()
                 },
               },
             )
           }}
-          onError={setError}
           maxSize={MAX_PDF_FILE_SIZE_BYTES}
           accept={["application/pdf"]}
           onFileValidation={(file) => {
@@ -78,7 +77,6 @@ export const FileAttachment = ({
       <Text textStyle="body-2" textColor="base.content.medium" pt="0.5rem">
         {`Maximum file size: ${MAX_PDF_FILE_SIZE_BYTES / 1000000} MB`}
       </Text>
-      {error && <FormErrorMessage>{error}</FormErrorMessage>}
     </FormControl>
   )
 }