URL-søk

Author: anders-nom

.env-template

@@ -1,6 +1,7 @@
 NODE_ENV=development
 APP_PORT=3399
 APP_BASEPATH=/
+APP_ORIGIN=http://localhost:3399
 OPEN_SEARCH_URI:http://my-opensearch-instance
 OPEN_SEARCH_USERNAME: username
 OPEN_SEARCH_PASSWORD: password

.github/workflows/build-and-deploy.yml

@@ -26,6 +26,7 @@ jobs:
           cat > .env <<EOF
           APP_PORT=3399
           APP_BASEPATH=/
+          APP_ORIGIN=https://cms-arkiv.intern.nav.no
           EOF
       - name: Install dependencies
         run: npm ci

common/contentSearch.ts

@@ -16,12 +16,14 @@ export type ContentSearchResult = {
 
 export type ContentSearchSort = 'score' | 'datetime' | 'name';
 
+export type ContentSearchType = 'titles' | 'locations' | 'all';
+
 export type ContentSearchParams = {
     from: number;
     size: number;
     query?: string;
     sort?: ContentSearchSort;
-    withContent?: boolean;
+    type?: ContentSearchType;
     withChildCategories?: boolean;
     categoryKeys?: string[];
 };

server/src/global.d.ts

@@ -4,6 +4,7 @@ declare global {
             NODE_ENV: 'development' | 'production';
             APP_BASEPATH: string;
             APP_PORT: string;
+            APP_ORIGIN: string;
             OPEN_SEARCH_URI: string;
             OPEN_SEARCH_USERNAME: string;
             OPEN_SEARCH_PASSWORD: string;

server/src/opensearch/queries/contentSearch.ts

@@ -3,18 +3,26 @@ import {
     SearchRequest,
     SearchSort,
 } from '@opensearch-project/opensearch/api/types';
-import { ContentSearchParams, ContentSearchSort } from '../../../../common/contentSearch';
+import {
+    ContentSearchParams,
+    ContentSearchSort,
+    ContentSearchType,
+} from '../../../../common/contentSearch';
 import { Request } from 'express';
 import { parseNumberParam, parseToStringArray } from '../../utils/queryParams';
 import { CmsArchiveCategoriesService } from '../../cms/CmsArchiveCategoriesService';
 
 const SIZE_DEFAULT = 50;
 
 const sortParamsSet: ReadonlySet<ContentSearchSort> = new Set(['name', 'datetime', 'score']);
+const typeParamsSet: ReadonlySet<ContentSearchType> = new Set(['all', 'locations', 'titles']);
 
 const isValidSort = (sort: string): sort is ContentSearchSort =>
     sortParamsSet.has(sort as ContentSearchSort);
 
+const isValidType = (type: string): type is ContentSearchType =>
+    typeParamsSet.has(type as ContentSearchType);
+
 const sortParams: Record<ContentSearchSort, SearchSort> = {
     score: {
         _score: 'desc',
@@ -28,12 +36,12 @@ const sortParams: Record<ContentSearchSort, SearchSort> = {
 } as const;
 
 export const transformQueryToContentSearchParams = (req: Request): ContentSearchParams | null => {
-    const { query, withContent, size, sort, from, categoryKeys, withChildCategories } =
+    const { query, type, size, sort, from, categoryKeys, withChildCategories } =
         req.query as Record<keyof ContentSearchParams, string>;
 
     return {
         query,
-        withContent: withContent === 'true',
+        type: isValidType(type) ? type : undefined,
         categoryKeys: parseToStringArray(categoryKeys),
         withChildCategories: withChildCategories === 'true',
         sort: isValidSort(sort) ? sort : 'score',
@@ -53,7 +61,7 @@ export const buildContentSearchParams = (
         from,
         size,
         sort = 'score',
-        withContent,
+        type,
         categoryKeys,
         withChildCategories,
     } = contentSearchParams;
@@ -69,19 +77,33 @@ export const buildContentSearchParams = (
     ];
 
     if (query) {
-        const fields = ['displayName^10'];
-
-        if (withContent) {
-            fields.push('xmlAsString');
+        if (type === 'locations') {
+            const { pathname } = new URL(query, process.env.APP_ORIGIN);
+
+            must.push({
+                prefix: {
+                    'locations.menuItemPath': {
+                        value: decodeURIComponent(pathname),
+                        // @ts-expect-error (this is a valid field, not yet part of the library type def)
+                        case_insensitive: true,
+                    },
+                },
+            });
+        } else {
+            const fields = ['displayName^5'];
+
+            if (type === 'all') {
+                fields.push('xmlAsString');
+            }
+
+            must.push({
+                multi_match: {
+                    query,
+                    fields,
+                    type: 'phrase_prefix',
+                },
+            });
         }
-
-        must.push({
-            multi_match: {
-                query,
-                fields,
-                type: 'phrase_prefix',
-            },
-        });
     }
 
     if (categoryKeys) {

server/src/utils/validateEnv.ts

@@ -4,6 +4,7 @@ const EXPECTED_KEYS: Array<keyof NodeJS.ProcessEnv> = [
     'NODE_ENV',
     'APP_PORT',
     'APP_BASEPATH',
+    'APP_ORIGIN',
     'OPEN_SEARCH_URI',
     'OPEN_SEARCH_USERNAME',
     'OPEN_SEARCH_PASSWORD',

src/components/left-section/search/SearchInput.tsx

@@ -18,6 +18,7 @@ export const SearchInput = ({ setSearchResult, className }: Props) => {
         from: 0,
         size: 50,
         sort: 'score',
+        type: 'titles',
         withChildCategories: true,
     });
 

src/components/left-section/search/search-settings/SearchSettings.module.css

@@ -54,9 +54,19 @@
     align-items: center;
 }
 
+.withHelp {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    :global(.navds-popover__content) {
+        font-size: var(--a-font-size-small);
+        line-height: var(--a-font-line-height-medium);
+    }
+}
+
 .categoriesSelector {
-    /*ul {*/
-    /*    gap: 0.25rem;*/
-    /*    font-size: 0.75rem;*/
-    /*}*/
+    ul {
+        gap: 0.25rem;
+        font-size: 0.75rem;
+    }
 }

src/components/left-section/search/search-settings/SearchSettings.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button, Label, Radio, RadioGroup, UNSAFE_Combobox } from '@navikt/ds-react';
+import { Button, HelpText, Label, Radio, RadioGroup, UNSAFE_Combobox } from '@navikt/ds-react';
 import { ChevronDownIcon } from '@navikt/aksel-icons';
 import { ContentSearchParams } from '../../../../../common/contentSearch';
 import { classNames } from '../../../../utils/classNames';
@@ -18,7 +18,7 @@ export const SearchSettings = ({ searchParams, setSearchParams }: Props) => {
 
     const { appContext } = useAppState();
 
-    const { sort, categoryKeys, withContent } = searchParams;
+    const { sort, categoryKeys, type } = searchParams;
 
     const { titlesToKeys, keysToTitles } = createKeysTitlesMaps(appContext.rootCategories);
     const categoryKeysSelected = new Set<string>(categoryKeys);
@@ -42,11 +42,20 @@ export const SearchSettings = ({ searchParams, setSearchParams }: Props) => {
             <div className={classNames(style.settings, isOpen && style.open)}>
                 <RadioGroup
                     size={'small'}
-                    legend={'Søk i...'}
-                    value={withContent ? 'all' : 'titles'}
-                    onChange={(value) => setSearchParams({ withContent: value === 'all' })}
+                    legend={'Søk etter...'}
+                    value={type}
+                    onChange={(value) => setSearchParams({ type: value })}
                 >
-                    <Radio value={'titles'}>{'Kun innholdstitler'}</Radio>
+                    <Radio value={'titles'}>{'Tittel'}</Radio>
+                    <span className={style.withHelp}>
+                        <Radio value={'locations'}>{'URL'}</Radio>
+                        <HelpText wrapperClassName={style.help}>
+                            {'Prefix-søk på pathname. F.eks. vil '}
+                            <code>{'https://www.nav.no/no/person/arbeid'}</code>
+                            {' gi treff på alle sider med en path som starter med '}
+                            <code>{'/no/person/arbeid'}</code>
+                        </HelpText>
+                    </span>
                     <Radio value={'all'}>{'Alt innhold'}</Radio>
                 </RadioGroup>
                 <RadioGroup
@@ -60,7 +69,7 @@ export const SearchSettings = ({ searchParams, setSearchParams }: Props) => {
                     <Radio value={'datetime'}>{'Sist endret'}</Radio>
                 </RadioGroup>
                 <UNSAFE_Combobox
-                    label={'Velg hovedkategorier'}
+                    label={'Avgrens til valgte kategorier'}
                     size={'small'}
                     className={style.categoriesSelector}
                     clearButton={true}