release(0.47.0): merge to master

.env-example

@@ -3,7 +3,6 @@ export REACT_APP_SENTRY_ENV=''
 export REACT_APP_SENTRY_DSN=''
 export REACT_APP_ENV='LOCAL_DEV'
 export ESLINT_NO_DEV_ERRORS=true
-export REACT_APP_SHOW_NPS_FORM=true
 
 # Cypress test environment variables
 export CYPRESS_BASEURL=''
@@ -19,7 +18,5 @@ export USERNAME=''
 # GitGuardian
 export GITGUARDIAN_API_KEY=""
 
-export REACT_APP_IS_SITE_PRIVATISATION_ACTIVE=false
-
 # GrowthBook
 export REACT_APP_GROWTHBOOK_CLIENT_KEY=xyz

CHANGELOG.md

@@ -4,8 +4,26 @@ 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.47.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.46.0...v0.47.0)
+
+- fix(herocenteredlayout): make dropdown optional [`#1556`](https://github.com/isomerpages/isomercms-frontend/pull/1556)
+- Fix/text cards design [`#1535`](https://github.com/isomerpages/isomercms-frontend/pull/1535)
+- chore(cleanup): delete unused styles [`#1548`](https://github.com/isomerpages/isomercms-frontend/pull/1548)
+- refactor(hero): duplicate changes from template [`#1551`](https://github.com/isomerpages/isomercms-frontend/pull/1551)
+- chore(hero): duplicate template changes [`#1547`](https://github.com/isomerpages/isomercms-frontend/pull/1547)
+- refactor(text-styles): update to have mobile [`#1546`](https://github.com/isomerpages/isomercms-frontend/pull/1546)
+- fix(hero): update panel styles for hero section [`#1543`](https://github.com/isomerpages/isomercms-frontend/pull/1543)
+- chore(announcements): sync changes from template [`#1540`](https://github.com/isomerpages/isomercms-frontend/pull/1540)
+- fix(announcements): add validation url [`#1545`](https://github.com/isomerpages/isomercms-frontend/pull/1545)
+- chore: move nps form to growthbook [`#1542`](https://github.com/isomerpages/isomercms-frontend/pull/1542)
+- chore: move warning banner to growthbook [`#1541`](https://github.com/isomerpages/isomercms-frontend/pull/1541)
+- IS-577: Move site privatisation to growth book [`#1529`](https://github.com/isomerpages/isomercms-frontend/pull/1529)
+- 0.46.0 [`#1534`](https://github.com/isomerpages/isomercms-frontend/pull/1534)
+
 #### [v0.46.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.45.0...v0.46.0)
 
+> 27 September 2023
+
 - fix(announemnt): fix announcemnt bug [`#1532`](https://github.com/isomerpages/isomercms-frontend/pull/1532)
 - Feat/text cards panel [`#1505`](https://github.com/isomerpages/isomercms-frontend/pull/1505)
 - Fix/homepageAnnouncementScroll [`#1530`](https://github.com/isomerpages/isomercms-frontend/pull/1530)

package.json

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

src/constants/featureFlags.ts

@@ -1,4 +1,7 @@
 export const FEATURE_FLAGS = {
   STYLING_REVAMP: "styles",
   HOMEPAGE_TEMPLATES: "homepage_new_templates",
+  REPO_PRIVATISATION: "repo_privatisation",
+  BANNER: "banner",
+  NPS_FORM: "nps_form",
 } as const

src/hooks/settingsHooks/useGetSettings.ts

@@ -16,10 +16,6 @@ import {
 
 import { BE_TO_FE } from "./constants"
 
-const IS_SITE_PRIVATISATION_ACTIVE =
-  process.env.REACT_APP_IS_SITE_PRIVATISATION_ACTIVE &&
-  process.env.REACT_APP_IS_SITE_PRIVATISATION_ACTIVE.toLowerCase() === "true"
-
 const DEFAULT_BE_STATE = {
   title: "",
   description: "",
@@ -131,17 +127,18 @@ const extractPassword = (
 
 export const useGetSettings = (
   siteName: string,
-  isEmailLogin?: boolean
+  isEmailLogin?: boolean,
+  isPrivatisationAllowed?: boolean
 ): UseQueryResult<SiteSettings> => {
   const shouldGetPrivacyDetails =
     isEmailLogin === undefined ? false : isEmailLogin
   return useQuery<SiteSettings>(
     [SETTINGS_CONTENT_KEY, siteName, shouldGetPrivacyDetails],
     async () => {
       const siteSettings = await SettingsService.get({ siteName })
+      const isSitePrivatisationActive = isPrivatisationAllowed ?? false
       let passwordSettings
-      if (shouldGetPrivacyDetails && IS_SITE_PRIVATISATION_ACTIVE) {
-        // TODO: LaunchDarkly to allow specific groups to access this feature first
+      if (shouldGetPrivacyDetails && isSitePrivatisationActive) {
         passwordSettings = await SettingsService.getPassword({ siteName })
       } else {
         passwordSettings = {

src/hooks/useFeedbackDisclosure.ts

@@ -1,12 +1,16 @@
 import { useDisclosure } from "@chakra-ui/react"
+import { useFeatureIsOn } from "@growthbook/growthbook-react"
 import { useLocation } from "react-router-dom"
 
+import { FEATURE_FLAGS } from "constants/featureFlags"
 import { LOCAL_STORAGE_KEYS } from "constants/localStorage"
 
 import { useLoginContext } from "contexts/LoginContext"
 
 import { isEditPageUrl, isSpecialPagesUrl } from "utils/pages"
 
+import { FeatureFlags } from "types/featureFlags"
+
 import { useLocalStorage } from "./useLocalStorage"
 
 type LastSeenFeedbackTime = number
@@ -17,8 +21,6 @@ type FeedbackStorageMappings = Record<UserId, LastSeenFeedbackTime>
 // 1 week in ms
 const NPS_SURVEY_DURATION = 7 * 24 * 60 * 60 * 1000
 
-const { REACT_APP_SHOW_NPS_FORM } = process.env
-
 type UseFeedbackStorageReturn = readonly [number, () => void]
 
 // NOTE: Wrapper to handle get/set of individual keys
@@ -51,7 +53,7 @@ export const useFeedbackDisclosure = (): UseFeedbackDisclosureReturn => {
   // NOTE: We show the feedback modal to the users iff
   // they are navigating away from the editor
   const isLeavingContentPage = isEditPageUrl(from) || isSpecialPagesUrl(from)
-  const shouldShowNpsForm = REACT_APP_SHOW_NPS_FORM?.trim() === "true"
+  const shouldShowNpsForm = useFeatureIsOn<FeatureFlags>(FEATURE_FLAGS.NPS_FORM)
 
   const [lastSeen, setLastSeen] = useFeedbackStorage()
   // NOTE: Either this is the first time the user has ever seen the survey

src/layouts/EditHomepage/EditHomepage.jsx

@@ -578,6 +578,7 @@ const EditHomepage = ({ match }) => {
             .announcements.announcement_items[announcementItemsIndex].link_url
 
           const isLinkUrlError = isLinkTextFilled && !isLinkUrlFilled
+          const isLinkTextError = !isLinkTextFilled && isLinkUrlFilled
           const isLinkUrlOrTextChanged =
             field === "link_text" || field === "link_url"
           if (isLinkUrlOrTextChanged) {
@@ -586,6 +587,11 @@ const EditHomepage = ({ match }) => {
             ].link_url = isLinkUrlError
               ? "Please specify a URL for your link"
               : ""
+            newErrors.announcementItems[
+              announcementItemsIndex
+            ].link_text = isLinkTextError
+              ? "Please specify text for your link"
+              : ""
           }
 
           setFrontMatter({
@@ -767,6 +773,22 @@ const EditHomepage = ({ match }) => {
               })
             )
             setDisplayAnnouncementItems(_.fill(Array(1), false))
+          } else if (val.textcards) {
+            // Create 3 text cards by default
+            const parentId =
+              updatedHomepageState.frontMatter.sections.length - 1
+            let intermediateHomepageState = updatedHomepageState
+            for (let i = 0; i < 3; i += 1) {
+              const cardVal = TEXTCARDS_ITEM_SECTION
+              const cardErr = getErrorValues(TEXTCARDS_ITEM_SECTION)
+              intermediateHomepageState = onCreate(
+                intermediateHomepageState,
+                `textCardItem-${parentId}`,
+                cardVal,
+                cardErr
+              )
+            }
+            setHomepageState(intermediateHomepageState)
           }
           break
         }

src/layouts/Settings/Settings.tsx

@@ -6,6 +6,7 @@ import {
   StackDivider,
   useDisclosure,
 } from "@chakra-ui/react"
+import { useFeatureIsOn } from "@growthbook/growthbook-react"
 import { Button } from "@opengovsg/design-system-react"
 import _ from "lodash"
 import { useEffect, useRef } from "react"
@@ -14,13 +15,16 @@ import { useParams } from "react-router-dom"
 
 import { Footer } from "components/Footer"
 
+import { FEATURE_FLAGS } from "constants/featureFlags"
+
 import { useDirtyFieldContext } from "contexts/DirtyFieldContext"
 import { useLoginContext } from "contexts/LoginContext"
 
 import { useGetSettings, useUpdateSettings } from "hooks/settingsHooks"
 
 import { useErrorToast, useSuccessToast } from "utils/toasts"
 
+import { FeatureFlags } from "types/featureFlags"
 import { SiteSettings } from "types/settings"
 import { DEFAULT_RETRY_MSG } from "utils"
 
@@ -37,6 +41,10 @@ import { PrivacySettings } from "./PrivacySettings"
 import { SocialMediaSettings } from "./SocialMediaSettings"
 
 export const Settings = (): JSX.Element => {
+  const isPrivatisationAllowed = useFeatureIsOn<FeatureFlags>(
+    FEATURE_FLAGS.REPO_PRIVATISATION
+  )
+
   const { siteName } = useParams<{ siteName: string }>()
   const { userId } = useLoginContext()
   // Only github users have userId, and not logged in users have userId as "Unknown user"
@@ -45,7 +53,7 @@ export const Settings = (): JSX.Element => {
     data: settingsData,
     isLoading: isGetSettingsLoading,
     isError: isGetSettingsError,
-  } = useGetSettings(siteName, !isGithubUser)
+  } = useGetSettings(siteName, !isGithubUser, isPrivatisationAllowed)
   const errorToast = useErrorToast()
 
   // Trigger an error toast informing the user if settings data could not be fetched

src/layouts/components/Homepage/AnnouncementBody.tsx

@@ -72,7 +72,7 @@ export const AnnouncementBody = ({
     <Box w="full">
       <DragDropContext onDragEnd={onDragEnd}>
         <Editable.Droppable editableId="announcement">
-          <Text textStyle="h6">Announcements</Text>
+          <Text textStyle="h5">Announcements</Text>
           <Text mt="0.5rem" textStyle="body-2" textColor="base.content.medium">
             {`You can display up to ${MAX_ANNOUNCEMENTS} announcements at a time. Newly added
             announcements are shown on the top of the list`}

src/layouts/components/Homepage/AnnouncementSection.tsx

@@ -51,7 +51,7 @@ export const AnnouncementSection = ({
         />
         <FormErrorMessage>{errors.title}</FormErrorMessage>
       </FormControl>
-      <Divider />
+      <Divider py="0.5rem" />
 
       {children}
       <Button

src/layouts/components/Homepage/HeroBody.tsx

@@ -182,7 +182,7 @@ const HeroSideSectionLayout = ({
   errors,
   title,
   subtitle,
-  size = "50%",
+  size = "md",
   alignment = "left",
 }: HeroSideSectionProps) => {
   const { onChange } = useEditableContext()
@@ -203,10 +203,10 @@ const HeroSideSectionLayout = ({
         title={title}
         subtitle={subtitle}
       />
-      <Box>
+      <Box w="100%">
         <Text textStyle="subhead-1">Section size</Text>
         <Radio.RadioGroup
-          onChange={(nextSectionSize) => {
+          onChange={(nextSectionSize: SectionSize) => {
             onChange({
               target: {
                 id: "section-0-hero-size",
@@ -217,12 +217,12 @@ const HeroSideSectionLayout = ({
           defaultValue={size}
         >
           <HStack spacing="0.5rem">
-            <Radio value="50%" size="xs" w="50%" allowDeselect={false}>
-              Half (1/2) of banner
+            <Radio value="md" size="xs" w="50%" allowDeselect={false}>
+              Wide
             </Radio>
             <Spacer />
-            <Radio value="33%" size="xs" w="50%" allowDeselect={false}>
-              Third (1/3) of banner
+            <Radio value="sm" size="xs" w="50%" allowDeselect={false}>
+              Narrow
             </Radio>
           </HStack>
         </Radio.RadioGroup>
@@ -253,24 +253,24 @@ const HeroSideSectionLayout = ({
       </Box>
       <Box w="100%">
         <Text textStyle="subhead-1">Section background colour</Text>
-        <HStack spacing="0.75rem" alignItems="flex-start">
-          <Tooltip label="black" hasArrow>
+        <HStack mt="0.5rem" spacing="0.75rem" alignItems="flex-start">
+          <Tooltip label="White" hasArrow>
             <IconButton
-              {...getIconButtonProps("black")}
-              onClick={() => onIconButtonClick("black")}
+              {...getIconButtonProps("white")}
+              onClick={() => onIconButtonClick("white")}
             >
-              <Icon as={BiInfoCircle} fill="black" fontSize="1rem" />
+              <Icon as={BiInfoCircle} fill="white" fontSize="1rem" />
             </IconButton>
           </Tooltip>
-          <Tooltip label="white" hasArrow>
+          <Tooltip label="Black" hasArrow>
             <IconButton
-              {...getIconButtonProps("white")}
-              onClick={() => onIconButtonClick("white")}
+              {...getIconButtonProps("black")}
+              onClick={() => onIconButtonClick("black")}
             >
-              <Icon as={BiInfoCircle} fill="white" fontSize="1rem" />
+              <Icon as={BiInfoCircle} fill="black" fontSize="1rem" />
             </IconButton>
           </Tooltip>
-          <Tooltip label="translucent gray" hasArrow>
+          <Tooltip label="Translucent grey" hasArrow>
             <IconButton
               {...getIconButtonProps("gray")}
               onClick={() => onIconButtonClick("gray")}
@@ -313,7 +313,7 @@ const HeroLayoutForm = ({
   }, [inView, showNewLayouts])
 
   return (
-    <Box>
+    <Box w="100%">
       {showFeatureTour && (
         <Box>
           <FeatureTourHandler
@@ -332,6 +332,7 @@ const HeroLayoutForm = ({
               <FormLabel textStyle="subhead-1">Layout</FormLabel>
               <SingleSelect
                 isClearable={false}
+                isSearchable={false}
                 name="hero layout options"
                 value={variant}
                 items={_.values(HERO_LAYOUTS)}
@@ -452,7 +453,7 @@ export const HeroBody = ({
           <Text textStyle="h5" mb="0.75rem">
             Hero Interactions
           </Text>
-          <Text textStyle="subhead-2" mb="0.25rem">
+          <Text textStyle="subhead-1" mb="0.25rem">
             Content type
           </Text>
           <Radio.RadioGroup