Migrate fullpage redirect to App Bridge CDN

Shopify · Jun 24, 2024 · a2db4cd · a2db4cd
1 parent 59c5f1b
commit a2db4cd
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 87 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-12.22.8
+20.10.0
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@ Unreleased
 ----------
 - ⚠️ [Breaking] Removes `ShopifyApp::JWTMiddleware`. Any existing app code relying on decoded JWT contents set from `request.env` should instead include the `WithShopifyIdToken` concern and call its respective methods. [#1861](https://github.com/Shopify/shopify_app/pull/1861)
 - Handle scenario when invalid URI is passed to `sanitize_shop_domain` [#1852](https://github.com/Shopify/shopify_app/pull/1852)
+- Migrate fullpage redirect to App Bridge CDN [#1870](https://github.com/Shopify/shopify_app/pull/1870)
 
 22.2.1 (May 6,2024)
 ----------

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -89,8 +89,3 @@ To run tests, you'll need to make sure that your development environment is setu
 * To run all tests: `bundle exec rake test`
 * To run a specific test file: `bundle exec rake test TEST=test/controllers/callback_controller_test.rb`
 * To run a single test: `bundle exec rake test TEST=test/controllers/callback_controller_test.rb:50` where `50` is the line number on or inside the test case.
-
-### App Bridge client
-
-This gem ships with a UMD version of the App Bridge client. It lives inside the assets folder: `app/assets/javascripts/shopify_app/`. To update the client, simply download the UMD build from [unpkg.com](https://unpkg.com/@shopify/app-bridge) and save it into the folder.
-Please follow the convention of including the client version number in the filename. Finally, change the reference to the new App Bridge client inside `app/assets/javascripts/shopify_app/app_bridge_redirect.js`.
diff --git a/app/assets/javascripts/shopify_app/app_bridge_3.7.8.js b/app/assets/javascripts/shopify_app/app_bridge_3.7.8.js
diff --git a/app/assets/javascripts/shopify_app/app_bridge_redirect.js b/app/assets/javascripts/shopify_app/app_bridge_redirect.js
@@ -1,21 +1,9 @@
-//= require ./app_bridge_3.7.8.js
-
 (function(window) {
   function appBridgeRedirect(url) {
-    var AppBridge = window['app-bridge'];
-    var createApp = AppBridge.default;
-    var Redirect = AppBridge.actions.Redirect;
-    var shopifyData = document.body.dataset;
-
-    var app = createApp({
-      apiKey: shopifyData.apiKey,
-      host: shopifyData.host,
-    });
-
     var normalizedLink = document.createElement('a');
     normalizedLink.href = url;
 
-    Redirect.create(app).dispatch(Redirect.Action.REMOTE, normalizedLink.href);
+    open(normalizedLink.href, '_top');
   }
 
   window.appBridgeRedirect = appBridgeRedirect;

diff --git a/app/assets/javascripts/shopify_app/redirect.js b/app/assets/javascripts/shopify_app/redirect.js
@@ -10,9 +10,7 @@
 
     var targetInfo = JSON.parse(redirectTargetElement.dataset.target);
 
-    var appBridgeUtils = window['app-bridge']['utilities'];
-
-    if (appBridgeUtils.isShopifyEmbedded()) {
+    if (window['shopify']) {
       window.appBridgeRedirect(targetInfo.url);
     } else {
       window.top.location.href = targetInfo.url;

diff --git a/app/views/shopify_app/shared/redirect.html.erb b/app/views/shopify_app/shared/redirect.html.erb
@@ -5,9 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <base target="_top">
   <title>Redirecting…</title>
+
+  <meta name="shopify-api-key" content="<%= ShopifyApp.configuration.api_key %>">
+  <%= javascript_include_tag "https://cdn.shopify.com/shopifycloud/app-bridge.js" %>
+
   <%= javascript_include_tag('shopify_app/redirect', crossorigin: 'anonymous', integrity: true) %>
 </head>
-<body data-api-key="<%= ShopifyApp.configuration.api_key %>" data-shop-origin="<%= current_shopify_domain %>" data-host="<%= params[:host] %>" >
+<body>
   <%=
   content_tag(:div, nil,
     id: 'redirection-target',

diff --git a/test/javascripts/shopify_app/app_bridge_redirect_test.js b/test/javascripts/shopify_app/app_bridge_redirect_test.js
@@ -1,66 +1,21 @@
+const { assert } = require("chai");
+
 suite('appBridgeRedirect', () => {
   const sandbox = sinon.createSandbox();
   const url = '/settings';
-  const originalAppBridge = window['app-bridge'];
-
-  setup(() => {
-    window['app-bridge'] = {
-      default() {},
-      actions: {
-        Redirect: {
-          Action: {
-            REMOTE: 'REDIRECT::REMOTE',
-          },
-          create() {
-            return {
-              dispatch() {},
-            };
-          },
-        },
-      },
-    };
-    document.body.dataset.apiKey = '123';
-    document.body.dataset.shopOrigin = 'myshop.com';
-    document.body.dataset.host = 'https://mock-host/admin';
-  });
 
   teardown(() => {
     sandbox.restore();
-    window['app-bridge'] = originalAppBridge;
-  });
-
-
-  test('calls App Bridge to create an app with the apiKey and shopOrigin from window', () => {
-    var createApp = sinon.spy();
-    sinon.stub(window['app-bridge'], 'default').callsFake(createApp);
-
-    appBridgeRedirect(url);
-
-    sinon.assert.calledWith(createApp, {
-      apiKey: '123',
-      host: 'https://mock-host/admin',
-    });
   });
 
-  test('calls to dispatch a remote redirect App Bridge action with the url normalized to be relative to the window origin', () => {
-    const AppBridge = window['app-bridge'];
-    const Redirect = AppBridge.actions.Redirect;
-    var mockApp = {};
-    var RedirectInstance = {
-      dispatch: sinon.spy(),
-    };
-    sinon.stub(AppBridge, 'default').callsFake(() => mockApp);
-    sinon.stub(Redirect, 'create').callsFake(() => RedirectInstance);
-
-    const normalizedUrl = `${window.location.origin}${url}`;
+  test('calls App Bridge redirect to normalized url', () => {
+    const open = sinon.spy();
+    sandbox.stub(window, 'open').callsFake(open);
 
     appBridgeRedirect(url);
 
-    sinon.assert.calledWith(Redirect.create, mockApp);
-    sinon.assert.calledWith(
-        RedirectInstance.dispatch,
-        'REDIRECT::REMOTE',
-        normalizedUrl
-    );
+    assert(open.calledOnce);
+    assert.match(open.lastCall.args[0], new RegExp(`${url}$`));
+    assert.equal(open.lastCall.args[1], '_top');
   });
 });
diff --git a/test/javascripts/shopify_app/redirect_test.js b/test/javascripts/shopify_app/redirect_test.js
@@ -11,6 +11,7 @@ suite('redirect', () => {
     contentContainer.dataset['target'] = JSON.stringify({url});
     document.body.appendChild(contentContainer);
 
+    window['shopify'] = {};
     redirectHelperSandbox.stub(window, 'appBridgeRedirect').callsFake(() => {});
   });
 
@@ -23,4 +24,4 @@ suite('redirect', () => {
     require('../../../app/assets/javascripts/shopify_app/redirect');
     sinon.assert.calledWith(window.appBridgeRedirect, url);
   });
-});
+});