fix(status Badge): fix storybook not rendering

src/components/Header.jsx

@@ -1,5 +1,4 @@
 import { Box, Flex, Icon, Text, HStack, useDisclosure } from "@chakra-ui/react"
-import { useFeatureIsOn } from "@growthbook/growthbook-react"
 import { Button, IconButton } from "@opengovsg/design-system-react"
 import axios from "axios"
 import PropTypes from "prop-types"
@@ -24,6 +23,8 @@ import useRedirectHook from "hooks/useRedirectHook"
 
 import { ReviewRequestModal } from "layouts/ReviewRequest"
 
+import { useIsIsomerFeatureOn } from "utils/growthbook"
+
 import { getBackButton } from "utils"
 
 // axios settings
@@ -82,7 +83,7 @@ const Header = ({
     if (isEditPage && !shouldAllowEditPageBackNav) onWarningModalOpen()
     else toggleBackNav()
   }
-  const isShowStagingBuildStatusEnabled = useFeatureIsOn(
+  const isShowStagingBuildStatusEnabled = useIsIsomerFeatureOn(
     FEATURE_FLAGS.IS_SHOW_STAGING_BUILD_STATUS_ENABLED
   )
 

src/components/Header/StatusBadge.tsx

@@ -9,7 +9,6 @@ import {
   Text,
 } from "@chakra-ui/react"
 import { Badge } from "@opengovsg/design-system-react"
-import { useMemo } from "react"
 import { BiCheckCircle, BiError, BiLoader } from "react-icons/bi"
 import { GoDotFill } from "react-icons/go"
 import { IconBaseProps } from "react-icons/lib"

src/constants/featureFlags.ts

@@ -7,6 +7,7 @@ export const FEATURE_FLAGS = {
   IS_SHOW_STAGING_BUILD_STATUS_ENABLED: "is_show_staging_build_status_enabled",
 } as const
 
+export type FeatureFlagsType = typeof FEATURE_FLAGS[keyof typeof FEATURE_FLAGS]
 // NOTE: Only have 4 default blocks:
 // hero/infobar/infopic/resources
 export const NUM_DEFAULT_HOMEPAGE_BLOCKS = 4

src/layouts/layouts/SiteEditLayout/SiteEditHeader.tsx

@@ -6,7 +6,6 @@ import {
   HStack,
   useDisclosure,
 } from "@chakra-ui/react"
-import { useFeatureIsOn } from "@growthbook/growthbook-react"
 import { Button, IconButton } from "@opengovsg/design-system-react"
 import { BiArrowBack, BiCheckCircle } from "react-icons/bi"
 import { useParams, useHistory } from "react-router-dom"
@@ -26,10 +25,9 @@ import { useGetStagingUrl } from "hooks/siteDashboardHooks"
 
 import { ReviewRequestModal } from "layouts/ReviewRequest"
 
+import { useIsIsomerFeatureOn } from "utils/growthbook"
 import { doesOpenReviewRequestExist } from "utils/reviewRequests"
 
-import { FeatureFlags } from "types/featureFlags"
-
 export const SiteEditHeader = (): JSX.Element => {
   const { isOpen, onOpen, onClose } = useDisclosure()
   const {
@@ -45,7 +43,7 @@ export const SiteEditHeader = (): JSX.Element => {
   } = useDisclosure()
   const { siteName } = useParams<{ siteName: string }>()
   const { data: stagingUrl, isLoading } = useGetStagingUrl(siteName)
-  const isShowStagingBuildStatusEnabled = useFeatureIsOn<FeatureFlags>(
+  const isShowStagingBuildStatusEnabled = useIsIsomerFeatureOn(
     FEATURE_FLAGS.IS_SHOW_STAGING_BUILD_STATUS_ENABLED
   )
 

src/layouts/layouts/SiteViewLayout/SiteViewHeader.tsx

@@ -22,14 +22,14 @@ import { FEATURE_FLAGS } from "constants/featureFlags"
 
 import { useLoginContext } from "contexts/LoginContext"
 
-import { FeatureFlags } from "types/featureFlags"
+import { useIsIsomerFeatureOn } from "utils/growthbook"
 
 export const SiteViewHeader = (): JSX.Element => {
   const { displayedName } = useLoginContext()
   const { pathname } = useLocation()
   const isAtSiteDashboard = pathname.endsWith("dashboard")
   const { siteName } = useParams<{ siteName: string }>()
-  const isShowStagingBuildStatusEnabled = useFeatureIsOn<FeatureFlags>(
+  const isShowStagingBuildStatusEnabled = useIsIsomerFeatureOn(
     FEATURE_FLAGS.IS_SHOW_STAGING_BUILD_STATUS_ENABLED
   )
 

src/utils/growthbook.ts

@@ -1,4 +1,9 @@
-import { GrowthBook } from "@growthbook/growthbook-react"
+import { GrowthBook, useFeatureIsOn } from "@growthbook/growthbook-react"
+import { useParams } from "react-router-dom"
+
+import { FeatureFlagsType } from "constants/featureFlags"
+
+import { FeatureFlags } from "types/featureFlags"
 
 const GROWTHBOOK_API_HOST = "https://cdn.growthbook.io"
 
@@ -20,3 +25,13 @@ export const getSiteNameAttributeFromPath = (path: string) => {
   }
   return ""
 }
+
+export const useIsIsomerFeatureOn = (
+  featureName: FeatureFlagsType
+): boolean => {
+  const { siteName } = useParams<{ siteName: string }>()
+  if (siteName === "storybook") return true
+
+  const isFeatureEnabled = useFeatureIsOn<FeatureFlags>(featureName)
+  return isFeatureEnabled
+}