isom-1689 polish for component editing panels (custom error msg) (#937)

* update prose block title and description

* update image caption to caption

* contentpic - change "upload image" to "image" + remove image description

* contentpic - change field ordering

* infopic - button content above image content

* infocol - remove icon description

* infobar - add dividers between primary and secondary CTAs

* contentpageheader - change summary description

* articlepageheader - update summary description

* infocards - update maxcolumns title and description

* link upload btn - change from solid to outline to reduce visual clutter

* article page header - remove misleading image description

* infocards - change to radio

* refactor - use const

* infocards - image child imagefit option to radio

* refactor - use const

* change image alt text description + refactor to be imported

* make image alt text compulsory

* update image title + refactor into ImageSrcSchema

* fix - remove dynamicdatabanner api endpoint group

* fix - infopic both button text and link must be present to show

* Revert "make image alt text compulsory"

This reverts commit bc4bef7.

* standardize all link to use same UI

* keystats - fix no way of removing the CTA after editing it once

* refactor - use "radio" as const for single source of truth

* fix - remove additional gaps

* pass in description instead

* fix copywriting

* fix - passing required props

* refactor to use named arg instead of positional

* move useTextEditor hook into its own folder

* add isTipTapEditorEmpty and tests

* add JsonFormsContentpicTextControl

* fix prose controls to infer required from schema instead

* allow generating of required prose schema

* update contentpic to use ContentpicProseSchema instead

* add TiptapProseEditor to export index

* refactor to use one jsonFormsProseControl

* export type and interface

* add exhaustic check for switch

* pass in isRequired into tiptap onUpdate

* refactor to simplify props passing

* move constants into constants file to keep useTextEditor file clean

* add missing destination for storybook

* fix - article page image having description

* usememo to imrpve performance

* add error message

* use FormErrorMessage from OGP design system instead

* fix schema matching

* fix - error message not showing up

* move logic handling to forms instead

* fix - not showing values when user click "go back to editing"

* use callback on handlechange method

* fix type

* add getCustomErrorMessage and test

* import getCustomErrorMessage into some jsonformscontrol

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsImageControl.tsx

@@ -19,6 +19,7 @@ import {
   IMAGE_UPLOAD_ACCEPTED_MIME_TYPES,
   MAX_IMG_FILE_SIZE_BYTES,
 } from "./constants"
+import { getCustomErrorMessage } from "./utils"
 
 export const jsonFormsImageControlTester: RankedTester = rankWith(
   JSON_FORMS_RANKING.ImageControl,
@@ -154,7 +155,7 @@ export function JsonFormsImageControl({
         </Text>
         {!!errors && (
           <FormErrorMessage>
-            {label} {errors}
+            {label} {getCustomErrorMessage(errors)}
           </FormErrorMessage>
         )}
       </FormControl>

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsProseControl.tsx

@@ -21,7 +21,7 @@ import {
   TiptapCalloutEditor,
   TiptapProseEditor,
 } from "../TipTapEditor"
-import { isTiptapEditorEmpty } from "./utils"
+import { getCustomErrorMessage, isTiptapEditorEmpty } from "./utils"
 
 export const jsonFormsProseControlTester: RankedTester = rankWith(
   JSON_FORMS_RANKING.ProseControl,
@@ -102,7 +102,7 @@ export function JsonFormsProseControl({
         <FormLabel description={description}>{label}</FormLabel>
         <Editor editor={editor} />
         <FormErrorMessage>
-          {label} {errors}
+          {label} {getCustomErrorMessage(errors)}
         </FormErrorMessage>
       </FormControl>
     </Box>

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsTextControl.tsx

@@ -9,6 +9,7 @@ import {
 } from "@opengovsg/design-system-react"
 
 import { JSON_FORMS_RANKING } from "~/constants/formBuilder"
+import { getCustomErrorMessage } from "./utils"
 
 export const jsonFormsTextControlTester: RankedTester = rankWith(
   JSON_FORMS_RANKING.TextControl,
@@ -67,7 +68,7 @@ export function JsonFormsTextControl({
           </FormHelperText>
         )}
         <FormErrorMessage>
-          {label} {errors}
+          {label} {getCustomErrorMessage(errors)}
         </FormErrorMessage>
       </FormControl>
     </Box>

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/utils/__tests__/getCustomErrorMessage.test.ts

@@ -0,0 +1,18 @@
+import { getCustomErrorMessage } from "../getCustomErrorMessage"
+
+describe("getCustomErrorMessage", () => {
+  it("should return 'cannot be empty' when error is 'is a required property'", () => {
+    expect(getCustomErrorMessage("is a required property")).toBe(
+      "cannot be empty",
+    )
+  })
+
+  it("should return empty string when error is undefined", () => {
+    expect(getCustomErrorMessage(undefined)).toBe("")
+  })
+
+  it("should return the original error message for other errors", () => {
+    const error = "some other error"
+    expect(getCustomErrorMessage(error)).toBe(error)
+  })
+})

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/utils/getCustomErrorMessage.ts

@@ -0,0 +1,6 @@
+export const getCustomErrorMessage = (error: string | undefined): string => {
+  if (error === "is a required property") {
+    return "cannot be empty"
+  }
+  return error ?? ""
+}

apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/utils/index.ts

@@ -1 +1,2 @@
 export { isTiptapEditorEmpty } from "./isTipTapEditorEmpty"
+export { getCustomErrorMessage } from "./getCustomErrorMessage"