diff --git a/apps/admin-x-settings/src/assets/icons/amp.svg b/apps/admin-x-settings/src/assets/icons/amp.svg deleted file mode 100644 index 6aa9e36e772..00000000000 --- a/apps/admin-x-settings/src/assets/icons/amp.svg +++ /dev/null @@ -1,4 +0,0 @@ - - amp - - \ No newline at end of file diff --git a/apps/admin-x-settings/src/components/providers/SettingsRouter.tsx b/apps/admin-x-settings/src/components/providers/SettingsRouter.tsx index 1eb2c449378..e62dbb67b86 100644 --- a/apps/admin-x-settings/src/components/providers/SettingsRouter.tsx +++ b/apps/admin-x-settings/src/components/providers/SettingsRouter.tsx @@ -21,7 +21,6 @@ export const modalPaths: {[key: string]: ModalName} = { 'history/view/:user': 'HistoryModal', 'integrations/zapier': 'ZapierModal', 'integrations/slack': 'SlackModal', - 'integrations/amp': 'AmpModal', 'integrations/unsplash': 'UnsplashModal', 'integrations/firstpromoter': 'FirstpromoterModal', 'integrations/pintura': 'PinturaModal', diff --git a/apps/admin-x-settings/src/components/providers/routing/modals.tsx b/apps/admin-x-settings/src/components/providers/routing/modals.tsx index 57845003a39..f2cedc4d72c 100644 --- a/apps/admin-x-settings/src/components/providers/routing/modals.tsx +++ b/apps/admin-x-settings/src/components/providers/routing/modals.tsx @@ -6,7 +6,6 @@ import AddIntegrationModal from '../../settings/advanced/integrations/AddIntegra import AddNewsletterModal from '../../settings/email/newsletters/AddNewsletterModal'; // import AddOfferModal from '../../settings/growth/offers/AddOfferModal'; import AddRecommendationModal from '../../settings/growth/recommendations/AddRecommendationModal'; -import AmpModal from '../../settings/advanced/integrations/AmpModal'; import AnnouncementBarModal from '../../settings/site/AnnouncementBarModal'; import CustomIntegrationModal from '../../settings/advanced/integrations/CustomIntegrationModal'; import DesignAndThemeModal from '../../settings/site/DesignAndThemeModal'; @@ -34,7 +33,6 @@ const modals = { AddIntegrationModal, AddNewsletterModal, AddRecommendationModal, - AmpModal, CustomIntegrationModal, DesignAndThemeModal, EditRecommendationModal, diff --git a/apps/admin-x-settings/src/components/settings/advanced/AdvancedSettings.tsx b/apps/admin-x-settings/src/components/settings/advanced/AdvancedSettings.tsx index 8cf975334ea..2633c011fa6 100644 --- a/apps/admin-x-settings/src/components/settings/advanced/AdvancedSettings.tsx +++ b/apps/admin-x-settings/src/components/settings/advanced/AdvancedSettings.tsx @@ -8,7 +8,7 @@ import React from 'react'; import SearchableSection from '../../SearchableSection'; export const searchKeywords = { - integrations: ['advanced', 'integrations', 'zapier', 'slack', 'amp', 'unsplash', 'first promoter', 'firstpromoter', 'pintura', 'disqus', 'analytics', 'ulysses', 'typeform', 'buffer', 'plausible', 'github'], + integrations: ['advanced', 'integrations', 'zapier', 'slack', 'unsplash', 'first promoter', 'firstpromoter', 'pintura', 'disqus', 'analytics', 'ulysses', 'typeform', 'buffer', 'plausible', 'github'], migrationtools: ['import', 'export', 'migrate', 'substack', 'substack', 'migration', 'medium'], codeInjection: ['advanced', 'code injection', 'head', 'footer'], labs: ['advanced', 'labs', 'alpha', 'beta', 'flag', 'routes', 'redirect', 'translation', 'editor', 'portal'], diff --git a/apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx b/apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx index 549dfe6fbef..c402afd2b3f 100644 --- a/apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx +++ b/apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx @@ -2,7 +2,6 @@ import NiceModal from '@ebay/nice-modal-react'; import React, {useState} from 'react'; import TopLevelGroup from '../../TopLevelGroup'; import usePinturaEditor from '../../../hooks/usePinturaEditor'; -import {ReactComponent as AmpIcon} from '../../../assets/icons/amp.svg'; import {Button, ConfirmationModal, Icon, List, ListItem, NoValueLabel, TabView, showToast, withErrorBoundary} from '@tryghost/admin-x-design-system'; import {ReactComponent as FirstPromoterIcon} from '../../../assets/icons/firstpromoter.svg'; import {Integration, useBrowseIntegrations, useDeleteIntegration} from '@tryghost/admin-x-framework/api/integrations'; @@ -43,7 +42,7 @@ const IntegrationItem: React.FC = ({ const handleClick = (e?: React.MouseEvent) => { // Prevent the click event from bubbling up when clicking the delete button e?.stopPropagation(); - + if (disabled) { updateRoute({route: 'pro', isExternal: true}); } else { @@ -52,7 +51,7 @@ const IntegrationItem: React.FC = ({ }; const handleDelete = (e?: React.MouseEvent) => { - e?.stopPropagation(); + e?.stopPropagation(); onDelete?.(); }; @@ -89,8 +88,7 @@ const BuiltInIntegrations: React.FC = () => { const pinturaEditor = usePinturaEditor(); const {settings} = useGlobalData(); - const [ampEnabled, unsplashEnabled, firstPromoterEnabled, slackUrl, slackUsername] = getSettingValues(settings, [ - 'amp', + const [unsplashEnabled, firstPromoterEnabled, slackUrl, slackUsername] = getSettingValues(settings, [ 'unsplash', 'firstpromoter', 'slack_url', @@ -119,16 +117,6 @@ const BuiltInIntegrations: React.FC = () => { testId='slack-integration' title='Slack' /> - { - openModal('integrations/amp'); - }} - active={ampEnabled} - detail='Google AMP will be removed in Ghost 6.0' - icon={} - testId='amp-integration' - title='AMP' /> - { openModal('integrations/unsplash'); diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/AmpModal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/AmpModal.tsx deleted file mode 100644 index 9a7e52414e8..00000000000 --- a/apps/admin-x-settings/src/components/settings/advanced/integrations/AmpModal.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import IntegrationHeader from './IntegrationHeader'; -import NiceModal from '@ebay/nice-modal-react'; -import {Form, Modal, TextField, Toggle} from '@tryghost/admin-x-design-system'; -import {ReactComponent as Icon} from '../../../../assets/icons/amp.svg'; -import {Setting, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings'; -import {useEffect, useState} from 'react'; -import {useGlobalData} from '../../../providers/GlobalDataProvider'; -import {useHandleError} from '@tryghost/admin-x-framework/hooks'; -import {useRouting} from '@tryghost/admin-x-framework/routing'; - -const AmpModal = NiceModal.create(() => { - const {updateRoute} = useRouting(); - const {settings} = useGlobalData(); - const [ampEnabled] = getSettingValues(settings, ['amp']); - const [ampId] = getSettingValues(settings, ['amp_gtag_id']); - const [trackingId, setTrackingId] = useState(''); - const {mutateAsync: editSettings} = useEditSettings(); - const handleError = useHandleError(); - const [okLabel, setOkLabel] = useState('Save'); - const [enabled, setEnabled] = useState(!!ampEnabled); - - useEffect(() => { - setEnabled(ampEnabled || false); - setTrackingId(ampId || null); - }, [ampEnabled, ampId]); - - const handleSave = async () => { - const updates: Setting[] = [ - {key: 'amp', value: enabled}, - {key: 'amp_gtag_id', value: trackingId} - ]; - try { - setOkLabel('Saving...'); - await Promise.all([ - editSettings(updates), - new Promise((resolve) => { - setTimeout(resolve, 1000); - }) - ]); - setOkLabel('Saved'); - } catch (e) { - handleError(e); - } finally { - setTimeout(() => setOkLabel('Save'), 1000); - } - }; - - const isDirty = !(enabled === ampEnabled) || !(trackingId === ampId); - - return ( - { - updateRoute('integrations'); - }} - cancelLabel='Close' - dirty={isDirty} - okColor={okLabel === 'Saved' ? 'green' : 'black'} - okLabel={okLabel} - testId='amp-modal' - title='' - onOk={async () => { - await handleSave(); - }} - > - } - title='AMP' - /> -
-
- Google AMP is being retired — this feature will be removed in Ghost 6.0} - label='Enable AMP' - onChange={(e) => { - setEnabled(e.target.checked); - }} - /> - {enabled && ( - { - setTrackingId(e.target.value); - }} - /> - )} - -
- - ); -}); - -export default AmpModal; diff --git a/apps/admin-x-settings/test/acceptance/advanced/integrations/amp.test.ts b/apps/admin-x-settings/test/acceptance/advanced/integrations/amp.test.ts deleted file mode 100644 index 354baa046d1..00000000000 --- a/apps/admin-x-settings/test/acceptance/advanced/integrations/amp.test.ts +++ /dev/null @@ -1,63 +0,0 @@ -import {expect, test} from '@playwright/test'; -import {globalDataRequests} from '../../../utils/acceptance'; -import {mockApi, responseFixtures, updatedSettingsResponse} from '@tryghost/admin-x-framework/test/acceptance'; - -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'} - ] - }); - }); - - test('Warns when leaving without saving', async ({page}) => { - const {lastApiRequests} = await mockApi({page, requests: { - ...globalDataRequests, - editSettings: {method: 'PUT', path: '/settings/', response: responseFixtures.settings} - }}); - - 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(); - - await ampModal.getByRole('button', {name: 'Close'}).click(); - - await expect(page.getByTestId('confirmation-modal')).toHaveText(/leave/i); - - await page.getByTestId('confirmation-modal').getByRole('button', {name: 'Leave'}).click(); - - await expect(ampModal).toBeHidden(); - expect(lastApiRequests.editSettings).toBeUndefined(); - }); -}); diff --git a/apps/admin-x-settings/test/acceptance/advanced/integrations/integrationsList.test.ts b/apps/admin-x-settings/test/acceptance/advanced/integrations/integrationsList.test.ts index f1f00742241..ec992d3f99e 100644 --- a/apps/admin-x-settings/test/acceptance/advanced/integrations/integrationsList.test.ts +++ b/apps/admin-x-settings/test/acceptance/advanced/integrations/integrationsList.test.ts @@ -4,7 +4,7 @@ import {mockApi, responseFixtures} from '@tryghost/admin-x-framework/test/accept test.describe('Integrations List', async () => { // This is a test for the integrations list, which is a list of integrations that can be toggled on and off - // To ensure the app logic shows the correct initial state, all integrations are disabled by default, except for Unsplash + // To ensure the app logic shows the correct initial state, all integrations are disabled by default, except for Unsplash test('Only Unsplash Shows Active on initial new setup', async ({page}) => { await mockApi({page, requests: { ...globalDataRequests, @@ -15,21 +15,18 @@ test.describe('Integrations List', async () => { // const zapierElement = await section.getByText('Zapier').last(); const zapierElement = section.getByTestId('zapier-integration'); const slackElement = section.getByTestId('slack-integration'); - const ampElement = section.getByTestId('amp-integration'); const unsplashElement = section.getByTestId('unsplash-integration'); const firstPromoterElement = section.getByTestId('firstpromoter-integration'); const pinturaElement = section.getByTestId('pintura-integration'); const zapierStatus = await zapierElement.getByText('Active'); const slackStatus = await slackElement.getByText('Active'); - const ampStatus = await ampElement.getByText('Active'); const unsplashStatus = await unsplashElement.getByText('Active'); const firstPromoterStatus = await firstPromoterElement.getByText('Active'); const pinturaStatus = await pinturaElement.getByText('Active'); expect(await zapierStatus.isVisible()).toBe(false); expect(await slackStatus.isVisible()).toBe(false); - expect(await ampStatus.isVisible()).toBe(false); expect(await unsplashStatus.isVisible()).toBe(true); // Unsplash is the only active integration expect(await firstPromoterStatus.isVisible()).toBe(false); expect(await pinturaStatus.isVisible()).toBe(false);