From 65812ec311da593ae545df1ff77e676d6637da20 Mon Sep 17 00:00:00 2001
From: dcshzj <27919917+dcshzj@users.noreply.github.com>
Date: Mon, 18 Nov 2024 17:35:24 +0800
Subject: [PATCH] fix: add placeholder info box for index page editing

---
 .../components/RootStateDrawer.tsx            | 211 ++++++++++--------
 1 file changed, 114 insertions(+), 97 deletions(-)

diff --git a/apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx b/apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx
index 8310107a9..4d449d1c9 100644
--- a/apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx
+++ b/apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx
@@ -2,7 +2,7 @@ import type { DropResult } from "@hello-pangea/dnd"
 import { useCallback } from "react"
 import { Box, Button, Flex, Icon, Text, VStack } from "@chakra-ui/react"
 import { DragDropContext, Droppable } from "@hello-pangea/dnd"
-import { useToast } from "@opengovsg/design-system-react"
+import { Infobox, useToast } from "@opengovsg/design-system-react"
 import { BiPin, BiPlus, BiPlusCircle } from "react-icons/bi"
 
 import { BlockEditingPlaceholder } from "~/components/Svg"
@@ -155,107 +155,124 @@ export default function RootStateDrawer() {
         )}
       </VStack>
 
