diff --git a/catalog/app/containers/Search/ResultType.tsx b/catalog/app/containers/Search/ResultType.tsx index fb681f4af3c..e158fbff18a 100644 --- a/catalog/app/containers/Search/ResultType.tsx +++ b/catalog/app/containers/Search/ResultType.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import * as M from '@material-ui/core' +import * as GQL from 'utils/GraphQL' import * as SearchUIModel from './model' const VALUES = [SearchUIModel.ResultType.QuiltPackage, SearchUIModel.ResultType.S3Object] @@ -45,6 +46,10 @@ const useResultTypeStyles = M.makeStyles((t) => ({ icon: { minWidth: t.spacing(3.5), }, + chip: { + backgroundColor: t.palette.text.hint, + color: t.palette.getContrastText(t.palette.text.hint), + }, item: { paddingLeft: t.spacing(1.5), paddingRight: t.spacing(1), @@ -60,10 +65,47 @@ const useResultTypeStyles = M.makeStyles((t) => ({ export default function ResultType() { const classes = useResultTypeStyles() const model = SearchUIModel.use() + + const getTotalSelectedResults = () => { + if (model.firstPageQuery._tag !== 'data') return null + const d = model.firstPageQuery.data + switch (d.__typename) { + case 'ObjectsSearchResultSet': + case 'PackagesSearchResultSet': + return d.stats.total + case 'EmptySearchResultSet': + return 0 + default: + return null + } + } + + const getTotalOtherResults = (resultType: SearchUIModel.ResultType) => + GQL.fold(model.baseSearchQuery, { + data: (data) => { + const r = + resultType === SearchUIModel.ResultType.QuiltPackage + ? data.searchPackages + : data.searchObjects + switch (r.__typename) { + case 'EmptySearchResultSet': + return 0 + case 'ObjectsSearchResultSet': + case 'PackagesSearchResultSet': + return r.stats.total + default: + return null + } + }, + fetching: () => null, + error: () => null, + }) + return ( {VALUES.map((v) => { const selected = model.state.resultType === v + const total = selected ? getTotalSelectedResults() : getTotalOtherResults(v) return ( + {total != null && ( + + + + )} ) })} diff --git a/catalog/app/containers/Search/Results.tsx b/catalog/app/containers/Search/Results.tsx index 30ea5204aa8..43904bdc175 100644 --- a/catalog/app/containers/Search/Results.tsx +++ b/catalog/app/containers/Search/Results.tsx @@ -5,6 +5,7 @@ import * as M from '@material-ui/core' import { ES_REF_SYNTAX } from 'components/SearchResults' import Skeleton from 'components/Skeleton' import { useNavBar } from 'containers/NavBar' +import * as GQL from 'utils/GraphQL' import StyledLink from 'utils/StyledLink' import * as SearchUIModel from './model' @@ -103,6 +104,7 @@ export function EmptyResults({ className }: EmptyResultsProps) { const classes = useEmptyResultsStyles() const { actions: { clearFilters, reset, setBuckets, setResultType }, + baseSearchQuery, state, } = SearchUIModel.use() const focus = useNavBar()?.focus @@ -121,6 +123,29 @@ export function EmptyResults({ className }: EmptyResultsProps) { ? SearchUIModel.ResultType.S3Object : SearchUIModel.ResultType.QuiltPackage + const getTotalResults = (resultType: SearchUIModel.ResultType) => + GQL.fold(baseSearchQuery, { + data: (data) => { + const r = + resultType === SearchUIModel.ResultType.QuiltPackage + ? data.searchPackages + : data.searchObjects + switch (r.__typename) { + case 'EmptySearchResultSet': + return 0 + case 'ObjectsSearchResultSet': + case 'PackagesSearchResultSet': + return r.stats.total + default: + return null + } + }, + fetching: () => null, + error: () => null, + }) + + const totalOtherResults = getTotalResults(otherResultType) + const switchResultType = React.useCallback(() => { setResultType(otherResultType) }, [setResultType, otherResultType]) @@ -136,10 +161,10 @@ export function EmptyResults({ className }: EmptyResultsProps) { - Could not find any {LABELS[state.resultType]} matching your search - criteria. -
- Some suggestions to help you find what you're looking for: + Search for{' '} + {LABELS[otherResultType]}{' '} + instead{totalOtherResults != null && ` (${totalOtherResults} found)`} or adjust + your search: