fix(platformServices): sw-625 restore onNavigate

* authenticationContext, restore onNavigation callback * platformActions, restore onNavigation * redux, platformTypes, restore dispatch type * services, restore onNavigation
RedHatInsights · Mar 20, 2023 · c74f315 · c74f315
1 parent fe94e57
commit c74f315
Show file tree

Hide file tree

Showing 16 changed files with 208 additions and 60 deletions.
diff --git a/src/components/README.md b/src/components/README.md
@@ -298,10 +298,14 @@ Initialize an app, and return a combined state store that includes authorization
     </tr><tr>
     <td>options.hideGlobalFilter</td><td><code>function</code></td>
     </tr><tr>
+    <td>options.onNavigation</td><td><code>function</code></td>
+    </tr><tr>
     <td>options.useChrome</td><td><code>function</code></td>
     </tr><tr>
     <td>options.useDispatch</td><td><code>function</code></td>
     </tr><tr>
+    <td>options.useNavigate</td><td><code>function</code></td>
+    </tr><tr>
     <td>options.useSelectorsResponse</td><td><code>function</code></td>
     </tr>  </tbody>
 </table>

diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -4,9 +4,11 @@ exports[`Authentication Component should allow being disabled: disabled 1`] = `
 <ContextProvider
   value={
     {
-      "errorCodes": undefined,
-      "errorStatus": null,
-      "locale": undefined,
+      "authorized": {
+        "subscriptions": true,
+      },
+      "errorCodes": [],
+      "errorStatus": undefined,
     }
   }
 >
@@ -27,9 +29,9 @@ exports[`Authentication Component should render a basic component: basic 1`] = `
 <ContextProvider
   value={
     {
-      "errorCodes": undefined,
-      "errorStatus": null,
-      "locale": undefined,
+      "authorized": {},
+      "errorCodes": [],
+      "errorStatus": undefined,
     }
   }
 >

