(fix) O3-2742: History API should properly handle the back button (#925)

packages/framework/esm-framework/docs/API.md

@@ -910,6 +910,20 @@ ___
 
 ___
 
+### ResponsiveWrapper
+
+• `Const` **ResponsiveWrapper**: `React.FC`<[`ResponsiveWrapperProps`](interfaces/ResponsiveWrapperProps.md)\>
+
+ResponsiveWrapper enables a responsive behavior for the component its wraps, providing a different rendering based on the current layout type.
+On desktop, it renders the children as is, while on a tablet, it wraps them in a Carbon Layer https://react.carbondesignsystem.com/?path=/docs/components-layer--overview component.
+This provides a light background for form inputs on tablets, in accordance with the design requirements.
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/responsive-wrapper/responsive-wrapper.component.tsx:14](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/responsive-wrapper/responsive-wrapper.component.tsx#L14)
+
+___
+
 ### backendDependencies
 
 • `Const` **backendDependencies**: `Object`
@@ -3192,7 +3206,7 @@ Returns a list of URLs representing the history of the current window session.
 
 #### Defined in
 
-[packages/framework/esm-navigation/src/history/history.ts:39](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-navigation/src/history/history.ts#L39)
+[packages/framework/esm-navigation/src/history/history.ts:47](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-navigation/src/history/history.ts#L47)
 
 ___
 
@@ -3215,7 +3229,7 @@ Rolls back the history to the specified point and navigates to that URL.
 
 #### Defined in
 
-[packages/framework/esm-navigation/src/history/history.ts:50](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-navigation/src/history/history.ts#L50)
+[packages/framework/esm-navigation/src/history/history.ts:58](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-navigation/src/history/history.ts#L58)
 
 ___
 

packages/framework/esm-navigation/package.json

@@ -44,6 +44,7 @@
     "@openmrs/esm-state": "5.x"
   },
   "devDependencies": {
-    "@openmrs/esm-state": "workspace:*"
+    "@openmrs/esm-state": "workspace:*",
+    "lodash": "^4.17.21"
   }
 }

packages/framework/esm-navigation/src/history/history.test.ts

@@ -1,3 +1,4 @@
+import merge from 'lodash/merge';
 import { navigate } from '../navigation/navigate';
 import { clearHistory, getHistory, goBackInHistory, setupHistory } from './history';
 
@@ -53,12 +54,12 @@ describe('history', () => {
   it('should update history on routing events and go back correctly', () => {
     setupHistory();
     window.location.href = 'https://o3.openmrs.org/openmrs/spa/labs';
-    window.dispatchEvent(new CustomEvent('single-spa:routing-event'));
+    dispatchRoutingEvent();
     expect(getHistory()).toEqual([mockReferrer, 'https://o3.openmrs.org/openmrs/spa/labs']);
     window.location.href = 'https://o3.openmrs.org/pharmacy';
-    window.dispatchEvent(new CustomEvent('single-spa:routing-event'));
+    dispatchRoutingEvent();
     window.location.href = 'https://o3.openmrs.org/x-ray';
-    window.dispatchEvent(new CustomEvent('single-spa:routing-event'));
+    dispatchRoutingEvent();
     expect(getHistory()).toEqual([
       mockReferrer,
       'https://o3.openmrs.org/openmrs/spa/labs',
@@ -68,11 +69,36 @@ describe('history', () => {
 
     mockNavigate.mockImplementation((params: { to: string }) => {
       window.location.href = params.to;
-      window.dispatchEvent(new CustomEvent('single-spa:routing-event'));
+      dispatchRoutingEvent();
     });
     goBackInHistory({ toUrl: 'https://o3.openmrs.org/openmrs/spa/labs' });
     expect(getHistory()).toEqual([mockReferrer, 'https://o3.openmrs.org/openmrs/spa/labs']);
     goBackInHistory({ toUrl: mockReferrer });
     expect(getHistory()).toEqual([mockReferrer]);
   });
+
+  it('should handle in-SPA redirects / replaceState correctly', () => {
+    setupHistory();
+    window.location.href = 'https://o3.openmrs.org/openmrs/spa/tests';
+    dispatchRoutingEvent();
+    window.location.href = 'https://o3.openmrs.org/openmrs/spa/tests/home';
+    dispatchRoutingEvent({ originalEvent: { singleSpaTrigger: 'replaceState' } });
+    expect(getHistory()).toEqual([mockReferrer, 'https://o3.openmrs.org/openmrs/spa/tests/home']);
+  });
+
+  it('should handle back button navigation', () => {
+    setupHistory();
+    window.location.href = 'https://o3.openmrs.org/openmrs/spa/home';
+    dispatchRoutingEvent();
+    window.location.href = 'https://o3.openmrs.org/openmrs/spa/dentist';
+    dispatchRoutingEvent();
+    window.location.href = 'https://o3.openmrs.org/openmrs/spa/home';
+    dispatchRoutingEvent({ originalEvent: { singleSpa: null } });
+    expect(getHistory()).toEqual([mockReferrer, 'https://o3.openmrs.org/openmrs/spa/home']);
+  });
 });
+
+function dispatchRoutingEvent(additionalEventDetail: CustomEvent['detail'] = {}) {
+  const event = merge({ detail: { originalEvent: { singleSpa: true } } }, { detail: additionalEventDetail });
+  window.dispatchEvent(new CustomEvent('single-spa:routing-event', event));
+}

packages/framework/esm-navigation/src/history/history.ts

@@ -25,9 +25,17 @@ export function setupHistory() {
     addToHistory(document.referrer);
   }
 
-  window.addEventListener('single-spa:routing-event', (evt) => {
+  window.addEventListener('single-spa:routing-event', (evt: CustomEvent) => {
     const history = getHistory();
-    if (history[history.length - 1] !== window.location.href) {
+    if (evt.detail.originalEvent?.singleSpaTrigger == 'replaceState') {
+      // handle redirect
+      history[history.length - 1] = window.location.href;
+      sessionStorage.setItem(historyKey, JSON.stringify(history));
+    } else if (!evt.detail.originalEvent?.singleSpa && history.includes(window.location.href)) {
+      // handle back button (as best we can tell whether it was used or not)
+      goBackInHistory({ toUrl: window.location.href });
+    } else if (history[history.length - 1] !== window.location.href) {
+      // handle normal navigation
       addToHistory(window.location.href);
     }
   });

yarn.lock

@@ -2900,6 +2900,7 @@ __metadata:
   resolution: "@openmrs/esm-navigation@workspace:packages/framework/esm-navigation"
   dependencies:
     "@openmrs/esm-state": "workspace:*"
+    lodash: "npm:^4.17.21"
     path-to-regexp: "npm:6.1.0"
   peerDependencies:
     "@openmrs/esm-state": 5.x