Wired up Amp integration to AdminX (#17738)

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

- wired up api to the AMP integration on AdminX

---

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

This file adds a modal component to the advanced settings page that
allows users to toggle and customize AMP integration for their site. It
uses the `settings` API and React hooks to handle the modal logic and
state.

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

@@ -4,21 +4,49 @@ import Modal from '../../../../admin-x-ds/global/modal/Modal';
 import NiceModal from '@ebay/nice-modal-react';
 import TextField from '../../../../admin-x-ds/global/form/TextField';
 import Toggle from '../../../../admin-x-ds/global/form/Toggle';
+import useRouting from '../../../../hooks/useRouting';
 import {ReactComponent as Icon} from '../../../../assets/icons/amp.svg';
-import {useState} from 'react';
+import {Setting, getSettingValues, useEditSettings} from '../../../../api/settings';
+import {useEffect, useState} from 'react';
+import {useGlobalData} from '../../../providers/GlobalDataProvider';
 
 const AmpModal = NiceModal.create(() => {
+    const {updateRoute} = useRouting();
+    const {settings} = useGlobalData();
+    const [ampEnabled] = getSettingValues<boolean>(settings, ['amp']);
+    const [ampId] = getSettingValues<string>(settings, ['amp_gtag_id']);
     const modal = NiceModal.useModal();
     const [enabled, setEnabled] = useState(false);
+    const [trackingId, setTrackingId] = useState('');
+    const {mutateAsync: editSettings} = useEditSettings();
+
+    useEffect(() => {
+        setEnabled(ampEnabled || false);
+        setTrackingId(ampId || '');
+    }, [ampEnabled, ampId]);
+
+    const handleSave = async () => {
+        const updates: Setting[] = [
+            {key: 'amp', value: enabled},
+            {key: 'amp_gtag_id', value: trackingId}
+        ];
+        await editSettings(updates);
+    };
 
     return (
         <Modal
+            afterClose={() => {
+                updateRoute('integrations');
+            }}
             cancelLabel=''
             okColor='black'
             okLabel='Save'
+            testId='amp-modal'
             title=''
-            onOk={() => {
+            onOk={async () => {
+                await handleSave();
                 modal.remove();
+                updateRoute('integrations');
             }}
         >
             <IntegrationHeader
@@ -29,8 +57,9 @@ const AmpModal = NiceModal.create(() => {
             <div className='mt-7'>
                 <Form marginBottom={false} title='AMP configuration' grouped>
                     <Toggle
+                        checked={enabled}
                         direction='rtl'
-                        hint={<>Enable Google Accelerated Mobile Pages <strong className='text-red'>[&larr; link to be set]</strong> for your posts</>}
+                        hint={<>Enable <a className='text-green' href="https://amp.dev" rel="noopener noreferrer" target='_blank'>Google Accelerated Mobile Pages</a> for your posts</>}
                         label='Enable AMP'
                         onChange={(e) => {
                             setEnabled(e.target.checked);
@@ -41,6 +70,10 @@ const AmpModal = NiceModal.create(() => {
                             hint='Tracks AMP traffic in Google Analytics'
                             placeholder='UA-XXXXXXX-X'
                             title='Google Analytics Tracking ID'
+                            value={trackingId}
+                            onChange={(e) => {
+                                setTrackingId(e.target.value);
+                            }}
                         />
                     )}
                 </Form>

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

@@ -0,0 +1,35 @@
+import {expect, test} from '@playwright/test';
+import {globalDataRequests, mockApi, updatedSettingsResponse} from '../../../utils/e2e';
+
+test.describe('AMP integration', async () => {
+    test('Supports toggling and filling in AMP integration', async ({page}) => {
+        const {lastApiRequests} = await mockApi({page, requests: {
+            ...globalDataRequests,
+            editSettings: {method: 'PUT', path: '/settings/', response: updatedSettingsResponse([
+                {key: 'amp', value: true},
+                {key: 'amp_gtag_id', value: 'UA-1234567-1'}
+            ])}
+        }});
+
+        await page.goto('/');
+        const section = page.getByTestId('integrations');
+        const ampElement = section.getByText('AMP').last();
+        await ampElement.hover();
+        await page.getByRole('button', {name: 'Configure'}).click();
+        const ampModal = page.getByTestId('amp-modal');
+        
+        const ampToggle = ampModal.getByRole('switch');
+        await ampToggle.click();
+        const input = ampModal.getByRole('textbox');
+        await input.fill('UA-1234567-1');
+
+        await ampModal.getByRole('button', {name: 'Save'}).click();
+
+        expect(lastApiRequests.editSettings?.body).toEqual({
+            settings: [
+                {key: 'amp', value: true},
+                {key: 'amp_gtag_id', value: 'UA-1234567-1'}
+            ]
+        });
+    });
+});