From d9f753416910074bf09829545db518978cb52df3 Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Wed, 6 Jul 2022 10:16:15 +0200
Subject: [PATCH] Updated css bundle logic for iframe

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

- css bundle is fetched from an external url, which is different for development and production
- updates bundle to be fetched via unpkg for production using app version
- extracts version information from script tag in root
---
 ghost/sodo-search/src/App.js                   |  1 +
 ghost/sodo-search/src/components/PopupModal.js |  6 +++---
 ghost/sodo-search/src/index.js                 | 10 +++++++---
 ghost/sodo-search/src/utils/helpers.js         |  7 +++++++
 4 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 ghost/sodo-search/src/utils/helpers.js

diff --git a/ghost/sodo-search/src/App.js b/ghost/sodo-search/src/App.js
index 61caaa67c6..4c21353331 100644
--- a/ghost/sodo-search/src/App.js
+++ b/ghost/sodo-search/src/App.js
@@ -31,6 +31,7 @@ export default class App extends React.Component {
                 page: 'search',
                 showPopup: true,
                 siteUrl: this.props.siteUrl,
+                appVersion: this.props.appVersion,
                 searchIndex: this.state.searchIndex,
                 indexComplete: this.state.indexComplete,
                 searchValue: this.state.searchValue,
diff --git a/ghost/sodo-search/src/components/PopupModal.js b/ghost/sodo-search/src/components/PopupModal.js
index d0d7c6d493..bbb207dd46 100644
--- a/ghost/sodo-search/src/components/PopupModal.js
+++ b/ghost/sodo-search/src/components/PopupModal.js
@@ -3,6 +3,7 @@ import AppContext from '../AppContext';
 import {ReactComponent as SearchIcon} from '../icons/search.svg';
 import {ReactComponent as CloseIcon} from '../icons/close.svg';
 import {useContext} from 'react';
+import {getBundledCssLink} from '../utils/helpers';
 
 const React = require('react');
 
@@ -288,7 +289,6 @@ function SearchResultBox() {
         return d.name?.toLowerCase().includes(searchValue?.toLowerCase());
     });
 
-    /* eslint-disable no-console */
     if (indexComplete && searchValue) {
         searchResults = searchIndex.search(searchValue);
         filteredPosts = searchResults?.posts?.map((d) => {
@@ -299,7 +299,6 @@ function SearchResultBox() {
                 slug: d?.slug
             };
         }) || [];
-        console.log(filteredPosts);
     }
 
     const hasResults = filteredPosts?.length || filteredAuthors?.length || filteredTags?.length;
@@ -379,9 +378,10 @@ export default class PopupModal extends React.Component {
             }
         `;
 
+        const cssLink = getBundledCssLink({appVersion: this.context.appVersion});
         return (
             <>
-                <link rel='stylesheet' href='http://localhost:3000/main.css' />
+                <link rel='stylesheet' href={cssLink} />
                 <style dangerouslySetInnerHTML={{__html: styles}} />
                 <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1' />
             </>
diff --git a/ghost/sodo-search/src/index.js b/ghost/sodo-search/src/index.js
index 8388d5d8f4..affdd58bb1 100644
--- a/ghost/sodo-search/src/index.js
+++ b/ghost/sodo-search/src/index.js
@@ -20,7 +20,8 @@ function getSiteData() {
         const siteUrl = scriptTag.dataset.sodoSearch;
         const apiKey = scriptTag.dataset.key;
         const apiUrl = scriptTag.dataset.api;
-        return {siteUrl, apiKey, apiUrl};
+        const appVersion = scriptTag.dataset.version;
+        return {siteUrl, apiKey, apiUrl, appVersion};
     }
     return {};
 }
@@ -30,12 +31,15 @@ function setup({siteUrl}) {
 }
 
 function init() {
-    const {siteUrl: customSiteUrl, apiKey, apiUrl} = getSiteData();
+    const {siteUrl: customSiteUrl, apiKey, apiUrl, appVersion} = getSiteData();
     const siteUrl = customSiteUrl || window.location.origin;
     setup({siteUrl});
     ReactDOM.render(
         <React.StrictMode>
-            <App siteUrl={siteUrl} apiKey={apiKey} apiUrl={apiUrl} />
+            <App
+                siteUrl={siteUrl} apiKey={apiKey} apiUrl={apiUrl}
+                appVersion={appVersion}
+            />
         </React.StrictMode>,
         document.getElementById(ROOT_DIV_ID)
     );
diff --git a/ghost/sodo-search/src/utils/helpers.js b/ghost/sodo-search/src/utils/helpers.js
new file mode 100644
index 0000000000..d46f9b8137
--- /dev/null
+++ b/ghost/sodo-search/src/utils/helpers.js
@@ -0,0 +1,7 @@
+export function getBundledCssLink({appVersion}) {
+    if (process.env.NODE_ENV === 'production' && appVersion) {
+        return `https://unpkg.com/@tryghost/sodo-search@~${appVersion}/umd/main.css`;
+    } else {
+        return 'http://localhost:3000/main.css';
+    }
+}