From 253b257bd8063ec4b60b810e2cff7c9b0e039ed1 Mon Sep 17 00:00:00 2001 From: dcshzj <27919917+dcshzj@users.noreply.github.com> Date: Fri, 24 Jan 2025 10:21:44 +0800 Subject: [PATCH 1/4] feat: introduce temporary admin mode for site config --- .../studio/src/pages/sites/[siteId]/admin.tsx | 228 ++++++++++++++++++ apps/studio/src/schemas/site.ts | 10 + .../src/server/modules/site/site.router.ts | 57 ++++- .../layouts/AdminCmsSidebarLayout.tsx | 13 +- .../layouts/AdminSidebarOnlyLayout.tsx | 13 +- 5 files changed, 318 insertions(+), 3 deletions(-) create mode 100644 apps/studio/src/pages/sites/[siteId]/admin.tsx diff --git a/apps/studio/src/pages/sites/[siteId]/admin.tsx b/apps/studio/src/pages/sites/[siteId]/admin.tsx new file mode 100644 index 0000000000..e169760fdb --- /dev/null +++ b/apps/studio/src/pages/sites/[siteId]/admin.tsx @@ -0,0 +1,228 @@ +import { useEffect, useState } from "react" +import { useRouter } from "next/router" +import { + Button, + Center, + chakra, + FormControl, + HStack, + Text, + VStack, +} from "@chakra-ui/react" +import { + FormErrorMessage, + Infobox, + Textarea, + useToast, +} from "@opengovsg/design-system-react" +import { ResourceType } from "~prisma/generated/generatedEnums" +import { z } from "zod" + +import { PermissionsBoundary } from "~/components/AuthWrappers" +import { BRIEF_TOAST_SETTINGS } from "~/constants/toast" +import { UnsavedSettingModal } from "~/features/editing-experience/components/UnsavedSettingModal" +import { useIsUserIsomerAdmin } from "~/hooks/useIsUserIsomerAdmin" +import { useQueryParse } from "~/hooks/useQueryParse" +import { useZodForm } from "~/lib/form" +import { type NextPageWithLayout } from "~/lib/types" +import { setSiteConfigAdminSchema } from "~/schemas/site" +import { AdminSidebarOnlyLayout } from "~/templates/layouts/AdminSidebarOnlyLayout" +import { trpc } from "~/utils/trpc" + +const siteAdminSchema = z.object({ + siteId: z.coerce.number(), +}) + +const SUPPORTED_SITE_CONFIG_TYPES = [ + "config", + "theme", + "navbar", + "footer", +] as const + +const SiteAdminPage: NextPageWithLayout = () => { + const toast = useToast() + const router = useRouter() + const trpcUtils = trpc.useUtils() + const { siteId } = useQueryParse(siteAdminSchema) + const isUserIsomerAdmin = useIsUserIsomerAdmin() + + const { mutate, isLoading } = trpc.site.setSiteConfigAdmin.useMutation({ + onSuccess: async () => { + // reset({ config, theme, navbar, footer }) + await trpcUtils.site.getConfig.invalidate({ id: siteId }) + await trpcUtils.site.getTheme.invalidate({ id: siteId }) + await trpcUtils.site.getNavbar.invalidate({ id: siteId }) + await trpcUtils.site.getFooter.invalidate({ id: siteId }) + toast({ + title: "Saved site config!", + description: "Check your site in 5-10 minutes to view it live.", + status: "success", + ...BRIEF_TOAST_SETTINGS, + }) + }, + onError: () => { + toast({ + title: "Error saving site config!", + description: + "If this persists, please report this issue at support@isomer.gov.sg", + status: "error", + ...BRIEF_TOAST_SETTINGS, + }) + }, + }) + + const [previousConfig] = trpc.site.getConfig.useSuspenseQuery({ + id: siteId, + }) + const [previousTheme] = trpc.site.getTheme.useSuspenseQuery({ + id: siteId, + }) + const [previousNavbar] = trpc.site.getNavbar.useSuspenseQuery({ + id: siteId, + }) + const [previousFooter] = trpc.site.getFooter.useSuspenseQuery({ + id: siteId, + }) + + // NOTE: Refining the setNotificationSchema here instead of in site.ts since omit does not work after refine + const { + register, + handleSubmit, + formState: { isDirty, errors }, + } = useZodForm({ + schema: setSiteConfigAdminSchema + .omit({ siteId: true }) + .refine((data) => !!data.config, { + message: "Site config must be present", + path: ["config"], + }) + .refine((data) => !!data.theme, { + message: "Site theme must be present", + path: ["theme"], + }) + .refine((data) => !!data.navbar, { + message: "Site navbar must be present", + path: ["navbar"], + }) + .refine((data) => !!data.footer, { + message: "Site footer must be present", + path: ["footer"], + }), + defaultValues: { + config: JSON.stringify(previousConfig, null, 2), + theme: JSON.stringify(previousTheme, null, 2), + navbar: JSON.stringify(previousNavbar.content, null, 2), + footer: JSON.stringify(previousFooter.content, null, 2), + }, + }) + + const [nextUrl, setNextUrl] = useState("") + const isOpen = !!nextUrl + + useEffect(() => { + const handleRouteChange = (url: string) => { + if (isDirty) { + router.events.off("routeChangeStart", handleRouteChange) + setNextUrl(url) + router.events.emit("routeChangeError") + // eslint-disable-next-line @typescript-eslint/only-throw-error + throw "Error to abort router route change. Ignore this!" + } + } + + if (!isOpen) { + router.events.on("routeChangeStart", handleRouteChange) + } + return () => { + router.events.off("routeChangeStart", handleRouteChange) + } + }, [isOpen, router.events, isDirty]) + + const onClickUpdate = handleSubmit((input) => { + mutate({ + siteId, + ...input, + }) + }) + + if (!isUserIsomerAdmin) { + return ( +
+ You do not have permission to access this page. +
+ ) + } + + return ( + <> + setNextUrl("")} + nextUrl={nextUrl} + /> + +
+ + + Manage site configurations + + + No validation is done on the JSON input. Please ensure that they + are valid before saving. + + + {SUPPORTED_SITE_CONFIG_TYPES.map((type) => ( + + + + Site {type} + + +