fix(collection-pages): misc fixes (#815)

* fix: collection

* fix: prevent double renders

* fix: duplicate permalink shows error on title

* chore: add story

add story for page details

Author: seaerchin

apps/studio/src/features/editing-experience/components/CreateCollectionPageModal/CreateCollectionPageWizardContext.tsx

@@ -101,12 +101,26 @@ const useCreateCollectionPageWizardContext = ({
           void router.push(`/sites/${siteId}/${nextType}/${pageId}`)
         },
         onError: (error) => {
-          if (error.data?.code === "CONFLICT") {
+          if (
+            error.data?.code === "CONFLICT" &&
+            values.type === "CollectionPage"
+          ) {
             formMethods.setError(
               "permalink",
               { message: error.message },
               { shouldFocus: true },
             )
+            return
+          } else if (
+            error.data?.code === "CONFLICT" &&
+            values.type === "CollectionLink"
+          ) {
+            formMethods.setError(
+              "title",
+              { message: error.message },
+              { shouldFocus: true },
+            )
+            return
           } else {
             console.error(error)
           }

apps/studio/src/features/editing-experience/components/CreateCollectionPageModal/PreviewLayout.tsx

@@ -1,5 +1,5 @@
-import { useMemo } from "react"
-import { Box, Flex, Stack } from "@chakra-ui/react"
+import { Suspense, useMemo } from "react"
+import { Box, Flex, Skeleton, Stack } from "@chakra-ui/react"
 import { useIsMobile } from "@opengovsg/design-system-react"
 import { ResourceType } from "~prisma/generated/generatedEnums"
 import { format } from "date-fns"
@@ -13,32 +13,7 @@ import { useCreateCollectionPageWizard } from "./CreateCollectionPageWizardConte
 
 export const PreviewLayout = (): JSX.Element => {
   const isMobile = useIsMobile()
-  const {
-    pagePreviewJson,
-    currentType,
-    siteId,
-    formMethods: { watch },
-  } = useCreateCollectionPageWizard()
-
-  const themeCssVars = useSiteThemeCssVars({ siteId })
-  const currentPermalink = watch("permalink", "/")
-  const title = watch("title")
-
-  const previewOverrides = useMemo(() => {
-    switch (currentType) {
-      case ResourceType.CollectionLink: {
-        return {
-          page: {
-            title: "Newsroom",
-            date: format(new Date(), "dd MMM yyyy"),
-          },
-        }
-      }
-      case ResourceType.CollectionPage: {
-        return {}
-      }
-    }
-  }, [currentType])
+  const { currentType } = useCreateCollectionPageWizard()
 
   return (
     <Stack
@@ -64,22 +39,56 @@ export const PreviewLayout = (): JSX.Element => {
             {`You're previewing a collection ${currentType === ResourceType.CollectionLink ? "link" : "page"}`}
           </Flex>
           <Box bg="white" overflow="auto" height="100%">
-            <PreviewIframe
-              preventPointerEvents
-              keyForRerender={currentType}
-              style={themeCssVars}
-            >
-              <PreviewWithoutSitemap
-                overrides={previewOverrides}
-                siteId={siteId}
-                siteMap={generatePreviewSitemap(collectionSitemap, title)}
-                permalink={currentPermalink}
-                {...pagePreviewJson}
-              />
-            </PreviewIframe>
+            <Suspense fallback={<Skeleton height="100%" />}>
+              <SuspendableLayoutPreview />
+            </Suspense>
           </Box>
         </Box>
       )}
     </Stack>
   )
 }
+
+const SuspendableLayoutPreview = () => {
+  const {
+    pagePreviewJson,
+    currentType,
+    siteId,
+    formMethods: { watch },
+  } = useCreateCollectionPageWizard()
+  const themeCssVars = useSiteThemeCssVars({ siteId })
+  const currentPermalink = watch("permalink", "/")
+  const title = watch("title")
+
+  const previewOverrides = useMemo(() => {
+    switch (currentType) {
+      case ResourceType.CollectionLink: {
+        return {
+          page: {
+            title: "Newsroom",
+            date: format(new Date(), "dd MMM yyyy"),
+          },
+        }
+      }
+      case ResourceType.CollectionPage: {
+        return {}
+      }
+    }
+  }, [currentType])
+
+  return (
+    <PreviewIframe
+      preventPointerEvents
+      keyForRerender={currentType}
+      style={themeCssVars}
+    >
+      <PreviewWithoutSitemap
+        overrides={previewOverrides}
+        siteId={siteId}
+        siteMap={generatePreviewSitemap(collectionSitemap, title)}
+        permalink={currentPermalink}
+        {...pagePreviewJson}
+      />
+    </PreviewIframe>
+  )
+}

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

@@ -91,6 +91,7 @@ export const collectionRouter = router({
         siteId: input.siteId,
         action: "create",
         userId: ctx.user.id,
+        resourceId: !!input.collectionId ? String(input.collectionId) : null,
       })
 
       let newPage: UnwrapTagged<PrismaJson.BlobJsonContent>

apps/studio/src/stories/Flows/CreateCollectionItemFlow.stories.tsx

@@ -64,3 +64,20 @@ export const SelectLayout: Story = {
     })
   },
 }
+
+export const EnterPageDetails: Story = {
+  play: async (context) => {
+    const { canvasElement } = context
+    const screen = within(canvasElement.ownerDocument.body)
+    await SelectLayout.play?.(context)
+
+    await userEvent.click(
+      screen.getByRole("button", { name: /next: page details/i }),
+    )
+
+    await userEvent.type(
+      screen.getByLabelText(/page title/i),
+      "My_new page WITH w@eird characters!",
+    )
+  },
+}