From eeabce247313e7fccad6484ca691e32d6cd46da0 Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Fri, 16 Jun 2023 17:04:26 +0530
Subject: [PATCH] Fixed official theme image assets not loading in adminX

refs https://github.com/TryGhost/Team/issues/3432

The admin assets url are modified by ember build process by adding cache busting, so the original urls can't be used directly in adminX. This change passes the image assets from ember admin, causing the right image urls to be passed to adminX and for loading images.
---
 ghost/admin-x-settings/src/App.tsx            |   6 +-
 .../components/providers/ServiceProvider.tsx  |  17 ++-
 .../settings/site/theme/OfficialThemes.tsx    | 125 +-----------------
 ghost/admin-x-settings/src/main.tsx           |   1 +
 .../admin/app/components/admin-x/settings.js  | 122 +++++++++++++++++
 5 files changed, 143 insertions(+), 128 deletions(-)

diff --git a/ghost/admin-x-settings/src/App.tsx b/ghost/admin-x-settings/src/App.tsx
index 1f34fb35f7..0e0df94e88 100644
--- a/ghost/admin-x-settings/src/App.tsx
+++ b/ghost/admin-x-settings/src/App.tsx
@@ -4,16 +4,18 @@ import Heading from './admin-x-ds/global/Heading';
 import NiceModal from '@ebay/nice-modal-react';
 import Settings from './components/Settings';
 import Sidebar from './components/Sidebar';
+import {OfficialTheme} from './models/themes';
 import {ServicesProvider} from './components/providers/ServiceProvider';
 import {Toaster} from 'react-hot-toast';
 
 interface AppProps {
     ghostVersion: string;
+    officialThemes: OfficialTheme[]
 }
 
