Also highlight matches in proposal search results

src/app/pages/ProposalDetailsPage/index.tsx

@@ -6,7 +6,7 @@ import InfoIcon from '@mui/icons-material/Info'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { Layer, Proposal, useGetConsensusProposalsProposalId } from '../../../oasis-nexus/api'
 import { AppErrors } from '../../../types/errors'
-import { useParams } from 'react-router-dom'
+import { useLoaderData } from 'react-router-dom'
 import { PageLayout } from '../../components/PageLayout'
 import { SubPageCard } from '../../components/SubPageCard'
 import { StyledDescriptionList } from 'app/components/StyledDescriptionList'
@@ -16,6 +16,8 @@ import { useScreenSize } from '../../hooks/useScreensize'
 import { ProposalStatusIcon } from '../../components/Proposals/ProposalStatusIcon'
 import { TextSkeleton } from '../../components/Skeleton'
 import { AccountLink } from '../../components/Account/AccountLink'
+import { HighlightedText } from '../../components/HighlightedText'
+import { ProposalIdLoaderData } from '../../utils/route-utils'
 import { COLORS } from 'styles/theme/colors'
 import { getTypeNameForProposal } from '../../../types/proposalType'
 
@@ -25,7 +27,7 @@ export const ProposalDetailsPage: FC = () => {
   if (scope.layer !== Layer.consensus) {
     throw AppErrors.UnsupportedLayer
   }
-  const proposalId = parseInt(useParams().proposalId!, 10)
+  const { proposalId, searchTerm } = useLoaderData() as ProposalIdLoaderData
 
   const { isLoading, data } = useGetConsensusProposalsProposalId(scope.network, proposalId)
   if (!data?.data && !isLoading) {
@@ -35,18 +37,19 @@ export const ProposalDetailsPage: FC = () => {
   return (
     <PageLayout>
       <SubPageCard featured title={t('common.proposal')}>
-        <ProposalDetailView isLoading={isLoading} proposal={proposal} />
+        <ProposalDetailView isLoading={isLoading} proposal={proposal} highlightedPart={searchTerm} />
       </SubPageCard>
     </PageLayout>
   )
 }
 
 export const ProposalDetailView: FC<{
   proposal: Proposal
+  highlightedPart?: string
   isLoading?: boolean
   showLayer?: boolean
   standalone?: boolean
-}> = ({ proposal, isLoading, showLayer = false, standalone = false }) => {
+}> = ({ proposal, highlightedPart, isLoading, showLayer = false, standalone = false }) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
   if (isLoading) return <TextSkeleton numberOfRows={7} />
@@ -68,7 +71,9 @@ export const ProposalDetailView: FC<{
       <dd>{proposal.id}</dd>
 
       <dt>{t('common.title')}</dt>
-      <dd>{proposal.handler}</dd>
+      <dd>
+        <HighlightedText text={proposal.handler} pattern={highlightedPart} />
+      </dd>
 
       <dt>{t('common.type')}</dt>
       <dd>{proposalType}</dd>

src/app/pages/SearchResultsPage/SearchResultsList.tsx

@@ -121,7 +121,9 @@ export const SearchResultsList: FC<{
         <ResultsGroupByType
           title={t('search.results.proposals.title')}
           results={searchResults.filter((item): item is ProposalResult => item.resultType === 'proposal')}
-          resultComponent={item => <ProposalDetailView proposal={item} showLayer />}
+          resultComponent={item => (
+            <ProposalDetailView proposal={item} highlightedPart={searchTerm} showLayer />
+          )}
           link={proposal => RouteUtils.getProposalRoute(proposal.network, proposal.id)}
           linkLabel={t('search.results.proposals.viewLink')}
         />

src/app/pages/SearchResultsPage/useRedirectIfSingleResult.ts

@@ -45,7 +45,7 @@ export function useRedirectIfSingleResult(
         )}?q=${searchTerm}`
         break
       case 'proposal':
-        redirectTo = RouteUtils.getProposalRoute(item.network, item.id)
+        redirectTo = `${RouteUtils.getProposalRoute(item.network, item.id)}?q=${searchTerm}`
         break
       default:
         exhaustedTypeWarning('Unexpected result type', item)

src/app/utils/route-utils.ts

@@ -172,6 +172,7 @@ const validateTxHashParam = (hash: string) => {
   }
   return true
 }
+
 export type AddressLoaderData = {
   address: string
   searchTerm: string
@@ -224,6 +225,15 @@ export const assertEnabledScope = ({
   return { network, layer } as SearchScope
 }
 
-export const proposalIdParamLoader = async ({ params }: LoaderFunctionArgs) => {
-  return validateProposalIdParam(params.proposalId!)
+export type ProposalIdLoaderData = {
+  proposalId: number
+  searchTerm: string
+}
+
+export const proposalIdParamLoader = async ({ params, request }: LoaderFunctionArgs) => {
+  validateProposalIdParam(params.proposalId!)
+  return {
+    proposalId: parseInt(params.proposalId!),
+    searchTerm: getSearchTermFromRequest(request),
+  }
 }