Fix merge artifacts

Author: csillag

.changelog/1987.feature.md .changelog/2013.feature.md.changelog/1987.feature.md renamed to .changelog/2013.feature.md

@@ -8,21 +8,22 @@ import { TableHeaderAge } from '../TableHeaderAge'
 import { TableCellAge } from '../TableCellAge'
 import { RoflAppStatusBadge } from './RoflAppStatusBadge'
 import { RoflAppLink } from './RoflAppLink'
+import { HighlightPattern } from '../HighlightedText'
 
 type RoflAppsListProps = {
   apps?: RoflApp[]
   isLoading: boolean
   limit: number
   pagination: TablePaginationProps | false
-  highlightedPartOfName?: string
+  highlightPattern?: HighlightPattern
 }
 
 export const RoflAppsList: FC<RoflAppsListProps> = ({
   isLoading,
   limit,
   pagination,
   apps,
-  highlightedPartOfName,
+  highlightPattern,
 }) => {
   const { t } = useTranslation()
   const { isTablet } = useScreenSize()
@@ -61,7 +62,7 @@ export const RoflAppsList: FC<RoflAppsListProps> = ({
               id={app.id}
               name={app?.metadata['net.oasis.rofl.name']}
               network={app.network}
-              highlightedPartOfName={highlightedPartOfName}
+              highlightPattern={highlightPattern}
             />
           ) : (
             t('rofl.nameNotProvided')

src/app/components/Rofl/RoflAppsList.tsx

@@ -229,8 +229,8 @@ export const RoflAppDetailsViewSearchResult: FC<{
 export const RoflAppDetailsVerticalListView: FC<{
   isLoading?: boolean
   app: RoflApp | undefined
-  highlightedPartOfName?: string
-}> = ({ app, isLoading, highlightedPartOfName }) => {
+  highlightPattern?: HighlightPattern
+}> = ({ app, isLoading, highlightPattern }) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
 
@@ -239,7 +239,7 @@ export const RoflAppDetailsVerticalListView: FC<{
 
   return (
     <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'} standalone>
-      <NameRow name={app.metadata['net.oasis.rofl.name']} highlightedPartOfName={highlightedPartOfName} />
+      <NameRow name={app.metadata['net.oasis.rofl.name']} highlightPattern={highlightPattern} />
       <StatusBadgeRow hasActiveInstances={!!app.num_active_instances} removed={app.removed} />
       <DetailsRow title={t('rofl.appId')}>
         <RoflAppLink id={app.id} network={app.network} withSourceIndicator={false} />

src/app/pages/RoflAppDetailsPage/index.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next'
 import { useTypedSearchParam } from '../../hooks/useTypedSearchParam'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { RouteUtils } from '../../utils/route-utils'
+import { textSearch } from '../../components/Search/search-utils'
 
 const limit = NUMBER_OF_ITEMS_ON_SEPARATE_PAGE
 
@@ -34,9 +35,8 @@ export const useROFLAppFiltering = () => {
   const [wantedNameInput, setWantedNameInput] = useTypedSearchParam(ROFL_SEARCH_ARG_NAME, '', {
     deleteParams: ['page'],
   })
-  const wantedNamePattern = wantedNameInput.length < 3 ? undefined : wantedNameInput
-  const nameError = !!wantedNameInput && !wantedNamePattern ? t('tableSearch.error.tooShort') : undefined
-  const hasFilters = !!wantedNamePattern
+  const { result: wantedNamePattern, warning: nameError } = textSearch.roflAppName(wantedNameInput, t)
+  const hasFilters = !!wantedNamePattern.length
   const clearFilters = () => {
     setSearchParams(searchParams => {
       searchParams.delete('name')

src/app/pages/RoflAppsPage/hook.ts

@@ -51,7 +51,7 @@ const RoflAppsView: FC<{ network: Network; layer: Runtime; tableView: TableLayou
           isLoading={isLoading}
           limit={limit}
           pagination={tablePagination}
-          highlightedPartOfName={wantedNamePattern}
+          highlightPattern={wantedNamePattern}
         />
       )}
 
@@ -63,11 +63,7 @@ const RoflAppsView: FC<{ network: Network; layer: Runtime; tableView: TableLayou
             ))}
           {!isLoading &&
             roflApps?.map(app => (
-              <RoflAppDetailsVerticalListView
-                key={app.id}
-                app={app}
-                highlightedPartOfName={wantedNamePattern}
-              />
+              <RoflAppDetailsVerticalListView key={app.id} app={app} highlightPattern={wantedNamePattern} />
             ))}
         </VerticalList>
       )}