-function App({ghostVersion}: AppProps) {
+function App({ghostVersion, officialThemes}: AppProps) {
     return (
-        <ServicesProvider ghostVersion={ghostVersion}>
+        <ServicesProvider ghostVersion={ghostVersion} officialThemes={officialThemes}>
             <DataProvider>
                 <div className="admin-x-settings">
                     <Toaster />
diff --git a/ghost/admin-x-settings/src/components/providers/ServiceProvider.tsx b/ghost/admin-x-settings/src/components/providers/ServiceProvider.tsx
index 9597100567..feadd1cea5 100644
--- a/ghost/admin-x-settings/src/components/providers/ServiceProvider.tsx
+++ b/ghost/admin-x-settings/src/components/providers/ServiceProvider.tsx
@@ -1,25 +1,29 @@
 import React, {createContext, useContext, useMemo} from 'react';
 import setupGhostApi from '../../utils/api';
+import {OfficialTheme} from '../../models/themes';
 
 export interface FileService {
     uploadImage: (file: File) => Promise<string>;
 }
 interface ServicesContextProps {
     api: ReturnType<typeof setupGhostApi>;
-    fileService: FileService|null
+    fileService: FileService|null;
+    officialThemes: OfficialTheme[];
 }
 
 interface ServicesProviderProps {
     children: React.ReactNode;
     ghostVersion: string;
+    officialThemes: OfficialTheme[];
 }
 
 const ServicesContext = createContext<ServicesContextProps>({
     api: setupGhostApi({ghostVersion: ''}),
-    fileService: null
+    fileService: null,
+    officialThemes: []
 });
 
-const ServicesProvider: React.FC<ServicesProviderProps> = ({children, ghostVersion}) => {
+const ServicesProvider: React.FC<ServicesProviderProps> = ({children, ghostVersion, officialThemes}) => {
     const apiService = useMemo(() => setupGhostApi({ghostVersion}), [ghostVersion]);
     const fileService = useMemo(() => ({
         uploadImage: async (file: File): Promise<string> => {
@@ -31,7 +35,8 @@ const ServicesProvider: React.FC<ServicesProviderProps> = ({children, ghostVersi
     return (
         <ServicesContext.Provider value={{
             api: apiService,
-            fileService
+            fileService,
+            officialThemes
         }}>
             {children}
         </ServicesContext.Provider>
@@ -40,6 +45,8 @@ const ServicesProvider: React.FC<ServicesProviderProps> = ({children, ghostVersi
 
 export {ServicesContext, ServicesProvider};
 
-export const useServices = () => useContext(ServicesContext)!;
+export const useServices = () => useContext(ServicesContext);
 
 export const useApi = () => useServices().api;
+
+export const useOfficialThemes = () => useServices().officialThemes;
diff --git a/ghost/admin-x-settings/src/components/settings/site/theme/OfficialThemes.tsx b/ghost/admin-x-settings/src/components/settings/site/theme/OfficialThemes.tsx
index a1349c8eae..d888ebcab4 100644
--- a/ghost/admin-x-settings/src/components/settings/site/theme/OfficialThemes.tsx
+++ b/ghost/admin-x-settings/src/components/settings/site/theme/OfficialThemes.tsx
@@ -2,132 +2,15 @@ import Heading from '../../../../admin-x-ds/global/Heading';
 import React from 'react';
 import {OfficialTheme} from '../../../../models/themes';
 import {getGhostPaths} from '../../../../utils/helpers';
+import {useOfficialThemes} from '../../../providers/ServiceProvider';
 
 const OfficialThemes: React.FC<{
     onSelectTheme?: (theme: OfficialTheme) => void;
 }> = ({
     onSelectTheme
 }) => {
-    const {assetRoot} = getGhostPaths();
-    const officialThemes: OfficialTheme[] = [{
-        name: 'Casper',
-        category: 'Blog',
-        previewUrl: 'https://demo.ghost.io/',
-        ref: 'default',
-        image: 'img/themes/Casper.png'
-    }, {
-        name: 'Headline',
-        category: 'News',
-        url: 'https://github.com/TryGhost/Headline',
-        previewUrl: 'https://headline.ghost.io',
-        ref: 'TryGhost/Headline',
-        image: 'img/themes/Headline.png'
-    }, {
-        name: 'Edition',
-        category: 'Newsletter',
-        url: 'https://github.com/TryGhost/Edition',
-        previewUrl: 'https://edition.ghost.io/',
-        ref: 'TryGhost/Edition',
-        image: 'img/themes/Edition.png'
-    }, {
-        name: 'Solo',
-        category: 'Blog',
-        url: 'https://github.com/TryGhost/Solo',
-        previewUrl: 'https://solo.ghost.io',
-        ref: 'TryGhost/Solo',
-        image: 'img/themes/Solo.png'
-    }, {
-        name: 'Taste',
-        category: 'Blog',
-        url: 'https://github.com/TryGhost/Taste',
-        previewUrl: 'https://taste.ghost.io',
-        ref: 'TryGhost/Taste',
-        image: 'img/themes/Taste.png'
-    }, {
-        name: 'Episode',
-        category: 'Podcast',
-        url: 'https://github.com/TryGhost/Episode',
-        previewUrl: 'https://episode.ghost.io',
-        ref: 'TryGhost/Episode',
-        image: 'img/themes/Episode.png'
-    }, {
-        name: 'Digest',
-        category: 'Newsletter',
-        url: 'https://github.com/TryGhost/Digest',
-        previewUrl: 'https://digest.ghost.io/',
-        ref: 'TryGhost/Digest',
-        image: 'img/themes/Digest.png'
-    }, {
-        name: 'Bulletin',
-        category: 'Newsletter',
-        url: 'https://github.com/TryGhost/Bulletin',
-        previewUrl: 'https://bulletin.ghost.io/',
-        ref: 'TryGhost/Bulletin',
-        image: 'img/themes/Bulletin.png'
-    }, {
-        name: 'Alto',
-        category: 'Blog',
-        url: 'https://github.com/TryGhost/Alto',
-        previewUrl: 'https://alto.ghost.io',
-        ref: 'TryGhost/Alto',
-        image: 'img/themes/Alto.png'
-    }, {
-        name: 'Dope',
-        category: 'Magazine',
-        url: 'https://github.com/TryGhost/Dope',
-        previewUrl: 'https://dope.ghost.io',
-        ref: 'TryGhost/Dope',
-        image: 'img/themes/Dope.png'
-    }, {
-        name: 'Wave',
-        category: 'Podcast',
-        url: 'https://github.com/TryGhost/Wave',
-        previewUrl: 'https://wave.ghost.io',
-        ref: 'TryGhost/Wave',
-        image: 'img/themes/Wave.png'
-    }, {
-        name: 'Edge',
-        category: 'Photography',
-        url: 'https://github.com/TryGhost/Edge',
-        previewUrl: 'https://edge.ghost.io',
-        ref: 'TryGhost/Edge',
-        image: 'img/themes/Edge.png'
-    }, {
-        name: 'Dawn',
-        category: 'Newsletter',
-        url: 'https://github.com/TryGhost/Dawn',
-        previewUrl: 'https://dawn.ghost.io/',
-        ref: 'TryGhost/Dawn',
-        image: 'img/themes/Dawn.png'
-    }, {
-        name: 'Ease',
-        category: 'Documentation',
-        url: 'https://github.com/TryGhost/Ease',
-        previewUrl: 'https://ease.ghost.io',
-        ref: 'TryGhost/Ease',
-        image: 'img/themes/Ease.png'
-    }, {
-        name: 'Ruby',
-        category: 'Magazine',
-        url: 'https://github.com/TryGhost/Ruby',
-        previewUrl: 'https://ruby.ghost.io',
-        ref: 'TryGhost/Ruby',
-        image: 'img/themes/Ruby.png'
-    }, {
-        name: 'London',
-        category: 'Photography',
-        url: 'https://github.com/TryGhost/London',
-        previewUrl: 'https://london.ghost.io',
-        ref: 'TryGhost/London',
-        image: 'img/themes/London.png'
-    }, {
-        name: 'Journal',
-        category: 'Newsletter',
-        url: 'https://github.com/TryGhost/Journal',
-        previewUrl: 'https://journal.ghost.io/',
-        ref: 'TryGhost/Journal',
-        image: 'img/themes/Journal.png'
-    }];
+    const {adminRoot} = getGhostPaths();
+    const officialThemes = useOfficialThemes();
 
     return (
         <div className='h-[calc(100vh-74px-40px)] overflow-y-auto overflow-x-hidden p-[8vmin] pt-5'>
@@ -143,7 +26,7 @@ const OfficialThemes: React.FC<{
                                 <img
                                     alt="Headline Theme"
                                     className='h-full w-full object-contain'
-                                    src={`${assetRoot}/${theme.image}`}
+                                    src={`${adminRoot}${theme.image}`}
                                 />
                             </div>
                             <div className='mt-3'>
diff --git a/ghost/admin-x-settings/src/main.tsx b/ghost/admin-x-settings/src/main.tsx
index e879a38381..07f9f8057e 100644
--- a/ghost/admin-x-settings/src/main.tsx
+++ b/ghost/admin-x-settings/src/main.tsx
@@ -7,6 +7,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>
         <App
             ghostVersion='5.x'
+            officialThemes={[]}
         />
     </React.StrictMode>
 );
diff --git a/ghost/admin/app/components/admin-x/settings.js b/ghost/admin/app/components/admin-x/settings.js
index e5382fc9ac..307826d4a4 100644
--- a/ghost/admin/app/components/admin-x/settings.js
+++ b/ghost/admin/app/components/admin-x/settings.js
@@ -6,6 +6,127 @@ import {action} from '@ember/object';
 import {inject} from 'ghost-admin/decorators/inject';
 import {inject as service} from '@ember/service';
 
+// TODO: Long term move asset management directly in AdminX
+const officialThemes = [{
+    name: 'Casper',
+    category: 'Blog',
+    previewUrl: 'https://demo.ghost.io/',
+    ref: 'default',
+    image: 'assets/img/themes/Casper.png'
+}, {
+    name: 'Headline',
+    category: 'News',
+    url: 'https://github.com/TryGhost/Headline',
+    previewUrl: 'https://headline.ghost.io',
+    ref: 'TryGhost/Headline',
+    image: 'assets/img/themes/Headline.png'
+}, {
+    name: 'Edition',
+    category: 'Newsletter',
+    url: 'https://github.com/TryGhost/Edition',
+    previewUrl: 'https://edition.ghost.io/',
+    ref: 'TryGhost/Edition',
+    image: 'assets/img/themes/Edition.png'
+}, {
+    name: 'Solo',
+    category: 'Blog',
+    url: 'https://github.com/TryGhost/Solo',
+    previewUrl: 'https://solo.ghost.io',
+    ref: 'TryGhost/Solo',
+    image: 'assets/img/themes/Solo.png'
+}, {
+    name: 'Taste',
+    category: 'Blog',
+    url: 'https://github.com/TryGhost/Taste',
+    previewUrl: 'https://taste.ghost.io',
+    ref: 'TryGhost/Taste',
+    image: 'assets/img/themes/Taste.png'
+}, {
+    name: 'Episode',
+    category: 'Podcast',
+    url: 'https://github.com/TryGhost/Episode',
+    previewUrl: 'https://episode.ghost.io',
+    ref: 'TryGhost/Episode',
+    image: 'assets/img/themes/Episode.png'
+}, {
+    name: 'Digest',
+    category: 'Newsletter',
+    url: 'https://github.com/TryGhost/Digest',
+    previewUrl: 'https://digest.ghost.io/',
+    ref: 'TryGhost/Digest',
+    image: 'assets/img/themes/Digest.png'
+}, {
+    name: 'Bulletin',
+    category: 'Newsletter',
+    url: 'https://github.com/TryGhost/Bulletin',
+    previewUrl: 'https://bulletin.ghost.io/',
+    ref: 'TryGhost/Bulletin',
+    image: 'assets/img/themes/Bulletin.png'
+}, {
+    name: 'Alto',
+    category: 'Blog',
+    url: 'https://github.com/TryGhost/Alto',
+    previewUrl: 'https://alto.ghost.io',
+    ref: 'TryGhost/Alto',
+    image: 'assets/img/themes/Alto.png'
+}, {
+    name: 'Dope',
+    category: 'Magazine',
+    url: 'https://github.com/TryGhost/Dope',
+    previewUrl: 'https://dope.ghost.io',
+    ref: 'TryGhost/Dope',
+    image: 'assets/img/themes/Dope.png'
+}, {
+    name: 'Wave',
+    category: 'Podcast',
+    url: 'https://github.com/TryGhost/Wave',
+    previewUrl: 'https://wave.ghost.io',
+    ref: 'TryGhost/Wave',
+    image: 'assets/img/themes/Wave.png'
+}, {
+    name: 'Edge',
+    category: 'Photography',
+    url: 'https://github.com/TryGhost/Edge',
+    previewUrl: 'https://edge.ghost.io',
+    ref: 'TryGhost/Edge',
+    image: 'assets/img/themes/Edge.png'
+}, {
+    name: 'Dawn',
+    category: 'Newsletter',
+    url: 'https://github.com/TryGhost/Dawn',
+    previewUrl: 'https://dawn.ghost.io/',
+    ref: 'TryGhost/Dawn',
+    image: 'assets/img/themes/Dawn.png'
+}, {
+    name: 'Ease',
+    category: 'Documentation',
+    url: 'https://github.com/TryGhost/Ease',
+    previewUrl: 'https://ease.ghost.io',
+    ref: 'TryGhost/Ease',
+    image: 'assets/img/themes/Ease.png'
+}, {
+    name: 'Ruby',
+    category: 'Magazine',
+    url: 'https://github.com/TryGhost/Ruby',
+    previewUrl: 'https://ruby.ghost.io',
+    ref: 'TryGhost/Ruby',
+    image: 'assets/img/themes/Ruby.png'
+}, {
+    name: 'London',
+    category: 'Photography',
+    url: 'https://github.com/TryGhost/London',
+    previewUrl: 'https://london.ghost.io',
+    ref: 'TryGhost/London',
+    image: 'assets/img/themes/London.png'
+}, {
+    name: 'Journal',
+    category: 'Newsletter',
+    url: 'https://github.com/TryGhost/Journal',
+    previewUrl: 'https://journal.ghost.io/',
+    ref: 'TryGhost/Journal',
+    image: 'assets/img/themes/Journal.png'
+}];
+
 class ErrorHandler extends React.Component {
     state = {
         hasError: false
@@ -118,6 +239,7 @@ export default class AdminXSettings extends Component {
                     <Suspense fallback={<p className="admin-x-settings-container--loading">Loading settings...</p>}>
                         <AdminXApp
                             ghostVersion={config.APP.version}
+                            officialThemes={officialThemes}
                         />
                     </Suspense>
                 </ErrorHandler>