feat/feature-flag-link-checker (#1811)

* feat/feature-flag-link-checker

* fix(linkChecker): dont trip alarms

Author: kishore03109

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]

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<RepoErrorDto> => {
   return useQuery<RepoErrorDto>(
     [SITE_LINK_CHECKER_STATUS_KEY, siteName],
     () => {
-      return LinkCheckerService.getLinkCheckerStatus({ siteName })
+      return LinkCheckerService.getLinkCheckerStatus({
+        siteName,
+        isBrokenLinksReporterEnabled,
+      })
     },
     {
       retry: false,

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 (
     <VStack
@@ -301,12 +321,20 @@ const ErrorLoading = () => {
 }
 
 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 <ErrorLoading />
   }
 

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 => {
                   ))
                 )}
               </DisplayCardContent>
-
-              {isBrokenLinksLoading || brokenLinks?.status === "loading" ? (
-                <Skeleton w="100%" height="4rem" />
-              ) : (
+              {isBrokenLinksReporterEnabled && (
                 <>
-                  <DisplayCardHeader mt="0.75rem">
-                    <DisplayCardTitle>Your site health</DisplayCardTitle>
-                    <DisplayCardCaption>
-                      {`Understand your site's broken references`}
-                    </DisplayCardCaption>
-                  </DisplayCardHeader>
-                  <DisplayCardContent>
-                    {isBrokenLinksError || brokenLinks?.status === "error" ? (
-                      <Text textStyle="body-1">
-                        Unable to retrieve broken links report
-                      </Text>
-                    ) : (
-                      <DisplayCard
-                        variant="full"
-                        bgColor="background.action.defaultInverse"
-                      >
-                        <HStack w="full" justifyContent="space-between">
-                          <HStack>
-                            <Text textStyle="h4">
-                              {brokenLinks?.status === "success" &&
-                                brokenLinks?.errors.length}
-                            </Text>
-                            <Text textStyle="body-1">
-                              broken references found
-                            </Text>
-                          </HStack>
-
-                          <Link
-                            href={`/sites/${siteName}/linkCheckerReport`}
-                            textStyle="body-1"
+                  {isBrokenLinksLoading || brokenLinks?.status === "loading" ? (
+                    <Skeleton w="100%" height="4rem" />
+                  ) : (
+                    <>
+                      <DisplayCardHeader mt="0.75rem">
+                        <DisplayCardTitle>Your site health</DisplayCardTitle>
+                        <DisplayCardCaption>
+                          {`Understand your site's broken references`}
+                        </DisplayCardCaption>
+                      </DisplayCardHeader>
+                      <DisplayCardContent>
+                        {isBrokenLinksError ||
+                        brokenLinks?.status === "error" ? (
+                          <Text textStyle="body-1">
+                            Unable to retrieve broken links report
+                          </Text>
+                        ) : (
+                          <DisplayCard
+                            variant="full"
+                            bgColor="background.action.defaultInverse"
                           >
-                            View report
-                          </Link>
-                        </HStack>
-                      </DisplayCard>
-                    )}
-                  </DisplayCardContent>
+                            <HStack w="full" justifyContent="space-between">
+                              <HStack>
+                                <Text textStyle="h4">
+                                  {brokenLinks?.status === "success" &&
+                                    brokenLinks?.errors.length}
+                                </Text>
+                                <Text textStyle="body-1">
+                                  broken references found
+                                </Text>
+                              </HStack>
+
+                              <Link
+                                href={`/sites/${siteName}/linkCheckerReport`}
+                                textStyle="body-1"
+                              >
+                                View report
+                              </Link>
+                            </HStack>
+                          </DisplayCard>
+                        )}
+                      </DisplayCardContent>
+                    </>
+                  )}
                 </>
               )}
             </DisplayCard>

src/services/LinkCheckerService.ts

@@ -4,9 +4,16 @@ import { apiService } from "./ApiService"
 
 export const getLinkCheckerStatus = async ({
   siteName,
+  isBrokenLinksReporterEnabled,
 }: {
   siteName: string
+  isBrokenLinksReporterEnabled: boolean
 }): Promise<RepoErrorDto> => {
+  if (!isBrokenLinksReporterEnabled) {
+    return {
+      status: "error",
+    }
+  }
   const endpoint = `/sites/${siteName}/getLinkCheckerStatus`
   return (await apiService.get(endpoint)).data
 }

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 = {