Skip to content

Commit

Permalink
feat(linkChecker): design changes (#1815)
Browse files Browse the repository at this point in the history 
* feat(linkChecker): design changes

* fix(design): dashboard design

* chore(linkreport): padding

* fix(links report): prevent overflow
  • Loading branch information
@kishore03109
kishore03109 authored Feb 28, 2024
1 parent 79d4c5f commit 989b8de
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 70 deletions.
7 changes: 6 additions & 1 deletion src/hooks/siteDashboardHooks/useGetLinkChecker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,12 @@ export const useGetBrokenLinks = (
},
{
retry: false,
refetchInterval: 1000 * 10,
refetchInterval: (data) => {
if (data?.status === "loading") {
return 1000 * 10
}
return false
},
}
)
}
152 changes: 99 additions & 53 deletions src/layouts/LinkReport/LinksReport.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,13 @@ import {
} from "@chakra-ui/react"
import { useFeatureIsOn } from "@growthbook/growthbook-react"
import { Badge, Breadcrumb, Button, Link } from "@opengovsg/design-system-react"
import { set } from "lodash"
import { useEffect, useState } from "react"
import { useQueryClient } from "react-query"
import { Redirect, useParams } from "react-router-dom"

import { SITE_LINK_CHECKER_STATUS_KEY } from "constants/queryKeys"

import { useGetStagingUrl } from "hooks/siteDashboardHooks"
import { useGetBrokenLinks } from "hooks/siteDashboardHooks/useGetLinkChecker"
import { useRefreshLinkChecker } from "hooks/siteDashboardHooks/useRefreshLinkChecker"
Expand All @@ -28,17 +33,15 @@ import {
NonPermalinkErrorDto,
RepoError,
} from "types/linkReport"
import { useErrorToast } from "utils"

import { SiteViewHeader } from "../layouts/SiteViewLayout/SiteViewHeader"

