Merge pull request #1555 from appknox/CJB-478-ui-bug-after-switching-file-ids-from-address-bar-internal

Breadcrumbs UI Bug Fix

Author: future-pirate-king

app/components/sso-settings/index.ts

@@ -149,6 +149,7 @@ export default class SsoSettingsComponent extends Component<SsoSettingsSignature
 
       await this.ajax.post(url, {
         data: idpFormData,
+        contentType: null,
       });
 
       this.idpMetadataXml = null;

app/services/ajax.ts

@@ -17,7 +17,7 @@ interface RequestOptions extends RequestInit {
   /** Optional host URL to override the default API host */
   host?: string;
   /** Optional Content Type to override the default Content Type */
-  contentType?: string;
+  contentType?: string | null;
 }
 
 /**
@@ -261,16 +261,15 @@ export default class IreneAjaxService extends Service {
    */
   async makeRequest<T>(url: string, options: RequestOptions = {}): Promise<T> {
     const finalUrl = this._buildURL(url, options);
+    const contentType = options.contentType;
 
     // Only include headers if _shouldSendHeaders returns true
     const headers = this._shouldSendHeaders(finalUrl, options.host)
       ? {
           // For data transfer objects we allow the browser set the content type of the request
-          ...([FormData, Blob].some(
-            (dataType) => options.data instanceof dataType
-          )
+          ...(contentType === null
             ? {}
-            : { 'Content-Type': options.contentType || 'application/json' }),
+            : { 'Content-Type': contentType || 'application/json' }),
           ...this.defaultHeaders,
           ...options.headers,
         }

app/services/ak-breadcrumbs.ts

@@ -300,7 +300,12 @@ export default class AkBreadcrumbsService extends Service {
       return lastTransItems.slice(0, originRouteIndexInCrumbs + 1);
     }
 
-    return originRouteIsLastCrumbItem ? (lastTransInfo?.items ?? []) : [];
+    // Necessary to check 'originRouteHasDiffModelWithSameRouteInCrumbs' in scenarios where
+    // a model change happens on the route which was last added to the crumbs list.
+    return !originRouteHasDiffModelWithSameRouteInCrumbs &&
+      originRouteIsLastCrumbItem
+      ? (lastTransInfo?.items ?? [])
+      : [];
   }
 
   /**

tests/acceptance/breadcrumbs-test.js

@@ -26,7 +26,7 @@ const createBCRouteCtrller = (breadcrumbs = {}, empty = false) =>
         }
       };
 
-// Resgiter a route and its controller and templates
+// Register a route and its controller and templates
 function setupRoute(
   owner,
   { routeName, routeClass, controllerClass, template = null }
@@ -827,7 +827,7 @@ module('Acceptance | Breadcrumbs Test', function (hooks) {
     );
   });
 
-  test('It recalculates breadcrumbs if visiting existing route in crumbs but with different models', async function (assert) {
+  test('It recalculates breadcrumbs if visiting existing route in crumbs but with different models (Without browser refresh)', async function (assert) {
     assert.expect(35);
 
     const parentWithModelRouteFallbackCrumbs = (id) => [
@@ -992,4 +992,133 @@ module('Acceptance | Breadcrumbs Test', function (hooks) {
       assert
     );
   });
+
+  test('It recalculates breadcrumbs if visiting existing route in crumbs but with different models (With browser refresh)', async function (assert) {
+    assert.expect(21);
+
+    const parentWithModelRouteFallbackCrumbs = (id) => [
+      ALL_ROUTE_CRUMB_PROPS['tr-b-root'],
+      { ...ALL_ROUTE_CRUMB_PROPS['tr-b-root/parent-with-model'], models: [id] },
+    ];
+
+    class ParentWithModelController extends Controller {
+      get breadcrumbs() {
+        return {
+          ...ALL_ROUTE_CRUMB_PROPS['tr-b-root/parent-with-model'],
+          models: [this.model.id],
+          fallbackCrumbs: parentWithModelRouteFallbackCrumbs(this.model.id),
+        };
+      }
+    }
+
+    // Register routes to be tested
+    const routesConfig = [
+      {
+        routeName: 'tr-b-root/index',
+        routeClass: createBCRoute(),
+        controllerClass: createBCRouteCtrller(
+          ALL_ROUTE_CRUMB_PROPS['tr-b-root']
+        ),
+      },
+      {
+        routeName: 'tr-b-root',
+        routeClass: createBCRoute(),
+        controllerClass: createBCRouteCtrller({}, true),
+        template: hbs`
+          <AkStack @spacing="1" @direction="column" class="px-2" data-test-rootBTemplate-container>
+            Root B
+
+            <AkLink @route="authenticated.tr-b-root.parent-with-model" @model="1" data-test-linkToRootBParentWithModel1>
+              Link to Root B - Parent With Model 1
+            </AkLink>
+
+            <AkLink @route="authenticated.tr-b-root.parent-with-model" @models={{array 2}} data-test-linkToRootBParentWithModel2>
+              Link to Root B - Parent With Model 2
+            </AkLink>
+
+            {{outlet}}
+          </AkStack>
+        `,
+      },
+      {
+        routeName: 'tr-b-root/parent-with-model',
+        routeClass: createBCRoute(),
+        controllerClass: ParentWithModelController,
+        template: hbs`
+          <AkStack @spacing="1" @direction="column" class="px-2 my-2" data-test-rootAParentBTemplate-container>
+            Root B - Parent With Model - {{@model.id}}
+    
+            <AkDivider @color='dark' />
+    
+            <AkStack @spacing="1" @direction="column">
+              Parent With Model ({{@model.id}}) - Route Breadcrumb Items
+    
+              <AkBreadcrumbs::AutoTrail />
+            </AkStack>
+
+            <AkLink @route="authenticated.tr-b-root.parent-with-model.child" @models={{array @model.id}} data-test-LinkToRootBParentWithModelChild>
+              Link to Parent With Model ({{@model.id}}) Child
+            </AkLink>
+
+            {{outlet}}
+          </AkStack>
+        `,
+      },
+    ];
+
+    routesConfig.forEach((route) => setupRoute(this.owner, route));
+
+    // Start of test
+    await visit('/tr-b-root');
+
+    assert.strictEqual(currentURL(), '/tr-b-root', 'Route is at Root B');
+
+    assert.dom('[data-test-linkToRootBParentWithModel1]').exists();
+    assert.dom('[data-test-linkToRootBParentWithModel2]').exists();
+
+    // Go to route with model with ID of 1
+    await click('[data-test-linkToRootBParentWithModel1]');
+
+    const akBreadcrumbsService = this.owner.lookup('service:ak-breadcrumbs');
+
+    let expectedCrumbs = [
+      ALL_ROUTE_CRUMB_PROPS['tr-b-root'],
+      {
+        ...ALL_ROUTE_CRUMB_PROPS['tr-b-root/parent-with-model'],
+        models: [1],
+      },
+    ];
+
+    doBreadcrumbItemsCompare(
+      akBreadcrumbsService.breadcrumbItems,
+      expectedCrumbs,
+      assert
+    );
+
+    // Get router service
+    const router = this.owner.lookup('service:router');
+
+    // Reset router namespace simulates a window reload
+    router._router.reset();
+
+    const routeHandler = (transition) => {
+      if (transition.to.name === 'authenticated.tr-b-root.parent-with-model') {
+        // Ensure that routeFrom is null. Similar to a page refresh
+        // eslint-disable-next-line qunit/no-conditional-assertions
+        assert.strictEqual(transition.from, null);
+      }
+    };
+
+    router.on('routeWillChange', routeHandler);
+
+    // Go to parent route with model with ID of 2
+    await visit('/tr-b-root/parent-with-model/2');
+
+    // Defaults to fallback crumbs
+    doBreadcrumbItemsCompare(
+      akBreadcrumbsService.breadcrumbItems,
+      parentWithModelRouteFallbackCrumbs(2),
+      assert
+    );
+  });
 });