-      <VStack w="100%" h="100%" gap="1rem">
-        {/* Custom Blocks Section */}
-        <Flex flexDirection="row" w="100%">
-          <VStack gap="0.25rem" align="start" flex={1}>
-            <Text textStyle="subhead-1">Custom blocks</Text>
-            <Text textStyle="caption-2" color="base.content.medium">
-              Use blocks to display your content in various ways
+      {pageLayout === "index" && savedPageState.content.length === 0 ? (
+        <Infobox variant="warning" size="sm">
+          <Box>
+            <Text textStyle="subhead-2" mb="0.25rem">
+              Why can’t I add anything else to this page?
             </Text>
-          </VStack>
-          <Button
-            size="xs"
-            flexShrink={0}
-            leftIcon={<BiPlusCircle fontSize="1.25rem" />}
-            variant="clear"
-            onClick={() => setDrawerState({ state: "addBlock" })}
-          >
-            Add block
-          </Button>
-        </Flex>
-        <DragDropContext onDragEnd={onDragEnd}>
-          <Droppable droppableId="blocks">
-            {(provided) => (
-              <VStack
-                {...provided.droppableProps}
-                w="100%"
-                ref={provided.innerRef}
-              >
-                <Box w="100%">
-                  {((isHeroFixedBlock && savedPageState.content.length === 1) ||
-                    savedPageState.content.length === 0) && (
-                    <>
-                      <VStack
-                        justifyContent="center"
-                        spacing={0}
-                        mt="2.75rem"
-                        mb="1.5rem"
-                      >
-                        <BlockEditingPlaceholder />
-                        <Text
-                          mt="0.75rem"
-                          textStyle="subhead-1"
-                          color="base.content.default"
-                        >
-                          Blocks you add will appear here
-                        </Text>
-                        <Text
-                          mt="0.25rem"
-                          textStyle="caption-2"
-                          color="base.content.medium"
+
+            <Text textStyle="body-2">
+              Content for this page is auto-generated. We’re introducing editing
+              for this page type soon, so that you can add custom content
+              alongside the page links.
+            </Text>
+          </Box>
+        </Infobox>
+      ) : (
+        <VStack w="100%" h="100%" gap="1rem">
+          {/* Custom Blocks Section */}
+          <Flex flexDirection="row" w="100%">
+            <VStack gap="0.25rem" align="start" flex={1}>
+              <Text textStyle="subhead-1">Custom blocks</Text>
+              <Text textStyle="caption-2" color="base.content.medium">
+                Use blocks to display your content in various ways
+              </Text>
+            </VStack>
+            <Button
+              size="xs"
+              flexShrink={0}
+              leftIcon={<BiPlusCircle fontSize="1.25rem" />}
+              variant="clear"
+              onClick={() => setDrawerState({ state: "addBlock" })}
+            >
+              Add block
+            </Button>
+          </Flex>
+          <DragDropContext onDragEnd={onDragEnd}>
+            <Droppable droppableId="blocks">
+              {(provided) => (
+                <VStack
+                  {...provided.droppableProps}
+                  w="100%"
+                  ref={provided.innerRef}
+                >
+                  <Box w="100%">
+                    {((isHeroFixedBlock &&
+                      savedPageState.content.length === 1) ||
+                      savedPageState.content.length === 0) && (
+                      <>
+                        <VStack
+                          justifyContent="center"
+                          spacing={0}
+                          mt="2.75rem"
+                          mb="1.5rem"
                         >
-                          Click the ‘Add block’ button above to add blocks to
-                          this page
-                        </Text>
-                      </VStack>
+                          <BlockEditingPlaceholder />
+                          <Text
+                            mt="0.75rem"
+                            textStyle="subhead-1"
+                            color="base.content.default"
+                          >
+                            Blocks you add will appear here
+                          </Text>
+                          <Text
+                            mt="0.25rem"
+                            textStyle="caption-2"
+                            color="base.content.medium"
+                          >
+                            Click the ‘Add block’ button above to add blocks to
+                            this page
+                          </Text>
+                        </VStack>
 
-                      <Button
-                        variant="outline"
-                        w="100%"
-                        onClick={() => setDrawerState({ state: "addBlock" })}
-                        leftIcon={<Icon as={BiPlus} fontSize="1.25rem" />}
-                      >
-                        Add a new block
-                      </Button>
-                    </>
-                  )}
+                        <Button
+                          variant="outline"
+                          w="100%"
+                          onClick={() => setDrawerState({ state: "addBlock" })}
+                          leftIcon={<Icon as={BiPlus} fontSize="1.25rem" />}
+                        >
+                          Add a new block
+                        </Button>
+                      </>
+                    )}
 
-                  <Flex flexDirection="column" mt="-0.25rem">
-                    {savedPageState.content.map((block, index) => {
-                      if (isHeroFixedBlock && index === 0) {
-                        return <></>
-                      }
+                    <Flex flexDirection="column" mt="-0.25rem">
+                      {savedPageState.content.map((block, index) => {
+                        if (isHeroFixedBlock && index === 0) {
+                          return <></>
+                        }
 
-                      return (
-                        <DraggableBlock
-                          block={block}
-                          // TODO: Generate a block ID instead of index
-                          key={`${block.type}-${index}`}
-                          // TODO: Use block ID when instead of index for uniquely identifying blocks
-                          draggableId={`${block.type}-${index}`}
-                          index={index}
-                          onClick={() => {
-                            setCurrActiveIdx(index)
-                            // TODO: we should automatically do this probably?
-                            const nextState =
-                              savedPageState.content[index]?.type === "prose"
-                                ? "nativeEditor"
-                                : "complexEditor"
-                            // NOTE: SNAPSHOT
-                            setDrawerState({ state: nextState })
-                          }}
-                        />
-                      )
-                    })}
-                  </Flex>
-                </Box>
-                {provided.placeholder}
-              </VStack>
-            )}
-          </Droppable>
-        </DragDropContext>
-      </VStack>
+                        return (
+                          <DraggableBlock
+                            block={block}
+                            // TODO: Generate a block ID instead of index
+                            key={`${block.type}-${index}`}
+                            // TODO: Use block ID when instead of index for uniquely identifying blocks
+                            draggableId={`${block.type}-${index}`}
+                            index={index}
+                            onClick={() => {
+                              setCurrActiveIdx(index)
+                              // TODO: we should automatically do this probably?
+                              const nextState =
+                                savedPageState.content[index]?.type === "prose"
+                                  ? "nativeEditor"
+                                  : "complexEditor"
+                              // NOTE: SNAPSHOT
+                              setDrawerState({ state: nextState })
+                            }}
+                          />
+                        )
+                      })}
+                    </Flex>
+                  </Box>
+                  {provided.placeholder}
+                </VStack>
+              )}
+            </Droppable>
+          </DragDropContext>
+        </VStack>
+      )}
     </VStack>
   )
 }