Release/0.66.0

CHANGELOG.md

@@ -4,8 +4,15 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.66.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.65.0...v0.66.0)
+
+- IS-809 Added feature flag to control individual block in RTE [`#1747`](https://github.com/isomerpages/isomercms-frontend/pull/1747)
+- 0.65.0 [`#1746`](https://github.com/isomerpages/isomercms-frontend/pull/1746)
+
 #### [v0.65.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.64.0...v0.65.0)
 
+> 14 December 2023
+
 - fix: warning modals [`#1744`](https://github.com/isomerpages/isomercms-frontend/pull/1744)
 - IS-734 Add delete icon to table control and other minor UI fixes [`#1743`](https://github.com/isomerpages/isomercms-frontend/pull/1743)
 - 0.64.0 [`#1741`](https://github.com/isomerpages/isomercms-frontend/pull/1741)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.65.0",
+  "version": "0.66.0",
   "private": true,
   "engines": {
     "node": ">=16.0.0"

src/constants/featureFlags.ts

@@ -3,9 +3,9 @@ export const FEATURE_FLAGS = {
   BANNER: "banner",
   NPS_FORM: "nps_form",
   HOMEPAGE_ENABLED_BLOCKS: "homepage_enabled_blocks",
+  RTE_ENABLED_BLOCKS: "rte_enabled_blocks",
   TIPTAP_EDITOR: "is-tiptap-enabled",
   IS_SHOW_STAGING_BUILD_STATUS_ENABLED: "is_show_staging_build_status_enabled",
-  IS_COMPLEX_BLOCKS_ENABLED: "is_complex_blocks_enabled",
 } as const
 
 export type FeatureFlagsType = typeof FEATURE_FLAGS[keyof typeof FEATURE_FLAGS]

src/constants/rteBlocks.ts

@@ -0,0 +1,7 @@
+export const RTE_BLOCKS = {
+  ACCORDION: "accordion",
+  CARDGRID: "cardgrid",
+  DIVIDER: "divider",
+} as const
+
+export type RTEBlockValues = typeof RTE_BLOCKS[keyof typeof RTE_BLOCKS]

src/layouts/components/Editor/components/MenuBar.tsx

@@ -12,6 +12,7 @@ import {
   Text,
   VStack,
 } from "@chakra-ui/react"
+import { useFeatureValue } from "@growthbook/growthbook-react"
 import { Button, Menu } from "@opengovsg/design-system-react"
 import { Editor } from "@tiptap/react"
 import {
@@ -35,11 +36,10 @@ import {
 import { IconType } from "react-icons/lib"
 
 import { FEATURE_FLAGS } from "constants/featureFlags"
+import { RTE_BLOCKS, RTEBlockValues } from "constants/rteBlocks"
 
 import { useEditorModal } from "contexts/EditorModalContext"
 
-import { useIsIsomerFeatureOn } from "utils/growthbook"
-
 import {
   EditorAccordionImage,
   EditorCardsImage,
@@ -106,6 +106,11 @@ type MenuBarEntry =
 
 export const MenuBar = ({ editor }: { editor: Editor }) => {
   const { showModal } = useEditorModal()
+  const rteEnabledBlocks = useFeatureValue(FEATURE_FLAGS.RTE_ENABLED_BLOCKS, {
+    blocks: [],
+  }).blocks as RTEBlockValues[]
+
+  const isRteEnabledBlocksEmpty = rteEnabledBlocks.length === 0
 
   const items: MenuBarEntry[] = [
     {
@@ -275,32 +280,35 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
     },
     {
       type: "divider",
-      isHidden: !useIsIsomerFeatureOn(FEATURE_FLAGS.IS_COMPLEX_BLOCKS_ENABLED),
+      isHidden: isRteEnabledBlocksEmpty,
     },
     {
       type: "detailed-list",
       label: "Add complex blocks",
       icon: BiPlus,
-      isHidden: !useIsIsomerFeatureOn(FEATURE_FLAGS.IS_COMPLEX_BLOCKS_ENABLED),
+      isHidden: isRteEnabledBlocksEmpty,
       items: [
         {
           name: "Accordion",
           description: "Let users hide or show content.",
           icon: EditorAccordionImage,
           action: () => editor.chain().focus().setHorizontalRule().run(),
+          isHidden: !rteEnabledBlocks.includes(RTE_BLOCKS.ACCORDION),
         },
         {
           name: "Card grid",
           description:
             "Lay out content in a card grid. You can add images, links, and/or text.",
           icon: EditorCardsImage,
           action: () => editor.chain().focus().addCards().run(),
+          isHidden: !rteEnabledBlocks.includes(RTE_BLOCKS.CARDGRID),
         },
         {
           name: "Divider",
           description: "Use a divider to create sections on your page.",
           icon: EditorDividerImage,
           action: () => editor.chain().focus().setHorizontalRule().run(),
+          isHidden: !rteEnabledBlocks.includes(RTE_BLOCKS.DIVIDER),
         },
       ],
     },

src/types/featureFlags.ts

@@ -1,4 +1,5 @@
 import { FEATURE_FLAGS } from "constants/featureFlags"
+import { RTEBlockValues } from "constants/rteBlocks"
 
 // Example usage: const gb = useGrowthBook<FeatureFlags>();
 export interface FeatureFlags {
@@ -8,10 +9,10 @@ export interface FeatureFlags {
     message: string
   }
   [FEATURE_FLAGS.NPS_FORM]: boolean
-  [FEATURE_FLAGS.HOMEPAGE_ENABLED_BLOCKS]: string[]
+  [FEATURE_FLAGS.HOMEPAGE_ENABLED_BLOCKS]: { blocks: string[] }
+  [FEATURE_FLAGS.RTE_ENABLED_BLOCKS]: { blocks: RTEBlockValues[] }
   [FEATURE_FLAGS.TIPTAP_EDITOR]: boolean
   [FEATURE_FLAGS.IS_SHOW_STAGING_BUILD_STATUS_ENABLED]: boolean
-  [FEATURE_FLAGS.IS_COMPLEX_BLOCKS_ENABLED]: boolean
 }
 
 export type GBAttributes = {