Add the possibility to search for a path. (#1154)

This change adds the possibility to search for page-paths. The matches 
are highlighted in the same way as RegEx-Textsearch matches, which 
means there is possibly more than one match per page in the page search.
In addition, when searching for a path, the page-tree-row shows the
matching path.

.changeset/sour-cheetahs-relax.md

@@ -0,0 +1,5 @@
+---
+"@comet/cms-admin": minor
+---
+
+Add the possibility to search for a path in PageSearch

packages/admin/cms-admin/src/pages/pageSearch/usePageSearch.ts

@@ -6,7 +6,7 @@ import { TextMatch } from "../../common/MarkedMatches";
 import { GQLPageSearchFragment } from "../../graphql.generated";
 import { PageTreePage } from "../pageTree/usePageTree";
 
-export type PageSearchMatch = TextMatch & { page: { id: string; ancestorIds: string[] } };
+export type PageSearchMatch = TextMatch & { page: { id: string; ancestorIds: string[] }; where: "name" | "path" };
 
 export const pageSearchFragment = gql`
     fragment PageSearch on PageTreeNode {
@@ -102,21 +102,36 @@ const usePageSearch = ({ tree, domain, setExpandedIds, onUpdateCurrentMatch, pag
 
             if (pageExactMatch) {
                 const { id, name, ancestorIds } = pageExactMatch;
-                matches.push({ page: { id, ancestorIds }, start: 0, end: name.length - 1, focused: true });
+                matches.push({ page: { id, ancestorIds }, start: 0, end: name.length - 1, focused: true, where: "name" });
             }
         } catch {
             const regex = new RegExp(`(${escapeRegExp(query)})`, "gi");
 
             inorderPages.forEach((page) => {
                 let match;
 
+                while ((match = regex.exec(page.path)) !== null) {
+                    const { id, ancestorIds } = page;
+                    const where = "path";
+                    matches.push({
+                        page: { id, ancestorIds },
+                        start: match.index,
+                        end: match.index + query.length - 1,
+                        focused: matches.length === 0,
+                        where,
+                    });
+                }
+                regex.lastIndex = 0;
+
                 while ((match = regex.exec(page.name)) !== null) {
                     const { id, ancestorIds } = page;
+                    const where = "name";
                     matches.push({
                         page: { id, ancestorIds },
                         start: match.index,
                         end: match.index + query.length - 1,
                         focused: matches.length === 0,
+                        where,
                     });
                 }
             });

packages/admin/cms-admin/src/pages/pageTree/PageLabel.tsx

@@ -17,14 +17,20 @@ interface PageLabelProps {
 const PageLabel: React.FunctionComponent<PageLabelProps> = ({ page, disabled, onClick }) => {
     const { documentTypes } = usePageTreeContext();
     const documentType = documentTypes[page.documentType];
+    const pathMatches = page.matches.filter((match) => match.where === "path");
 
     return (
         <Root onClick={onClick}>
             <PageTypeIcon page={page} disabled={disabled} />
             <LinkContent>
                 <LinkText color={page.visibility === "Unpublished" || disabled ? "textSecondary" : "textPrimary"}>
-                    <MarkedMatches text={page.name} matches={page.matches} />
+                    <MarkedMatches text={page.name} matches={page.matches.filter((match) => match.where === "name")} />
                 </LinkText>
+                {pathMatches.length > 0 && (
+                    <LinkText color={page.visibility === "Unpublished" || disabled ? "textSecondary" : "textPrimary"}>
+                        <MarkedMatches text={page.path} matches={pathMatches} />
+                    </LinkText>
+                )}
                 {page.visibility === "Archived" && (
                     <ArchivedChip
                         component="span"
@@ -35,7 +41,6 @@ const PageLabel: React.FunctionComponent<PageLabelProps> = ({ page, disabled, on
                     />
                 )}
             </LinkContent>
-
             {documentType.InfoTag !== undefined && (
                 <InfoPanel>
                     <documentType.InfoTag page={page} />
@@ -60,6 +65,7 @@ const LinkContent = styled("div")`
     margin-left: ${({ theme }) => theme.spacing(2)};
     display: flex;
     min-width: 0;
+    flex-direction: column;
 `;
 
 const LinkText = styled(Typography)`