const getBreadcrumb = (viewablePageInCms: string): string => {
//! TODO: Fix bug for homepage + contact us
/**
* There are four main types of pages
* 1. /folders/parentFolder/subfolders/childFolder/editPage/page.md -> parentFolder/childFolder/page
* 2. /folders/parentFolder/editPage/page.md -> parentFolder/page
* 3. /editPage/page.md -> Feedback Form
* 3. /editPage/page.md -> page
* 4. /resourceRoom/resourceRmName/resourceCategory/resourceCatName/editPage/page.md -> resourceRmName/resourceCatName/page
*/
const paths = viewablePageInCms.split("/")
Expand All @@ -64,34 +67,46 @@ export const LinksReportBanner = () => {
"is_broken_links_report_enabled"
)

const { data: brokenLinks } = useGetBrokenLinks(
siteName,
isBrokenLinksReporterEnabled
)
const {
data: brokenLinks,
error: brokenLinksError,
isLoading: isBrokenLinksFetching,
} = useGetBrokenLinks(siteName, isBrokenLinksReporterEnabled)

const isBrokenLinksLoading = brokenLinks?.status === "loading"
const isBrokenLinksLoading =
brokenLinks?.status === "loading" || isBrokenLinksFetching
return (
<Center bg="white" minH="124">
<VStack ml="3rem" w="70%" alignItems="start">
<Text textStyle="h2" textColor="black" textAlign="left">
Broken references report
<Badge colorScheme="warning" variant="subtle" ml="1rem" mt="0.25rem">
<Center bg="white">
<HStack w="100%" justifyContent="space-between">
<VStack ml="2rem" w="100%" alignItems="start" mt="4rem">
<Badge variant="subtle" mt="0.75rem" mb="0.5rem">
Experimental feature
</Badge>
</Text>
<HStack w="100%" justifyContent="space-between">
<Text textStyle="subheading-1" color="black" textAlign="left">
<Text textStyle="h2" textColor="black" textAlign="left" mb="0.5rem">
Broken references report
</Text>

<Text
textStyle="subheading-1"
color="black"
textAlign="left"
mb="3rem"
>
This report contains a list of broken references found in your site.
</Text>
</VStack>
{!brokenLinksError && (
<Button
onClick={onClick}
variant="solid"
isDisabled={isBrokenLinksLoading}
mr="2rem"
mt="6.5rem"
>
{isBrokenLinksLoading ? "Running checker..." : "Run Checker Again"}
{isBrokenLinksLoading ? "Running checker..." : "Run checker again"}
</Button>
</HStack>
</VStack>
)}
</HStack>
</Center>
)
}
Expand Down Expand Up @@ -127,19 +142,20 @@ const SiteReportCard = ({

return (
<VStack
w="70vw"
backgroundColor="base.canvas.brandLight"
w="calc(100vw - 24rem)"
backgroundColor="base.canvas.default"
mb="1.5rem"
alignSelf="baseline"
id={viewablePageInStaging}
>
<HStack
alignSelf="center"
justifyContent="space-between"
w="95%"
mt="1rem"
ml="-4rem"
mt="1.5rem"
mb="1.75rem"
>
<Breadcrumb separator="/" pl="1rem">
<Breadcrumb separator="/">
{breadcrumb.split("/").map((item) => {
return (
<BreadcrumbItem>
Expand All @@ -148,7 +164,7 @@ const SiteReportCard = ({
)
})}
</Breadcrumb>
<HStack pr="1rem" spacing="0.75rem" pt="0.25rem">
<HStack spacing="0.75rem" pt="0.25rem">
<Link
href={viewableLinkInStaging}
isExternal
Expand All @@ -165,7 +181,7 @@ const SiteReportCard = ({
</Link>
</HStack>
</HStack>
<TableContainer w="95%" mb="1rem" ml="-4rem">
<TableContainer w="95%" mb="1.5rem">
<Table variant="striped">
<Thead>
<Tr>
Expand All @@ -188,28 +204,28 @@ const SiteReportCard = ({
if (isBrokenLink) {
return (
<Tr>
<Td>{errorType}</Td>
<Td borderBottom={0}>{errorType}</Td>

{link.linkToAsset ? (
<Td>{link.linkToAsset}</Td>
<Td borderBottom={0}>{link.linkToAsset}</Td>
) : (
<Td>No URL linked</Td>
<Td borderBottom={0}>No URL linked</Td>
)}

{link.linkedText ? (
<Td>{link.linkedText}</Td>
<Td borderBottom={0}>{link.linkedText}</Td>
) : (
<Td>Empty link text</Td>
<Td borderBottom={0}>Empty link text</Td>
)}
</Tr>
)
}

return (
<Tr>
<Td>{errorType}</Td>
<Td>{link.linkToAsset}</Td>
<Td>Not applicable</Td>
<Td borderBottom={0}>{errorType}</Td>
<Td borderBottom={0}>{link.linkToAsset}</Td>
<Td borderBottom={0}>Not applicable</Td>
</Tr>
)
})}
Expand Down Expand Up @@ -257,7 +273,15 @@ const LinkContent = ({ brokenLinks }: { brokenLinks: RepoError[] }) => {
alignContent="normal"
alignItems="flex-start"
>
<VStack spacing="0.5rem" m="1rem" textStyle="body-1" alignItems="start">
<VStack
spacing="0.5rem"
m="1rem"
textStyle="body-1"
alignItems="start"
position="sticky"
top="2rem"
w="17.5rem"
>
<Text mb="0.25rem" textStyle="h5">
Pages with broken links
</Text>
Expand All @@ -269,8 +293,8 @@ const LinkContent = ({ brokenLinks }: { brokenLinks: RepoError[] }) => {
</Link>
))}
</VStack>
<VStack w="70vw" mr="2rem">
<HStack spacing="2rem" w="70vw" m="1.5rem" mt="1rem">
<VStack width="calc(100vw - 350px)">
<HStack spacing="2rem" w="calc(100vw - 350px)" m="1.5rem" mt="1rem">
<VStack align="stretch">
<Text textStyle="body-1">Broken links</Text>
<Text textStyle="h4">{brokenLink}</Text>
Expand Down Expand Up @@ -312,12 +336,43 @@ const NoBrokenLinks = () => {

const ErrorLoading = () => {
const { siteName } = useParams<{ siteName: string }>()
const errorToast = useErrorToast()
errorToast({
id: "broken_links_error",
description: `Failed to load broken links for ${siteName}. Please try again later.`,
})
return <Redirect to={`/sites/${siteName}/dashboard`} />
const { mutate: refreshLinkChecker } = useRefreshLinkChecker(siteName)
return (
<Center h="70vh">
<VStack width="24rem">
<Text textStyle="h4" textAlign="center" mb="0.5rem">
{`We couldn't generate a broken report for this site.`}
</Text>
<Text textStyle="body-1" textAlign="center" mb="1rem">
{" "}
You might want to try running the check again. If the issue persists,
reach out to Isomer Support.
</Text>
<Button
onClick={() => {
refreshLinkChecker(siteName)
}}
>
Run check again
</Button>
</VStack>
</Center>
)
}

const LoadingLinkChecker = () => {
return (
<Center h="70vh">
<VStack width="24rem">
<Text textStyle="h4" textAlign="center">
Scanning your site for broken references{" "}
</Text>
<Text textStyle="body-1" textAlign="center">
This may take a while...
</Text>
</VStack>
</Center>
)
}

const LinkBody = () => {
Expand Down Expand Up @@ -346,16 +401,7 @@ const LinkBody = () => {
return <LinkContent brokenLinks={brokenLinks.errors} />
}

return (
<Center h="70vh">
<VStack>
<Text textStyle="h4" maxW="48" textAlign="center">
Scanning your site for broken references{" "}
</Text>
<Text textStyle="body-1">This may take a while...</Text>
</VStack>
</Center>
)
return <LoadingLinkChecker />
}

export const LinksReport = () => {
Expand Down
58 changes: 42 additions & 16 deletions src/layouts/SiteDashboard/SiteDashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
VStack,
} from "@chakra-ui/react"
import { useFeatureIsOn, useGrowthBook } from "@growthbook/growthbook-react"
import { Button, Link } from "@opengovsg/design-system-react"
import { Badge, Button, Link } from "@opengovsg/design-system-react"
import _ from "lodash"
import { useEffect } from "react"
import { BiCheckCircle, BiCog, BiEditAlt, BiGroup } from "react-icons/bi"
Expand Down Expand Up @@ -45,6 +45,7 @@ import {
useUpdateViewedReviewRequests,
} from "hooks/siteDashboardHooks"
import { useGetBrokenLinks } from "hooks/siteDashboardHooks/useGetLinkChecker"
import { useRefreshLinkChecker } from "hooks/siteDashboardHooks/useRefreshLinkChecker"
import useRedirectHook from "hooks/useRedirectHook"

import { getDateTimeFromUnixTime } from "utils/date"
Expand Down Expand Up @@ -100,9 +101,10 @@ export const SiteDashboard = (): JSX.Element => {
"is_broken_links_report_enabled"
)

const { mutate: refreshLinkChecker } = useRefreshLinkChecker(siteName)

const {
data: brokenLinks,
isError: isBrokenLinksError,
isLoading: isBrokenLinksLoading,
} = useGetBrokenLinks(siteName, isBrokenLinksReporterEnabled)

Expand Down Expand Up @@ -212,23 +214,20 @@ export const SiteDashboard = (): JSX.Element => {
</DisplayCardContent>
{isBrokenLinksReporterEnabled && (
<>
{isBrokenLinksLoading || brokenLinks?.status === "loading" ? (
{isBrokenLinksLoading ? (
<Skeleton w="100%" height="4rem" />
) : (
<>
<DisplayCardHeader mt="0.75rem">
<DisplayCardTitle>Your site health</DisplayCardTitle>
<DisplayCardCaption>
{`Understand your site's broken references`}
</DisplayCardCaption>
<Badge variant="subtle" mt="0.75rem" mb="0.5rem">
Experimental feature
</Badge>
<DisplayCardTitle>
Broken references checker
</DisplayCardTitle>
</DisplayCardHeader>
<DisplayCardContent>
{isBrokenLinksError ||
brokenLinks?.status === "error" ? (
<Text textStyle="body-1">
Unable to retrieve broken links report
</Text>
) : (
{brokenLinks && brokenLinks?.status === "success" ? (
<DisplayCard
variant="full"
bgColor="background.action.defaultInverse"
Expand All @@ -244,12 +243,39 @@ export const SiteDashboard = (): JSX.Element => {
</Text>
</HStack>

<Link
href={`/sites/${siteName}/linkCheckerReport`}
<Button
onClick={() => {
setRedirectToPage(
`/sites/${siteName}/linkCheckerReport`
)
}}
textStyle="body-1"
>
View report
</Link>
</Button>
</HStack>
</DisplayCard>
) : (
<DisplayCard
variant="full"
bgColor="background.action.defaultInverse"
>
<HStack w="full" justifyContent="space-between">
<Text textStyle="body-1">
Find out which links, images, and files are
broken on your site
</Text>

<Button
onClick={() => {
refreshLinkChecker(siteName)
setRedirectToPage(
`/sites/${siteName}/linkCheckerReport`
)
}}
>
<Text textStyle="body-1">Run checker</Text>
</Button>
</HStack>
</DisplayCard>
)}
Expand Down

0 comments on commit 989b8de

Please sign in to comment.