TrimEndLinkLabel: Add support for highlighting part of label

Also, always show the part that is around the highlight.

src/app/components/TrimLinkLabel/index.tsx

@@ -1,9 +1,10 @@
-import { FC } from 'react'
+import { FC, ReactNode } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 import Link from '@mui/material/Link'
 import Tooltip from '@mui/material/Tooltip'
 import { trimLongString } from '../../utils/trimLongString'
 import { tooltipDelay } from '../../../styles/theme'
+import { HighlightedTrimmedText } from '../HighlightedText/HighlightedTrimmedText'
 
 type TrimLinkLabelProps = {
   label: string
@@ -24,15 +25,17 @@ type TrimEndLinkLabelProps = TrimLinkLabelProps & {
 }
 
 export const TrimEndLinkLabel: FC<TrimEndLinkLabelProps> = ({ label, to, trimStart, highlightedPart }) => {
-  const trimmedLabel = trimLongString(label, trimStart, 0) // TODO:
+  const trimmedLabel = (
+    <HighlightedTrimmedText text={label} pattern={highlightedPart} fragmentLength={trimStart} />
+  )
   if (!trimmedLabel) {
     return null
   }
   return <TrimLink label={label} to={to} trimmedLabel={trimmedLabel} />
 }
 
 type TrimLinkProps = TrimLinkLabelProps & {
-  trimmedLabel: string
+  trimmedLabel: ReactNode
 }
 
 const TrimLink: FC<TrimLinkProps> = ({ label, to, trimmedLabel }) => {