Søk i xp-archive

legacy-archive/client/utils/classNames.ts → common/src/client/utils/classNames.ts

@@ -1,8 +1,7 @@
 export const classNames = (...classNames: unknown[]) =>
     classNames
         .reduce<string>(
-            (acc, className) =>
-                typeof className === 'string' ? `${acc} ${className}` : acc,
+            (acc, className) => (typeof className === 'string' ? `${acc} ${className}` : acc),
             ''
         )
         .trim();

legacy-archive/client/components/common/categories-path/CategoriesPath.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CmsCategoryPath } from '../../../../shared/cms-documents/_common';
 import { BodyShort, Tooltip, TooltipProps } from '@navikt/ds-react';
-import { classNames } from '../../../utils/classNames';
+import { classNames } from '../../../../../common/src/client/utils/classNames';
 
 import style from './CategoriesPath.module.css';
 

legacy-archive/client/components/common/loader/ContentLoader.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BodyShort, Loader, LoaderProps } from '@navikt/ds-react';
-import { classNames } from '../../../utils/classNames';
+import { classNames } from '../../../../../common/src/client/utils/classNames';
 
 import style from './ContentLoader.module.css';
 

legacy-archive/client/components/left-section/AppLeftSection.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CategoriesMenu } from './categories/CategoriesMenu';
 import { ContentMenu } from './contents/ContentMenu';
-import { classNames } from '../../utils/classNames';
+import { classNames } from '../../../../common/src/client/utils/classNames';
 import { SearchInput } from './search/search-input/SearchInput';
 import { SearchResult } from './search/search-result/SearchResult';
 import { Alert, BodyLong, Heading } from '@navikt/ds-react';

legacy-archive/client/components/left-section/categories/root-category/RootCategory.tsx

@@ -3,7 +3,7 @@ import { CmsCategoryListItem } from '../../../../../shared/cms-documents/categor
 import { Category } from '../category/Category';
 import { Checkbox } from '@navikt/ds-react';
 import { useSearchState } from '../../../../context/search-state/useSearchState';
-import { classNames } from '../../../../utils/classNames';
+import { classNames } from '../../../../../../common/src/client/utils/classNames';
 
 import style from './RootCategory.module.css';
 

legacy-archive/client/components/left-section/contents/content-link/ContentLink.tsx

@@ -3,7 +3,7 @@ import { CmsContentListItem } from '../../../../../shared/cms-documents/content'
 import { BodyShort, Link, Loader } from '@navikt/ds-react';
 import { useApiFetch } from '../../../../fetch/useApiFetch';
 import { useAppState } from '../../../../context/app-state/useAppState';
-import { classNames } from '../../../../utils/classNames';
+import { classNames } from '../../../../../../common/src/client/utils/classNames';
 
 import style from './ContentLink.module.css';
 

legacy-archive/client/components/left-section/search/search-input/SearchInput.tsx

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { Search } from '@navikt/ds-react';
-import { classNames } from '../../../../utils/classNames';
+import { classNames } from '../../../../../../common/src/client/utils/classNames';
 import { SearchSettings } from './search-settings/SearchSettings';
 import { useSearchState } from '../../../../context/search-state/useSearchState';
 

legacy-archive/client/components/left-section/search/search-input/search-settings/SearchSettings.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, HelpText, Label, Radio, RadioGroup } from '@navikt/ds-react';
 import { ChevronDownIcon, XMarkIcon } from '@navikt/aksel-icons';
-import { classNames } from '../../../../../utils/classNames';
+import { classNames } from '../../../../../../../common/src/client/utils/classNames';
 import { useSearchState } from '../../../../../context/search-state/useSearchState';
 
 import style from './SearchSettings.module.css';

legacy-archive/client/components/left-section/search/search-result/SearchResult.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { classNames } from '../../../../utils/classNames';
+import { classNames } from '../../../../../../common/src/client/utils/classNames';
 import { Alert, Button, Heading } from '@navikt/ds-react';
 import { SearchResultHit } from './search-hit/SearchResultHit';
 import { ContentLoader } from '../../../common/loader/ContentLoader';

legacy-archive/client/components/main-section/content-view/files-view/FilesView.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { CmsContent } from '../../../../../shared/cms-documents/content';
 import { Link } from '@navikt/ds-react';
 import { useAppState } from '../../../../context/app-state/useAppState';
-import { classNames } from '../../../../utils/classNames';
+import { classNames } from '../../../../../../common/src/client/utils/classNames';
 
 import style from './FilesView.module.css';
 

legacy-archive/client/components/main-section/content-view/html-view/HtmlView.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { classNames } from '../../../../utils/classNames';
+import { classNames } from '../../../../../../common/src/client/utils/classNames';
 import { Button } from '@navikt/ds-react';
 import { useAppState } from '../../../../context/app-state/useAppState';
 import { ExpandIcon } from '@navikt/aksel-icons';

