diff --git a/src/constants/featureFlags.ts b/src/constants/featureFlags.ts index fb17a5e8d..3845616a7 100644 --- a/src/constants/featureFlags.ts +++ b/src/constants/featureFlags.ts @@ -6,6 +6,7 @@ export const FEATURE_FLAGS = { RTE_ENABLED_BLOCKS: "rte_enabled_blocks", TIPTAP_EDITOR: "is-tiptap-enabled", IS_SHOW_STAGING_BUILD_STATUS_ENABLED: "is_show_staging_build_status_enabled", + IS_BROKEN_LINKS_REPORT_ENABLED: "is_broken_links_report_enabled", } as const export type FeatureFlagsType = typeof FEATURE_FLAGS[keyof typeof FEATURE_FLAGS] diff --git a/src/hooks/siteDashboardHooks/useGetLinkChecker.ts b/src/hooks/siteDashboardHooks/useGetLinkChecker.ts index 4eddfbe24..9d4ed94a9 100644 --- a/src/hooks/siteDashboardHooks/useGetLinkChecker.ts +++ b/src/hooks/siteDashboardHooks/useGetLinkChecker.ts @@ -7,12 +7,16 @@ import * as LinkCheckerService from "services/LinkCheckerService" import { RepoErrorDto } from "types/linkReport" export const useGetBrokenLinks = ( - siteName: string + siteName: string, + isBrokenLinksReporterEnabled: boolean ): UseQueryResult => { return useQuery( [SITE_LINK_CHECKER_STATUS_KEY, siteName], () => { - return LinkCheckerService.getLinkCheckerStatus({ siteName }) + return LinkCheckerService.getLinkCheckerStatus({ + siteName, + isBrokenLinksReporterEnabled, + }) }, { retry: false, diff --git a/src/layouts/LinkReport/LinksReport.tsx b/src/layouts/LinkReport/LinksReport.tsx index cace321e8..a14a5e5a5 100644 --- a/src/layouts/LinkReport/LinksReport.tsx +++ b/src/layouts/LinkReport/LinksReport.tsx @@ -13,6 +13,7 @@ import { Tr, VStack, } from "@chakra-ui/react" +import { useFeatureIsOn } from "@growthbook/growthbook-react" import { Badge, Breadcrumb, Button, Link } from "@opengovsg/design-system-react" import { Redirect, useParams } from "react-router-dom" @@ -59,8 +60,14 @@ export const LinksReportBanner = () => { const onClick = () => { refreshLinkChecker(siteName) } + const isBrokenLinksReporterEnabled = useFeatureIsOn( + "is_broken_links_report_enabled" + ) - const { data: brokenLinks } = useGetBrokenLinks(siteName) + const { data: brokenLinks } = useGetBrokenLinks( + siteName, + isBrokenLinksReporterEnabled + ) const isBrokenLinksLoading = brokenLinks?.status === "loading" return ( @@ -89,6 +96,17 @@ export const LinksReportBanner = () => { ) } +const normaliseUrl = (url: string): string => { + let normalisedUrl = url + if (url.endsWith("/")) { + normalisedUrl = url.slice(0, -1) + } + if (url.startsWith("/")) { + normalisedUrl = url.slice(1) + } + return normalisedUrl +} + const SiteReportCard = ({ breadcrumb, links, @@ -103,7 +121,9 @@ const SiteReportCard = ({ siteName ) - const viewableLinkInStaging = stagingUrl + viewablePageInStaging.slice(1) // rm the leading `/` + const normalisedStagingUrl = normaliseUrl(stagingUrl || "") + const normalisedViewablePageInStaging = normaliseUrl(viewablePageInStaging) + const viewableLinkInStaging = `${normalisedStagingUrl}/${normalisedViewablePageInStaging}` return ( { } const LinkBody = () => { + const isBrokenLinksReporterEnabled = useFeatureIsOn( + "is_broken_links_report_enabled" + ) const { siteName } = useParams<{ siteName: string }>() const { data: brokenLinks, isError: isBrokenLinksError } = useGetBrokenLinks( - siteName + siteName, + isBrokenLinksReporterEnabled ) - if (isBrokenLinksError || brokenLinks?.status === "error") { + if ( + !isBrokenLinksReporterEnabled || + isBrokenLinksError || + brokenLinks?.status === "error" + ) { return } diff --git a/src/layouts/SiteDashboard/SiteDashboard.tsx b/src/layouts/SiteDashboard/SiteDashboard.tsx index 516ce6d94..aadb7946e 100644 --- a/src/layouts/SiteDashboard/SiteDashboard.tsx +++ b/src/layouts/SiteDashboard/SiteDashboard.tsx @@ -11,6 +11,7 @@ import { useDisclosure, VStack, } from "@chakra-ui/react" +import { useFeatureIsOn, useGrowthBook } from "@growthbook/growthbook-react" import { Button, Link } from "@opengovsg/design-system-react" import _ from "lodash" import { useEffect } from "react" @@ -95,11 +96,15 @@ export const SiteDashboard = (): JSX.Element => { mutateAsync: updateViewedReviewRequests, } = useUpdateViewedReviewRequests() + const isBrokenLinksReporterEnabled = useFeatureIsOn( + "is_broken_links_report_enabled" + ) + const { data: brokenLinks, isError: isBrokenLinksError, isLoading: isBrokenLinksLoading, - } = useGetBrokenLinks(siteName) + } = useGetBrokenLinks(siteName, isBrokenLinksReporterEnabled) const savedAt = getDateTimeFromUnixTime(siteInfo?.savedAt || 0) const publishedAt = getDateTimeFromUnixTime(siteInfo?.publishedAt || 0) @@ -205,48 +210,52 @@ export const SiteDashboard = (): JSX.Element => { )) )} - - {isBrokenLinksLoading || brokenLinks?.status === "loading" ? ( - - ) : ( + {isBrokenLinksReporterEnabled && ( <> - - Your site health - - {`Understand your site's broken references`} - - - - {isBrokenLinksError || brokenLinks?.status === "error" ? ( - - Unable to retrieve broken links report - - ) : ( - - - - - {brokenLinks?.status === "success" && - brokenLinks?.errors.length} - - - broken references found - - - - + ) : ( + <> + + Your site health + + {`Understand your site's broken references`} + + + + {isBrokenLinksError || + brokenLinks?.status === "error" ? ( + + Unable to retrieve broken links report + + ) : ( + - View report - - - - )} - + + + + {brokenLinks?.status === "success" && + brokenLinks?.errors.length} + + + broken references found + + + + + View report + + + + )} + + + )} )} diff --git a/src/services/LinkCheckerService.ts b/src/services/LinkCheckerService.ts index ccf9dbc10..0ff98aefb 100644 --- a/src/services/LinkCheckerService.ts +++ b/src/services/LinkCheckerService.ts @@ -4,9 +4,16 @@ import { apiService } from "./ApiService" export const getLinkCheckerStatus = async ({ siteName, + isBrokenLinksReporterEnabled, }: { siteName: string + isBrokenLinksReporterEnabled: boolean }): Promise => { + if (!isBrokenLinksReporterEnabled) { + return { + status: "error", + } + } const endpoint = `/sites/${siteName}/getLinkCheckerStatus` return (await apiService.get(endpoint)).data } diff --git a/src/types/featureFlags.ts b/src/types/featureFlags.ts index 838e47aa2..06eee43ad 100644 --- a/src/types/featureFlags.ts +++ b/src/types/featureFlags.ts @@ -13,6 +13,7 @@ export interface FeatureFlags { [FEATURE_FLAGS.RTE_ENABLED_BLOCKS]: { blocks: RTEBlockValues[] } [FEATURE_FLAGS.TIPTAP_EDITOR]: boolean [FEATURE_FLAGS.IS_SHOW_STAGING_BUILD_STATUS_ENABLED]: boolean + [FEATURE_FLAGS.IS_BROKEN_LINKS_REPORT_ENABLED]: boolean } export type GBAttributes = {