Updated Admin-X bundling process

refs https://github.com/TryGhost/DevOps/issues/80

- as part of moving Admin-X-Setting towards GA, we want to change it from
  loading the settings externally via a CDN, to bundling it in with
  Admin
- the bulk of the changes here are removing the config in Ghost, setting
  up the copy to the Admin assets dir, and loading the new path in Admin
- several other changes have come along the way as I've cleaned up
  unneeded code

.github/scripts/dev.js

@@ -33,7 +33,7 @@ const COMMAND_GHOST = {
 
 const COMMAND_ADMIN = {
     name: 'admin',
-    command: `yarn start --live-reload-base-url=${liveReloadBaseUrl} --live-reload-port=4201`,
+    command: `nx run ghost-admin:dev --live-reload-base-url=${liveReloadBaseUrl} --live-reload-port=4201`,
     cwd: path.resolve(__dirname, '../../ghost/admin'),
     prefixColor: 'green',
     env: {}
@@ -63,18 +63,6 @@ if (DASH_DASH_ARGS.includes('admin-x') || DASH_DASH_ARGS.includes('adminx') || D
         prefixColor: '#C35831',
         env: {}
     });
-
-    if (DASH_DASH_ARGS.includes('https')) {
-        // Safari needs HTTPS for it to work
-        // To make this work, you'll need a CADDY server running in front
-        // Note the port is different because of this extra layer. Use the following Caddyfile:
-        //    https://localhost:41740 {
-        //        reverse_proxy http://localhost:4174
-        //    }
-        COMMAND_GHOST.env['adminX__url'] = 'https://localhost:41740/admin-x-settings.js';
-    } else {
-        COMMAND_GHOST.env['adminX__url'] = 'http://localhost:4174/admin-x-settings.js';
-    }
 }
 
 if (DASH_DASH_ARGS.includes('portal') || DASH_DASH_ARGS.includes('all')) {

.github/workflows/ci.yml

@@ -237,7 +237,7 @@ jobs:
         env:
           DEPENDENCY_CACHE_KEY: ${{ needs.job_install_deps.outputs.dependency_cache_key }}
 
-      - run: yarn workspace ghost-admin run test
+      - run: yarn nx run ghost-admin:test
         env:
           BROWSER: Chrome
 

apps/admin-x-settings/package.json

@@ -25,7 +25,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "dev": "concurrently \"vite preview\" \"vite build --watch\"",
+    "dev": "vite build --watch",
     "dev:start": "vite",
     "build": "tsc && vite build",
     "lint": "yarn run lint:js",
@@ -36,11 +36,7 @@
     "test:e2e:full": "ALL_BROWSERS=1 yarn test:e2e",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "preship": "yarn lint",
-    "ship": "STATUS=$(git status --porcelain); echo $STATUS; if [ -z \"$STATUS\" ]; then yarn version; fi",
-    "postship": "git push ${GHOST_UPSTREAM:-origin} --follow-tags && npm publish",
-    "prepublishOnly": "yarn build"
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@codemirror/lang-html": "^6.4.5",

ghost/admin/app/components/admin-x/settings.js

@@ -2,6 +2,7 @@ import * as Sentry from '@sentry/ember';
 import Component from '@glimmer/component';
 import React, {Suspense} from 'react';
 import config from 'ghost-admin/config/environment';
+import ghostPaths from 'ghost-admin/utils/ghost-paths';
 import {action} from '@ember/object';
 import {inject} from 'ghost-admin/decorators/inject';
 import {inject as service} from '@ember/service';
@@ -200,14 +201,8 @@ export const importSettings = async () => {
         return window['@tryghost/admin-x-settings'];
     }
 
-    // the manual specification of the protocol in the import template string is
-    // required to work around ember-auto-import complaining about an unknown dynamic import
-    // during the build step
-    const GhostAdmin = window.GhostAdmin || window.Ember.Namespace.NAMESPACES.find(ns => ns.name === 'ghost-admin');
-    const urlTemplate = GhostAdmin.__container__.lookup('config:main').adminX?.url;
-    const urlVersion = GhostAdmin.__container__.lookup('config:main').adminX?.version;
-
-    const url = new URL(urlTemplate.replace('{version}', urlVersion));
+    const baseUrl = (config.cdnUrl || ghostPaths().assetRootWithHost);
+    const url = new URL(`${baseUrl}libs/admin-x-settings/admin-x-settings.js`);
 
     if (url.protocol === 'http:') {
         window['@tryghost/admin-x-settings'] = await import(`http://${url.host}${url.pathname}`);

ghost/admin/app/routes/settings-x.js

@@ -3,13 +3,14 @@ import {inject as service} from '@ember/service';
 
 export default class SettingsXRoute extends AuthenticatedRoute {
     @service session;
+    @service feature;
     @service ui;
     @service modals;
 
     beforeModel() {
         super.beforeModel(...arguments);
 
-        if (!this.config.adminX?.url) {
+        if (!this.feature.adminXSettings) {
             return this.router.transitionTo('settings');
         }
     }

ghost/admin/app/utils/ghost-paths.js

@@ -19,8 +19,10 @@ export default function () {
     let adminRoot = `${subdir}/ghost/`;
     let assetRoot = `${subdir}/ghost/assets/`;
     let apiRoot = `${subdir}/ghost/api/admin`;
+    let assetRootWithHost = `${window.location.protocol}//${window.location.host}${assetRoot}`;
 
     return {
+        assetRootWithHost,
         adminRoot,
         assetRoot,
         apiRoot,

ghost/admin/lib/asset-delivery/index.js

@@ -4,6 +4,16 @@
 module.exports = {
     name: 'asset-delivery',
 
+    env: null,
+
+    config(env) {
+        // only set this.env on the first call otherwise when `postBuild()` is
+        // called this.env will always be 'test' due to multiple `config()` calls
+        if (!this.env) {
+            this.env = env;
+        }
+    },
+
     isDevelopingAddon() {
         return true;
     },
@@ -33,5 +43,19 @@ module.exports = {
 
             fs.copySync(`${results.directory}/assets/${relativePath}`, `${assetsOut}/assets/${relativePath}`, {overwrite: true, dereference: true});
         });
+
+        // copy the @tryghost/admin-x-settings assets
+        const adminXSettingsPath = '../../apps/admin-x-settings/dist';
+        const assetsAdminXPath = `${assetsOut}/assets/libs/admin-x-settings`;
+
+        if (fs.existsSync(assetsAdminXPath)) {
+            if (this.env === 'production') {
+                fs.copySync(adminXSettingsPath, assetsAdminXPath, {overwrite: true, dereference: true});
+            } else {
+                fs.ensureSymlinkSync(adminXSettingsPath, assetsAdminXPath);
+            }
+        } else  {
+            console.log('Admin-X-Settings folder not found');
+        }
     }
 };

ghost/admin/package.json

@@ -16,7 +16,7 @@
     "test": "tests"
   },
   "scripts": {
-    "start": "ember serve",
+    "dev": "ember serve",
     "build": "ember build --environment=production --silent",
     "build:dev": "yarn build --environment=development",
     "test:unit": "true",
@@ -181,5 +181,30 @@
     "jose": "4.14.6",
     "path-browserify": "1.0.1",
     "webpack": "5.88.2"
+  },
+  "nx": {
+    "targets": {
+      "build:dev": {
+        "dependsOn": [
+          {
+            "projects": [
+              "@tryghost/admin-x-settings"
+            ],
+            "target": "build"
+          }
+        ]
+      },
+      "build": {
+        "dependsOn": [
+          "build",
+          {
+            "projects": [
+              "@tryghost/admin-x-settings"
+            ],
+            "target": "build"
+          }
+        ]
+      }
+    }
   }
 }

ghost/core/core/server/api/endpoints/utils/serializers/output/config.js

@@ -21,7 +21,6 @@ module.exports = {
             'tenor',
             'editor',
             'pintura',
-            'adminX',
             'signupForm'
         ];
 

ghost/core/core/shared/config/defaults.json

@@ -201,10 +201,6 @@
         "url": "https://cdn.jsdelivr.net/ghost/koenig-lexical@~{version}/dist/koenig-lexical.umd.js",
         "version": "0.4"
     },
-    "adminX": {
-        "url": "https://cdn.jsdelivr.net/ghost/admin-x-settings@~{version}/dist/admin-x-settings.js",
-        "version": "0.0"
-    },
     "signupForm": {
         "url": "https://cdn.jsdelivr.net/ghost/signup-form@~{version}/umd/signup-form.min.js",
         "version": "0.1"

ghost/core/test/e2e-api/admin/utils.js

@@ -42,7 +42,6 @@ const expectedProperties = {
         'tenor',
         'mailgunIsConfigured',
         'editor',
-        'adminX',
         'signupForm'
     ],
 

nx.json

@@ -4,6 +4,7 @@
             "runner": "nx/tasks-runners/default",
             "options": {
                 "cacheableOperations": [
+                    "build",
                     "build:ts",
                     "lint",
                     "test",