🐛 Fixed Unsplash integration not loading when selecting Publication Cover image (#26282)

ref
https://linear.app/ghost/issue/ONC-1453/unsplash-integration-not-loading

## Problem

In Admin Settings > Design and Branding, the unsplash selector for the
Publication Cover isn't working properly. Rather than showing Unsplash
images, it's just showing a blank white screen on the Unsplash modal.
the Unsplash selector on the main Post editor is working fine.

## Diagnosis

When loading the Unsplash selector for Publication Cover, the request to
Unsplash returns a 401: Unauthorized error. Upon further inspection, the
new React admin wrapper in apps/admin is supplying blank values for the
unsplash configuration.

## Fix

Supply the same unsplash configuration in apps/admin that we do in Ember
admin.

Author: cmraible

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

@@ -127,7 +127,7 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
 
     if (imageURL) {
         let image = (
-            <div className={imageContainerClassName} style={{
+            <div className={imageContainerClassName} data-testid="image-upload-container" style={{
                 width: (unstyled ? '' : width),
                 height: (unstyled ? '' : height)
             }}>
@@ -142,7 +142,7 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
                         {editButtonContent}
                     </button>
                     }
-                    <button className={deleteButtonClassName} type='button' onClick={onDelete}>
+                    <button className={deleteButtonClassName} data-testid="image-delete-button" type='button' onClick={onDelete}>
                         {deleteButtonContent}
                     </button>
                 </div>

apps/admin-x-settings/src/components/settings/site/design-and-branding/global-settings.tsx

@@ -255,7 +255,7 @@ const GlobalSettings: React.FC<{ values: GlobalSettingValues, updateSetting: (ke
                         </ImageUpload>
                     </div>
                 </div>
-                <div className='mt-2 flex items-start justify-between'>
+                <div className='mt-2 flex items-start justify-between' data-testid="publication-cover">
                     <div>
                         <div>Publication cover</div>
                         <Hint className='!mt-0 mr-5 max-w-[160px]'>Usually as a large banner image on your index pages</Hint>

apps/admin/src/main.tsx

@@ -15,10 +15,10 @@ const framework = {
         navigateTo(link.route);
     },
     unsplashConfig: {
-        Authorization: "",
-        "Accept-Version": "",
-        "Content-Type": "",
-        "App-Pragma": "",
+        Authorization: "Client-ID 8672af113b0a8573edae3aa3713886265d9bb741d707f6c01a486cde8c278980",
+        "Accept-Version": "v1",
+        "Content-Type": "application/json",
+        "App-Pragma": "no-cache",
         "X-Unsplash-Cache": true,
     },
     sentryDSN: null,

e2e/helpers/pages/admin/settings/sections/design-section.ts

@@ -0,0 +1,38 @@
+import {BasePage} from '@/helpers/pages';
+import {Locator, Page} from '@playwright/test';
+
+export class DesignSection extends BasePage {
+    readonly section: Locator;
+    readonly customizeButton: Locator;
+    readonly designModal: Locator;
+    readonly unsplashButton: Locator;
+    readonly unsplashHeading: Locator;
+    readonly coverImage: Locator;
+
+    constructor(page: Page) {
+        super(page, '/ghost/#/settings');
+
+        this.section = page.getByTestId('design');
+        this.customizeButton = this.section.getByRole('button', {name: 'Customize'});
+        this.designModal = page.getByTestId('design-modal');
+        this.unsplashButton = page.getByTestId('toggle-unsplash-button');
+        this.unsplashHeading = page.getByRole('heading', {name: 'Unsplash', level: 1});
+        this.coverImage = page.getByTestId('publication-cover');
+    }
+
+    async openDesignModal(): Promise<void> {
+        await this.customizeButton.click();
+        await this.designModal.waitFor({state: 'visible'});
+    }
+
+    async deleteCoverImage(): Promise<void> {
+        const imageContainer = this.coverImage.getByTestId('image-upload-container');
+        await imageContainer.hover();
+        await imageContainer.getByTestId('image-delete-button').click();
+    }
+
+    async openUnsplashSelector(): Promise<void> {
+        await this.unsplashButton.click();
+        await this.unsplashHeading.waitFor({state: 'visible'});
+    }
+}

e2e/helpers/pages/admin/settings/sections/index.ts

@@ -1,6 +1,7 @@
 export {PublicationSection} from './publications-section';
 export {LabsSection} from './labs-section';
 export {IntegrationsSection} from './integrations-section';
+export {DesignSection} from './design-section';
 export {MemberWelcomeEmailsSection} from './member-welcome-emails-section';
 export {IntegrationModal, INTEGRATIONS} from './integration-modal';
 export type {IntegrationConfig, IntegrationName} from './integration-modal';

e2e/tests/admin/settings/design.test.ts

@@ -0,0 +1,18 @@
+import {DesignSection} from '@/admin-pages';
+import {expect, test} from '@/helpers/playwright';
+
+test.describe('Ghost Admin - Design & Branding', () => {
+    test.describe('Unsplash Selector', () => {
+        test('unsplash selector loads photos', async ({page}) => {
+            const design = new DesignSection(page);
+
+            await design.goto();
+            await design.openDesignModal();
+            await design.deleteCoverImage();
+            await design.openUnsplashSelector();
+
+            const unsplashPhoto = page.locator('[data-kg-unsplash-gallery-img]');
+            await expect(unsplashPhoto.first()).toBeVisible({timeout: 10000});
+        });
+    });
+});