From f547f7acbe2305d670aa281a8414a6509a49c307 Mon Sep 17 00:00:00 2001 From: Qilu Xie Date: Fri, 15 Dec 2023 16:27:01 +0800 Subject: [PATCH 1/2] IS-809 Added feature flag to control individual block in RTE (#1747) * added new feature flag to control RTE block * remove old feature flag * refactored code for better type enforcement and readbility * used defined feature flag type and added type assertion * added correct type for HOMEPAGE_ENABLED_BLOCKS --- src/constants/featureFlags.ts | 2 +- src/constants/rteBlocks.ts | 7 +++++++ .../components/Editor/components/MenuBar.tsx | 16 ++++++++++++---- src/types/featureFlags.ts | 5 +++-- 4 files changed, 23 insertions(+), 7 deletions(-) create mode 100644 src/constants/rteBlocks.ts diff --git a/src/constants/featureFlags.ts b/src/constants/featureFlags.ts index 657cf0d76..fb17a5e8d 100644 --- a/src/constants/featureFlags.ts +++ b/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] diff --git a/src/constants/rteBlocks.ts b/src/constants/rteBlocks.ts new file mode 100644 index 000000000..d8a670eb7 --- /dev/null +++ b/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] diff --git a/src/layouts/components/Editor/components/MenuBar.tsx b/src/layouts/components/Editor/components/MenuBar.tsx index 17742b7fc..ded68602c 100644 --- a/src/layouts/components/Editor/components/MenuBar.tsx +++ b/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,19 +280,20 @@ 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", @@ -295,12 +301,14 @@ export const MenuBar = ({ editor }: { editor: Editor }) => { "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), }, ], }, diff --git a/src/types/featureFlags.ts b/src/types/featureFlags.ts index a6b88a9d7..838e47aa2 100644 --- a/src/types/featureFlags.ts +++ b/src/types/featureFlags.ts @@ -1,4 +1,5 @@ import { FEATURE_FLAGS } from "constants/featureFlags" +import { RTEBlockValues } from "constants/rteBlocks" // Example usage: const gb = useGrowthBook(); 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 = { From 6ead31a171d55e721523e6f661feebac431ceb70 Mon Sep 17 00:00:00 2001 From: Harish V Date: Mon, 18 Dec 2023 16:25:51 +0800 Subject: [PATCH 2/2] 0.66.0 --- CHANGELOG.md | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3cc07063c..7de33bae1 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/package-lock.json b/package-lock.json index deec437f0..a39c0440e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "isomercms-frontend", - "version": "0.65.0", + "version": "0.66.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "isomercms-frontend", - "version": "0.65.0", + "version": "0.66.0", "hasInstallScript": true, "dependencies": { "@braintree/sanitize-url": "^6.0.1", diff --git a/package.json b/package.json index dd822aef5..c9f6fa2e7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "isomercms-frontend", - "version": "0.65.0", + "version": "0.66.0", "private": true, "engines": { "node": ">=16.0.0"