diff --git a/src/components/authentication/__tests__/__snapshots__/authenticationContext.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authenticationContext.test.js.snap
@@ -76,6 +76,9 @@ exports[`AuthenticationContext should apply a hook for retrieving auth data from
       },
     ],
   ],
+  [
+    [Function],
+  ],
 ]
 `;
 

diff --git a/src/components/authentication/__tests__/authentication.test.js b/src/components/authentication/__tests__/authentication.test.js
@@ -5,8 +5,20 @@ import { rhsmConstants } from '../../../services/rhsm/rhsmConstants';
 
 describe('Authentication Component', () => {
   it('should render a basic component', async () => {
+    const props = {
+      useGetAuthorization: () => ({
+        error: false,
+        pending: false,
+        data: {
+          authorized: {},
+          errorCodes: [],
+          errorStatus: undefined
+        }
+      })
+    };
+
     const component = await shallowHookComponent(
-      <Authentication>
+      <Authentication {...props}>
         <span className="test">lorem</span>
       </Authentication>
     );
@@ -37,7 +49,18 @@ describe('Authentication Component', () => {
 
   it('should allow being disabled', async () => {
     const props = {
-      isDisabled: true
+      isDisabled: true,
+      useGetAuthorization: () => ({
+        error: false,
+        pending: false,
+        data: {
+          authorized: {
+            [helpers.UI_NAME]: true
+          },
+          errorCodes: [],
+          errorStatus: undefined
+        }
+      })
     };
     const component = await shallowHookComponent(
       <Authentication {...props}>

diff --git a/src/components/authentication/__tests__/authenticationContext.test.js b/src/components/authentication/__tests__/authenticationContext.test.js
@@ -9,6 +9,7 @@ describe('AuthenticationContext', () => {
   it('should apply a hook for retrieving auth data from multiple selectors', async () => {
     const { result: errorResponse } = shallowHook(() =>
       useGetAuthorization({
+        useNavigate: () => jest.fn(),
         useSelectorsResponse: () => ({
           error: true,
           data: {
@@ -33,6 +34,7 @@ describe('AuthenticationContext', () => {
     const { result: successResponse } = await mountHook(() =>
       useGetAuthorization({
         useDispatch: () => mockDispatch,
+        useNavigate: () => jest.fn(),
         useSelectorsResponse: () => ({
           fulfilled: true,
           data: {
@@ -52,57 +54,66 @@ describe('AuthenticationContext', () => {
     expect(mockDispatch.mock.calls).toMatchSnapshot('success dispatch');
     expect(successResponse).toMatchSnapshot('success response');
 
-    const { result: mockStoreSuccessResponse } = shallowHook(() => useGetAuthorization(), {
-      state: {
-        user: {
-          auth: {
-            fulfilled: true,
-            data: [
-              { isAdmin: true, isEntitled: true },
-              {
-                permissions: [
-                  {
-                    subscriptions: {
-                      all: true,
-                      resources: {
-                        '*': {
-                          '*': [],
-                          loremCustom: [],
-                          read: []
+    const { result: mockStoreSuccessResponse } = shallowHook(
+      () => useGetAuthorization({ useNavigate: () => jest.fn() }),
+      {
+        state: {
+          user: {
+            auth: {
+              fulfilled: true,
+              data: [
+                { isAdmin: true, isEntitled: true },
+                {
+                  permissions: [
+                    {
+                      subscriptions: {
+                        all: true,
+                        resources: {
+                          '*': {
+                            '*': [],
+                            loremCustom: [],
+                            read: []
+                          }
                         }
                       }
                     }
+                  ],
+                  authorized: {
+                    subscriptions: true
                   }
-                ],
-                authorized: {
-                  subscriptions: true
                 }
-              }
-            ]
-          },
-          locale: { fulfilled: true, data: {} },
-          errors: {}
+              ]
+            },
+            locale: { fulfilled: true, data: {} },
+            errors: {}
+          }
         }
       }
-    });
+    );
 
     expect(mockStoreSuccessResponse).toMatchSnapshot('mock store success response');
 
-    const { result: mockStoreErrorResponse } = shallowHook(() => useGetAuthorization(), {
-      state: {
-        user: {
-          auth: {
-            error: true,
-            data: []
-          },
-          locale: { fulfilled: true, data: {} },
-          errors: {
-            error: true,
-            data: ['lorem', 'ipsum']
+    const { result: mockStoreErrorResponse } = shallowHook(
+      () =>
+        useGetAuthorization({
+          useNavigate: () => jest.fn()
+        }),
+      {
+        state: {
+          user: {
+            auth: {
+              error: true,
+              data: []
+            },
+            locale: { fulfilled: true, data: {} },
+            errors: {
+              error: true,
+              data: ['lorem', 'ipsum']
+            }
           }
         }
       }
-    });
+    );
 
     expect(mockStoreErrorResponse).toMatchSnapshot('mock store error response');
   });

diff --git a/src/components/authentication/authenticationContext.js b/src/components/authentication/authenticationContext.js
@@ -1,9 +1,9 @@
-import React, { useContext } from 'react';
-import { useMount } from 'react-use';
+import React, { useContext, useState } from 'react';
+import { useMount, useUnmount } from 'react-use';
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
 import { reduxActions, storeHooks } from '../../redux';
 import { helpers } from '../../common';
-import { routerHelpers } from '../router';
+import { routerContext, routerHelpers } from '../router';
 
 /**
  * @memberof Authentication
@@ -33,19 +33,25 @@ const useAuthContext = () => useContext(AuthenticationContext);
  * @param {string} options.appName
  * @param {Function} options.authorizeUser
  * @param {Function} options.hideGlobalFilter
+ * @param {Function} options.onNavigation
  * @param {Function} options.useChrome
  * @param {Function} options.useDispatch
+ * @param {Function} options.useNavigate
  * @param {Function} options.useSelectorsResponse
  * @returns {{data: {errorCodes, errorStatus: *, locale}, pending: boolean, fulfilled: boolean, error: boolean}}
  */
 const useGetAuthorization = ({
   appName = routerHelpers.appName,
   authorizeUser = reduxActions.platform.authorizeUser,
   hideGlobalFilter = reduxActions.platform.hideGlobalFilter,
+  onNavigation = reduxActions.platform.onNavigation,
   useChrome: useAliasChrome = useChrome,
   useDispatch: useAliasDispatch = storeHooks.reactRedux.useDispatch,
+  useNavigate: useAliasNavigate = routerContext.useNavigate,
   useSelectorsResponse: useAliasSelectorsResponse = storeHooks.reactRedux.useSelectorsResponse
 } = {}) => {
+  const [unregister, setUnregister] = useState(() => helpers.noop);
+  const navigate = useAliasNavigate();
   const dispatch = useAliasDispatch();
   const { updateDocumentTitle = helpers.noop } = useAliasChrome();
   const { data, error, fulfilled, pending, responses } = useAliasSelectorsResponse([
@@ -61,6 +67,11 @@ const useGetAuthorization = ({
     await dispatch(authorizeUser());
     updateDocumentTitle(appName);
     dispatch([hideGlobalFilter()]);
+    setUnregister(() => dispatch(onNavigation(event => navigate(event.navId))));
+  });
+
+  useUnmount(() => {
+    unregister();
   });
 
   const [user = {}, app = {}] = (Array.isArray(data.auth) && data.auth) || [];

diff --git a/src/redux/README.md b/src/redux/README.md
@@ -80,6 +80,7 @@ Platform service wrappers for dispatch, state update.
     * [~clearNotifications()](#Actions.module_PlatformActions..clearNotifications) ⇒ <code>\*</code>
     * [~authorizeUser(appName)](#Actions.module_PlatformActions..authorizeUser) ⇒ <code>function</code>
     * [~hideGlobalFilter(isHidden)](#Actions.module_PlatformActions..hideGlobalFilter) ⇒ <code>Object</code>
+    * [~onNavigation(callback)](#Actions.module_PlatformActions..onNavigation) ⇒ <code>function</code>
 
 <a name="Actions.module_PlatformActions..addNotification"></a>
 
@@ -159,6 +160,24 @@ Hide platform global filter.
     </tr>  </tbody>
 </table>
 
+<a name="Actions.module_PlatformActions..onNavigation"></a>
+
+### PlatformActions~onNavigation(callback) ⇒ <code>function</code>
+Apply platform method for updating routing history on "navigating" with the left-nav.
+
+**Kind**: inner method of [<code>PlatformActions</code>](#Actions.module_PlatformActions)  
+<table>
+  <thead>
+    <tr>
+      <th>Param</th><th>Type</th>
+    </tr>
+  </thead>
+  <tbody>
+<tr>
+    <td>callback</td><td><code>function</code></td>
+    </tr>  </tbody>
+</table>
+
 <a name="Actions.module_RhsmActions"></a>
 
 ## RhsmActions

diff --git a/src/redux/actions/__tests__/__snapshots__/platformActions.test.js.snap b/src/redux/actions/__tests__/__snapshots__/platformActions.test.js.snap
@@ -6,3 +6,7 @@ exports[`PlatformActions Should return a dispatch object for the hideGlobalFilte
   "type": "PLATFORM_GLOBAL_FILTER_HIDE",
 }
 `;
+
+exports[`PlatformActions Should return a function for the onNavigation method: expected process 1`] = `"lorem ipsum"`;
+
+exports[`PlatformActions Should return a function for the onNavigation method: function 1`] = `[Function]`;
diff --git a/src/redux/actions/__tests__/platformActions.test.js b/src/redux/actions/__tests__/platformActions.test.js
@@ -28,4 +28,12 @@ describe('PlatformActions', () => {
   it('Should return a dispatch object for the hideGlobalFilter method', () => {
     expect(platformActions.hideGlobalFilter()).toMatchSnapshot('dispatch object');
   });
+
+  it('Should return a function for the onNavigation method', () => {
+    expect(platformActions.onNavigation()).toMatchSnapshot('function');
+
+    window.insights.chrome.on = jest.fn().mockImplementation((id, value) => value('lorem'));
+    const dispatch = obj => obj;
+    expect(platformActions.onNavigation(event => `${event} ipsum`)(dispatch)).toMatchSnapshot('expected process');
+  });
 });
diff --git a/src/redux/actions/platformActions.js b/src/redux/actions/platformActions.js
@@ -59,12 +59,26 @@ const hideGlobalFilter = isHidden => ({
   payload: platformServices.hideGlobalFilter(isHidden)
 });
 
+/**
+ * Apply platform method for updating routing history on "navigating" with the left-nav.
+ *
+ * @param {Function} callback
+ * @returns {Function}
+ */
+const onNavigation = callback => dispatch => {
+  dispatch({
+    type: platformTypes.PLATFORM_ON_NAV
+  });
+  return platformServices.onNavigation(callback);
+};
+
 const platformActions = {
   addNotification,
   removeNotification,
   clearNotifications,
   authorizeUser,
-  hideGlobalFilter
+  hideGlobalFilter,
+  onNavigation
 };
 
 export {
@@ -74,5 +88,6 @@ export {
   removeNotification,
   clearNotifications,
   authorizeUser,
-  hideGlobalFilter
+  hideGlobalFilter,
+  onNavigation
 };
diff --git a/src/redux/types/__tests__/__snapshots__/index.test.js.snap b/src/redux/types/__tests__/__snapshots__/index.test.js.snap
@@ -24,6 +24,7 @@ exports[`ReduxTypes should have specific type properties: all redux types 1`] =
       "PLATFORM_ADD_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/ADD_NOTIFICATION",
       "PLATFORM_CLEAR_NOTIFICATIONS": "@@INSIGHTS-CORE/NOTIFICATIONS/CLEAR_NOTIFICATIONS",
       "PLATFORM_GLOBAL_FILTER_HIDE": "PLATFORM_GLOBAL_FILTER_HIDE",
+      "PLATFORM_ON_NAV": "PLATFORM_ON_NAV",
       "PLATFORM_REMOVE_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/REMOVE_NOTIFICATION",
       "PLATFORM_USER_AUTH": "PLATFORM_USER_AUTH",
     },
@@ -93,6 +94,7 @@ exports[`ReduxTypes should have specific type properties: all redux types 1`] =
     "PLATFORM_ADD_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/ADD_NOTIFICATION",
     "PLATFORM_CLEAR_NOTIFICATIONS": "@@INSIGHTS-CORE/NOTIFICATIONS/CLEAR_NOTIFICATIONS",
     "PLATFORM_GLOBAL_FILTER_HIDE": "PLATFORM_GLOBAL_FILTER_HIDE",
+    "PLATFORM_ON_NAV": "PLATFORM_ON_NAV",
     "PLATFORM_REMOVE_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/REMOVE_NOTIFICATION",
     "PLATFORM_USER_AUTH": "PLATFORM_USER_AUTH",
   },
@@ -146,6 +148,7 @@ exports[`ReduxTypes should have specific type properties: all redux types 1`] =
       "PLATFORM_ADD_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/ADD_NOTIFICATION",
       "PLATFORM_CLEAR_NOTIFICATIONS": "@@INSIGHTS-CORE/NOTIFICATIONS/CLEAR_NOTIFICATIONS",
       "PLATFORM_GLOBAL_FILTER_HIDE": "PLATFORM_GLOBAL_FILTER_HIDE",
+      "PLATFORM_ON_NAV": "PLATFORM_ON_NAV",
       "PLATFORM_REMOVE_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/REMOVE_NOTIFICATION",
       "PLATFORM_USER_AUTH": "PLATFORM_USER_AUTH",
     },
@@ -246,6 +249,7 @@ exports[`ReduxTypes should have specific type properties: specific types 1`] = `
     "PLATFORM_ADD_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/ADD_NOTIFICATION",
     "PLATFORM_CLEAR_NOTIFICATIONS": "@@INSIGHTS-CORE/NOTIFICATIONS/CLEAR_NOTIFICATIONS",
     "PLATFORM_GLOBAL_FILTER_HIDE": "PLATFORM_GLOBAL_FILTER_HIDE",
+    "PLATFORM_ON_NAV": "PLATFORM_ON_NAV",
     "PLATFORM_REMOVE_NOTIFICATION": "@@INSIGHTS-CORE/NOTIFICATIONS/REMOVE_NOTIFICATION",
     "PLATFORM_USER_AUTH": "PLATFORM_USER_AUTH",
   },