InlineHelp: improvements (#44068)

* inline-help: use correct icons It picks up the icon from the admin sections data, defining global (domains) icon as the fallback one. Fixes #44060 * inline-help: add onAdminSectionSelect callback * inline-help: close popover when is mobile * inline-help: fix linting * inline-help: set onAdminSectionSelect optional
Automattic · Jul 13, 2020 · ac79d2b · ac79d2b
1 parent 4a42e6d
commit ac79d2b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/client/blocks/inline-help/inline-help-search-results.jsx b/client/blocks/inline-help/inline-help-search-results.jsx
@@ -3,7 +3,7 @@
  */
 import React, { useRef, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { identity, isEmpty } from 'lodash';
+import { identity, isEmpty, noop } from 'lodash';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
 import classNames from 'classnames';
@@ -34,6 +34,7 @@ function HelpSearchResults( {
 	hasAPIResults = false,
 	isSearching = false,
 	onSelect,
+	onAdminSectionSelect = noop,
 	searchQuery = '',
 	searchResults = [],
 	selectedResult = {},
@@ -91,6 +92,7 @@ function HelpSearchResults( {
 			if ( ! /^http/.test( link ) ) {
 				event.preventDefault();
 				page( link );
+				onAdminSectionSelect( event );
 			}
 
 			return;
@@ -103,7 +105,7 @@ function HelpSearchResults( {
 	const selectCurrentResultIndex = ( index ) => () => selectSearchResult( index );
 
 	const renderHelpLink = (
-		{ link, key, description, title, support_type = SUPPORT_TYPE_API_HELP },
+		{ link, key, description, title, support_type = SUPPORT_TYPE_API_HELP, icon = 'domains' },
 		index
 	) => {
 		const addResultsSection = supportTypeRef?.current !== support_type || ! index;
@@ -127,7 +129,7 @@ function HelpSearchResults( {
 						tabIndex={ -1 }
 					>
 						{ support_type === SUPPORT_TYPE_ADMIN_SECTION && (
-							<Gridicon icon="domains" size={ 18 } />
+							<Gridicon icon={ icon } size={ 18 } />
 						) }
 						<span>{ preventWidows( decodeEntities( title ) ) }</span>
 					</a>
@@ -172,6 +174,7 @@ HelpSearchResults.propTypes = {
 	translate: PropTypes.func,
 	searchQuery: PropTypes.string,
 	onSelect: PropTypes.func.isRequired,
+	onAdminSectionSelect: PropTypes.func,
 	hasAPIResults: PropTypes.bool,
 	searchResults: PropTypes.array,
 	selectedResultIndex: PropTypes.number,

diff --git a/client/blocks/inline-help/popover.jsx b/client/blocks/inline-help/popover.jsx
@@ -8,6 +8,7 @@ import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
 import classNames from 'classnames';
 import Gridicon from 'components/gridicon';
+import { withMobileBreakpoint } from '@automattic/viewport-react';
 
 /**
  * Internal Dependencies
@@ -70,6 +71,14 @@ class InlineHelpPopover extends Component {
 		this.openSecondaryView( VIEW_RICH_RESULT );
 	};
 
+	setAdminSection = () => {
+		const { isBreakpointActive: isMobile, onClose } = this.props;
+		if ( ! isMobile ) {
+			return;
+		}
+		onClose();
+	};
+
 	moreHelpClicked = () => {
 		this.props.onClose();
 		this.props.recordTracksEvent( 'calypso_inlinehelp_morehelp_click', {
@@ -143,6 +152,7 @@ class InlineHelpPopover extends Component {
 					<InlineHelpSearchCard onSelect={ this.openResultView } query={ this.props.searchQuery } />
 					<InlineHelpSearchResults
 						onSelect={ this.openResultView }
+						onAdminSectionSelect={ this.setAdminSection }
 						searchQuery={ this.props.searchQuery }
 					/>
 				</div>
@@ -323,4 +333,4 @@ const mapDispatchToProps = {
 export default compose(
 	localize,
 	connect( mapStateToProps, mapDispatchToProps )
-)( InlineHelpPopover );
+)( withMobileBreakpoint( InlineHelpPopover ) );
diff --git a/client/blocks/inline-help/style.scss b/client/blocks/inline-help/style.scss
@@ -358,7 +358,7 @@
 		padding: 8px 16px;
 		font-size: $font-body-small;
 
-		&:after {
+		&::after {
 			content: ':';
 		}
 	}