chore: add gb (#1049)

* chore: add gb

* chore: add story

* fix: add missing msw handler for story

* chore: update link category on dropdown click

* chore: add type

* chore: add more stories

apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx

@@ -51,7 +51,7 @@ import {
   jsonFormsVerticalLayoutTester,
 } from "./renderers"
 
-const renderers: JsonFormsRendererRegistryEntry[] = [
+export const renderers: JsonFormsRendererRegistryEntry[] = [
   {
     tester: jsonFormsProseControlTester,
     renderer: JsonFormsProseControl,

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

@@ -1,14 +1,19 @@
 import type { ControlProps, RankedTester } from "@jsonforms/core"
 import { FormControl, Skeleton } from "@chakra-ui/react"
+import { useFeatureValue } from "@growthbook/growthbook-react"
 import { and, rankWith, schemaMatches } from "@jsonforms/core"
 import { withJsonFormsControlProps } from "@jsonforms/react"
 import { FormLabel, SingleSelect } from "@opengovsg/design-system-react"
+import { useSetAtom } from "jotai"
 
 import Suspense from "~/components/Suspense"
 import { JSON_FORMS_RANKING } from "~/constants/formBuilder"
+import { linkAtom } from "~/features/editing-experience/atoms"
 import { collectionItemSchema } from "~/features/editing-experience/schema"
 import { useQueryParse } from "~/hooks/useQueryParse"
+import { CATEGORY_DROPDOWN_FEATURE_KEY } from "~/lib/growthbook"
 import { trpc } from "~/utils/trpc"
+import { JsonFormsTextControl } from "./JsonFormsTextControl"
 
 export const jsonFormsCategoryControlTester: RankedTester = rankWith(
   JSON_FORMS_RANKING.RefControl,
@@ -43,7 +48,9 @@ function SuspendableJsonFormsCategoryControl({
         return { label: category, value: category }
       })}
       isClearable={false}
-      onChange={(value) => handleChange(path, value)}
+      onChange={(value) => {
+        handleChange(path, value)
+      }}
     />
   )
 }
@@ -54,13 +61,37 @@ export function JsonFormsCategoryControl({
   label,
   ...props
 }: ControlProps) {
-  return (
+  const { siteId } = useQueryParse(collectionItemSchema)
+  const setLink = useSetAtom(linkAtom)
+  const { enabledSites } = useFeatureValue<{ enabledSites: string[] }>(
+    CATEGORY_DROPDOWN_FEATURE_KEY,
+    { enabledSites: [] },
+  )
+  const handleChange: ControlProps["handleChange"] = (path, value: string) => {
+    props.handleChange(path, value)
+    setLink((prev) => ({ ...prev, category: value }))
+  }
+
+  const isDropdownEnabled = enabledSites.includes(siteId.toString())
+  return isDropdownEnabled ? (
     <FormControl isRequired={required} gap="0.5rem">
       <FormLabel description={description}>{label}</FormLabel>
       <Suspense fallback={<Skeleton />}>
-        <SuspendableJsonFormsCategoryControl {...props} label={label} />
+        <SuspendableJsonFormsCategoryControl
+          {...props}
+          label={label}
+          handleChange={handleChange}
+        />
       </Suspense>
     </FormControl>
+  ) : (
+    <JsonFormsTextControl
+      {...props}
+      description={description}
+      required={required}
+      label={label}
+      handleChange={handleChange}
+    />
   )
 }
 

apps/studio/src/lib/growthbook.ts

@@ -1,2 +1,3 @@
 export const BANNER_FEATURE_KEY = "isomer-next-banner"
 export const ISOMER_ADMIN_FEATURE_KEY = "isomer_admins"
+export const CATEGORY_DROPDOWN_FEATURE_KEY = "category-dropdown"

apps/studio/src/stories/Page/EditPage/EditArticlePage.stories.tsx

@@ -7,10 +7,14 @@ import { resourceHandlers } from "tests/msw/handlers/resource"
 import { sitesHandlers } from "tests/msw/handlers/sites"
 
 import EditPage from "~/pages/sites/[siteId]/pages/[pageId]"
-import { createBannerGbParameters } from "~/stories/utils/growthbook"
+import {
+  createBannerGbParameters,
+  createDropdownGbParameters,
+} from "~/stories/utils/growthbook"
 
 const COMMON_HANDLERS = [
   meHandlers.me(),
+  pageHandlers.getCategories.default(),
   pageHandlers.listWithoutRoot.default(),
   pageHandlers.getRootPage.default(),
   pageHandlers.countWithoutRoot.default(),
@@ -117,3 +121,15 @@ export const LinkModal: Story = {
     await userEvent.click(canvas.getByRole("button", { name: /link/i }))
   },
 }
+
+export const Dropdown: Story = {
+  parameters: {
+    growthbook: [createDropdownGbParameters("1")],
+  },
+  play: async ({ canvasElement, ...rest }) => {
+    const canvas = within(canvasElement)
+    await EditFixedBlockState.play?.({ canvasElement, ...rest })
+    const button = await canvas.findByRole("combobox")
+    await userEvent.click(button)
+  },
+}

apps/studio/src/stories/Page/EditPage/EditCollectionLink.stories.tsx

@@ -8,12 +8,16 @@ import { resourceHandlers } from "tests/msw/handlers/resource"
 import { sitesHandlers } from "tests/msw/handlers/sites"
 
 import CollectionLinkPage from "~/pages/sites/[siteId]/links/[linkId]"
-import { createBannerGbParameters } from "~/stories/utils/growthbook"
+import {
+  createBannerGbParameters,
+  createDropdownGbParameters,
+} from "~/stories/utils/growthbook"
 
 const COMMON_HANDLERS = [
   meHandlers.me(),
   pageHandlers.listWithoutRoot.default(),
   pageHandlers.getRootPage.default(),
+  pageHandlers.getCategories.default(),
   pageHandlers.countWithoutRoot.default(),
   sitesHandlers.getLocalisedSitemap.default(),
   sitesHandlers.getTheme.default(),
@@ -58,6 +62,17 @@ export default meta
 type Story = StoryObj<typeof CollectionLinkPage>
 
 export const Default: Story = {}
+export const Dropdown: Story = {
+  parameters: {
+    growthbook: [createDropdownGbParameters("1")],
+  },
+  play: async (context) => {
+    const { canvasElement } = context
+    const screen = within(canvasElement)
+    const button = await screen.findByRole("combobox")
+    await userEvent.click(button)
+  },
+}
 
 export const PublishedState: Story = {
   parameters: {

apps/studio/src/stories/Page/EditPage/components/JsonFormsCategoryControl.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Type } from "@sinclair/typebox"
+import { pageHandlers } from "tests/msw/handlers/page"
+
+import {
+  JsonFormsCategoryControl,
+  jsonFormsCategoryControlTester,
+} from "~/features/editing-experience/components/form-builder/renderers/controls/JsonFormsCategoryControl"
+import { createDropdownGbParameters } from "~/stories/utils/growthbook"
+import { FormBuilder } from "./formBuilder"
+
+const meta: Meta<typeof FormBuilder> = {
+  title: "Pages/Edit Page/components/JsonFormsCategoryControl",
+  component: FormBuilder,
+  parameters: {
+    msw: {
+      handlers: [pageHandlers.getCategories.default()],
+    },
+    nextjs: {
+      router: {
+        query: {
+          siteId: "1",
+          pageId: "1",
+        },
+        pathname: "/sites/[siteId]/pages/[pageId]",
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof JsonFormsCategoryControl>
+
+const schema = Type.Object({
+  category: Type.String({
+    title: "Article category",
+    format: "category",
+    description:
+      "The category is used for filtering in the parent collection page",
+  }),
+})
+
+export const Default: Story = {
+  args: {
+    schema,
+    renderers: [
+      {
+        tester: jsonFormsCategoryControlTester,
+        renderer: JsonFormsCategoryControl,
+      },
+    ],
+  },
+}
+
+export const Dropdown: Story = {
+  parameters: {
+    growthbook: [createDropdownGbParameters("1")],
+    msw: {
+      handlers: [pageHandlers.getCategories.default()],
+    },
+  },
+  args: {
+    schema,
+    renderers: [
+      {
+        tester: jsonFormsCategoryControlTester,
+        renderer: JsonFormsCategoryControl,
+      },
+    ],
+  },
+}

apps/studio/src/stories/Page/EditPage/components/formBuilder.tsx

@@ -0,0 +1,23 @@
+import { JsonForms } from "@jsonforms/react"
+import { type TSchema } from "@sinclair/typebox"
+import Ajv from "ajv"
+
+import { renderers } from "~/features/editing-experience/components/form-builder/FormBuilder"
+
+const ajv = new Ajv({
+  useDefaults: true,
+  allErrors: true,
+  strict: false,
+  logger: false,
+})
+
+interface FormBuilderProps {
+  schema: TSchema
+  data: unknown
+}
+
+export function FormBuilder({ schema, data }: FormBuilderProps): JSX.Element {
+  return (
+    <JsonForms schema={schema} data={data} renderers={renderers} ajv={ajv} />
+  )
+}

apps/studio/src/stories/utils/growthbook.ts

@@ -1,6 +1,9 @@
 import type { BannerProps } from "@opengovsg/design-system-react"
 
-import { BANNER_FEATURE_KEY } from "~/lib/growthbook"
+import {
+  BANNER_FEATURE_KEY,
+  CATEGORY_DROPDOWN_FEATURE_KEY,
+} from "~/lib/growthbook"
 
 export const createBannerGbParameters = ({
   variant,
@@ -11,3 +14,6 @@ export const createBannerGbParameters = ({
 }) => {
   return [BANNER_FEATURE_KEY, { variant, message }]
 }
+export const createDropdownGbParameters = (siteId: string) => {
+  return [CATEGORY_DROPDOWN_FEATURE_KEY, { enabledSites: [siteId] }]
+}

apps/studio/tests/msw/handlers/page.ts

@@ -67,6 +67,15 @@ const pageListQuery = (wait?: DelayMode | number) => {
 }
 
 export const pageHandlers = {
+  getCategories: {
+    default: () => {
+      return trpcMsw.page.getCategories.query(() => {
+        return {
+          categories: ["Category 1", "Category 2", "Category 3"],
+        }
+      })
+    },
+  },
   updateSettings: {
     collection: () => {
       trpcMsw.page.updateSettings.mutation(() => {