Merge pull request #1711 from isomerpages/release/0.62.0

* fix(media): allow creating folders in empty folder (#1702) * Chore/update regex (#1703) * chore: update linkedin regex * chore: update twitter and linkedin regex * 0.62.0 --------- Co-authored-by: Alexander Lee <[email protected]>
isomerpages · Nov 28, 2023 · 8769aef · 8769aef
2 parents 2e6906b + 5eda946
commit 8769aef
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,21 +4,30 @@ 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.62.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.61.0...v0.62.0)
+
+- fix(media): fix logic for disabling button in create media folder modal [`#1712`](https://github.com/isomerpages/isomercms-frontend/pull/1712)
+- Chore/update regex [`#1703`](https://github.com/isomerpages/isomercms-frontend/pull/1703)
+- fix(media): allow creating folders in empty folder [`#1702`](https://github.com/isomerpages/isomercms-frontend/pull/1702)
+- 0.61.0 (develop) [`#1700`](https://github.com/isomerpages/isomercms-frontend/pull/1700)
+
 #### [v0.61.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.60.0...v0.61.0)
 
+> 23 November 2023
+
 - 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)
 
 > 21 November 2023
 
+- fix(input): empty input validation [`#1691`](https://github.com/isomerpages/isomercms-frontend/pull/1691)
 - 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)
@@ -95,13 +104,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)
 
-> 25 October 2023
+> 26 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)
@@ -118,16 +127,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)
@@ -141,12 +150,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)
@@ -193,13 +202,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)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.61.0",
+  "version": "0.62.0",
   "private": true,
   "engines": {
     "node": ">=16.0.0"

diff --git a/src/components/CreateMediaFolderModal/CreateMediaFolderModal.tsx b/src/components/CreateMediaFolderModal/CreateMediaFolderModal.tsx
@@ -71,6 +71,7 @@ interface CreateMediaFolderModalProps {
 
 const getButtonLabel = (
   originalSelectedMedia: SelectedMediaDto[],
+  filesCount: number,
   selectedMedia: SelectedMediaDto[],
   mediaLabels: MediaLabels
 ) => {
@@ -80,7 +81,7 @@ const getButtonLabel = (
     pluralMediaLabel,
   } = mediaLabels
 
-  if (originalSelectedMedia.length > 0) {
+  if (originalSelectedMedia.length > 0 || filesCount === 0) {
     return `Create ${singularDirectoryLabel}`
   }
 
@@ -229,7 +230,7 @@ export const CreateMediaFolderModal = ({
                 </FormErrorMessage>
               </FormControl>
 
-              {originalSelectedMedia.length === 0 && (
+              {originalSelectedMedia.length === 0 && files.length !== 0 && (
                 <>
                   <Text as="h5" textStyle="h5" mt="2rem">
                     Select {pluralMediaLabel} to add to this{" "}
@@ -314,7 +315,7 @@ export const CreateMediaFolderModal = ({
                 justifyContent="flex-end"
                 mt="0.5rem"
               >
-                {originalSelectedMedia.length > 0 && (
+                {(originalSelectedMedia.length > 0 || files.length === 0) && (
                   <Button
                     variant="clear"
                     colorScheme="neutral"
@@ -323,7 +324,7 @@ export const CreateMediaFolderModal = ({
                     Cancel
                   </Button>
                 )}
-                {originalSelectedMedia.length === 0 && (
+                {originalSelectedMedia.length === 0 && files.length !== 0 && (
                   <Button
                     variant="clear"
                     colorScheme="neutral"
@@ -354,11 +355,13 @@ export const CreateMediaFolderModal = ({
                     !methods.formState.isDirty ||
                     _.some(methods.formState.errors) ||
                     (originalSelectedMedia.length === 0 &&
+                      files.length !== 0 &&
                       methods.watch("selectedPages").length === 0)
                   }
                 >
                   {getButtonLabel(
                     originalSelectedMedia,
+                    files.length,
                     methods.getValues("selectedPages"),
                     mediaLabels
                   )}

diff --git a/src/layouts/Media/Media.tsx b/src/layouts/Media/Media.tsx
@@ -632,8 +632,7 @@ export const Media = (): JSX.Element => {
                   {directoryLevel < MAX_MEDIA_LEVELS && (
                     <Greyscale isActive={isWriteDisabled}>
                       <Button
-                        as={Link}
-                        to={`${url}/createDirectory`}
+                        onClick={onCreateMediaFolderModalOpen}
                         mt="1rem"
                         variant="clear"
                       >

diff --git a/src/layouts/Settings/SocialMediaSettings.tsx b/src/layouts/Settings/SocialMediaSettings.tsx
@@ -16,18 +16,24 @@ import {
   TIKTOK_REGEX,
   TELEGRAM_REGEX,
   YOUTUBE_REGEX,
+  LINKEDIN_REGEX,
 } from "utils/validators"
 
 import { SiteSettings } from "types/settings"
 
 interface SocialMediaField {
   label: StringKeyOf<SiteSettings["socialMediaContent"]>
   placeholder: string
+  customLabel?: string
 }
 
 const SOCIAL_MEDIA_LABELS: SocialMediaField[] = [
   { label: "facebook", placeholder: "https://www.facebook.com/" },
-  { label: "twitter", placeholder: "https://www.twitter.com/" },
+  {
+    label: "twitter",
+    placeholder: "https://www.twitter.com/",
+    customLabel: "X / Twitter",
+  },
   { label: "youtube", placeholder: "https://www.youtube.com/" },
   { label: "instagram", placeholder: "https://www.instagram.com/" },
   { label: "linkedin", placeholder: "https://sg.linkedin.com/" },
@@ -46,8 +52,9 @@ export const SocialMediaSettings = ({
     <Section id="social-media-fields">
       <SectionHeader label="Social Media" />
       <VStack spacing="1.5rem" align="flex-start" w="50%">
-        {SOCIAL_MEDIA_LABELS.map(({ label, placeholder }) => (
+        {SOCIAL_MEDIA_LABELS.map(({ label, placeholder, customLabel }) => (
           <ValidatedFormInput
+            customLabel={customLabel}
             label={label}
             isError={isError}
             placeholder={placeholder}
@@ -63,11 +70,12 @@ interface ValidatedFormInputProps extends SocialMediaField {
 
 // Helper component for social media as this is the only validated input
 const ValidatedFormInput = ({
+  customLabel,
   label,
   placeholder,
   isError,
 }: ValidatedFormInputProps) => {
-  const displayedLabel = upperFirst(label)
+  const displayedLabel = upperFirst(customLabel || label)
   const { register } = useFormContext()
   const { errors } = useFormState<{
     socialMediaContent: Record<
@@ -107,6 +115,10 @@ const getRegExp = (
       return RegExp(`${URL_REGEX_PREFIX}${TELEGRAM_REGEX}`)
     case "tiktok":
       return RegExp(`${URL_REGEX_PREFIX}${label}${TIKTOK_REGEX}`)
+    case "linkedin":
+      return RegExp(`${URL_REGEX_PREFIX}${label}${LINKEDIN_REGEX}`)
+    case "twitter":
+      return RegExp(`${URL_REGEX_PREFIX}(x|twitter)${URL_REGEX_SUFFIX}`)
     default:
       return RegExp(`${URL_REGEX_PREFIX}${label}${URL_REGEX_SUFFIX}`)
   }

diff --git a/src/utils/validators.js b/src/utils/validators.js
@@ -18,6 +18,8 @@ export const URL_REGEX_SUFFIX = ".com/)([a-zA-Z0-9_-]+([/.])?)+$"
 export const YOUTUBE_REGEX = ".com/(@)?)([a-zA-Z0-9_-]+([/.])?)+$"
 export const TELEGRAM_REGEX = "telegram|t).me/([a-zA-Z0-9_-]+([/.])?)+$"
 export const TIKTOK_REGEX = ".com/@)([a-zA-Z0-9_-]+([/.])?)+$"
+// Linkedin doesn't seem to restrict special characters
+export const LINKEDIN_REGEX = ".com/).+$"
 // Domain name regex (source: https://regexr.com/3au3g and https://stackoverflow.com/a/30007882)
 // 1. The first group (up till the "+") matches each segment of the domain (split by ".")
 //    a. Each segment of the domain must start and end with an alphanumeric character