@atlaskit/help 6.0.8 → 7.0.0

package/dist/es2019/components/contexts/navigationContext.js

@@ -1,4 +1,5 @@
 import React, { useReducer, useEffect, useCallback, useMemo } from 'react';
+import isEqual from 'lodash/isEqual';
 import { REQUEST_STATE } from '../../model/Requests';
 import { ARTICLE_TYPE } from '../../model/Help';
 import { createCtx } from '../../util/hooks/ctx';
@@ -8,6 +9,10 @@ import { useWhatsNewArticleContext } from './whatsNewArticleContext';
 import { useHomeContext } from './homeContext';
 import { useSearchContext } from './searchContext';
 import { useHeaderContext } from './headerContext';
+const DEFAULT_ARTICLE_ID = {
+  id: '',
+  type: ARTICLE_TYPE.HELP_ARTICLE
+};
 export const [useNavigationContext, CtxProvider] = createCtx();
 
 const getNewHistoryItem = (id, type) => {
@@ -39,6 +44,21 @@ const getSimpleHistory = history => history.map(historyItem => {
     type
   };
 });
+/**
+ * Get history data (list of IDs and UID)
+ */
+
+
+const getHistoryData = history => history.map(historyItem => {
+  const {
+    id,
+    uid
+  } = historyItem;
+  return {
+    id,
+    uid
+  };
+});
 /**
  * Get the last article in the history
  */
