Feat/studio highlight invalid block (#1554)

* feat: add isInvalid prop to BaseBlock for conditional styling

* feat: add layout prop to DraggableBlock for validation logic

* feat: implement FixedBlock component for improved block rendering in RootStateDrawer

* fixed: use savedPageState instead

* refactor: optimize memo

* refactor: move ajv compilation into layout-level to make it less expensive

* chore: add comments

* refactor: optimize hero component validation in RootStateDrawer

* feat: add schema caching utility for optimized AJV schema compilation

* refactor: simplify schema cache retrieval logic in getCachedScopedSchema function

* feat: integrate component schema definitions into scoped schema retrieval

* refactor: update validation logic in RootStateDrawer to use cached schema for improved performance

* refactor: enhance cache key generation in getCachedScopedSchema function for improved clarity

* refactor: optimize invalid block index validation in RootStateDrawer using useMemo for better performance

* refactor: improve styling and accessibility for BaseBlock component with enhanced invalid state handling

* fix type

* fix lint

* fix lint

* fix: ensure validateFn is called without awaiting in RootStateDrawer for lint compliance

* fix: update background color for invalid state in BaseBlock component for better visual feedback

* refactor: enhance invalid state handling in BaseBlock and DraggableBlock components, adding descriptive feedback for improved user experience

* chore: remove console.log

* revert from scopedschema

* Potential fix for pull request finding 'Unused variable, import, function or class'

Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>

* refactor: improve error handling in RootStateDrawer by using regex for content index extraction

---------

Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>

Author: adriangohjw

apps/studio/src/features/editing-experience/components/Block/BaseBlock.tsx

@@ -2,16 +2,19 @@ import type { ButtonProps, StackProps } from "@chakra-ui/react"
 import type { DraggableProvidedDragHandleProps } from "@hello-pangea/dnd"
 import type { IconType } from "react-icons"
 import { chakra, Flex, HStack, Icon, Stack, Text } from "@chakra-ui/react"
-import { BiGridVertical } from "react-icons/bi"
+import { BiGridVertical, BiSolidErrorCircle } from "react-icons/bi"
 
-interface BaseBlockProps {
+export interface BaseBlockProps {
   icon?: IconType
   dragHandle?: React.ReactNode
   label: string
   description?: string
   containerProps?: StackProps
   onClick?: () => void
   draggableProps?: DraggableProvidedDragHandleProps | null
+  invalidProps?: {
+    description: string
+  }
 }
 
 export const BaseBlock = ({
@@ -22,9 +25,42 @@ export const BaseBlock = ({
   draggableProps,
   containerProps,
   onClick,
+  invalidProps,
 }: BaseBlockProps): JSX.Element => {
   const actualDraggableProps = draggableProps ?? {}
 
+  const Description = () => {
+    if (invalidProps) {
+      return (
+        <HStack gap="0.25rem">
+          <Icon
+            as={BiSolidErrorCircle}
+            fontSize="1rem"
+            color="utility.feedback.critical"
+          />
+          <Text textStyle="caption-1" color="utility.feedback.critical">
+            {invalidProps.description}
+          </Text>
+        </HStack>
+      )
+    }
+
+    if (description) {
+      return (
+        <Text
+          textStyle="caption-2"
+          color={
+            dragHandle
+              ? "interaction.support.placeholder"
+              : "base.content.default"
+          }
+        >
+          {description}
+        </Text>
+      )
+    }
+  }
+
   return (
     <HStack
       as="button"
@@ -35,15 +71,23 @@ export const BaseBlock = ({
       borderColor="base.divider.medium"
       transitionProperty="common"
       transitionDuration="normal"
+      aria-invalid={!!invalidProps}
       _hover={{
         bg: "interaction.muted.main.hover",
         borderColor: "interaction.main-subtle.hover",
+        _invalid: {
+          shadow: "0px 1px 6px 0px #C0343426",
+        },
       }}
       _active={{
         bg: "interaction.main-subtle.default",
         borderColor: "interaction.main-subtle.hover",
         shadow: "0px 1px 6px 0px #1361F026",
       }}
+      _invalid={{
+        bg: "utility.feedback.critical-subtle",
+        borderColor: "utility.feedback.critical",
+      }}
       bg="white"
       py="0.75rem"
       px="0.75rem"
@@ -69,18 +113,7 @@ export const BaseBlock = ({
         <Text textStyle="subhead-2" noOfLines={1} wordBreak="break-word">
           {label}
         </Text>
-        {description && (
-          <Text
-            textStyle="caption-2"
-            color={
-              dragHandle
-                ? "interaction.support.placeholder"
-                : "base.content.default"
-            }
-          >
-            {description}
-          </Text>
-        )}
+        <Description />
       </Stack>
     </HStack>
   )

apps/studio/src/features/editing-experience/components/Block/DraggableBlock.tsx

@@ -9,9 +9,9 @@ import {
 
 import { PROSE_COMPONENT_NAME } from "~/constants/formBuilder"
 import { TYPE_TO_ICON } from "../../constants"
-import { BaseBlock, BaseBlockDragHandle } from "./BaseBlock"
+import { BaseBlock, BaseBlockDragHandle, BaseBlockProps } from "./BaseBlock"
 
-interface DraggableBlockProps {
+interface DraggableBlockProps extends Pick<BaseBlockProps, "invalidProps"> {
   block: IsomerSchema["content"][number]
   draggableId: string
   index: number
@@ -23,6 +23,7 @@ export const DraggableBlock = ({
   draggableId,
   index,
   onClick,
+  invalidProps,
 }: DraggableBlockProps): JSX.Element => {
   const icon = TYPE_TO_ICON[block.type]
 
@@ -70,6 +71,7 @@ export const DraggableBlock = ({
               }
               description={blockComponentName}
               icon={icon}
+              invalidProps={invalidProps}
             />
           </VStack>
         )

apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx

@@ -1,4 +1,8 @@
 import type { DropResult } from "@hello-pangea/dnd"
+import type {
+  IsomerComponent,
+  IsomerSchema,
+} from "@opengovsg/isomer-components"
 import { useCallback, useState } from "react"
 import {
   Box,
@@ -11,7 +15,11 @@ import {
 } from "@chakra-ui/react"
 import { DragDropContext, Droppable } from "@hello-pangea/dnd"
 import { Infobox, useToast } from "@opengovsg/design-system-react"
-import { ISOMER_USABLE_PAGE_LAYOUTS } from "@opengovsg/isomer-components"
+import {
+  getComponentSchema,
+  ISOMER_USABLE_PAGE_LAYOUTS,
+  schema,
+} from "@opengovsg/isomer-components"
 import { ResourceType } from "~prisma/generated/generatedEnums"
 import { BiData, BiPin, BiPlus, BiPlusCircle } from "react-icons/bi"
 
@@ -23,6 +31,7 @@ import { useEditorDrawerContext } from "~/contexts/EditorDrawerContext"
 import { useIsUserIsomerAdmin } from "~/hooks/useIsUserIsomerAdmin"
 import { useQueryParse } from "~/hooks/useQueryParse"
 import { ADMIN_ROLE } from "~/lib/growthbook"
+import { ajv } from "~/utils/ajv"
 import { trpc } from "~/utils/trpc"
 import { TYPE_TO_ICON } from "../constants"
 import { pageSchema } from "../schema"
@@ -56,6 +65,14 @@ const FIXED_BLOCK_CONTENT: Record<string, FixedBlockContent> = {
   },
 }
 
+const validateHeroComponentFn = ajv.compile<IsomerComponent>(
+  getComponentSchema({ component: "hero" }),
+)
+
+const validateFn = ajv.compile<IsomerSchema>(schema)
+
+const invalidBlockDescription = "Fix errors in this block to publish"
+
 export default function RootStateDrawer() {
   const {
     type,
@@ -231,6 +248,81 @@ export default function RootStateDrawer() {
     pageLayout !== "index" &&
     pageLayout !== "collection"
 
+  validateFn(savedPageState)
+
+  const contentIndexRegex = /^\/content\/(\d+)/
+  const invalidBlockIndexes = new Set(
+    (validateFn.errors ?? [])
+      // When validating content array directly,
+      // instancePath will be like "content/0", "content/1", "content/2", etc.
+      // where the number is the index of the invalid component
+      .map((e) => contentIndexRegex.exec(e.instancePath)?.[1])
+      .filter(Boolean)
+      .map(Number),
+  )
+
+  const FixedBlock = () => {
+    // Assuming only one fixedBlock can exist at a time for now
+    const fixedBlock = savedPageState.content[0]
+
+    if (isHeroFixedBlock) {
+      const isValid = validateHeroComponentFn(fixedBlock)
+      return (
+        <BaseBlock
+          onClick={() => {
+            setCurrActiveIdx(0)
+            setDrawerState({ state: "heroEditor" })
+          }}
+          label="Hero banner"
+          description="Title, subtitle, and Call-to-Action"
+          icon={TYPE_TO_ICON.hero}
+          invalidProps={
+            !isValid ? { description: invalidBlockDescription } : undefined
+          }
+        />
+      )
+    }
+
+    if (pageLayout === ISOMER_USABLE_PAGE_LAYOUTS.Database) {
+      return (
+        <VStack gap="1rem" w="100%" align="start">
+          <BaseBlock
+            onClick={() => {
+              setDrawerState({ state: "metadataEditor" })
+            }}
+            label="Page header"
+            description="Summary, Button label, and Button URL"
+            icon={BiPin}
+          />
+          <BaseBlock
+            onClick={() => {
+              setDrawerState({ state: "databaseEditor" })
+            }}
+            label="Database"
+            description="Link your dataset from Data.gov.sg"
+            icon={BiData}
+          />
+        </VStack>
+      )
+    }
+
+    return (
+      <BaseBlock
+        onClick={() => {
+          setDrawerState({ state: "metadataEditor" })
+        }}
+        label={
+          FIXED_BLOCK_CONTENT[pageLayout]?.label ||
+          "Page description and summary"
+        }
+        description={
+          FIXED_BLOCK_CONTENT[pageLayout]?.description || "Click to edit"
+        }
+        icon={BiPin}
+      />
+    )
+  }
+
   // NOTE: if a page has either of these `layouts`,
   // we should disable them from adding blocks
   // because folder index pages aren't intended to have
@@ -322,52 +414,7 @@ export default function RootStateDrawer() {
                     deleted
                   </Text>
                 </VStack>
-
-                {isHeroFixedBlock ? (
-                  <BaseBlock
-                    onClick={() => {
-                      setCurrActiveIdx(0)
-                      setDrawerState({ state: "heroEditor" })
-                    }}
-                    label="Hero banner"
-                    description="Title, subtitle, and Call-to-Action"
-                    icon={TYPE_TO_ICON.hero}
-                  />
-                ) : pageLayout === ISOMER_USABLE_PAGE_LAYOUTS.Database ? (
-                  <VStack gap="1rem" w="100%" align="start">
-                    <BaseBlock
-                      onClick={() => {
-                        setDrawerState({ state: "metadataEditor" })
-                      }}
-                      label="Page header"
-                      description="Summary, Button label, and Button URL"
-                      icon={BiPin}
-                    />
-                    <BaseBlock
-                      onClick={() => {
-                        setDrawerState({ state: "databaseEditor" })
-                      }}
-                      label="Database"
-                      description="Link your dataset from Data.gov.sg"
-                      icon={BiData}
-                    />
-                  </VStack>
-                ) : (
-                  <BaseBlock
-                    onClick={() => {
-                      setDrawerState({ state: "metadataEditor" })
-                    }}
-                    label={
-                      FIXED_BLOCK_CONTENT[pageLayout]?.label ||
-                      "Page description and summary"
-                    }
-                    description={
-                      FIXED_BLOCK_CONTENT[pageLayout]?.description ||
-                      "Click to edit"
-                    }
-                    icon={BiPin}
-                  />
-                )}
+                <FixedBlock />
               </VStack>
 
               <VStack gap="1.5rem" w="100%">
@@ -478,6 +525,14 @@ export default function RootStateDrawer() {
                                       // NOTE: SNAPSHOT
                                       setDrawerState({ state: nextState })
                                     }}
+                                    invalidProps={
+                                      invalidBlockIndexes.has(index)
+                                        ? {
+                                            description:
+                                              invalidBlockDescription,
+                                          }
+                                        : undefined
+                                    }
                                   />
                                 )
                               })}

packages/components/src/schemas/scopedSchema.ts

@@ -11,6 +11,7 @@ import {
   IndexPageSchema,
   LinkRefSchema,
 } from "../types/schema"
+import { componentSchemaDefinitions } from "./components"
 
 type ScopedSchemaLayout =
   (typeof ISOMER_USABLE_PAGE_LAYOUTS)[keyof typeof ISOMER_USABLE_PAGE_LAYOUTS]
@@ -111,9 +112,13 @@ export function getScopedSchema<T extends ScopedSchemaLayout>({
 
     return {
       ...currentSchema,
+      ...componentSchemaDefinitions,
       properties: filteredProperties,
     } as TSchema
   }
 
-  return currentSchema
+  return {
+    ...currentSchema,
+    ...componentSchemaDefinitions,
+  } as TSchema
 }