@atlaskit/help 4.2.3 → 6.0.0

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

@@ -13,8 +13,7 @@ export const WhatsNewArticleProvider = ({
   children
 }) => {
   // What's new
-  const [whatsNewSearchType, setWhatsNewSearchType] = useState(undefined); // const [whatsNewPage, setWhatsNewPage] = useState('');
-
+  const [whatsNewSearchType, setWhatsNewSearchType] = useState(undefined);
   const [searchWhatsNewArticlesResult, setSearchWhatsNewArticlesResult] = useState(null);
   const [searchWhatsNewArticlesState, setSearchWhatsNewArticlesState] = useState(REQUEST_STATE.done);
   const searchWhatsNew = useCallback(async (filter = '', numberOfItems = NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE, page = '') => {

package/dist/es2019/components/styled.js

@@ -22,7 +22,7 @@ export const HelpBody = styled.div`
   align-self: auto;
   position: relative;
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: auto;
 `;
 export const Home = styled.div`
   display: ${props => props.isOverlayFullyVisible ? 'none' : 'block'};

package/dist/es2019/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   help_loading: {
     id: 'help.loading',
@@ -177,7 +177,7 @@ export const messages = defineMessages({
   },
   help_whats_new_button_label: {
     id: 'help.whats_new.button_label',
-    defaultMessage: `Whats's new`,
+    defaultMessage: `What's new`,
     description: `text for the "What's New" button`
   },
   help_whats_new_filter_select_option_all: {
@@ -210,6 +210,26 @@ export const messages = defineMessages({
     defaultMessage: `Experiment`,
     description: `text for the "Release types" dropdown option "Experiment"`
   },
+  help_whats_new_no_results: {
+    id: 'help.whats.new_no_results',
+    defaultMessage: `We can’t find any recent releases of that type.`,
+    description: `text to display when the "What's new" API returns an empty array of articles"`
+  },
+  help_whats_new_no_results_info: {
+    id: 'help.whats.new_no_results_info',
+    defaultMessage: `We only display 3 months of recent releases.`,
+    description: `text to display when the "What's new" API returns an empty array of articles"`
+  },
+  help_whats_new_no_results_clear_filter_button_label: {
+    id: 'help.whats.new_no_results_clear_filter_button_label',
+    defaultMessage: `Clear the filter`,
+    description: `text to display when the "What's new" API returns an empty array of articles"`
+  },
+  help_whats_new_no_results_clear_filter_info: {
+    id: 'help.whats.new_no_results_clear_filter_button_label',
+    defaultMessage: ` to try again.`,
+    description: `text to display when the "What's new" API returns an empty array of articles"`
+  },
   help_whats_new_related_link_support: {
     id: 'help.whats_new.related_links.support',
     defaultMessage: `Support documentation`,

package/dist/es2019/version.json

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

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

@@ -9,7 +9,7 @@ export var ArticleContent = function ArticleContent(_ref) {
       onHelpArticleLoadingFailTryAgainButtonClick = _ref.onHelpArticleLoadingFailTryAgainButtonClick,
       onWhatsNewArticleLoadingFailTryAgainButtonClick = _ref.onWhatsNewArticleLoadingFailTryAgainButtonClick;
 
-  if (currentArticle) {
+  if (currentArticle && currentArticle.id) {
     if (currentArticle.type === ARTICLE_TYPE.HELP_ARTICLE) {
       var article = currentArticle.article;
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import { name as packageName, version as packageVersion } from '../../../version.json';
 import { messages } from '../../../messages';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { messages } from '../../../../messages';
 import { LoadingRectangle } from '../../../../util/styled';
 export var Loading = function Loading(_ref) {

package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulNoButton.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/custom-theme-button';
 import { name as packageName, version as packageVersion } from '../../../../version.json';

package/dist/esm/components/Article/HelpArticle/WasHelpfulForm/WasHelpfulYesButton.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/custom-theme-button';
 import { name as packageName, version as packageVersion } from '../../../../version.json';

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import SectionMessage from '@atlaskit/section-message';
 import ButtonGroup from '@atlaskit/button/button-group';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { gridSize } from '@atlaskit/theme/constants';
 import { messages } from '../../../../messages';
 import { LoadingRectangle, LoadingCircle } from '../../../../util/styled';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { BODY_FORMAT_TYPES } from '@atlaskit/help-article';
 import HelpArticleContent from '@atlaskit/help-article';
 import { gridSize } from '@atlaskit/theme/constants';

package/dist/esm/components/ArticlesList/ArticlesListItem/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import * as colors from '@atlaskit/theme/colors';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { name as packageName, version as packageVersion } from '../../../version.json';
 // import { messages } from '../../../messages';
 import { ArticlesListItemTypeTitle, ArticlesListItemWrapper, ArticlesListItemContainer, ArticlesListItemTitleText, ArticlesListItemDescription, ArticlesListItemLinkIcon } from './styled';

package/dist/esm/components/HelpContent.js

@@ -38,9 +38,7 @@ export var HelpContent = function HelpContent(_ref) {
   var _useHeaderContext = useHeaderContext(),
       onBackButtonClick = _useHeaderContext.onBackButtonClick;
 
-  var isOverlayVisibleValue = isOverlayVisible();
-
-  var _useState = useState(isOverlayVisibleValue),
+  var _useState = useState(isOverlayVisible),
       _useState2 = _slicedToArray(_useState, 2),
       isOverlayFullyVisible = _useState2[0],
       setIsOverlayFullyVisible = _useState2[1];
@@ -57,12 +55,12 @@ export var HelpContent = function HelpContent(_ref) {
   useEffect(function () {
     var handler;
 
-    if (isOverlayVisibleValue) {
+    if (isOverlayVisible) {
       handler = setTimeout(function () {
-        setIsOverlayFullyVisible(isOverlayVisibleValue);
+        setIsOverlayFullyVisible(isOverlayVisible);
       }, HIDE_CONTENT_DELAY);
     } else {
-      setIsOverlayFullyVisible(isOverlayVisibleValue);
+      setIsOverlayFullyVisible(isOverlayVisible);
     }
 
     return function () {
@@ -70,16 +68,16 @@ export var HelpContent = function HelpContent(_ref) {
         clearTimeout(handler);
       }
     };
-  }, [isOverlayVisibleValue]);
+  }, [isOverlayVisible]);
   return /*#__PURE__*/React.createElement(HelpLayout, {
     onBackButtonClick: handleOnBackButtonClick,
     onCloseButtonClick: onClose,
-    isBackbuttonVisible: canNavigateBack(),
+    isBackbuttonVisible: canNavigateBack,
     footer: footer,
     headerContent: onSearch && /*#__PURE__*/React.createElement(SearchInput, null)
   }, /*#__PURE__*/React.createElement(HelpBodyContainer, null, /*#__PURE__*/React.createElement(HelpBody, null, /*#__PURE__*/React.createElement(SearchResults, null), /*#__PURE__*/React.createElement(ArticleComponent, null), /*#__PURE__*/React.createElement(Home, {
     isOverlayFullyVisible: isOverlayFullyVisible,
-    isOverlayVisible: isOverlayVisibleValue
+    isOverlayVisible: isOverlayVisible
   }, homeContent, onSearchWhatsNewArticles && onGetWhatsNewArticle && /*#__PURE__*/React.createElement(WhatsNewButton, null), homeOptions && homeOptions.map(function (defaultOption) {
     return /*#__PURE__*/React.createElement(HelpContentButton, _extends({
       key: defaultOption.id

package/dist/esm/components/MessagesIntlProvider.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import { IntlProvider, injectIntl } from 'react-intl';
-import { getMessagesForLocale } from '../util/i18n-util';
+import { IntlProvider, injectIntl } from 'react-intl-next';
 export var MessagesIntlProvider = function MessagesIntlProvider(_ref) {
-  var intl = _ref.intl,
+  var _ref$locale = _ref.locale,
+      locale = _ref$locale === void 0 ? 'en' : _ref$locale,
       children = _ref.children;
   return /*#__PURE__*/React.createElement(IntlProvider, {
-    messages: getMessagesForLocale(intl.locale)
+    key: locale,
+    locale: locale
   }, children);
 };
 export default injectIntl(MessagesIntlProvider);

package/dist/esm/components/RelatedArticles/RelatedArticlesLoading.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { messages } from '../../messages';
 import { DividerLine, LoadingRectangle } from '../../util/styled';
 import { LoadignRelatedArticleList, LoadignRelatedArticleListItem } from './styled';

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

@@ -5,7 +5,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import SectionMessage from '@atlaskit/section-message';
 import Button from '@atlaskit/button/custom-theme-button';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { name as packageName, version as packageVersion } from '../../version.json';
 import { messages } from '../../messages';
 import ArticlesList from '../ArticlesList';

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

@@ -6,7 +6,7 @@ import { gridSize } from '@atlaskit/theme/constants';
 import Spinner from '@atlaskit/spinner';
 import SearchIcon from '@atlaskit/icon/glyph/search';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { name as packageName, version as packageVersion } from '../../../version.json';
 import { REQUEST_STATE } from '../../../model/Requests';
 import { useSearchContext } from '../../contexts/searchContext';

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

@@ -3,7 +3,7 @@ import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import * as colors from '@atlaskit/theme/colors';
 import Button from '@atlaskit/button/custom-theme-button';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { messages } from '../../../messages';
 import { SearchResultSearchExternalSiteContainer } from './styled';
 export var SearchExternalSite = function SearchExternalSite(_ref) {

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

@@ -3,7 +3,7 @@ import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import * as colors from '@atlaskit/theme/colors';
 import Button from '@atlaskit/button/custom-theme-button';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import NotFoundImage from '../../../assets/NotFoundImage';
 import { messages } from '../../../messages';
 import { SearchResultEmptyMessageImage, SearchResultEmptyMessageText } from './styled';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import ErrorImage from '../../../assets/ErrorImage';
 import { messages } from '../../../messages';
 import { SearchResultEmptyMessageImage, SearchResultEmptyMessageText } from './styled';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import Spinner from '@atlaskit/spinner';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/custom-theme-button';
 import { messages } from '../../messages';
 import { ToggleShowMoreArticlesContainer } from '../ArticlesList/styled';

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

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import * as colors from '@atlaskit/theme/colors';
 import LightbulbIcon from '@atlaskit/icon/glyph/lightbulb';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { name as packageName, version as packageVersion } from '../../../version.json';
 import { useWhatsNewArticleContext } from '../../contexts/whatsNewArticleContext';
 import { useNavigationContext } from '../../contexts/navigationContext';

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
+import { injectIntl } from 'react-intl-next';
+import NotFoundImage from '../../../../assets/NotFoundImage';
+import { messages } from '../../../../messages';
+import { WhatsNewResultsEmptyMessageImage, WhatsNewResultsEmptyMessageText } from './styled';
+export var WhatsNewResultsEmpty = function WhatsNewResultsEmpty(_ref) {
+  var onClearFilter = _ref.onClearFilter,
+      formatMessage = _ref.intl.formatMessage;
+
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  var handleClearFilterLinkClick = function handleClearFilterLinkClick(event) {
+    event.preventDefault();
+    var analyticsEvent = createAnalyticsEvent({
+      action: 'clicked'
+    });
+    analyticsEvent.fire();
+    onClearFilter();
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WhatsNewResultsEmptyMessageImage, null, /*#__PURE__*/React.createElement(NotFoundImage, null)), /*#__PURE__*/React.createElement(WhatsNewResultsEmptyMessageText, null, /*#__PURE__*/React.createElement("strong", null, formatMessage(messages.help_whats_new_no_results))), /*#__PURE__*/React.createElement(WhatsNewResultsEmptyMessageText, null, /*#__PURE__*/React.createElement("p", null, formatMessage(messages.help_whats_new_no_results_info), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: {
+      componentName: 'WhatsNewResultsEmpty'
+    }
+  }, /*#__PURE__*/React.createElement("a", {
+    href: "#",
+    onClick: handleClearFilterLinkClick
+  }, formatMessage(messages.help_whats_new_no_results_clear_filter_button_label)), /*#__PURE__*/React.createElement("span", null, formatMessage(messages.help_whats_new_no_results_clear_filter_info))))));
+};
+export default injectIntl(WhatsNewResultsEmpty);

package/dist/esm/components/WhatsNew/WhatsNewResults/WhatsNewResultsEmpty/styled.js

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+/** @jsx jsx */
+import styled from '@emotion/styled';
+import { gridSize } from '@atlaskit/theme/constants';
+import * as colors from '@atlaskit/theme/colors';
+export var WhatsNewResultsEmptyMessageImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize());
+export var WhatsNewResultsEmptyMessageText = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0 ", "px;\n  text-align: center;\n\n  p {\n    color: ", ";\n  }\n"])), 3 * gridSize(), 3 * gridSize(), 3 * gridSize(), colors.N200);

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import ErrorImage from '../../../../assets/ErrorImage';
 import { messages } from '../../../../messages';
 import { SearchResultEmptyMessageImage, SearchResultEmptyMessageText } from './styled';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { name as packageName, version as packageVersion } from '../../../../../version.json';
 import { WHATS_NEW_ITEM_TYPES } from '../../../../../model/WhatsNew';
 import { getTypeIcon, getTypeTitle } from '../../../../../util';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { gridSize } from '@atlaskit/theme/constants';
 import { messages } from '../../../../messages';
 import { LoadingRectangle, LoadingCircle } from '../../../../util/styled';

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

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useCallback, useState } from 'react';
 import { Transition } from 'react-transition-group';
 import Select from '@atlaskit/select';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { VIEW } from '../../constants';
 import { messages } from '../../../messages';
 import { WHATS_NEW_ITEM_TYPES } from '../../../model/WhatsNew';
@@ -16,6 +16,7 @@ import { REQUEST_STATE } from '../../../model/Requests';
 import { FADEIN_OVERLAY_TRANSITION_DURATION_MS, NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE } from '../../constants';
 import { useWhatsNewArticleContext } from '../../contexts/whatsNewArticleContext';
 import { useNavigationContext } from '../../contexts/navigationContext';
+import WhatsNewResultsEmpty from './WhatsNewResultsEmpty';
 import WhatsNewResultsError from './WhatsNewResultsError';
 import WhatsNewResultsLoading from './WhatsNewResultsLoading';
 import WhatsNewResultsList from './WhatsNewResultsList';
@@ -55,7 +56,12 @@ export var WhatsNewResults = function WhatsNewResults(_ref) {
       searchWhatsNewArticlesState = _useWhatsNewArticleCo.searchWhatsNewArticlesState,
       onWhatsNewButtonClick = _useWhatsNewArticleCo.onWhatsNewButtonClick;
 
-  var _useState = useState(''),
+  var SELECT_DEFAULT_VALUE = {
+    value: '',
+    label: formatMessage(messages.help_whats_new_filter_select_option_all)
+  };
+
+  var _useState = useState(SELECT_DEFAULT_VALUE),
       _useState2 = _slicedToArray(_useState, 2),
       selectedOption = _useState2[0],
       setSelectedOption = _useState2[1];
@@ -66,13 +72,24 @@ export var WhatsNewResults = function WhatsNewResults(_ref) {
           hasNextPage = searchWhatsNewArticlesResult.hasNextPage;
 
       if (nextPage && hasNextPage) {
-        onSearchWhatsNewArticles(selectedOption, NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE, nextPage);
+        onSearchWhatsNewArticles(selectedOption.value, NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE, nextPage);
       }
     }
   }, [onSearchWhatsNewArticles, searchWhatsNewArticlesResult, selectedOption]);
 
   var handleOnEnter = function handleOnEnter() {
-    return onSearchWhatsNewArticles && onSearchWhatsNewArticles();
+    setSelectedOption(SELECT_DEFAULT_VALUE);
+    onSearchWhatsNewArticles && onSearchWhatsNewArticles();
+  };
+
+  var handleOnClearFilter = function handleOnClearFilter() {
+    if (onSearchWhatsNewArticles) {
+      setSelectedOption({
+        value: '',
+        label: formatMessage(messages.help_whats_new_filter_select_option_all)
+      });
+      onSearchWhatsNewArticles('', NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE, '');
+    }
   };
 
   return /*#__PURE__*/React.createElement(Transition, {
@@ -83,10 +100,7 @@ export var WhatsNewResults = function WhatsNewResults(_ref) {
     return /*#__PURE__*/React.createElement(WhatsNewResultsContainer, {
       style: _objectSpread(_objectSpread({}, defaultStyle), transitionStyles[state])
     }, searchWhatsNewArticlesState !== REQUEST_STATE.error && /*#__PURE__*/React.createElement(SelectContainer, null, /*#__PURE__*/React.createElement(Select, {
-      defaultValue: {
-        value: '',
-        label: formatMessage(messages.help_whats_new_filter_select_option_all)
-      },
+      defaultValue: selectedOption,
       className: "single-select",
       classNamePrefix: "react-select",
       options: [{
@@ -108,20 +122,27 @@ export var WhatsNewResults = function WhatsNewResults(_ref) {
         label: formatMessage(messages.help_whats_new_filter_select_option_experiment),
         value: WHATS_NEW_ITEM_TYPES.EXPERIMENT
       }],
+      value: selectedOption,
       onChange: function onChange(option) {
         if (onSearchWhatsNewArticles) {
           var selectedOptionValue = option.value;
-          setSelectedOption(selectedOptionValue);
+          var selectedOptionLabel = option.label;
+          setSelectedOption({
+            value: selectedOptionValue,
+            label: selectedOptionLabel
+          });
           onSearchWhatsNewArticles(selectedOptionValue, NUMBER_OF_WHATS_NEW_ITEMS_PER_PAGE, '');
         }
       }
-    })), /*#__PURE__*/React.createElement(WhatsNewResultsListContainer, null, searchWhatsNewArticlesState === REQUEST_STATE.loading && searchWhatsNewArticlesResult === null && state !== 'exited' && /*#__PURE__*/React.createElement(WhatsNewResultsLoading, null), (searchWhatsNewArticlesState === REQUEST_STATE.done || searchWhatsNewArticlesState === REQUEST_STATE.loading) && searchWhatsNewArticlesResult !== null && state !== 'exited' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WhatsNewResultsList, {
+    })), /*#__PURE__*/React.createElement(WhatsNewResultsListContainer, null, searchWhatsNewArticlesState === REQUEST_STATE.loading && searchWhatsNewArticlesResult === null && state !== 'exited' && /*#__PURE__*/React.createElement(WhatsNewResultsLoading, null), (searchWhatsNewArticlesState === REQUEST_STATE.done || searchWhatsNewArticlesState === REQUEST_STATE.loading) && searchWhatsNewArticlesResult !== null && state !== 'exited' && /*#__PURE__*/React.createElement(React.Fragment, null, searchWhatsNewArticlesResult.articles.length > 0 ? /*#__PURE__*/React.createElement(WhatsNewResultsList, {
       whatsNewArticles: searchWhatsNewArticlesResult.articles,
       onWhatsNewResultItemClick: onWhatsNewButtonClick,
       onShowMoreButtonClick: handleOnShowMoreButtonClick,
       hasNextPage: searchWhatsNewArticlesResult === null || searchWhatsNewArticlesResult === void 0 ? void 0 : searchWhatsNewArticlesResult.hasNextPage,
       nextPage: searchWhatsNewArticlesResult === null || searchWhatsNewArticlesResult === void 0 ? void 0 : searchWhatsNewArticlesResult.nextPage,
       loadingMore: searchWhatsNewArticlesState === REQUEST_STATE.loading
+    }) : /*#__PURE__*/React.createElement(WhatsNewResultsEmpty, {
+      onClearFilter: handleOnClearFilter
     })), searchWhatsNewArticlesState === REQUEST_STATE.error && /*#__PURE__*/React.createElement(WhatsNewResultsError, {
       onSearch: onSearchWhatsNewArticles
     })));