@@ -111,10 +131,28 @@ const navigationReducer = ({
     const {
       payload: newArticleId
     } = action;
+
+    if (isEqual(newArticleId, DEFAULT_ARTICLE_ID)) {
+      newState = {
+        articleId: newArticleId,
+        history: [],
+        view: VIEW.DEFAULT_CONTENT
+      };
+    } else {
+      newState = {
+        articleId: newArticleId,
+        history: [...currentHistory, getNewHistoryItem(newArticleId.id, newArticleId.type)],
+        view: getViewForArticleId(newArticleId)
+      };
+    }
+  } else if (action.type === 'addNewHistoryItem' && action.payload) {
+    const {
+      payload: newArticleId
+    } = action;
     newState = {
-      articleId: newArticleId,
+      articleId: currentArticleId,
       history: [...currentHistory, getNewHistoryItem(newArticleId.id, newArticleId.type)],
-      view: getViewForArticleId(newArticleId)
+      view: getViewForArticleId(currentArticleId)
     };
   } else if (action.type === 'updateHistoryItem' && action.payload) {
     const {
@@ -175,13 +213,11 @@ const navigationReducer = ({
 };
 
 export const NavigationContextProvider = ({
-  articleId: propsArticleId = {
-    id: '',
-    type: ARTICLE_TYPE.HELP_ARTICLE
+  navigationData = {
+    articleId: DEFAULT_ARTICLE_ID,
+    history: []
   },
-  articleIdSetter,
-  history: propsHistory = [],
-  historySetter,
+  setNavigationData,
   children
 }) => {
   const {
@@ -202,6 +238,10 @@ export const NavigationContextProvider = ({
   const {
     onCloseButtonClick
   } = useHeaderContext();
+  const {
+    articleId: propsArticleId,
+    history: propsHistory
+  } = navigationData;
   const [{
     articleId: currentArticleId,
     history: currentHistory,
@@ -221,8 +261,6 @@ export const NavigationContextProvider = ({
     /**
      * - If default content isn't defined and the history only has one article,
      * we should not display the back button
-     * - If the prop.article.setArticleId is not defined, we should also hide the back
-     * button because we are not able to navigate though the history without it
      */
     if (currentHistory.length === 1 && !isDefaultContentDefined || currentView === VIEW.WHATS_NEW && !isDefaultContentDefined) {
       return false;
@@ -339,6 +377,12 @@ export const NavigationContextProvider = ({
       onCloseButtonClick(event, analyticsEvent);
     }
   }, [onCloseButtonClick]);
+  const onOpenArticle = useCallback(newArticleId => {
+    dispatchNavigationAction({
+      type: 'addNewHistoryItem',
+      payload: newArticleId
+    });
+  }, []);
   useEffect(() => {
     if (isSearchResultVisible) {
       dispatchNavigationAction({
@@ -348,43 +392,59 @@ export const NavigationContextProvider = ({
     }
   }, [isSearchResultVisible]);
   useEffect(() => {
-    const simpleHistory = getSimpleHistory(currentHistory);
-    historySetter && historySetter(simpleHistory);
-  }, [historySetter, currentHistory]);
-  useEffect(() => {
+    const lastHistoryItem = currentHistory.length > 0 ? getCurrentArticle(currentHistory) : getNewHistoryItem(DEFAULT_ARTICLE_ID.id, DEFAULT_ARTICLE_ID.type);
     /**
      * If the propsArticleId.id (host articleId) is different from currentArticleId.id (internal articleId)
-     * it means the host updated propsArticleId and we need to use this new value to load a new article.
      * */
-    if ((propsArticleId === null || propsArticleId === void 0 ? void 0 : propsArticleId.id) !== currentArticleId.id || (propsArticleId === null || propsArticleId === void 0 ? void 0 : propsArticleId.type) !== currentArticleId.type) {
-      dispatchNavigationAction({
-        type: 'newArticle',
-        payload: propsArticleId
-      });
-    } else {
+
+    if (!isEqual(propsArticleId, currentArticleId)) {
       /**
-       * If the propsArticleId.id (host articleId) is equal to currentArticleId.id (internal articleId)
-       * and the id from the last history item is different from currentArticleId.id, it means the history
-       * changed and we need to update the host articleId (propsArticleId) using 'articleIdSetter' and the local
-       * history using the dispatchNavigationAction reducer
-       * */
-      const lastHistoryItem = currentHistory.length > 0 ? getCurrentArticle(currentHistory) : getNewHistoryItem('', ARTICLE_TYPE.HELP_ARTICLE);
-
-      if (articleIdSetter && lastHistoryItem && (currentArticleId.id !== lastHistoryItem.id || currentArticleId.type !== lastHistoryItem.type)) {
+       * If propsArticleId and lastHistoryItem are the same, we just need to update the articleId
+       * because is out of sync
+       */
+      if (propsArticleId.id === lastHistoryItem.id && propsArticleId.type === lastHistoryItem.type) {
         dispatchNavigationAction({
           type: 'updateArticleId',
-          payload: {
-            id: lastHistoryItem.id,
-            type: lastHistoryItem.type
-          }
+          payload: propsArticleId
         });
-        articleIdSetter({
-          id: lastHistoryItem.id,
-          type: lastHistoryItem.type
+      } else {
+        /**
+         * Otherwise we need to add a new article
+         */
+        dispatchNavigationAction({
+          type: 'newArticle',
+          payload: propsArticleId
         });
       }
+    } else {
+      // console.log('same articleId');
+      if (setNavigationData) {
+        const simpleHistory = getSimpleHistory(currentHistory);
+
+        if (currentArticleId.id !== lastHistoryItem.id || currentArticleId.type !== lastHistoryItem.type) {
+          /**
+           * If the propsArticleId.id (host articleId) is equal to currentArticleId.id (internal articleId)
+           * and the id from the last history item is different from currentArticleId.id, it means the history
+           * changed
+           * */
+          if (setNavigationData) {
+            setNavigationData({
+              articleId: {
+                id: lastHistoryItem.id,
+                type: lastHistoryItem.type
+              },
+              history: simpleHistory
+            });
+          }
+        } else if (!isEqual(getHistoryData(propsHistory), getHistoryData(currentHistory))) {
+          setNavigationData({
+            articleId: propsArticleId,
+            history: simpleHistory
+          });
+        }
+      }
     }
-  }, [currentArticleId, propsArticleId, currentHistory, articleIdSetter]);
+  }, [currentArticleId, propsArticleId, currentHistory, setNavigationData, propsHistory]);
   useEffect(() => {
     const requestNewArticle = async historyItem => {
       const historyItemUpdate = await fetchArticleData(historyItem);
@@ -408,7 +468,7 @@ export const NavigationContextProvider = ({
     value: {
       view: currentView,
       articleId: currentArticleId,
-      setArticleId: articleIdSetter,
+      openArticle: onOpenArticle,
       history: currentHistory,
       getCurrentArticle: () => getCurrentArticle(currentHistory),
       getCurrentArticleItemData: () => getCurrentArticleItemSlim(currentHistory),

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/help",
-	"version": "6.0.8",
+	"version": "7.0.0",
 	"sideEffects": false
 }

package/dist/esm/components/Article/HelpArticle/index.js

@@ -14,7 +14,7 @@ export var HelpArticle = function HelpArticle(_ref) {
       isLoading = _ref.isLoading;
 
   var _useNavigationContext = useNavigationContext(),
-      setArticleId = _useNavigationContext.setArticleId,
+      openArticle = _useNavigationContext.openArticle,
       getCurrentArticleItemData = _useNavigationContext.getCurrentArticleItemData;
 
   var _useHelpArticleContex = useHelpArticleContext(),
@@ -56,13 +56,11 @@ export var HelpArticle = function HelpArticle(_ref) {
       onRelatedArticlesListItemClick(event, analyticsEvent, articleData);
     }
 
-    if (setArticleId) {
-      setArticleId({
-        id: articleData.id,
-        type: ARTICLE_TYPE.HELP_ARTICLE
-      });
-    }
-  }, [setArticleId, onRelatedArticlesListItemClick]);
+    openArticle({
+      id: articleData.id,
+      type: ARTICLE_TYPE.HELP_ARTICLE
+    });
+  }, [openArticle, onRelatedArticlesListItemClick]);
   var handleOnRelatedArticlesShowMoreClick = useCallback(function (event, analyticsEvent, isCollapsed) {
     analyticsEvent.payload.attributes = {
       componentName: 'Article',

package/dist/esm/components/Article/index.js

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useState, useLayoutEffect, useRef, useEffect, useCallback } from 'react';
 import { Transition } from 'react-transition-group';

package/dist/esm/components/Help.js

@@ -5,6 +5,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+var _excluded = ["children", "footer"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -39,7 +40,7 @@ export var Help = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props = this.props,
           children = _this$props.children,
           footer = _this$props.footer,
-          rest = _objectWithoutProperties(_this$props, ["children", "footer"]);
+          rest = _objectWithoutProperties(_this$props, _excluded);
 
       return /*#__PURE__*/React.createElement(HeaderContextProvider, rest.header, /*#__PURE__*/React.createElement(HomeContextProvider, _extends({}, rest.home, {
         homeContent: children

package/dist/esm/components/Search/SearchResults/index.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useCallback } from 'react';
 import { Transition } from 'react-transition-group';
@@ -50,19 +50,16 @@ export var SearchResults = function SearchResults() {
       onSearchExternalUrlClick = _useSearchContext.onSearchExternalUrlClick;
 
   var _useNavigationContext = useNavigationContext(),
-      setArticleId = _useNavigationContext.setArticleId,
+      openArticle = _useNavigationContext.openArticle,
       view = _useNavigationContext.view;
 
   var handleOnSearchResultItemClick = useCallback(function (event, analyticsEvent, articleData) {
-    if (setArticleId) {
-      setArticleId({
-        id: articleData.id,
-        type: ARTICLE_TYPE.HELP_ARTICLE
-      });
-    }
-
+    openArticle({
+      id: articleData.id,
+      type: ARTICLE_TYPE.HELP_ARTICLE
+    });
     onSearchResultItemClick(event, analyticsEvent, articleData);
-  }, [onSearchResultItemClick, setArticleId]);
+  }, [onSearchResultItemClick, openArticle]);
   return /*#__PURE__*/React.createElement(Transition, {
     in: view === VIEW.SEARCH && isSearchResultVisible,
     timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS

package/dist/esm/components/WhatsNew/WhatsNewButton/index.js

@@ -23,20 +23,18 @@ export var WhatsNewButton = function WhatsNewButton(_ref) {
       whatsNewGetNotificationProvider = _useWhatsNewArticleCo.whatsNewGetNotificationProvider;
 
   var _useNavigationContext = useNavigationContext(),
-      setArticleId = _useNavigationContext.setArticleId;
+      openArticle = _useNavigationContext.openArticle;
 
   var handleOnButtonClick = useCallback(function (id, analytics, event) {
     if (onWhatsNewButtonClick) {
       onWhatsNewButtonClick(event, analytics);
     }
 
-    if (setArticleId) {
-      setArticleId({
-        id: '',
-        type: ARTICLE_TYPE.WHATS_NEW
-      });
-    }
-  }, [onWhatsNewButtonClick, setArticleId]);
+    openArticle({
+      id: '',
+      type: ARTICLE_TYPE.WHATS_NEW
+    });
+  }, [onWhatsNewButtonClick, openArticle]);
   return /*#__PURE__*/React.createElement(HelpContentButton, {
     id: "whats-new",
     key: "whats-new",

package/dist/esm/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/index.js

@@ -31,7 +31,7 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
       onShowMoreButtonClick = _ref.onShowMoreButtonClick;
 
   var _useNavigationContext = useNavigationContext(),
-      setArticleId = _useNavigationContext.setArticleId;
+      openArticle = _useNavigationContext.openArticle;
 
   var handleShowMoreButtonClick = function handleShowMoreButtonClick(event, analyticsEvent) {
     if (onShowMoreButtonClick) {
@@ -40,17 +40,15 @@ var WhatsNewResultsList = function WhatsNewResultsList(_ref) {
   };
 
   var handleOnWhatsNewResultItemClick = useCallback(function (event, analyticsEvent, articleData) {
-    if (setArticleId) {
-      setArticleId({
-        id: articleData.id,
-        type: ARTICLE_TYPE.WHATS_NEW
-      });
-    }
+    openArticle({
+      id: articleData.id,
+      type: ARTICLE_TYPE.WHATS_NEW
+    });
 
     if (onWhatsNewResultItemClick) {
       onWhatsNewResultItemClick(event, analyticsEvent, articleData);
     }
-  }, [onWhatsNewResultItemClick, setArticleId]);
+  }, [onWhatsNewResultItemClick, openArticle]);
   return whatsNewArticles && whatsNewArticles.length > 0 ? /*#__PURE__*/React.createElement(WhatsNewResultsListContainer, null, /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: _defineProperty({}, itemThemeNamespace, ITEM_THEME)
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArticlesList, {

package/dist/esm/components/WhatsNew/WhatsNewResults/index.js

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useCallback, useState } from 'react';
 import { Transition } from 'react-transition-group';

package/dist/esm/components/contexts/navigationContext.js

@@ -4,12 +4,15 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["body", "relatedArticles"],
+    _excluded2 = ["description"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useReducer, useEffect, useCallback, useMemo } from 'react';
+import isEqual from 'lodash/isEqual';
 import { REQUEST_STATE } from '../../model/Requests';
 import { ARTICLE_TYPE } from '../../model/Help';
 import { createCtx } from '../../util/hooks/ctx';
@@ -19,6 +22,10 @@ import { useWhatsNewArticleContext } from './whatsNewArticleContext';
 import { useHomeContext } from './homeContext';
 import { useSearchContext } from './searchContext';
 import { useHeaderContext } from './headerContext';
+var DEFAULT_ARTICLE_ID = {
+  id: '',
+  type: ARTICLE_TYPE.HELP_ARTICLE
+};
 
 var _createCtx = createCtx(),
     _createCtx2 = _slicedToArray(_createCtx, 2),
@@ -56,6 +63,21 @@ var getSimpleHistory = function getSimpleHistory(history) {
     };
   });
 };
+/**
+ * Get history data (list of IDs and UID)
+ */
+
+
+var getHistoryData = function getHistoryData(history) {
+  return history.map(function (historyItem) {
+    var id = historyItem.id,
+        uid = historyItem.uid;
+    return {
+      id: id,
+      uid: uid
+    };
+  });
+};
 /**
  * Get the last article in the history
  */
@@ -79,14 +101,14 @@ var getCurrentArticleItemSlim = function getCurrentArticleItemSlim(history) {
       var _ref = article,
           body = _ref.body,
           relatedArticles = _ref.relatedArticles,
-          articleItemData = _objectWithoutProperties(_ref, ["body", "relatedArticles"]);
+          articleItemData = _objectWithoutProperties(_ref, _excluded);
 
       var currentArticleSlimData = articleItemData;
       return currentArticleSlimData;
     } else if (type === ARTICLE_TYPE.WHATS_NEW) {
       var _ref2 = article,
           description = _ref2.description,
-          whatsNewArticleItemData = _objectWithoutProperties(_ref2, ["description"]);
+          whatsNewArticleItemData = _objectWithoutProperties(_ref2, _excluded2);
 
       var currentWhatsNewArticleSlimData = whatsNewArticleItemData;
       return currentWhatsNewArticleSlimData;
@@ -126,10 +148,26 @@ var navigationReducer = function navigationReducer(_ref3, action) {
 
   if (action.type === 'newArticle' && action.payload) {
     var newArticleId = action.payload;
+
+    if (isEqual(newArticleId, DEFAULT_ARTICLE_ID)) {
+      newState = {
+        articleId: newArticleId,
+        history: [],
+        view: VIEW.DEFAULT_CONTENT
+      };
+    } else {
+      newState = {
+        articleId: newArticleId,
+        history: [].concat(_toConsumableArray(currentHistory), [getNewHistoryItem(newArticleId.id, newArticleId.type)]),
+        view: getViewForArticleId(newArticleId)
+      };
+    }
+  } else if (action.type === 'addNewHistoryItem' && action.payload) {
+    var _newArticleId = action.payload;
     newState = {
-      articleId: newArticleId,
-      history: [].concat(_toConsumableArray(currentHistory), [getNewHistoryItem(newArticleId.id, newArticleId.type)]),
-      view: getViewForArticleId(newArticleId)
+      articleId: currentArticleId,
+      history: [].concat(_toConsumableArray(currentHistory), [getNewHistoryItem(_newArticleId.id, _newArticleId.type)]),
+      view: getViewForArticleId(currentArticleId)
     };
   } else if (action.type === 'updateHistoryItem' && action.payload) {
     var HistoryItemUpdate = action.payload;
@@ -167,11 +205,11 @@ var navigationReducer = function navigationReducer(_ref3, action) {
       view: VIEW.DEFAULT_CONTENT
     };
   } else if (action.type === 'updateArticleId' && action.payload) {
-    var _newArticleId = action.payload;
+    var _newArticleId2 = action.payload;
     newState = {
-      articleId: _newArticleId,
+      articleId: _newArticleId2,
       history: currentHistory,
-      view: getViewForArticleId(_newArticleId)
+      view: getViewForArticleId(_newArticleId2)
     };
   } else if (action.type === 'updateView' && action.payload) {
     var newView = action.payload;
@@ -186,15 +224,12 @@ var navigationReducer = function navigationReducer(_ref3, action) {
 };
 
 export var NavigationContextProvider = function NavigationContextProvider(_ref4) {
-  var _ref4$articleId = _ref4.articleId,
-      propsArticleId = _ref4$articleId === void 0 ? {
-    id: '',
-    type: ARTICLE_TYPE.HELP_ARTICLE
-  } : _ref4$articleId,
-      articleIdSetter = _ref4.articleIdSetter,
-      _ref4$history = _ref4.history,
-      propsHistory = _ref4$history === void 0 ? [] : _ref4$history,
-      historySetter = _ref4.historySetter,
+  var _ref4$navigationData = _ref4.navigationData,
+      navigationData = _ref4$navigationData === void 0 ? {
+    articleId: DEFAULT_ARTICLE_ID,
+    history: []
+  } : _ref4$navigationData,
+      setNavigationData = _ref4.setNavigationData,
       children = _ref4.children;
 
   var _useHelpArticleContex = useHelpArticleContext(),
@@ -215,6 +250,9 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref4)
   var _useHeaderContext = useHeaderContext(),
       onCloseButtonClick = _useHeaderContext.onCloseButtonClick;
 
+  var propsArticleId = navigationData.articleId,
+      propsHistory = navigationData.history;
+
   var _useReducer = useReducer(navigationReducer, {
     articleId: propsArticleId,
     history: propsHistory,
@@ -237,8 +275,6 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref4)
     /**
      * - If default content isn't defined and the history only has one article,
      * we should not display the back button
-     * - If the prop.article.setArticleId is not defined, we should also hide the back
-     * button because we are not able to navigate though the history without it
      */
     if (currentHistory.length === 1 && !isDefaultContentDefined || currentView === VIEW.WHATS_NEW && !isDefaultContentDefined) {
       return false;
@@ -426,6 +462,12 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref4)
       onCloseButtonClick(event, analyticsEvent);
     }
   }, [onCloseButtonClick]);
+  var onOpenArticle = useCallback(function (newArticleId) {
+    dispatchNavigationAction({
+      type: 'addNewHistoryItem',
+      payload: newArticleId
+    });
+  }, []);
   useEffect(function () {
     if (isSearchResultVisible) {
       dispatchNavigationAction({
@@ -435,43 +477,59 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref4)
     }
   }, [isSearchResultVisible]);
   useEffect(function () {
-    var simpleHistory = getSimpleHistory(currentHistory);
-    historySetter && historySetter(simpleHistory);
-  }, [historySetter, currentHistory]);
-  useEffect(function () {
+    var lastHistoryItem = currentHistory.length > 0 ? _getCurrentArticle2(currentHistory) : getNewHistoryItem(DEFAULT_ARTICLE_ID.id, DEFAULT_ARTICLE_ID.type);
     /**
      * If the propsArticleId.id (host articleId) is different from currentArticleId.id (internal articleId)
-     * it means the host updated propsArticleId and we need to use this new value to load a new article.
      * */
-    if ((propsArticleId === null || propsArticleId === void 0 ? void 0 : propsArticleId.id) !== currentArticleId.id || (propsArticleId === null || propsArticleId === void 0 ? void 0 : propsArticleId.type) !== currentArticleId.type) {
-      dispatchNavigationAction({
-        type: 'newArticle',
-        payload: propsArticleId
-      });
-    } else {
+
+    if (!isEqual(propsArticleId, currentArticleId)) {
       /**
-       * If the propsArticleId.id (host articleId) is equal to currentArticleId.id (internal articleId)
-       * and the id from the last history item is different from currentArticleId.id, it means the history
-       * changed and we need to update the host articleId (propsArticleId) using 'articleIdSetter' and the local
-       * history using the dispatchNavigationAction reducer
-       * */
-      var lastHistoryItem = currentHistory.length > 0 ? _getCurrentArticle2(currentHistory) : getNewHistoryItem('', ARTICLE_TYPE.HELP_ARTICLE);
-
-      if (articleIdSetter && lastHistoryItem && (currentArticleId.id !== lastHistoryItem.id || currentArticleId.type !== lastHistoryItem.type)) {
+       * If propsArticleId and lastHistoryItem are the same, we just need to update the articleId
+       * because is out of sync
+       */
+      if (propsArticleId.id === lastHistoryItem.id && propsArticleId.type === lastHistoryItem.type) {
         dispatchNavigationAction({
           type: 'updateArticleId',
-          payload: {
-            id: lastHistoryItem.id,
-            type: lastHistoryItem.type
-          }
+          payload: propsArticleId
         });
-        articleIdSetter({
-          id: lastHistoryItem.id,
-          type: lastHistoryItem.type
+      } else {
+        /**
+         * Otherwise we need to add a new article
+         */
+        dispatchNavigationAction({
+          type: 'newArticle',
+          payload: propsArticleId
         });
       }
+    } else {
+      // console.log('same articleId');
+      if (setNavigationData) {
+        var simpleHistory = getSimpleHistory(currentHistory);
+
+        if (currentArticleId.id !== lastHistoryItem.id || currentArticleId.type !== lastHistoryItem.type) {
+          /**
+           * If the propsArticleId.id (host articleId) is equal to currentArticleId.id (internal articleId)
+           * and the id from the last history item is different from currentArticleId.id, it means the history
+           * changed
+           * */
+          if (setNavigationData) {
+            setNavigationData({
+              articleId: {
+                id: lastHistoryItem.id,
+                type: lastHistoryItem.type
+              },
+              history: simpleHistory
+            });
+          }
+        } else if (!isEqual(getHistoryData(propsHistory), getHistoryData(currentHistory))) {
+          setNavigationData({
+            articleId: propsArticleId,
+            history: simpleHistory
+          });
+        }
+      }
     }
-  }, [currentArticleId, propsArticleId, currentHistory, articleIdSetter]);
+  }, [currentArticleId, propsArticleId, currentHistory, setNavigationData, propsHistory]);
   useEffect(function () {
     var requestNewArticle = /*#__PURE__*/function () {
       var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(historyItem) {
@@ -517,7 +575,7 @@ export var NavigationContextProvider = function NavigationContextProvider(_ref4)
     value: {
       view: currentView,
       articleId: currentArticleId,
-      setArticleId: articleIdSetter,
+      openArticle: onOpenArticle,
       history: currentHistory,
       getCurrentArticle: function getCurrentArticle() {
         return _getCurrentArticle2(currentHistory);