From f649a86d04acc49c5a40a2bd0ae0dcb402bf3057 Mon Sep 17 00:00:00 2001 From: Hsu Zhong Jun <27919917+dcshzj@users.noreply.github.com> Date: Fri, 22 Dec 2023 11:54:06 +0800 Subject: [PATCH 01/10] fix(media): enhance bulk delete for media images (#1753) --- .../mediaHooks/useDeleteMultipleMediaHook.tsx | 55 +++++++++---------- src/services/MediaService.jsx | 10 ++++ 2 files changed, 37 insertions(+), 28 deletions(-) diff --git a/src/hooks/mediaHooks/useDeleteMultipleMediaHook.tsx b/src/hooks/mediaHooks/useDeleteMultipleMediaHook.tsx index f0449866d..a22d68308 100644 --- a/src/hooks/mediaHooks/useDeleteMultipleMediaHook.tsx +++ b/src/hooks/mediaHooks/useDeleteMultipleMediaHook.tsx @@ -24,35 +24,22 @@ const deleteMultipleMedia = async ( ) => { const mediaService = new MediaService({ apiClient: apiService }) - await selectedMediaDto - .map((deleteMedia) => { - const pathTokens = deleteMedia.filePath.split("/") - - const reqParams = { - siteName, - mediaDirectoryName: pathTokens.slice(0, -1).join("%2F"), - fileName: pathTokens.pop(), - sha: deleteMedia.sha, + await mediaService + .deleteMultiple( + { siteName }, + { + items: selectedMediaDto.map(({ filePath, sha }) => { + return { + filePath, + sha, + } + }), } - - return reqParams - }) - .reduce( - (acc, curr) => - acc - .then(() => { - const { sha, ...rest } = curr - mediaService.delete(rest, { sha }).catch((error) => { - // We want to continue even if some of the media files fail to delete - // because there is no turning back now if we fail (the earlier files - // would have been deleted) - return error - }) as Promise - }) - // This wait is necessary to avoid the repo lock - .then(() => new Promise((resolve) => setTimeout(resolve, 500))), - Promise.resolve() ) + // Note: Unfortunately, we have to wait for GitHub to finish deleting the files + // before we can refetch the list of files in the directory. Otherwise, the + // refetch will return the files that were just deleted. + .then(() => new Promise((resolve) => setTimeout(resolve, 1000))) } export const useDeleteMultipleMediaHook = ( @@ -71,7 +58,19 @@ export const useDeleteMultipleMediaHook = ( ...mutationOptions, onSettled: (data, error, variables, context) => { queryClient.invalidateQueries([LIST_MEDIA_DIRECTORY_FILES_KEY]) - queryClient.invalidateQueries([GET_ALL_MEDIA_FILES_KEY]) + // Note: We choose to remove here because once the files are deleted, + // refetching will definitely cause a 404 Not Found error, which is what + // we want to avoid + variables.forEach(({ filePath }) => { + const directoryName = encodeURIComponent( + filePath.split("/").slice(0, -1).join("/") + ) + const fileName = encodeURIComponent(filePath.split("/").pop() || "") + queryClient.removeQueries([ + GET_ALL_MEDIA_FILES_KEY, + { siteName: params.siteName, directoryName, name: fileName }, + ]) + }) if (mutationOptions?.onSettled) mutationOptions.onSettled(data, error, variables, context) }, diff --git a/src/services/MediaService.jsx b/src/services/MediaService.jsx index 058bc3d2c..880a46d42 100644 --- a/src/services/MediaService.jsx +++ b/src/services/MediaService.jsx @@ -46,4 +46,14 @@ export class MediaService { .delete(this.getMediaEndpoint(apiParams), { data: body }) .then((res) => res.data) } + + async deleteMultiple(apiParams, { items }) { + const { siteName } = apiParams + const body = { + items, + } + return this.apiClient + .delete(`/sites/${siteName}/media`, { data: body }) + .then((res) => res.data) + } } From f728a804cff5ca1d06781b772c204b4d3d278948 Mon Sep 17 00:00:00 2001 From: sehyunidaaa <139780851+sehyunidaaa@users.noreply.github.com> Date: Thu, 28 Dec 2023 18:13:02 +0800 Subject: [PATCH 02/10] fix(styles): fix overlapping page title issue (#1762) * fix(styles): fix overlapping page title issue * clean up whitespaces and indentation * fix flex properties --------- Co-authored-by: Park Se Hyun <> --- src/components/Header.jsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 0274a1774..8044e62e5 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -97,8 +97,9 @@ const Header = ({ bg="white" h="4rem" w="100%" + spacing="0.5rem" > - + {!showButton ? ( - + {backButtonTextFromParams || backButtonText} @@ -128,11 +129,18 @@ const Header = ({ {/* */} {title ? ( - - {title} + + + {title} + ) : null} - + ( {isShowStagingBuildStatusEnabled && ( From 37bcb8ca8ddfe2e518fb473e8d8cf4a3a4b21213 Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Fri, 5 Jan 2024 14:13:21 +0800 Subject: [PATCH 03/10] chore: reset staging url when privatising site (#1763) --- src/hooks/settingsHooks/useUpdateSettings.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/hooks/settingsHooks/useUpdateSettings.ts b/src/hooks/settingsHooks/useUpdateSettings.ts index 6e7cbeebc..e185fd130 100644 --- a/src/hooks/settingsHooks/useUpdateSettings.ts +++ b/src/hooks/settingsHooks/useUpdateSettings.ts @@ -2,7 +2,7 @@ import { AxiosError } from "axios" import _ from "lodash" import { useMutation, UseMutationResult, useQueryClient } from "react-query" -import { SETTINGS_CONTENT_KEY } from "constants/queryKeys" +import { SETTINGS_CONTENT_KEY, STAGING_URL_KEY } from "constants/queryKeys" import * as SettingsService from "services/SettingsService" @@ -58,6 +58,7 @@ export const useUpdateSettings = ( { onSettled: () => { queryClient.invalidateQueries([SETTINGS_CONTENT_KEY, siteName]) + queryClient.invalidateQueries([STAGING_URL_KEY, siteName]) }, onSuccess, onError, From 8445bd9cccbd858891e216d667f33afbf9bd802a Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Fri, 5 Jan 2024 15:01:41 +0800 Subject: [PATCH 04/10] chore: fix styling for review request files (#1764) --- .../RequestOverview/RequestOverview.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/layouts/ReviewRequest/components/RequestOverview/RequestOverview.tsx b/src/layouts/ReviewRequest/components/RequestOverview/RequestOverview.tsx index 24ceb2205..eef9fb5eb 100644 --- a/src/layouts/ReviewRequest/components/RequestOverview/RequestOverview.tsx +++ b/src/layouts/ReviewRequest/components/RequestOverview/RequestOverview.tsx @@ -113,7 +113,12 @@ const ItemName = ({ name, path }: Pick) => { const theme = useTheme() return ( - + {name} = table.getRowModel().rows[index] // NOTE: This is guaranteed to exist because the table will filter // so that the index we're referencing is within the filtered items. - return row - .getVisibleCells() - .map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - )) + return row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + )) }} /> From 9de5184564c2937deee85329df85eab4b44526cf Mon Sep 17 00:00:00 2001 From: Kishore <42832651+kishore03109@users.noreply.github.com> Date: Mon, 8 Jan 2024 16:18:56 +0800 Subject: [PATCH 05/10] feat(codeowner): make life easier (#1765) --- .github/CODEOWNERS | 1 + 1 file changed, 1 insertion(+) create mode 100644 .github/CODEOWNERS diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 000000000..b2eed94e9 --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1 @@ +* @isomerpages/iso-engineers \ No newline at end of file From bb50c33c5aa15f569f929589d60e681206d1a364 Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Wed, 10 Jan 2024 15:53:03 +0800 Subject: [PATCH 06/10] Chore/upgrade axios (#1767) * chore: upgrade axios * fix: error messages and shape --- package-lock.json | 42 ++++++++++++++++--- package.json | 2 +- .../contactUsHooks/useGetContactUsHook.ts | 6 ++- .../contactUsHooks/useUpdateContactUsHook.ts | 15 ++++--- src/hooks/homepageHooks/useGetHomepageHook.ts | 6 ++- .../homepageHooks/useUpdateHomepageHook.ts | 12 ++++-- src/hooks/navHooks/useUpdateNavHook.ts | 12 ++++-- src/utils/axios.ts | 19 +++++++-- 8 files changed, 86 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0ee70b664..5fe343913 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,7 +51,7 @@ "@tiptap/pm": "^2.1.12", "@tiptap/react": "^2.1.12", "@tiptap/starter-kit": "^2.1.12", - "axios": "^0.21.3", + "axios": "^1.6.5", "bluebird": "^3.7.1", "bootstrap": "^4.6.0", "cheerio": "^1.0.0-rc.10", @@ -5129,6 +5129,14 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/@datadog/datadog-ci/node_modules/axios": { + "version": "0.21.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz", + "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==", + "dependencies": { + "follow-redirects": "^1.14.0" + } + }, "node_modules/@datadog/datadog-ci/node_modules/chalk": { "version": "3.0.0", "license": "MIT", @@ -13313,12 +13321,33 @@ } }, "node_modules/axios": { - "version": "0.21.4", - "license": "MIT", + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.5.tgz", + "integrity": "sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==", "dependencies": { - "follow-redirects": "^1.14.0" + "follow-redirects": "^1.15.4", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" } }, + "node_modules/axios/node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/axobject-query": { "version": "3.2.1", "dev": true, @@ -19586,14 +19615,15 @@ } }, "node_modules/follow-redirects": { - "version": "1.15.2", + "version": "1.15.4", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz", + "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==", "funding": [ { "type": "individual", "url": "https://github.com/sponsors/RubenVerborgh" } ], - "license": "MIT", "engines": { "node": ">=4.0" }, diff --git a/package.json b/package.json index 09be5e442..f8ca47f9d 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "@tiptap/pm": "^2.1.12", "@tiptap/react": "^2.1.12", "@tiptap/starter-kit": "^2.1.12", - "axios": "^0.21.3", + "axios": "^1.6.5", "bluebird": "^3.7.1", "bootstrap": "^4.6.0", "cheerio": "^1.0.0-rc.10", diff --git a/src/hooks/directoryHooks/contactUsHooks/useGetContactUsHook.ts b/src/hooks/directoryHooks/contactUsHooks/useGetContactUsHook.ts index 4f8eb70ec..944c94cdb 100644 --- a/src/hooks/directoryHooks/contactUsHooks/useGetContactUsHook.ts +++ b/src/hooks/directoryHooks/contactUsHooks/useGetContactUsHook.ts @@ -3,6 +3,8 @@ import { UseQueryResult, useQuery } from "react-query" import { GET_CONTACT_US_KEY } from "constants/queryKeys" +import { getAxiosErrorMessage } from "utils/axios" + import { ContactUsService } from "services" import { ContactUsDto } from "types/contactUs" import { useErrorToast, DEFAULT_RETRY_MSG } from "utils" @@ -18,7 +20,9 @@ export const useGetContactUsHook = ( onError: (err: AxiosError) => { errorToast({ id: "get-contact-us-error", - description: `Your Contact Us page details could not be retrieved. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`, + description: `Your Contact Us page details could not be retrieved. ${DEFAULT_RETRY_MSG}. Error: ${getAxiosErrorMessage( + err + )}`, }) }, } diff --git a/src/hooks/directoryHooks/contactUsHooks/useUpdateContactUsHook.ts b/src/hooks/directoryHooks/contactUsHooks/useUpdateContactUsHook.ts index 7c4ad7180..03833d688 100644 --- a/src/hooks/directoryHooks/contactUsHooks/useUpdateContactUsHook.ts +++ b/src/hooks/directoryHooks/contactUsHooks/useUpdateContactUsHook.ts @@ -3,9 +3,10 @@ import { UseMutationResult, useQueryClient, useMutation } from "react-query" import { GET_CONTACT_US_KEY } from "constants/queryKeys" +import { getAxiosErrorMessage } from "utils/axios" + import { ContactUsService } from "services" import { ContactUsFrontMatter } from "types/contactUs" -import { MiddlewareError } from "types/error" import { useSuccessToast, useErrorToast, DEFAULT_RETRY_MSG } from "utils" interface UpdateContactUsParams { @@ -15,11 +16,7 @@ interface UpdateContactUsParams { export const useUpdateContactUsHook = ( siteName: string -): UseMutationResult< - void, - AxiosError, - UpdateContactUsParams -> => { +): UseMutationResult => { const queryClient = useQueryClient() const successToast = useSuccessToast() const errorToast = useErrorToast() @@ -42,10 +39,12 @@ export const useUpdateContactUsHook = ( description: "Contact Us page updated successfully", }) }, - onError: (err: AxiosError) => { + onError: (err) => { errorToast({ id: "update-homepage-error", - description: `Could not update Contact Us page. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`, + description: `Could not update Contact Us page. ${DEFAULT_RETRY_MSG}. Error: ${getAxiosErrorMessage( + err + )}`, }) }, } diff --git a/src/hooks/homepageHooks/useGetHomepageHook.ts b/src/hooks/homepageHooks/useGetHomepageHook.ts index ac29cd806..d86c9a8a4 100644 --- a/src/hooks/homepageHooks/useGetHomepageHook.ts +++ b/src/hooks/homepageHooks/useGetHomepageHook.ts @@ -3,6 +3,8 @@ import { UseQueryResult, useQuery } from "react-query" import { GET_HOMEPAGE_KEY } from "constants/queryKeys" +import { getAxiosErrorMessage } from "utils/axios" + import { HomepageService } from "services" import { HomepageDto } from "types/homepage" import { useErrorToast, DEFAULT_RETRY_MSG } from "utils" @@ -18,7 +20,9 @@ export const useGetHomepageHook = ( onError: (err: AxiosError) => { errorToast({ id: "get-homepage-error", - description: `Your homepage could not be retrieved. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`, + description: `Your homepage could not be retrieved. ${DEFAULT_RETRY_MSG}. Error: ${getAxiosErrorMessage( + err + )}`, }) }, } diff --git a/src/hooks/homepageHooks/useUpdateHomepageHook.ts b/src/hooks/homepageHooks/useUpdateHomepageHook.ts index 31b7a2b5e..afe774a28 100644 --- a/src/hooks/homepageHooks/useUpdateHomepageHook.ts +++ b/src/hooks/homepageHooks/useUpdateHomepageHook.ts @@ -8,18 +8,20 @@ import { import { GET_HOMEPAGE_KEY } from "constants/queryKeys" +import { getAxiosErrorMessage } from "utils/axios" + import { HomepageService } from "services" -import { MiddlewareError } from "types/error" +import { MiddlewareErrorDto } from "types/error" import { HomepageDto } from "types/homepage" import { useSuccessToast, useErrorToast, DEFAULT_RETRY_MSG } from "utils" export const useUpdateHomepageHook = ( siteName: string, mutationOptions?: Omit< - UseMutationOptions, HomepageDto>, + UseMutationOptions, HomepageDto>, "mutationFn" | "mutationKey" > -): UseMutationResult, HomepageDto> => { +): UseMutationResult, HomepageDto> => { const queryClient = useQueryClient() const successToast = useSuccessToast() const errorToast = useErrorToast() @@ -44,7 +46,9 @@ export const useUpdateHomepageHook = ( if (err.response?.status !== 409) { errorToast({ id: "update-homepage-error", - description: `Could not update homepage. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data?.message}`, + description: `Could not update homepage. ${DEFAULT_RETRY_MSG}. Error: ${getAxiosErrorMessage( + err + )}`, }) } if (mutationOptions?.onError) diff --git a/src/hooks/navHooks/useUpdateNavHook.ts b/src/hooks/navHooks/useUpdateNavHook.ts index 9b92e8927..3d72d8cf5 100644 --- a/src/hooks/navHooks/useUpdateNavHook.ts +++ b/src/hooks/navHooks/useUpdateNavHook.ts @@ -8,8 +8,10 @@ import { RESOURCE_ROOM_NAME_KEY, } from "constants/queryKeys" +import { getAxiosErrorMessage } from "utils/axios" + import { NavService } from "services" -import { MiddlewareError } from "types/error" +import { MiddlewareErrorDto } from "types/error" import { CollectionNav, NavDto, @@ -27,7 +29,7 @@ export interface UpdateNavParams { export const useUpdateNavHook = ( siteName: string -): UseMutationResult, UpdateNavParams> => { +): UseMutationResult, UpdateNavParams> => { const queryClient = useQueryClient() const successToast = useSuccessToast() const errorToast = useErrorToast() @@ -56,10 +58,12 @@ export const useUpdateNavHook = ( description: "Navigation bar updated successfully", }) }, - onError: (err: AxiosError) => { + onError: (err: AxiosError) => { errorToast({ id: "update-nav-error", - description: `Could not update navigation bar. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`, + description: `Could not update navigation bar. ${DEFAULT_RETRY_MSG}. Error: ${getAxiosErrorMessage( + err + )}`, }) }, } diff --git a/src/utils/axios.ts b/src/utils/axios.ts index f6d1d9022..43436f408 100644 --- a/src/utils/axios.ts +++ b/src/utils/axios.ts @@ -1,6 +1,6 @@ import { AxiosError } from "axios" -import { ErrorDto, IsomerErrorDto } from "types/error" +import { ErrorDto, IsomerErrorDto, MiddlewareErrorDto } from "types/error" import { DEFAULT_RETRY_MSG } from "utils" export const isAxiosError = (err: unknown): err is AxiosError => { @@ -25,8 +25,18 @@ const isIsomerExternalError = ( ) } +const isIsomerBackendMiddlewareError = ( + err: AxiosError +): err is AxiosError => { + return !!(err as AxiosError).response?.data.error.message +} + export const getAxiosErrorMessage = ( - error: null | AxiosError | AxiosError, + error: + | null + | AxiosError + | AxiosError + | AxiosError, defaultErrorMessage = DEFAULT_RETRY_MSG ): string => { if (!error) return "" @@ -35,9 +45,12 @@ export const getAxiosErrorMessage = ( return `${error.response?.data.error?.code}: ${error.response?.data.error?.message}` } + if (isIsomerBackendMiddlewareError(error)) { + return error.response?.data?.error?.message || defaultErrorMessage + } if (isBackendError(error)) { return error.response?.data.message || defaultErrorMessage } - return error.response?.data?.error?.message || defaultErrorMessage + return defaultErrorMessage } From 01e0a418ccc264ddaff61f95422e68ece8c7fbc1 Mon Sep 17 00:00:00 2001 From: Hsu Zhong Jun <27919917+dcshzj@users.noreply.github.com> Date: Wed, 10 Jan 2024 16:37:05 +0800 Subject: [PATCH 07/10] fix(cards): prevent overflowing of cards by enforcing width (#1771) --- src/styles/isomer-template/components/_cards.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/styles/isomer-template/components/_cards.scss b/src/styles/isomer-template/components/_cards.scss index 57ecf04f2..a65362ca1 100644 --- a/src/styles/isomer-template/components/_cards.scss +++ b/src/styles/isomer-template/components/_cards.scss @@ -18,6 +18,7 @@ .isomer-card { float: left; flex-basis: calc((100% - 3rem) / 3); + max-width: calc((100% - 3rem) / 3); flex-shrink: 0; border-width: 1px; border-style: solid; @@ -37,25 +38,30 @@ &:nth-child(1):nth-last-child(2), &:nth-child(2):nth-last-child(1) { flex-basis: calc((100% - 1.5rem) / 2); + max-width: calc((100% - 1.5rem) / 2); } // Stretch the card if there is only 1 card &:only-child { flex-basis: 100%; + max-width: 100%; } // Collapse to 2 columns between md and xl @media screen and (max-width: map-get($breakpoints, "xl")) { flex-basis: calc((100% - 1.5rem) / 2); + max-width: calc((100% - 1.5rem) / 2); } // Collapse to 1 column below md @media screen and (max-width: map-get($breakpoints, "md")) { flex-basis: 100%; + max-width: 100%; &:nth-child(1):nth-last-child(2), &:nth-child(2):nth-last-child(1) { flex-basis: 100%; + max-width: 100%; } } From 5e81fa8015f217b9068dcfbd2086caaa61d3a685 Mon Sep 17 00:00:00 2001 From: Alexander Lee Date: Wed, 10 Jan 2024 16:58:09 +0800 Subject: [PATCH 08/10] fix: header spacing (#1772) --- src/components/Header.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 8044e62e5..d82e97c9b 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -97,7 +97,7 @@ const Header = ({ bg="white" h="4rem" w="100%" - spacing="0.5rem" + gap="1.5rem" > {!showButton ? ( From 1c22a59f89dadd4d714343b6e5f8de4a54840660 Mon Sep 17 00:00:00 2001 From: Harish Date: Wed, 10 Jan 2024 21:20:16 +0800 Subject: [PATCH 09/10] IS-846 fix copy for new rte (#1769) * feat: update markdown edit page with new copy * feat: more copy changes * feat: use infobox * chore: remove unused imports * feat: add copy on new editor page * fix: copy changes * fix: add conditional to show infobox on editor * fix: design review changes --- src/layouts/EditPage/MarkdownEditPage.tsx | 74 ++++++++++++++--------- src/layouts/EditPage/TiptapEditPage.tsx | 2 +- src/layouts/components/Editor/Editor.tsx | 38 +++++++++++- 3 files changed, 83 insertions(+), 31 deletions(-) diff --git a/src/layouts/EditPage/MarkdownEditPage.tsx b/src/layouts/EditPage/MarkdownEditPage.tsx index ee059671f..ee874f7a8 100644 --- a/src/layouts/EditPage/MarkdownEditPage.tsx +++ b/src/layouts/EditPage/MarkdownEditPage.tsx @@ -2,7 +2,6 @@ import { useDisclosure, Text, Box, - Flex, Modal, ModalBody, ModalCloseButton, @@ -10,7 +9,8 @@ import { ModalFooter, ModalHeader, ModalOverlay, - Spacer, + Icon, + Link, } from "@chakra-ui/react" import { Button, Infobox } from "@opengovsg/design-system-react" import axios from "axios" @@ -18,6 +18,7 @@ import DOMPurify from "dompurify" import _ from "lodash" import { marked } from "marked" import { useCallback, useEffect, useState } from "react" +import { BiLinkExternal } from "react-icons/bi" import { useParams } from "react-router-dom" import MarkdownEditor from "components/pages/MarkdownEditor" @@ -130,19 +131,29 @@ export const MarkdownEditPage = ({ togglePreview }: MarkdownPageProps) => { shouldDisableSave={isAnyDrawerOpen} > - - - - 🎉 We’re introducing a new editor on Isomer! - - - With the new editor, you can edit pages without any HTML/Markdown. - Preview what your page might look like before making the shift. - - - + + + We have a new editor on Isomer! +
+ You can continue using this editor, but we won’t be able to assist + you if you face any issues.{" "} + + Refer to the guide + {" "} + for more details. + - + setEditorValue(value)} @@ -197,28 +208,35 @@ const PreviewModal = ({ - Preview Isomer’s new editor + + Preview page content on Isomer’s new editor + We’re introducing a new editor on IsomerCMS. Using this editor, you - can edit pages without using any Markdown or HTML. Explore what your - content looks like on the new editor. - - - You can toggle to use the new editor anytime on Page Settings. + can edit pages without using any Markdown or HTML.{" "} + + Read more about the new editor here{" "} + + - + - The current editor will be phased out by{" "} - - Q2 2024 - - . + You can toggle to use the new editor anytime on Page Settings. - +