legacy-archive/client/components/main-section/content-view/pdf-exporter/PdfExporter.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { CmsContentDocument } from '../../../../../shared/cms-documents/content';
 import { Button, Checkbox, CheckboxGroup, Heading, HelpText, Label } from '@navikt/ds-react';
-import { classNames } from '../../../../utils/classNames';
+import { classNames } from '../../../../../../common/src/client/utils/classNames';
 import { useAppState } from '../../../../context/app-state/useAppState';
 import { ArrowDownRightIcon, DownloadIcon } from '@navikt/aksel-icons';
 import { formatTimestamp } from '@common/shared/timestamp';

legacy-archive/client/components/main-section/content-view/pdf-exporter/download-link/DownloadLink.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Link, Loader } from '@navikt/ds-react';
-import { classNames } from '../../../../../utils/classNames';
+import { classNames } from '../../../../../../../common/src/client/utils/classNames';
 import Cookies from 'js-cookie';
 import { DOWNLOAD_COOKIE_NAME } from '../../../../../../shared/downloadCookie';
 

legacy-archive/client/components/main-section/content-view/xml-view/XmlView.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import XMLViewer from 'react-xml-viewer';
 import { Alert, Switch, Tooltip } from '@navikt/ds-react';
-import { classNames } from '../../../../utils/classNames';
+import { classNames } from '../../../../../../common/src/client/utils/classNames';
 
 import style from './XmlView.module.css';
 

legacy-archive/client/components/main-section/view-selector/ViewSelector.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ToggleGroup, Tooltip, TooltipProps } from '@navikt/ds-react';
-import { classNames } from '../../../utils/classNames';
+import { classNames } from '../../../../../common/src/client/utils/classNames';
 import { CmsContent } from '../../../../shared/cms-documents/content';
 
 import style from './ViewSelector.module.css';

xp-archive/client/contentTree/NavigationBar.module.css

@@ -2,8 +2,9 @@
     border-right: 1px solid var(--a-border-divider);
     grid-area: left;
     overflow-y: auto;
+    padding: 0.5rem;
 }
 
