Migrated announcement bar script to use Members API

https://github.com/TryGhost/Team/issues/3121

- The announcement bar data is now exposed through Members API `/members/api/announcement` instead of Content API.

ghost/announcement-bar/src/App.js

@@ -2,8 +2,8 @@ import React from 'react';
 import {AnnouncementBar} from './components/AnnouncementBar';
 import setupGhostApi from './utils/api';
 
-export function App({apiUrl, apiKey}) {
-    const api = React.useRef(setupGhostApi({apiKey, apiUrl}));
+export function App({apiUrl}) {
+    const api = React.useRef(setupGhostApi({apiUrl}));
     const [siteSettings, setSiteSettings] = React.useState();
 
     React.useEffect(() => {
@@ -11,8 +11,9 @@ export function App({apiUrl, apiKey}) {
             return;
         }
         const getSiteSettings = async () => {
-            const {settingsData} = await api.current.init();
-            setSiteSettings(settingsData.settings);
+            const announcement = await api.current.init();
+
+            setSiteSettings(announcement);
         };
 
         getSiteSettings();

ghost/announcement-bar/src/index.js

@@ -21,10 +21,8 @@ function getSiteData() {
      */
     const scriptTag = document.querySelector('script[data-announcement-bar]');
     if (scriptTag) {
-        const adminUrl = scriptTag.dataset.announcementBar;
-        const apiKey = scriptTag.dataset.key;
-        const apiUrl = scriptTag.dataset.api;
-        return {adminUrl, apiKey, apiUrl};
+        const apiUrl = scriptTag.dataset.apiUrl;
+        return {apiUrl};
     }
     return {};
 }
@@ -34,14 +32,11 @@ function setup() {
 }
 
 function init() {
-    const {adminUrl, apiKey, apiUrl} = getSiteData();
-    const adminBaseUrl = (adminUrl || window.location.origin)?.replace(/\/+$/, '');
+    const {apiUrl} = getSiteData();
     setup();
     ReactDOM.render(
         <React.StrictMode>
             <App
-                adminUrl={adminBaseUrl}
-                apiKey={apiKey}
                 apiUrl={apiUrl}
             />
         </React.StrictMode>,

ghost/announcement-bar/src/utils/api.js

@@ -1,11 +1,4 @@
-function setupGhostApi({apiUrl, apiKey}) {
-    function contentEndpointFor({resource, keys, params = ''}) {
-        if (apiUrl && apiKey) {
-            return `${apiUrl.replace(/\/$/, '')}/${resource}/?key=${apiKey}&keys=${keys.join(',')}${params}`;
-        }
-        return '';
-    }
-
+function setupGhostApi({apiUrl}) {
     function makeRequest({url, method = 'GET', headers = {}, credentials = undefined, body = undefined}) {
         const options = {
             method,
@@ -17,12 +10,9 @@ function setupGhostApi({apiUrl, apiKey}) {
     }
     const api = {};
 
-    api.site = {
-        settings() {
-            const url = contentEndpointFor({
-                resource: 'settings',
-                keys: ['announcement', 'announcement_background']
-            });
+    api.announcementSettings = {
+        browse() {
+            const url = apiUrl;
             return makeRequest({
                 url,
                 method: 'GET',
@@ -40,11 +30,8 @@ function setupGhostApi({apiUrl, apiKey}) {
     };
 
     api.init = async () => {
-        let [settingsData] = await Promise.all([
-            api.site.settings()
-        ]);
-
-        return {settingsData};
+        let {announcement} = await api.announcementSettings.browse();
+        return announcement[0];
     };
 
     return api;

ghost/announcement-bar/src/utils/api.test.js

@@ -4,16 +4,21 @@ test('should call settings endpoint on init', () => {
     jest.spyOn(window, 'fetch');
     window.fetch.mockResolvedValueOnce({
         ok: true,
-        json: async () => ({success: true})
+        json: async () => ({
+            announcement: [{
+                announcement_content: '<p>Test announcement</p>',
+                announcement_background: 'dark'
+            }]
+        })
     });
 
-    const api = setupGhostApi({apiKey: 'key', apiUrl: 'http://localhost'});
+    const api = setupGhostApi({apiKey: 'key', apiUrl: 'http://localhost/members/api/announcement/'});
 
     api.init();
 
     expect(window.fetch).toHaveBeenCalledTimes(1);
     expect(window.fetch).toHaveBeenCalledWith(
-        'http://localhost/settings/?key=key&keys=announcement,announcement_background',
+        'http://localhost/members/api/announcement/',
         expect.objectContaining({
             method: 'GET',
             headers: {'Content-Type': 'application/json'},

ghost/core/core/frontend/helpers/ghost_head.js

@@ -87,17 +87,19 @@ function getSearchHelper(frontendKey) {
     return helper;
 }
 
-function getAnnouncementBarHelper(frontendKey) {
+function getAnnouncementBarHelper() {
     if (!settingsCache.get('announcement_content')) {
         return '';
     }
-    const adminUrl = urlUtils.getAdminUrl() || urlUtils.getSiteUrl();
+
     const {scriptUrl} = getFrontendAppConfig('announcementBar');
+    const siteUrl = urlUtils.getSiteUrl();
+    const announcementUrl = new URL('members/api/announcement/', siteUrl);
     const attrs = {
-        key: frontendKey,
-        'announcement-bar': adminUrl,
-        api: urlUtils.urlFor('api', {type: 'content'}, true)
+        'announcement-bar': siteUrl,
+        'api-url': announcementUrl
     };
+
     const dataAttrs = getDataAttributes(attrs);
     let helper = `<script defer src="${scriptUrl}" ${dataAttrs} crossorigin="anonymous"></script>`;
 
@@ -247,7 +249,7 @@ module.exports = async function ghost_head(options) { // eslint-disable-line cam
         if (!_.includes(context, 'amp')) {
             head.push(getMembersHelper(options.data, frontendKey));
             head.push(getSearchHelper(frontendKey));
-            head.push(getAnnouncementBarHelper(frontendKey));
+            head.push(getAnnouncementBarHelper());
             try {
                 head.push(getWebmentionDiscoveryLink());
             } catch (err) {