🔥 Removed UI for AMP (#21762)

closes
https://linear.app/ghost/issue/ENG-1807/further-deprecate-amp-by-removing-the-ui

- AMP has been deprecated for a year, and will be removed in Ghost 6.0
- As the next step towards removing it, we're removing the UI, meaning
new sites can't enable it
- This will hopefully help the transition to dropping it be smoother and
especially prevent newer users from spending a lot of time on AMP in the
run up to it going away
- NOTE: this only removes the UI. All the logic remains, you can still enable AMP via the API/settings table in the DB.

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',

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,

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'],

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<IntegrationItemProps> = ({
     const handleClick = (e?: React.MouseEvent<HTMLElement>) => {
         // 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<IntegrationItemProps> = ({
     };
 
     const handleDelete = (e?: React.MouseEvent<HTMLElement>) => {
-        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<boolean>(settings, [
-        'amp',
+    const [unsplashEnabled, firstPromoterEnabled, slackUrl, slackUsername] = getSettingValues<boolean>(settings, [
         'unsplash',
         'firstpromoter',
         'slack_url',
@@ -119,16 +117,6 @@ const BuiltInIntegrations: React.FC = () => {
                 testId='slack-integration'
                 title='Slack' />
 
-            <IntegrationItem
-                action={() => {
-                    openModal('integrations/amp');
-                }}
-                active={ampEnabled}
-                detail='Google AMP will be removed in Ghost 6.0'
-                icon={<AmpIcon className='h-8 w-8' />}
-                testId='amp-integration'
-                title='AMP' />
-
             <IntegrationItem
                 action={() => {
                     openModal('integrations/unsplash');

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);