-.heading {
-    margin: 1rem;
+.search {
+    margin-bottom: 1rem;
 }

xp-archive/client/contentTree/NavigationBar.tsx

@@ -1,7 +1,10 @@
-import React from 'react';
-import { Heading, Tabs } from '@navikt/ds-react';
+import React, { useState } from 'react';
+import { Tabs, Search } from '@navikt/ds-react';
 import { LayerPanel } from './layerPanel/LayerPanel';
 import { useAppState } from 'client/context/appState/useAppState';
+import { fetchJson } from '@common/shared/fetchUtils';
+import { SearchResponse } from 'shared/types';
+import { SearchResult } from './search/SearchResult';
 
 import style from './NavigationBar.module.css';
 
@@ -20,24 +23,76 @@ const getLabel = (locale: Locale) => {
 
 export const NavigationBar = () => {
     const { setSelectedLocale } = useAppState();
+    const [searchResultIsOpen, setSearchResultIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [searchResult, setSearchResult] = useState<SearchResponse>({
+        hits: [],
+        total: 0,
+        hasMore: false,
+        query: '',
+    });
+
+    const SEARCH_API = `${import.meta.env.VITE_APP_ORIGIN}/xp/api/search`;
+
+    const searchData = async () => {
+        setIsLoading(true);
+        const result = await fetchJson<SearchResponse>(SEARCH_API, {
+            params: { query: searchQuery },
+        });
+        if (result) {
+            setSearchResult(result);
+        }
+        setSearchResultIsOpen(true);
+        setIsLoading(false);
+        return result;
+    };
+
+    const closeSearchResult = () => {
+        setSearchResultIsOpen(false);
+        setSearchQuery('');
+    };
 
     return (
         <div className={style.wrapper}>
-            <Heading size={'small'} className={style.heading}>
-                {'Innhold'}
-            </Heading>
-            <Tabs defaultValue="no" onChange={(locale) => setSelectedLocale(locale as Locale)}>
-                <Tabs.List>
+            <form
+                className={style.search}
+                role={'search'}
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    if (!searchQuery) {
+                        return;
+                    }
+
+                    searchData();
+                }}
+            >
+                <Search
+                    label={'Søk'}
+                    value={searchQuery}
+                    onChange={(value) => setSearchQuery(value)}
+                />
+            </form>
+            {searchResultIsOpen ? (
+                <SearchResult
+                    isLoading={isLoading}
+                    searchResult={searchResult}
+                    closeSearchResult={closeSearchResult}
+                />
+            ) : (
+                <Tabs defaultValue="no" onChange={(locale) => setSelectedLocale(locale as Locale)}>
+                    <Tabs.List>
+                        {locales.map((locale) => (
+                            <Tabs.Tab key={locale} value={locale} label={getLabel(locale)} />
+                        ))}
+                    </Tabs.List>
                     {locales.map((locale) => (
-                        <Tabs.Tab key={locale} value={locale} label={getLabel(locale)} />
+                        <Tabs.Panel key={locale} value={locale}>
+                            <LayerPanel locale={locale} />
+                        </Tabs.Panel>
                     ))}
-                </Tabs.List>
-                {locales.map((locale) => (
-                    <Tabs.Panel key={locale} value={locale}>
-                        <LayerPanel locale={locale} />
-                    </Tabs.Panel>
-                ))}
-            </Tabs>
+                </Tabs>
+            )}
         </div>
     );
 };

xp-archive/client/contentTree/contentTreeEntry/NavigationItem.tsx

@@ -10,13 +10,26 @@ type Props = {
     entry: ContentTreeEntryData;
 };
 
+export const getContentIconUrl = (type: string) =>
+    `${import.meta.env.VITE_APP_ORIGIN}/xp/api/contentIcon?type=${type}`;
+
+export const updateContentUrl = (id: string, locale: string) => {
+    const newUrl = `${xpArchiveConfig.basePath}/${id}/${locale}`;
+    window.history.pushState({}, '', newUrl);
+};
+
 export const NavigationItem = ({ entry }: Props) => {
     const { setSelectedContentId } = useAppState();
 
-    const iconUrl = `${import.meta.env.VITE_APP_ORIGIN}/xp/api/contentIcon?type=${entry.type}`;
     const label = (
         <span style={{ display: 'flex', alignItems: 'center' }}>
-            <img src={iconUrl} width={20} height={20} style={{ marginRight: '5px' }} alt={''} />
+            <img
+                src={getContentIconUrl(entry.type)}
+                width={20}
+                height={20}
+                style={{ marginRight: '5px' }}
+                alt={''}
+            />
             {entry.displayName}
         </span>
     );
@@ -26,8 +39,7 @@ export const NavigationItem = ({ entry }: Props) => {
     const onClick = () => {
         if (!entry.isEmpty) {
             setSelectedContentId(entry.id);
-            const newUrl = `${xpArchiveConfig.basePath}/${entry.id}/${entry.locale}`;
-            window.history.pushState({}, '', newUrl);
+            updateContentUrl(entry.id, entry.locale);
         }
     };
 

xp-archive/client/contentTree/search/SearchResult.module.css

@@ -0,0 +1,22 @@
+.wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.filteredHitsHeading {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+}
+
+.filteredHitsHeadingText {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.otherHitsHeading {
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+}

xp-archive/client/contentTree/search/SearchResult.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Button, Heading, HelpText, Loader } from '@navikt/ds-react';
+import { SearchResponse } from 'shared/types';
+import { SearchResultItem } from './SearchResultItem/SearchResultItem';
+
+import style from './SearchResult.module.css';
+
+type SearchResultProps = {
+    isLoading: boolean;
+    searchResult: SearchResponse;
+    closeSearchResult: () => void;
+};
+
+export const SearchResult = ({ isLoading, searchResult, closeSearchResult }: SearchResultProps) => {
+    const { hits, query } = searchResult;
+
+    const nonFolderHits = hits.filter((hit) => hit.type !== 'base:folder');
+
+    const filteredHits = nonFolderHits.filter(
+        (hit) =>
+            hit.type === 'no.nav.navno:content-page-with-sidemenus' ||
+            hit.type === 'no.nav.navno:themed-article-page' ||
+            hit.type === 'no.nav.navno:situation-page' ||
+            hit.type === 'no.nav.navno:guide-page'
+    );
+
+    const otherHits = nonFolderHits.filter((hit) => !filteredHits.includes(hit));
+
+    return (
+        <div>
+            {isLoading ? (
+                <Loader size={'3xlarge'} />
+            ) : (
+                <div className={style.wrapper}>
+                    <div className={style.filteredHitsHeading}>
+                        <div>
+                            <div className={style.filteredHitsHeadingText}>
+                                <Heading size="small" level="2">
+                                    {`Treff for "${query}" i sidetyper: (${filteredHits.length})`}
+                                </Heading>
+                                <HelpText>
+                                    Treff i sidetypene Produktside, Situasjonsside, Temaartikkel og
+                                    Slik gjør du det.
+                                </HelpText>
+                            </div>
+                        </div>
+                        <Button variant="tertiary" size="small" onClick={closeSearchResult}>
+                            Lukk
+                        </Button>
+                    </div>
+                    {filteredHits.map((hit) => (
+                        <SearchResultItem hit={hit} key={hit._id + hit.layerLocale} />
+                    ))}
+                    <Heading size="small" level="2" className={style.otherHitsHeading}>
+                        {`Treff for "${query}" i filer og annet: (${otherHits.length})`}
+                    </Heading>
+                    {otherHits.map((hit) => (
+                        <SearchResultItem hit={hit} key={hit._id + hit.layerLocale} />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};