Merge pull request #1804 from isomerpages/release/0.76.0

undefined

CHANGELOG.md

@@ -4,8 +4,19 @@ 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.76.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.75.0...v0.76.0)
+
+- fix: update manifest [`#1802`](https://github.com/isomerpages/isomercms-frontend/pull/1802)
+- feat(cards): make the card link optional [`#1801`](https://github.com/isomerpages/isomercms-frontend/pull/1801)
+- chore: fix broken edit link button [`#1800`](https://github.com/isomerpages/isomercms-frontend/pull/1800)
+- fix: mediasselectmodal breadcrumb [`#1799`](https://github.com/isomerpages/isomercms-frontend/pull/1799)
+- fix(modals): set motion preset to none [`#1783`](https://github.com/isomerpages/isomercms-frontend/pull/1783)
+- release(0.75.0): merge to dev [`#1797`](https://github.com/isomerpages/isomercms-frontend/pull/1797)
+
 #### [v0.75.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.74.0...v0.75.0)
 
+> 30 January 2024
+
 - fix(tiptap): correctly parse linked image node if it is first [`#1794`](https://github.com/isomerpages/isomercms-frontend/pull/1794)
 - 0.74.0 [`#1793`](https://github.com/isomerpages/isomercms-frontend/pull/1793)
 
@@ -91,12 +102,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix: warning modals [`#1744`](https://github.com/isomerpages/isomercms-frontend/pull/1744)
 - IS-734 Add delete icon to table control and other minor UI fixes [`#1743`](https://github.com/isomerpages/isomercms-frontend/pull/1743)
 - 0.64.0 [`#1741`](https://github.com/isomerpages/isomercms-frontend/pull/1741)
-- fix(preview): update overflow behaviour [`#1742`](https://github.com/isomerpages/isomercms-frontend/pull/1742)
 
 #### [v0.64.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.63.2...v0.64.0)
 
 > 12 December 2023
 
+- fix(preview): update overflow behaviour [`#1742`](https://github.com/isomerpages/isomercms-frontend/pull/1742)
 - IS-807 Fixed duplicating issue when setting hyperlink & alt text for image in RTE [`#1738`](https://github.com/isomerpages/isomercms-frontend/pull/1738)
 - refactor(legacy/markdown-editpae): update width [`#1739`](https://github.com/isomerpages/isomercms-frontend/pull/1739)
 - IS-712 Fixed image resizing issue in RTE [`#1736`](https://github.com/isomerpages/isomercms-frontend/pull/1736)

package.json

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

public/index.html

@@ -7,13 +7,13 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Rapidly build & launch informational sites"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css"
       rel="stylesheet"
     />
-    <link rel="apple-touch-icon" href="logo192.png" />
+    <link rel="apple-touch-icon" href="img/favicon.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

public/manifest.json

@@ -1,19 +1,19 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "IsomerCMS",
+  "name": "IsomerCMS",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "img/favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "img/favicon.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "img/favicon.png",
       "type": "image/png",
       "sizes": "512x512"
     }

src/components/CollaboratorModal/components/MainSubmodal.tsx

@@ -8,7 +8,6 @@ import {
   Divider,
   FormControl,
   Input,
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalProps,
@@ -29,6 +28,8 @@ import { FormProvider, useForm } from "react-hook-form"
 import { BiTrash } from "react-icons/bi"
 import { useParams } from "react-router-dom"
 
+import { Modal } from "components/Modal"
+
 import { useLoginContext } from "contexts/LoginContext"
 
 import * as CollaboratorHooks from "hooks/collaboratorHooks"

src/components/CollaboratorModal/components/RemoveCollaboratorSubmodal.tsx

@@ -5,12 +5,13 @@ import {
   Stack,
   ModalProps,
   ModalOverlay,
-  Modal,
   ModalContent,
 } from "@chakra-ui/react"
 import { Button, ModalCloseButton } from "@opengovsg/design-system-react"
 import { useParams } from "react-router-dom"
 
+import { Modal } from "components/Modal"
+
 import { useLoginContext } from "contexts/LoginContext"
 
 import { useDeleteCollaboratorHook } from "hooks/collaboratorHooks"

src/components/CreateMediaFolderModal/CreateMediaFolderModal.tsx

@@ -3,7 +3,6 @@ import {
   Center,
   FormControl,
   HStack,
-  Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
@@ -31,6 +30,7 @@ import { useRouteMatch } from "react-router-dom"
 
 import { DirectorySettingsSchema } from "components/DirectorySettingsModal"
 import { ImagePreviewCard } from "components/ImagePreviewCard"
+import { Modal } from "components/Modal"
 
 import { MEDIA_PAGINATION_SIZE } from "constants/media"
 

src/components/DeleteMediaModal/DeleteMediaModal.tsx

@@ -2,7 +2,6 @@ import {
   Box,
   HStack,
   Icon,
-  Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
@@ -25,6 +24,8 @@ import {
 import { useState } from "react"
 import { BiImage } from "react-icons/bi"
 
+import { Modal } from "components/Modal"
+
 import { MediaLabels, SelectedMediaDto } from "types/media"
 import { getReadableFileSize } from "utils"
 

src/components/EditorCardsDrawer/EditorCardItem.tsx

@@ -2,7 +2,6 @@ import {
   Box,
   FormControl,
   HStack,
-  Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
@@ -27,6 +26,7 @@ import { UseFormReturn } from "react-hook-form"
 import { Editable } from "components/Editable"
 import { FormContext } from "components/Form"
 import FormFieldMedia from "components/FormFieldMedia"
+import { Modal } from "components/Modal"
 
 import { TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT } from "constants/tiptap"
 
@@ -196,25 +196,34 @@ export const EditorCardItem = ({
           </FormControl>
 
           {/* Card link URL */}
-          <FormControl isRequired isInvalid={!!errors.cards?.[index]?.linkUrl}>
+          <FormControl isInvalid={!!errors.cards?.[index]?.linkUrl}>
             <FormLabel mb="0.75rem">Link URL</FormLabel>
             <Input
               type="text"
               placeholder="Insert /page-url or https://"
-              {...methods.register(`cards.${index}.linkUrl`, { onChange })}
+              {...methods.register(`cards.${index}.linkUrl`, {
+                onChange,
+                onBlur: () => methods.trigger(),
+              })}
             />
             <FormErrorMessage>
               {errors.cards?.[index]?.linkUrl?.message}
             </FormErrorMessage>
           </FormControl>
 
           {/* Card link text */}
-          <FormControl isRequired isInvalid={!!errors.cards?.[index]?.linkText}>
+          <FormControl
+            isRequired={methods.watch(`cards.${index}.linkUrl`)?.length > 0}
+            isInvalid={!!errors.cards?.[index]?.linkText}
+          >
             <FormLabel mb="0.75rem">Link text</FormLabel>
             <Input
               type="text"
               placeholder="Enter text to be displayed for the link"
-              {...methods.register(`cards.${index}.linkText`, { onChange })}
+              {...methods.register(`cards.${index}.linkText`, {
+                onChange,
+                onBlur: () => methods.trigger(),
+              })}
             />
             <FormErrorMessage>
               {errors.cards?.[index]?.linkText?.message}

src/components/EditorCardsDrawer/EditorCardsDrawer.tsx

@@ -34,6 +34,25 @@ import { LINK_URL_REGEX } from "utils"
 
 import { EditorCardItem } from "./EditorCardItem"
 
+const editorCardsInfoBasicShape = {
+  title: Yup.string().required("Title is required"),
+  description: Yup.string().max(
+    TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT,
+    `Description cannot exceed ${TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT} characters`
+  ),
+  linkUrl: Yup.string().matches(
+    new RegExp(LINK_URL_REGEX),
+    "Please enter a valid link URL"
+  ),
+  linkText: Yup.string().when("linkUrl", {
+    is: (value: string) => value.length > 0,
+    then: Yup.string().required(
+      "Link text is required when link URL is present"
+    ),
+    otherwise: Yup.string(),
+  }),
+}
+
 const editorCardsInfoSchema = Yup.object().shape({
   isDisplayImage: Yup.boolean(),
   cards: Yup.array()
@@ -43,34 +62,12 @@ const editorCardsInfoSchema = Yup.object().shape({
         Yup.object().shape({
           image: Yup.string().required("An image is required"),
           altText: Yup.string().required("Alt text is required"),
-          title: Yup.string().required("Title is required"),
-          description: Yup.string().max(
-            TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT,
-            `Description cannot exceed ${TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT} characters`
-          ),
-          linkUrl: Yup.string()
-            .required("Link URL is required")
-            .matches(
-              new RegExp(LINK_URL_REGEX),
-              "Please enter a valid link URL"
-            ),
-          linkText: Yup.string().required("Link text is required"),
+          ...editorCardsInfoBasicShape,
         })
       ),
       otherwise: Yup.array().of(
         Yup.object().shape({
-          title: Yup.string().required("Title is required"),
-          description: Yup.string().max(
-            TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT,
-            `Description cannot exceed ${TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT} characters`
-          ),
-          linkUrl: Yup.string()
-            .required("Link URL is required")
-            .matches(
-              new RegExp(LINK_URL_REGEX),
-              "Please enter a valid link URL"
-            ),
-          linkText: Yup.string().required("Link text is required"),
+          ...editorCardsInfoBasicShape,
         })
       ),
     })

src/components/EditorDrawerCloseWarningModal/EditorDrawerCloseWarningModal.tsx

@@ -1,6 +1,5 @@
 import {
   HStack,
-  Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
@@ -10,6 +9,8 @@ import {
 } from "@chakra-ui/react"
 import { Button, ModalCloseButton } from "@opengovsg/design-system-react"
 
+import { Modal } from "components/Modal"
+
 interface EditorDrawerCloseWarningModalProps {
   name: string
   isOpen: boolean

src/components/EditorEmbedModal/EditorEmbedModal.tsx

@@ -1,7 +1,6 @@
 import {
   FormControl,
   HStack,
-  Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
@@ -22,6 +21,8 @@ import { useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import * as Yup from "yup"
 
+import { Modal } from "components/Modal"
+
 import { useCspHook } from "hooks/settingsHooks"
 
 import { isEmbedCodeValid } from "utils/allowedHTML"

src/components/FeedbackModal/FeedbackModal.tsx

@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -19,6 +18,7 @@ import {
 import { useState } from "react"
 import { useForm } from "react-hook-form"
 
+import { Modal } from "components/Modal"
 import { Rating } from "components/Rating/Rating"
 
 import { useLoginContext } from "contexts/LoginContext"

src/components/Header/ContactModal/ContactVerificationModal.tsx

@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalBody,
   ModalContent,
   ModalHeader,
@@ -9,6 +8,8 @@ import {
 import { ModalCloseButton } from "@opengovsg/design-system-react"
 import { useState } from "react"
 
+import { Modal } from "components/Modal"
+
 import { useLoginContext } from "contexts/LoginContext"
 
 import { useUpdateContact, useVerifyContact } from "hooks/miscHooks"

src/components/HyperlinkModal.jsx

@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -16,6 +15,7 @@ import PropTypes from "prop-types"
 import { useState } from "react"
 
 import FormField from "components/FormField"
+import { Modal } from "components/Modal"
 
 import FormContext from "./Form/FormContext"
 import FormTitle from "./Form/FormTitle"

src/components/MediaCreationModal/MediaCreationModal.tsx

@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -23,6 +22,7 @@ import { FileRejection } from "react-dropzone"
 import { BiCheckCircle, BiSolidErrorCircle } from "react-icons/bi"
 
 import { Attachment } from "components/Attachment"
+import { Modal } from "components/Modal"
 
 import { useCreateMultipleMedia } from "hooks/mediaHooks/useCreateMultipleMedia"
 

src/components/Modal/Modal.tsx

@@ -0,0 +1,10 @@
+import { Modal as ChakraModal, ModalProps } from "@chakra-ui/react"
+
+/**
+ * NOTE: We are wrapping the Modal component from Chakra UI by enforcing the
+ * motion preset to be "none" by default. This is because having animations
+ * makes the CMS appear very slow on GSIBs.
+ */
+export const Modal = ({ motionPreset, ...rest }: ModalProps) => {
+  return <ChakraModal motionPreset={motionPreset || "none"} {...rest} />
+}

src/components/Modal/index.ts

@@ -0,0 +1 @@
+export * from "./Modal"

src/components/MoveMediaModal/MoveMediaModal.tsx

@@ -2,7 +2,6 @@ import {
   Box,
   HStack,
   Icon,
-  Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
@@ -25,6 +24,7 @@ import { UseMutateFunction } from "react-query"
 import { useParams } from "react-router-dom"
 
 import { Breadcrumbs } from "components/Breadcrumbs"
+import { Modal } from "components/Modal"
 import { DirMenuItem, FileMenuItem } from "components/move/MoveMenuItem"
 
 import {