OpenConceptLab/ocl_issues#2242 | No results view for candidates

Author: snyaggarwal

src/components/map-projects/Candidates.jsx

@@ -16,6 +16,7 @@ import get from 'lodash/get'
 import { highlightTexts, hasAuthGroup, getCurrentUser } from '../../common/utils';
 import { SCORES_COLOR } from './constants'
 import SearchResults from '../search/SearchResults';
+import NoResults from '../search/NoResults';
 import Mappings from './Mappings'
 import Concept from './Concept'
 import IncludeRetired from './IncludeRetired'
@@ -184,6 +185,8 @@ const Candidates = ({rowIndex, alert, setAlert, candidates, orderBy, order, onOr
     setOpenAIAnalysis(false)
   }, [rowIndex])
 
+  const noCandidatesFound = !isLoading && !isNoneLoaded && results?.length === 0
+
   return (
     <div className='col-xs-12 padding-0'>
       <Collapse in={Boolean(alert?.message)}>
@@ -205,6 +208,10 @@ const Candidates = ({rowIndex, alert, setAlert, candidates, orderBy, order, onOr
         </Alert>
       </Collapse>
       <div className='col-xs-12 padding-0'>
+        {
+          noCandidatesFound &&
+            <NoResults text='We could not find any candidates for this row.' height='300px' />
+        }
         <List
           sx={{
             marginTop: '4px',

src/components/search/NoResults.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
 import { useTranslation } from 'react-i18next'
 
-const NoResults = ({searchedText, height}) => {
+const NoResults = ({searchedText, height, text}) => {
   const { t } = useTranslation()
   return (
     <div className='col-xs-12' style={{display: 'flex', height: height, alignItems: 'center', justifyContent: 'center', textAlign: 'center', flexDirection: 'column'}}>
@@ -17,7 +17,9 @@ const NoResults = ({searchedText, height}) => {
         </defs>
       </SvgIcon>
       <div className='col-xs-12' style={{marginTop: '16px'}}>
-        {t('search.no_results')} <b>{searchedText}</b>.
+        {
+          text ? text : <>{t('search.no_results')} <b>{searchedText}</b>.</>
+        }
     </div>
     </div>
   )