Merge remote-tracking branch 'upstream/main' into cache-members-content

* upstream/main: (32 commits)
  Update dependency i18next to v23.10.1
  Fixed udpated banner z-index (#19822)
  Update dependency jose to v4.15.5
  Update dependency express to v4.18.3
  v5.80.1
  Fixed tiers paywall selecting all paid tiers (#19817)
  🐛 Fixed free tier showing in the tiers-only paywall in posts (#19807)
  Fixed tiers paywall selecting all paid tiers (#19817)
  🐛 Fixed free tier showing in the tiers-only paywall in posts (#19807)
  Fix a French translation error in portal.json (#19803)
  Updated test to check for Unsplash button in Admin (#19814)
  Fixed button spacing in Portal unsubscribe popup footer (#19815)
  Update dependency terser to v5.29.1
  Released Portal v2.37.5 (#19812)
  Update dependency terser to v5.29.0
  🎨 Improved lazy-loading of comments data (#19809)
  Fixed various Unsplash design bugs (#19806)
  🎨 Improved lazy-loading of comments data (#19809)
  🐛 Fixed unexpected conversion of single-quoted attributes in HTML cards (#19727)
  Fixed various Unsplash design bugs (#19806)
  ...

apps/admin-x-design-system/src/global/form/ImageUpload.tsx

@@ -174,7 +174,7 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
             <div className={`${buttonContainerClassName} ${unsplashEnabled ? 'relative' : ''}`}>
                 {
                     unsplashEnabled &&
-                        <button className={unsplashButtonClassName} type='button' onClick={openUnsplash}>
+                        <button className={unsplashButtonClassName} data-testid="toggle-unsplash-button" type='button' onClick={openUnsplash}>
                             {unsplashButtonContent}
                         </button>
                 }

apps/admin-x-settings/src/MainContent.tsx

@@ -11,7 +11,7 @@ import {useRouting} from '@tryghost/admin-x-framework/routing';
 
 const Page: React.FC<{children: ReactNode}> = ({children}) => {
     return <>
-        <div className='sticky top-0 z-30 bg-white px-[5vmin] py-4 dark:bg-grey-975 tablet:fixed tablet:bg-transparent tablet:px-6 dark:tablet:bg-transparent xl:p-12'>
+        <div className='sticky top-0 z-30 bg-white px-[5vmin] py-4 dark:bg-grey-975 tablet:fixed tablet:bg-transparent tablet:px-6 dark:tablet:bg-transparent xl:p-12' id="done-button-container">
             <ExitSettingsButton />
         </div>
         <div className="w-full dark:bg-grey-975 tablet:fixed tablet:left-0 tablet:top-0 tablet:flex tablet:h-full" id="admin-x-settings-content">
@@ -53,7 +53,7 @@ const MainContent: React.FC = () => {
     return (
         <Page>
             {loadingModal && <div className={`fixed inset-0 z-40 h-[calc(100vh-55px)] w-[100vw] tablet:h-[100vh] ${topLevelBackdropClasses}`} />}
-            <div className="no-scrollbar fixed inset-x-0 top-[52px] z-[999] flex-1 basis-[320px] bg-white px-8 pb-8 dark:bg-grey-975 tablet:relative tablet:inset-x-auto tablet:top-auto tablet:h-full tablet:overflow-y-scroll tablet:bg-grey-50 tablet:pb-0 dark:tablet:bg-black" id="admin-x-settings-sidebar-scroller">
+            <div className="no-scrollbar fixed inset-x-0 top-[52px] z-[35] flex-1 basis-[320px] bg-white px-8 pb-8 dark:bg-grey-975 tablet:relative tablet:inset-x-auto tablet:top-auto tablet:h-full tablet:overflow-y-scroll tablet:bg-grey-50 tablet:pb-0 dark:tablet:bg-black" id="admin-x-settings-sidebar-scroller">
                 <div className="relative w-full">
                     <Sidebar />
                 </div>

apps/admin-x-settings/src/components/ExitSettingsButton.tsx

@@ -9,7 +9,7 @@ const ExitSettingsButton: React.FC = () => {
     };
 
     return (
-        <Button data-testid="exit-settings" label='&larr; Done' link={true} onClick={() => confirmIfDirty(isDirty, navigateAway)} />
+        <Button data-testid="exit-settings" id="done-button" label='&larr; Done' link={true} onClick={() => confirmIfDirty(isDirty, navigateAway)} />
     );
 };
 

apps/admin-x-settings/src/components/settings/general/Metadata.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import TopLevelGroup from '../../TopLevelGroup';
 import useSettingGroup from '../../../hooks/useSettingGroup';
-import {GoogleLogo, Heading, Icon, SettingGroupContent, TextField, withErrorBoundary} from '@tryghost/admin-x-design-system';
+import {GoogleLogo, Icon, SettingGroupContent, TextField, withErrorBoundary} from '@tryghost/admin-x-design-system';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
 
 interface SearchEnginePreviewProps {
@@ -22,32 +22,35 @@ const SearchEnginePreview: React.FC<SearchEnginePreviewProps> = ({
 
     return (
         <div>
-            <Heading grey={true} level={6}>Search engine result preview</Heading>
-            <div className='mt-3 flex items-center'>
-                <div className='basis-'>
-                    <GoogleLogo className='mr-7 h-7' />
-                </div>
-                <div className='grow'>
-                    <div className='flex w-full items-center justify-end rounded-full bg-white p-3 px-4 shadow dark:bg-grey-900'>
-                        <Icon className='stroke-[2px] text-blue-600' name='magnifying-glass' size='sm' />
+            <div className='-mx-5 -mb-5 overflow-hidden rounded-b-xl bg-grey-50 px-5 pt-5 dark:bg-grey-950 md:-mx-7 md:-mb-7 md:px-7 md:pt-7'>
+                <div className='rounded-t-sm bg-white px-5 py-3 shadow-lg dark:bg-grey-975'>
+                    <div className='mt-3 flex items-center'>
+                        <div className='basis-'>
+                            <GoogleLogo className='mr-7 h-7' />
+                        </div>
+                        <div className='grow'>
+                            <div className='flex w-full items-center justify-end rounded-full bg-white p-3 px-4 shadow dark:bg-grey-900'>
+                                <Icon className='stroke-[2px] text-blue-600' name='magnifying-glass' size='sm' />
+                            </div>
+                        </div>
+                    </div>
+                    <div className='mt-4 flex items-center gap-2 border-t border-grey-200 pt-4 dark:border-grey-900'>
+                        <div className='flex h-7 w-7 items-center justify-center rounded-full bg-grey-200 dark:bg-grey-700' style={{
+                            backgroundImage: icon ? `url(${icon})` : 'none',
+                            backgroundSize: 'contain'
+                        }}>
+                        </div>
+                        <div className='flex flex-col text-sm'>
+                            <span>{siteDomain}</span>
+                            <span className='-mt-0.5 inline-block text-xs text-grey-600'>{siteUrl}</span>
+                        </div>
+                    </div>
+                    <div className='mt-1 flex flex-col'>
+                        <span className='text-lg text-[#1a0dab] dark:text-blue'>{title}</span>
+                        <span className='text-sm text-grey-900 dark:text-grey-700'>{description}</span>
                     </div>
                 </div>
             </div>
-            <div className='mt-4 flex items-center gap-2 border-t border-grey-200 pt-4 dark:border-grey-900'>
-                <div className='flex h-7 w-7 items-center justify-center rounded-full bg-grey-200 dark:bg-grey-700' style={{
-                    backgroundImage: icon ? `url(${icon})` : 'none',
-                    backgroundSize: 'contain'
-                }}>
-                </div>
-                <div className='flex flex-col text-sm'>
-                    <span>{siteDomain}</span>
-                    <span className='-mt-0.5 inline-block text-xs text-grey-600'>{siteUrl}</span>
-                </div>
-            </div>
-            <div className='mt-1 flex flex-col'>
-                <span className='text-lg text-[#1a0dab] dark:text-blue'>{title}</span>
-                <span className='text-sm text-grey-900 dark:text-grey-700'>{description}</span>
-            </div>
         </div>
     );
 };
@@ -108,14 +111,18 @@ const Metadata: React.FC<{ keywords: string[] }> = ({keywords}) => {
             onEditingChange={handleEditingChange}
             onSave={handleSave}
         >
-            {isEditing &&
+            {!isEditing &&
             <>
                 <SearchEnginePreview
                     description={metaDescription ? metaDescription : siteDescription}
                     icon={siteData?.icon}
                     title={metaTitle ? metaTitle : siteTitle}
                     url={siteData?.url}
                 />
+            </>
+            }
+            {isEditing &&
+            <>
                 {inputFields}
             </>
             }

apps/admin-x-settings/src/components/settings/site/AnnouncementBarModal.tsx

@@ -1,8 +1,9 @@
 import AnnouncementBarPreview from './announcementBar/AnnouncementBarPreview';
 import NiceModal from '@ebay/nice-modal-react';
-import React, {useCallback, useState} from 'react';
+import React, {useRef, useState} from 'react';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import {CheckboxGroup, ColorIndicator, Form, HtmlField, PreviewModalContent, Tab, showToast} from '@tryghost/admin-x-design-system';
+import {debounce} from '@tryghost/admin-x-design-system';
 import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
 import {useBrowsePosts} from '@tryghost/admin-x-framework/api/posts';
@@ -118,7 +119,6 @@ const AnnouncementBarModal: React.FC = () => {
     const visibilitySettings = JSON.parse(announcementVisibility?.toString() || '[]') as string[];
     const {updateRoute} = useRouting();
     const [selectedPreviewTab, setSelectedPreviewTab] = useState('homepage');
-    const [announcementContentState, setAnnouncementContentState] = useState(announcementContent);
 
     const toggleColorSwatch = (e: string | null) => {
         updateSetting('announcement_background', e);
@@ -134,28 +134,24 @@ const AnnouncementBarModal: React.FC = () => {
         updateSetting('announcement_visibility', JSON.stringify(visibilitySettings));
     };
 
-    const announcementTextHandler = useCallback((e:string) => {
-        setAnnouncementContentState(e);
-    }, []);
+    const updateAnnouncementDebouncedRef = useRef(
+        debounce((value: string) => {
+            updateSetting('announcement_content', value);
+        }, 500)
+    );
 
     const sidebar = <Sidebar
         accentColor={accentColor}
         announcementBackgroundColor={announcementBackgroundColor}
         announcementContent={announcementContent}
         announcementTextHandler={(e) => {
-            announcementTextHandler(e);
+            updateAnnouncementDebouncedRef.current(e);
         }}
         paidMembersEnabled={paidMembersEnabled}
         toggleColorSwatch={toggleColorSwatch}
         toggleVisibility={toggleVisibility}
         visibility={announcementVisibility as string[]}
-        onBlur={() => {
-            if (announcementContentState) {
-                updateSetting('announcement_content', announcementContentState);
-            } else {
-                updateSetting('announcement_content', null);
-            }
-        }}
+        onBlur={() => {}}
     />;
 
     const {data: {posts: [latestPost]} = {posts: []}} = useBrowsePosts({

apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx

@@ -129,10 +129,10 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key:
                                 })
                             }
                         }
-                        unsplashButtonClassName='!top-1 !right-1'
+                        unsplashButtonClassName='!top-1 !right-1 z-50'
                         unsplashEnabled={unsplashEnabled}
                         onDelete={() => updateSetting('cover_image', null)}
-                        onUpload={async (file) => {
+                        onUpload={async (file: any) => {
                             try {
                                 updateSetting('cover_image', getImageUrl(await uploadImage({file})));
                             } catch (e) {

apps/admin-x-settings/src/styles/index.css

@@ -1 +1,21 @@
 @import '@tryghost/admin-x-design-system/styles.css';
+
+/* Only settings related overrides */
+.gh-update-banner ~ * #admin-x-settings-content {
+    top: 48px;
+}
+
+.gh-update-banner ~ * #done-button-container {
+    top: 48px;
+}
+
+@media (max-width: 860px) {
+    .gh-update-banner ~ * #admin-x-settings-sidebar-scroller {
+        position: sticky;
+        margin-bottom: -60px;
+    }
+
+    .gh-update-banner ~ * #done-button-container {
+        top: 0;
+    }
+}

apps/admin-x-settings/src/unsplash/ui/UnsplashButton.tsx

@@ -24,11 +24,11 @@ const UnsplashButton: React.FC<UnsplashButtonProps> = ({icon, label, ...props})
 
     return (
         <a
-            className="flex h-8 shrink-0 cursor-pointer items-center rounded-md bg-white px-3 py-2 font-sans text-sm font-medium leading-6 text-grey-700 opacity-90 transition-all ease-in-out first-of-type:mr-3 hover:opacity-100"
+            className="flex h-8 shrink-0 cursor-pointer items-center rounded-md bg-white px-3 py-2 font-sans text-sm font-medium leading-6 text-grey-700 opacity-90 transition-all ease-in-out hover:opacity-100"
             onClick={e => e.stopPropagation()}
             {...props}
         >
-            {icon && Icon && <Icon className={`h-4 w-4 fill-red stroke-[3px] ${label && 'mr-1'}`} />}
+            {icon && Icon && <Icon className={`h-4 w-4 ${icon === 'heart' ? 'fill-red' : ''} stroke-[3px] ${label && 'mr-1'}`} />}
             {label && <span>{label}</span>}
         </a>
     );

apps/admin-x-settings/src/unsplash/ui/UnsplashImage.tsx

@@ -31,38 +31,38 @@ const UnsplashImage: FC<UnsplashImageProps> = ({payload, srcUrl, links, likes, u
     };
 
     return (
-        <div 
+        <div
             className={`relative mb-6 block bg-grey-100 ${zoomed ? 'h-full w-[max-content] cursor-zoom-out' : 'w-full cursor-zoom-in'}`}
-            data-kg-unsplash-gallery-item 
+            data-kg-unsplash-gallery-item
             onClick={handleClick}>
             <img
                 alt={alt}
-                className={`${zoomed ? 'h-full w-auto object-contain' : ''}`}
+                className={`${zoomed ? 'h-full w-auto object-contain' : 'block h-auto'}`}
                 height={height}
                 loading='lazy'
                 src={srcUrl}
                 width={width}
-                data-kg-unsplash-gallery-img 
+                data-kg-unsplash-gallery-img
             />
             <div className="absolute inset-0 flex flex-col justify-between bg-gradient-to-b from-black/5 via-black/5 to-black/30 p-5 opacity-0 transition-all ease-in-out hover:opacity-100">
-                <div className="flex items-center justify-end">
+                <div className="flex items-center justify-end gap-3">
                     <UnsplashButton
                         data-kg-button="unsplash-like"
-                        href={`${links.html}/?utm_source=ghost&amp;utm_medium=referral&amp;utm_campaign=api-credit`} 
-                        icon="heart" 
-                        label={likes.toString()} 
-                        rel="noopener noreferrer" 
-                        target="_blank" 
+                        href={`${links.html}/?utm_source=ghost&amp;utm_medium=referral&amp;utm_campaign=api-credit`}
+                        icon="heart"
+                        label={likes.toString()}
+                        rel="noopener noreferrer"
+                        target="_blank"
                     />
                     <UnsplashButton
                         data-kg-button="unsplash-download"
-                        href={`${links.download}/?utm_source=ghost&amp;utm_medium=referral&amp;utm_campaign=api-credit&amp;force=true`} 
-                        icon="download" 
+                        href={`${links.download}/?utm_source=ghost&amp;utm_medium=referral&amp;utm_campaign=api-credit&amp;force=true`}
+                        icon="download"
                     />
                 </div>
                 <div className="flex items-center justify-between">
                     <div className="flex items-center">
-                        <img alt="author" className="mr-2 h-8 w-8 rounded-full" src={user.profile_image.small} />
+                        <img alt="author" className="mr-2 h-8 w-8 rounded-full" src={user.profile_image.medium} />
                         <div className="mr-2 truncate font-sans text-sm font-medium text-white">{user.name}</div>
                     </div>
                     <UnsplashButton label="Insert image" data-kg-unsplash-insert-button onClick={(e) => {

apps/admin-x-settings/src/unsplash/ui/UnsplashSelector.tsx

@@ -29,7 +29,7 @@ const UnsplashSelector: FunctionComponent<UnsplashSelectorProps> = ({closeModal,
                         </h1>
                         <div className="relative w-full max-w-sm">
                             <SearchIcon className="absolute left-4 top-1/2 h-4 w-4 -translate-y-2 text-grey-700" />
-                            <input className="h-10 w-full rounded-full border border-grey-300 pl-10 pr-8 font-sans text-md font-normal text-black focus:border-grey-400 focus-visible:outline-none" placeholder="Search free high-resolution photos" autoFocus data-kg-unsplash-search onChange={handleSearch} />
+                            <input className="h-10 w-full rounded-full border border-solid border-grey-300 pl-10 pr-8 font-sans text-md font-normal text-black focus:border-grey-400 focus-visible:outline-none" placeholder="Search free high-resolution photos" autoFocus data-kg-unsplash-search onChange={handleSearch} />
                         </div>
                     </header>
                     {children}

apps/admin-x-settings/src/utils/IframeBuffering.tsx

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/react';
 import React, {useEffect, useRef, useState} from 'react';
 
 type IframeBufferingProps = {
@@ -62,7 +63,15 @@ const IframeBuffering: React.FC<IframeBufferingProps> = ({generateContent, class
         const iframe = iframes[visibleIframeIndex].current;
 
         if (iframe) {
-            iframe.contentWindow?.scrollTo(0, scrollPosition);
+            // refs https://ghost-foundation.sentry.io/issues/5024564293/
+            // Customer reported that code they injected caused Settings to crash.
+            // According to Sentry this the line that caused the crash.
+            // We are adding a try catch block to attempt to catch the error for further investigation and prevent the crash.
+            try {
+                iframe.contentWindow?.scrollTo(0, scrollPosition);
+            } catch (e) {
+                Sentry.captureException(e);
+            }
         }
     }, [scrollPosition, visibleIframeIndex, iframes]);
 

apps/admin-x-settings/test/acceptance/site/design.test.ts

@@ -129,6 +129,7 @@ test.describe('Design settings', async () => {
         await expect(modal.frameLocator('[data-testid="theme-preview"] iframe[data-visible=true]').getByText('homepage preview')).toHaveCount(1);
 
         await modal.getByLabel('Site description').fill('new description');
+        await expect(modal.getByTestId('toggle-unsplash-button')).toBeVisible();
         // set timeout of 500ms to wait for the debounce
         await page.waitForTimeout(1000);
         await modal.getByRole('button', {name: 'Save'}).click();

apps/comments-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/comments-ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "license": "MIT",
   "repository": "[email protected]:TryGhost/comments-ui.git",
   "author": "Ghost Foundation",

apps/comments-ui/src/App.tsx

@@ -192,7 +192,7 @@ const App: React.FC<AppProps> = ({scriptTag}) => {
             <CommentsFrame ref={iframeRef}>
                 <ContentBox done={done} />
             </CommentsFrame>
-            <AuthFrame adminUrl={options.adminUrl} onLoad={initAdminAuth}/>
+            {state.comments.length > 0 ? <AuthFrame adminUrl={options.adminUrl} onLoad={initAdminAuth}/> : null}
             <PopupBox />
         </AppContext.Provider>
     );