Merge pull request #2282 from broadinstitute/jb-hca-suggestion-ux

Making HCA suggestion more prominent (SCP-6024)

Author: bistline

app/javascript/components/search/results/ResultsPanel.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+import { faInfoCircle, faExclamationCircle } from '@fortawesome/free-solid-svg-icons'
 
 import StudyResults from './StudyResults'
 import StudySearchResult from './StudySearchResult'
@@ -18,12 +18,17 @@ import LoadingSpinner from '~/lib/LoadingSpinner'
  */
 const ResultsPanel = ({ studySearchState, studyComponent, noResultsDisplay, bookmarks }) => {
   const results = studySearchState.results
-  const hcaMessage = <a
-    className='hca-link'
-    onClick={() => studySearchState.updateSearch({ external: 'hca' })}
-    data-analytics-event='search-hca-empty-results'>
-    Search HCA Data Portal?
-  </a>
+  const hcaMessage = <div className='flexbox alert alert-warning'>
+    <div className="">
+      <FontAwesomeIcon icon={faExclamationCircle} className="fa-lg fa-fw icon-left"/>
+    </div>
+    <p>Broadening your search to include the <a
+      className='hca-link'
+      onClick={() => studySearchState.updateSearch({ external: 'hca' })}
+      data-analytics-event='search-hca-empty-results'>
+      Human Cell Atlas Data Portal
+    </a> may return more results.</p>
+  </div>
 
   const emptyResultMessage =  <div>
     No results found. { studySearchState?.params?.external === "" ? hcaMessage : null }

app/javascript/styles/_colors.scss

@@ -4,6 +4,8 @@
 $action-color: #3D5A87;
 
 /* non-fatal errors -- color palette borrowed from Terra */
+$warning-color: #8a6d3b;
+$warning-bg: #fcf8e3;
 $warning-background-color: #feeed8;
 $warning-icon-color: #C45500;
 

app/javascript/styles/_global.scss

@@ -518,6 +518,20 @@ h6,
   font-size: 14px;
 }
 
+.alert.alert-warning {
+  color: $warning-color;
+  border: none;
+  border-left: 6px solid $warning-icon-color;
+  border-radius: 0px;
+  background: $warning-bg;
+  a {
+    text-decoration: underline;
+    font-weight: bold;
+  }
+  margin-top: 1em;
+  font-size: 14px;
+}
+
 /* Slightly override container settings, e.g. for cluster validation errors */
 .alert.alert-danger ul {
   color: $danger-color;

test/js/resultsPanel.test.js

@@ -56,7 +56,9 @@ describe('<StudyResultsContainer/> rendering>', () => {
     expect(container.getElementsByClassName('loading-panel')).toHaveLength(0)
     expect(container.getElementsByClassName('error-panel')).toHaveLength(0)
     expect(container.getElementsByClassName('results-header')).toHaveLength(0)
-    expect(container.textContent).toContain('Search HCA Data Portal?')
+    expect(container.textContent).toContain(
+      'Broadening your search to include the Human Cell Atlas Data Portal may return more results'
+    )
   })
   it('should not render message about HCA if already requested', () => {
     const studySearchState = {