Merge pull request #1699 from isomerpages/release/0.61.0

Release/0.61.0

CHANGELOG.md

@@ -4,9 +4,21 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.61.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.60.0...v0.61.0)
+
+- fix: submitting state for react-hook-form [`#1693`](https://github.com/isomerpages/isomercms-frontend/pull/1693)
+- Fix/is 778 creating media in subfolder in select modal [`#1695`](https://github.com/isomerpages/isomercms-frontend/pull/1695)
+- Fix: stylesheet [`#1696`](https://github.com/isomerpages/isomercms-frontend/pull/1696)
+- fix(images): ability to change img [`#1694`](https://github.com/isomerpages/isomercms-frontend/pull/1694)
+- feat(tiptap): add Instagram embed proper node handler [`#1688`](https://github.com/isomerpages/isomercms-frontend/pull/1688)
+- fix(updateLinkModal): update link + proper default [`#1692`](https://github.com/isomerpages/isomercms-frontend/pull/1692)
+- 0.60.0 [`#1690`](https://github.com/isomerpages/isomercms-frontend/pull/1690)
+- fix(input): empty input validation [`#1691`](https://github.com/isomerpages/isomercms-frontend/pull/1691)
+
 #### [v0.60.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.59.0...v0.60.0)
 
-- fix(input): empty input validation [`#1691`](https://github.com/isomerpages/isomercms-frontend/pull/1691)
+> 21 November 2023
+
 - is-714/chore: add copy and layout changes [`#1687`](https://github.com/isomerpages/isomercms-frontend/pull/1687)
 - IS-780 fix(height): fix editor + preview heights [`#1686`](https://github.com/isomerpages/isomercms-frontend/pull/1686)
 - IS-782-Editor-File-text-always-comes-out-as-file-regardless-of-text [`#1685`](https://github.com/isomerpages/isomercms-frontend/pull/1685)
@@ -83,13 +95,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - feat(media): introduce enhancement to media pages [`#1628`](https://github.com/isomerpages/isomercms-frontend/pull/1628)
 - feat(blocks): rollback handler [`#1603`](https://github.com/isomerpages/isomercms-frontend/pull/1603)
 - 0.54.0 to develop [`#1622`](https://github.com/isomerpages/isomercms-frontend/pull/1622)
+- feat(media): introduce new image preview card common component [`#1620`](https://github.com/isomerpages/isomercms-frontend/pull/1620)
+- fix(editpage): change query key from object to array [`#1623`](https://github.com/isomerpages/isomercms-frontend/pull/1623)
 
 #### [v0.54.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.53.0...v0.54.0)
 
-> 26 October 2023
+> 25 October 2023
 
-- feat(media): introduce new image preview card common component [`#1620`](https://github.com/isomerpages/isomercms-frontend/pull/1620)
-- fix(editpage): change query key from object to array [`#1623`](https://github.com/isomerpages/isomercms-frontend/pull/1623)
 - Fix/login page layout [`#1619`](https://github.com/isomerpages/isomercms-frontend/pull/1619)
 - chore: add sgidlogin page story [`#1595`](https://github.com/isomerpages/isomercms-frontend/pull/1595)
 - IS-614-Make-it-easy-to-view-staging-on-mobile [`#1617`](https://github.com/isomerpages/isomercms-frontend/pull/1617)
@@ -106,16 +118,16 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - feat: allow Isomer admins to edit on email-login [`#1604`](https://github.com/isomerpages/isomercms-frontend/pull/1604)
 - fix(settings): use env var [`#1609`](https://github.com/isomerpages/isomercms-frontend/pull/1609)
 - release/v0.52.0 [`#1600`](https://github.com/isomerpages/isomercms-frontend/pull/1600)
-
-#### [v0.52.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.51.1...v0.52.0)
-
-> 19 October 2023
-
 - fix: errors indexes [`#1610`](https://github.com/isomerpages/isomercms-frontend/pull/1610)
 - fix(navbar): fix race condition when retrieving second level data [`#1608`](https://github.com/isomerpages/isomercms-frontend/pull/1608)
 - fix(navbar): ensure all queries are loaded first [`#1607`](https://github.com/isomerpages/isomercms-frontend/pull/1607)
 - fix(media): support replacement of media src with spaces [`#1606`](https://github.com/isomerpages/isomercms-frontend/pull/1606)
 - chore(hooks): add timeout [`#1605`](https://github.com/isomerpages/isomercms-frontend/pull/1605)
+
+#### [v0.52.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.51.1...v0.52.0)
+
+> 18 October 2023
+
 - fix(media): adjust query key to load image in preview on upload [`#1602`](https://github.com/isomerpages/isomercms-frontend/pull/1602)
 - Feat/sgid govt rollout [`#1594`](https://github.com/isomerpages/isomercms-frontend/pull/1594)
 - feat(navbar): upgrade navbar to use v2 endpoints [`#1592`](https://github.com/isomerpages/isomercms-frontend/pull/1592)
@@ -129,12 +141,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 > 18 October 2023
 
 - fix(mediasselectmodal): update dir name [`#1596`](https://github.com/isomerpages/isomercms-frontend/pull/1596)
+- fix(media): add limit [`#1591`](https://github.com/isomerpages/isomercms-frontend/pull/1591)
 
 #### [v0.51.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.50.0...v0.51.0)
 
 > 16 October 2023
 
-- fix(media): add limit [`#1591`](https://github.com/isomerpages/isomercms-frontend/pull/1591)
 - chore(hooks): remove `useGetMediaFolders` [`#1582`](https://github.com/isomerpages/isomercms-frontend/pull/1582)
 - feat(homepage): allow user to override changes when there is a conflict [`#1588`](https://github.com/isomerpages/isomercms-frontend/pull/1588)
 - ref(media): update media hooks + components [`#1581`](https://github.com/isomerpages/isomercms-frontend/pull/1581)
@@ -181,13 +193,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 > 3 October 2023
 
+- fix(herocenteredlayout): make dropdown optional [`#1556`](https://github.com/isomerpages/isomercms-frontend/pull/1556)
 - fix(hero.scss): css fix [`af09212`](https://github.com/isomerpages/isomercms-frontend/commit/af09212f81dbf845eae7579632fecb2a26d3eb1a)
 
 #### [v0.47.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.46.0...v0.47.0)
 
 > 3 October 2023
 
-- fix(herocenteredlayout): make dropdown optional [`#1556`](https://github.com/isomerpages/isomercms-frontend/pull/1556)
 - Fix/text cards design [`#1535`](https://github.com/isomerpages/isomercms-frontend/pull/1535)
 - chore(cleanup): delete unused styles [`#1548`](https://github.com/isomerpages/isomercms-frontend/pull/1548)
 - refactor(hero): duplicate changes from template [`#1551`](https://github.com/isomerpages/isomercms-frontend/pull/1551)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.60.0",
+  "version": "0.61.0",
   "private": true,
   "engines": {
     "node": ">=16.0.0"

src/components/DirectorySettingsModal/DirectorySettingsModal.jsx

@@ -14,13 +14,10 @@ import { LoadingButton } from "components/LoadingButton"
 import elementStyles from "styles/isomer-cms/Elements.module.scss"
 
 import { getDirectorySettingsType } from "utils/directoryUtils"
+import { getMediaDirectoryName } from "utils/media"
 import { isWriteActionsDisabled } from "utils/reviewRequests"
 
-import {
-  deslugifyDirectory,
-  getLastItemType,
-  getMediaDirectoryName,
-} from "utils"
+import { deslugifyDirectory, getLastItemType } from "utils"
 
 import { DirectorySettingsSchema } from "./DirectorySettingsSchema"
 

src/components/EditorEmbedModal/EditorEmbedModal.tsx

@@ -18,7 +18,6 @@ import {
   Link,
   ModalCloseButton,
 } from "@opengovsg/design-system-react"
-import * as Cheerio from "cheerio"
 import { useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import * as Yup from "yup"
@@ -45,18 +44,7 @@ export const EditorEmbedModal = ({
   const { data: csp } = useCspHook()
 
   const handleSubmit = (embedCode: EditorEmbedContents) => {
-    const { value } = embedCode
-    const $ = Cheerio.load(value)
-
-    if ($("blockquote").hasClass("instagram-media")) {
-      const postUrl = $(".instagram-media").attr("data-instgrm-permalink")
-      const url = document.createElement("a")
-      url.href = postUrl || ""
-      const code = `<iframe src="https://${url.host}${url.pathname}embed/" frameborder="0" allowfullscreen="true" width="320" height="440"></iframe>`
-      onProceed({ value: code })
-    } else {
-      onProceed(embedCode)
-    }
+    onProceed(embedCode)
   }
 
   const methods = useForm<EditorEmbedContents>({
@@ -92,6 +80,7 @@ export const EditorEmbedModal = ({
         cursorValue
           .replace('<div class="iframe-wrapper">', "")
           .replace('<div class="formsg-wrapper">', "")
+          .replace('<div class="instagram-wrapper">', "")
           // Remove the closing div tag
           .slice(0, -6)
       )

src/components/Header/ContactModal/ContactVerificationModal.tsx

@@ -43,7 +43,12 @@ export const ContactVerificationModal = ({
   const [mobile, setMobile] = useState<string>("")
 
   const handleSendOtp = async ({ mobile: mobileInput }: ContactProps) => {
-    await sendContactOtp({ mobile: mobileInput }) // Non-2xx responses will be caught by axios and thrown as error
+    try {
+      await sendContactOtp({ mobile: mobileInput }) // Non-2xx responses will be caught by axios and thrown as error
+    } catch (e) {
+      // Needed for react-hook-form to reset isSubmitting
+      return
+    }
     successToast({
       id: "send-otp-success",
       description: `OTP sent to ${mobileInput}`,
@@ -52,7 +57,12 @@ export const ContactVerificationModal = ({
   }
 
   const handleVerifyOtp = async ({ otp }: ContactOtpProps) => {
-    await verifyContactOtp({ mobile, otp })
+    try {
+      await verifyContactOtp({ mobile, otp })
+    } catch (e) {
+      // Needed for react-hook-form to reset isSubmitting
+      return
+    }
     onClose()
     successToast({
       id: "verify-otp-success",

src/components/MediaCreationModal/MediaCreationModal.tsx

@@ -21,13 +21,12 @@ import _ from "lodash"
 import { useEffect, useState } from "react"
 import { FileRejection } from "react-dropzone"
 import { BiCheckCircle, BiSolidErrorCircle } from "react-icons/bi"
-import { useParams } from "react-router-dom"
 
 import { Attachment } from "components/Attachment"
 
 import { useCreateMultipleMedia } from "hooks/mediaHooks/useCreateMultipleMedia"
 
-import { getMediaLabels } from "utils/media"
+import { getMediaDirectoryName, getMediaLabels } from "utils/media"
 
 import { MediaDirectoryParams } from "types/folders"
 import { MediaFolderTypes } from "types/media"
@@ -280,12 +279,6 @@ const MediaUploadFailedDropzone = ({
   )
 }
 
-interface MediaCreationModalProps {
-  onClose: () => void
-  onProceed: () => void
-  variant: MediaFolderTypes
-}
-
 interface MediaCreationRouteParams
   extends Omit<
     MediaDirectoryParams,
@@ -295,14 +288,25 @@ interface MediaCreationRouteParams
   mediaDirectoryName?: string
 }
 
+interface MediaCreationModalProps {
+  params: MediaCreationRouteParams
+  onClose: () => void
+  onProceed: () => void
+  variant: MediaFolderTypes
+}
+
 export const MediaCreationModal = ({
+  params,
   onClose,
   onProceed,
   variant,
 }: MediaCreationModalProps) => {
   const { onClose: onModalClose } = useDisclosure()
-  const params = useParams<MediaCreationRouteParams>()
-  const { siteName, mediaDirectoryName } = params
+  const { siteName, mediaDirectoryName: rawMediaDirectoryName } = params
+  const mediaDirectoryName = `${getMediaDirectoryName(
+    rawMediaDirectoryName || "",
+    { splitOn: "/" }
+  )}`
 
   const {
     mutateAsync: uploadFiles,

src/components/media/MediaModal.jsx

@@ -9,7 +9,7 @@ import { MediaAltText } from "components/media/MediaAltText"
 import MediasSelectModal from "components/media/MediasSelectModal"
 import { MediaCreationModal } from "components/MediaCreationModal/MediaCreationModal"
 
-import { getMediaDirectoryName } from "utils"
+import { getMediaDirectoryName } from "utils/media"
 
 const MediaModal = ({ onClose, onProceed, type, showAltTextModal = false }) => {
   const {

src/components/media/MediasSelectModal.jsx

@@ -41,9 +41,9 @@ import { FilePreviewCard, MediaDirectoryCard } from "layouts/Media/components"
 
 import mediaStyles from "styles/isomer-cms/pages/Media.module.scss"
 
-import { getMediaLabels } from "utils/media"
+import { getMediaDirectoryName, getMediaLabels } from "utils/media"
 
-import { deslugifyDirectory, getMediaDirectoryName } from "utils"
+import { deslugifyDirectory } from "utils"
 
 const filterMediaByFileName = (medias, filterTerm) =>
   medias.filter((media) =>
@@ -135,9 +135,10 @@ const MediasSelectModal = ({
       size="6xl"
       scrollBehavior="inside"
       closeOnOverlayClick={false}
+      isCentered
     >
       <ModalOverlay />
-      <ModalContent padding="0.5rem" paddingTop="1rem">
+      <ModalContent padding="0.5rem" paddingTop="1rem" maxHeight="90%">
         <ModalHeader>
           <VStack alignItems="right" gap="1rem">
             <HStack justifyContent="space-between">

src/hooks/directoryHooks/useDeleteDirectoryHook.jsx

@@ -11,9 +11,10 @@ import {
 
 import { ServicesContext } from "contexts/ServicesContext"
 
+import { getMediaDirectoryName } from "utils/media"
 import { useSuccessToast, useErrorToast } from "utils/toasts"
 
-import { DEFAULT_RETRY_MSG, getMediaDirectoryName } from "utils"
+import { DEFAULT_RETRY_MSG } from "utils"
 
 // eslint-disable-next-line import/prefer-default-export
 export function useDeleteDirectoryHook(params, queryParams) {

src/hooks/directoryHooks/useUpdateDirectoryHook.jsx

@@ -10,9 +10,10 @@ import {
 
 import { ServicesContext } from "contexts/ServicesContext"
 
+import { getMediaDirectoryName } from "utils/media"
 import { useSuccessToast, useErrorToast } from "utils/toasts"
 
-import { DEFAULT_RETRY_MSG, getMediaDirectoryName } from "utils"
+import { DEFAULT_RETRY_MSG } from "utils"
 
 import { extractUpdateDirectoryInfo } from "./utils"
 

src/hooks/directoryHooks/utils.ts

@@ -1,5 +1,6 @@
+import { getMediaDirectoryName } from "utils/media"
+
 import { DirectoryInfoProps, DirectoryInfoReturn } from "types/directory"
-import { getMediaDirectoryName } from "utils"
 
 export function extractCreateDirectoryInfo({
   data,

src/layouts/EditPage/EditPage.tsx

@@ -35,6 +35,7 @@ import {
   FormSGIframe,
   Iframe,
   IsomerImage,
+  Instagram,
 } from "layouts/components/Editor/extensions"
 
 import { isEmbedCodeValid } from "utils/allowedHTML"
@@ -78,13 +79,17 @@ export const EditPage = () => {
       FormSG,
       FormSGDiv,
       FormSGIframe,
+      Instagram,
       Markdown,
       BubbleMenu.configure({
         pluginKey: "linkBubble",
       }),
       BubbleMenu.configure({
         pluginKey: "tableBubble",
       }),
+      BubbleMenu.configure({
+        pluginKey: "imageBubble",
+      }),
       Table.configure({
         resizable: false,
       }),

src/layouts/Login/LoginPage.tsx

@@ -105,7 +105,12 @@ const LoginContent = (): JSX.Element => {
 
   const handleSendOtp = async ({ email: emailInput }: LoginProps) => {
     const trimmedEmail = emailInput.trim()
-    await sendLoginOtp({ email: trimmedEmail }) // Non-2xx responses will be caught by axios and thrown as error
+    try {
+      await sendLoginOtp({ email: trimmedEmail }) // Non-2xx responses will be caught by axios and thrown as error
+    } catch (e) {
+      // Needed for react-hook-form to reset isSubmitting
+      return
+    }
     successToast({
       id: "send-otp-success",
       description: `OTP sent to ${trimmedEmail}`,
@@ -114,7 +119,12 @@ const LoginContent = (): JSX.Element => {
   }
 
   const handleVerifyOtp = async ({ otp }: OtpProps) => {
-    await verifyLoginOtp({ email, otp })
+    try {
+      await verifyLoginOtp({ email, otp })
+    } catch (e) {
+      // Needed for react-hook-form to reset isSubmitting
+      return
+    }
     history.replace("/sites")
   }
 

src/layouts/ReviewRequest/components/Comments/SendCommentForm.tsx

@@ -39,6 +39,7 @@ export const SendCommentForm = ({
   const {
     mutateAsync: updateNotifications,
     error: updateNotificationsError,
+    isLoading: isUpddatingComments,
   } = useUpdateComments()
 
   const queryClient = useQueryClient()
@@ -62,7 +63,7 @@ export const SendCommentForm = ({
     <form onSubmit={handleSubmit(handleUpdateNotifications)}>
       <FormControl
         isInvalid={!!formState.errors.comment}
-        isReadOnly={formState.isSubmitting}
+        isReadOnly={isUpddatingComments}
         pb="1.5rem"
       >
         <HStack>
@@ -80,7 +81,7 @@ export const SendCommentForm = ({
             variant="clear"
             aria-label="link to send comment"
             type="submit"
-            isLoading={formState.isSubmitting}
+            isLoading={isUpddatingComments}
             isDisabled={!formState.isValid}
           />
         </HStack>