Wired up Unsplash integration to Admin X (#17727)

closes https://github.com/TryGhost/Product/issues/3741
refs https://github.com/TryGhost/Product/issues/3729

- my first commit with some Admin X stuff! 🕺🏻
- Wired up the API to the Unsplash integration modal

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at da09dd4</samp>

This pull request adds a toggle to the Unsplash modal in the advanced
settings to enable or disable the Unsplash integration. It also updates
the settings API hook to include the Unsplash setting in the query.

apps/admin-x-settings/src/components/settings/advanced/integrations/UnsplashModal.tsx

@@ -3,19 +3,38 @@ import IntegrationHeader from './IntegrationHeader';
 import Modal from '../../../../admin-x-ds/global/modal/Modal';
 import NiceModal from '@ebay/nice-modal-react';
 import Toggle from '../../../../admin-x-ds/global/form/Toggle';
+import useRouting from '../../../../hooks/useRouting';
 import {ReactComponent as Icon} from '../../../../assets/icons/unsplash.svg';
+import {Setting, getSettingValues, useEditSettings} from '../../../../api/settings';
+import {useGlobalData} from '../../../providers/GlobalDataProvider';
 
 const UnsplashModal = NiceModal.create(() => {
+    const {updateRoute} = useRouting();
     const modal = NiceModal.useModal();
+    const {settings} = useGlobalData();
+    const [unsplashEnabled] = getSettingValues<boolean>(settings, ['unsplash']);
+    const {mutateAsync: editSettings} = useEditSettings();
+
+    const handleToggleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const updates: Setting[] = [
+            {key: 'unsplash', value: (e.target.checked)}
+        ];
+        await editSettings(updates);
+    };
 
     return (
         <Modal
+            afterClose={() => {
+                updateRoute('integrations');
+            }}
             cancelLabel=''
             okColor='black'
             okLabel='Close'
+            testId='unsplash-modal'
             title=''
             onOk={() => {
                 modal.remove();
+                updateRoute('integrations');
             }}
         >
             <IntegrationHeader
@@ -26,9 +45,11 @@ const UnsplashModal = NiceModal.create(() => {
             <div className='mt-7'>
                 <Form marginBottom={false} grouped>
                     <Toggle
+                        checked={unsplashEnabled}
                         direction='rtl'
                         hint={<>Enable <a className='text-green' href="https://unsplash.com" rel="noopener noreferrer" target="_blank">Unsplash</a> image integration for your posts</>}
                         label='Enable Unsplash'
+                        onChange={handleToggleChange}
                     />
                 </Form>
             </div>
@@ -36,4 +57,4 @@ const UnsplashModal = NiceModal.create(() => {
     );
 });
 
-export default UnsplashModal;
+export default UnsplashModal;

apps/admin-x-settings/test/e2e/advanced/integrations/unsplash.test.ts

@@ -0,0 +1,29 @@
+import {expect, test} from '@playwright/test';
+import {globalDataRequests, mockApi, updatedSettingsResponse} from '../../../utils/e2e';
+
+test.describe('Unsplash integration', async () => {
+    test('Supports toggling unsplash integration', async ({page}) => {
+        const {lastApiRequests} = await mockApi({page, requests: {
+            ...globalDataRequests,
+            editSettings: {method: 'PUT', path: '/settings/', response: updatedSettingsResponse([
+                {key: 'unsplash', value: false}
+            ])}
+        }});
+
+        await page.goto('/');
+        const section = page.getByTestId('integrations');
+        const unsplashElement = section.getByText('Unsplash').last();
+        await unsplashElement.hover();
+        await page.getByRole('button', {name: 'Configure'}).click();
+        const unsplashModal = page.getByTestId('unsplash-modal');
+        
+        const unsplashToggle = unsplashModal.getByRole('switch');
+        await unsplashToggle.click();
+
+        expect(lastApiRequests.editSettings?.body).toEqual({
+            settings: [
+                {key: 'unsplash', value: false}
+            ]
+        });
+    });
+});