@cccsaurora/howler-ui 2.16.0-dev.378 → 2.16.0-dev.381

package/components/app/App.js

@@ -51,6 +51,7 @@ import ViewComposer from '@cccsaurora/howler-ui/components/routes/views/ViewComp
 import Views from '@cccsaurora/howler-ui/components/routes/views/Views';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import utc from 'dayjs/plugin/utc';
 import i18n from '@cccsaurora/howler-ui/i18n';
@@ -80,6 +81,7 @@ import ViewProvider from './providers/ViewProvider';
 dayjs.extend(utc);
 dayjs.extend(duration);
 dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
 loader.config({ monaco });
 const RoleRoute = ({ role }) => {
     const appUser = useAppUser();

package/components/app/hooks/useMatchers.js

@@ -18,7 +18,6 @@ const useMatchers = () => {
             return (await getHit(hit.howler.id, true)).__template;
         }
         catch (e) {
-            console.warn(e);
             return null;
         }
     }, [getHit]);
@@ -35,7 +34,6 @@ const useMatchers = () => {
             return (await getHit(hit.howler.id, true)).__overview;
         }
         catch (e) {
-            console.warn(e);
             return null;
         }
     }, [getHit]);
@@ -52,7 +50,6 @@ const useMatchers = () => {
             return (await getHit(hit.howler.id, true)).__dossiers ?? [];
         }
         catch (e) {
-            console.warn(e);
             return [];
         }
     }, [getHit]);
@@ -68,7 +65,6 @@ const useMatchers = () => {
             return (await getHit(hit.howler.id, true)).__analytic;
         }
         catch (e) {
-            console.warn(e);
             return null;
         }
     }, [getHit]);

package/components/app/providers/FavouritesProvider.js

@@ -5,6 +5,7 @@ import { sortBy, uniq } from 'lodash-es';
 import { createContext, useCallback, useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
+import { buildViewUrl } from '@cccsaurora/howler-ui/utils/viewUtils';
 import { AnalyticContext } from './AnalyticProvider';
 import { ViewContext } from './ViewProvider';
 export const FavouriteContext = createContext(null);
@@ -35,7 +36,7 @@ const FavouriteProvider = ({ children }) => {
             .map(view => ({
             id: view.view_id,
             text: t(view.title),
-            route: `/views/${view.view_id}`,
+            route: buildViewUrl(view),
             nested: true
         }));
         if (viewElement) {

package/components/app/providers/FieldProvider.d.ts

@@ -1,9 +1,9 @@
 import type { SearchField } from '@cccsaurora/howler-ui/api/search/fields';
 import type { FC, PropsWithChildren } from 'react';
-interface FieldProviderType {
+interface FieldContextType {
     hitFields: SearchField[];
     getHitFields: () => Promise<SearchField[]>;
 }
-export declare const FieldContext: import("react").Context<FieldProviderType>;
+export declare const FieldContext: import("react").Context<FieldContextType>;
 declare const FieldProvider: FC<PropsWithChildren>;
 export default FieldProvider;

package/components/app/providers/HitProvider.d.ts

@@ -1,7 +1,7 @@
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
 import type { FC, PropsWithChildren } from 'react';
-interface HitProviderType {
+export interface HitContextType {
     hits: {
         [index: string]: Hit;
     };
@@ -13,10 +13,10 @@ interface HitProviderType {
     updateHit: (newHit: Hit) => void;
     getHit: (id: string, force?: boolean) => Promise<WithMetadata<Hit>>;
 }
-export declare const HitContext: import("use-context-selector").Context<HitProviderType>;
+export declare const HitContext: import("use-context-selector").Context<HitContextType>;
 /**
  * Central repository for storing individual hit data across the application. Allows efficient retrieval of hits across componenents.
  */
 declare const HitProvider: FC<PropsWithChildren>;
-export declare const useHitContextSelector: <Selected>(selector: (value: HitProviderType) => Selected) => Selected;
+export declare const useHitContextSelector: <Selected>(selector: (value: HitContextType) => Selected) => Selected;
 export default HitProvider;

package/components/app/providers/HitSearchProvider.d.ts

@@ -1,27 +1,26 @@
 import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
-import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
 import { type Dispatch, type FC, type PropsWithChildren, type SetStateAction } from 'react';
 export interface QueryEntry {
     [query: string]: string;
 }
-interface HitSearchProviderType {
-    layout: HitLayout;
+export interface HitSearchContextType {
     displayType: 'list' | 'grid';
     searching: boolean;
     error: string | null;
     response: HowlerSearchResponse<WithMetadata<Hit>> | null;
-    viewId: string | null;
     bundleId: string | null;
-    queryHistory: QueryEntry;
     fzfSearch: boolean;
     setDisplayType: (type: 'list' | 'grid') => void;
-    setQueryHistory: Dispatch<SetStateAction<QueryEntry>>;
     setFzfSearch: Dispatch<SetStateAction<boolean>>;
     search: (query: string, appendResults?: boolean) => void;
+    getFilters: () => Promise<string[]>;
+    queryHistory: QueryEntry;
+    setQueryHistory: ReturnType<typeof useMyLocalStorageItem>[1];
 }
-export declare const HitSearchContext: import("use-context-selector").Context<HitSearchProviderType>;
+export declare const HitSearchContext: import("use-context-selector").Context<HitSearchContextType>;
 declare const HitSearchProvider: FC<PropsWithChildren>;
-export declare const useHitSearchContextSelector: <Selected>(selector: (value: HitSearchProviderType) => Selected) => Selected;
+export declare const useHitSearchContextSelector: <Selected>(selector: (value: HitSearchContextType) => Selected) => Selected;
 export default HitSearchProvider;

package/components/app/providers/HitSearchProvider.js

@@ -1,17 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import api from '@cccsaurora/howler-ui/api';
-import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMyLocalStorage, { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import dayjs from 'dayjs';
 import i18n from '@cccsaurora/howler-ui/i18n';
+import { cloneDeep } from 'lodash-es';
 import isNull from 'lodash-es/isNull';
 import isUndefined from 'lodash-es/isUndefined';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { isMobile } from 'react-device-detect';
 import { useLocation, useParams } from 'react-router-dom';
 import { createContext, useContextSelector } from 'use-context-selector';
 import { DEFAULT_QUERY, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import { getStored } from '@cccsaurora/howler-ui/utils/localStorage';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
 import { convertCustomDateRangeToLucene, convertDateToLucene } from '@cccsaurora/howler-ui/utils/utils';
 import { HitContext } from './HitProvider';
@@ -25,7 +24,7 @@ const HitSearchProvider = ({ children }) => {
     const location = useLocation();
     const { dispatchApi } = useMyApi();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
-    const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
+    const getCurrentViews = useContextSelector(ViewContext, ctx => ctx.getCurrentViews);
     const defaultView = useContextSelector(ViewContext, ctx => ctx.defaultView);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
@@ -34,19 +33,60 @@ const HitSearchProvider = ({ children }) => {
     const trackTotalHits = useContextSelector(ParameterContext, ctx => ctx.trackTotalHits);
     const sort = useContextSelector(ParameterContext, ctx => ctx.sort);
     const span = useContextSelector(ParameterContext, ctx => ctx.span);
-    const filter = useContextSelector(ParameterContext, ctx => ctx.filter);
+    const allFilters = useContextSelector(ParameterContext, ctx => ctx.filters);
     const startDate = useContextSelector(ParameterContext, ctx => ctx.startDate);
     const endDate = useContextSelector(ParameterContext, ctx => ctx.endDate);
+    const views = useContextSelector(ParameterContext, ctx => ctx.views);
+    const addView = useContextSelector(ParameterContext, ctx => ctx.addView);
     const loadHits = useContextSelector(HitContext, ctx => ctx.loadHits);
-    const [displayType, setDisplayType] = useState(getStored(StorageKey.DISPLAY_TYPE) ?? 'list');
+    const [displayType, setDisplayType] = useState(get(StorageKey.DISPLAY_TYPE) ?? 'list');
     const [searching, setSearching] = useState(false);
     const [error, setError] = useState(null);
-    const [response, setResponse] = useState();
-    const [queryHistory, setQueryHistory] = useState(JSON.parse(get(StorageKey.QUERY_HISTORY)) || { 'howler.id: *': new Date().toISOString() });
+    const [response, setResponse] = useState(null);
+    const [queryHistory, setQueryHistory] = useMyLocalStorageItem(StorageKey.QUERY_HISTORY, {
+        'howler.id: *': new Date().toISOString()
+    });
     const [fzfSearch, setFzfSearch] = useState(false);
-    const viewId = useMemo(() => (location.pathname.startsWith('/views') ? routeParams.id : defaultView) ?? null, [defaultView, location.pathname, routeParams.id]);
     const bundleId = useMemo(() => (location.pathname.startsWith('/bundles') ? routeParams.id : null), [location.pathname, routeParams.id]);
-    const layout = useMemo(() => (isMobile ? HitLayout.COMFY : (get(StorageKey.HIT_LAYOUT) ?? HitLayout.NORMAL)), [get]);
+    const filters = useMemo(() => allFilters.filter(filter => !filter.endsWith('*')), [allFilters]);
+    // On load check to filter out any queries older than one month
+    useEffect(() => {
+        const filterQueryTime = dayjs().subtract(1, 'month').toISOString();
+        setQueryHistory(Object.fromEntries(Object.entries(queryHistory).filter(([_, value]) => value > filterQueryTime)));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Inject default view into URL when no views present
+    useEffect(() => {
+        if (views.length === 0 && defaultView) {
+            addView(defaultView);
+        }
+    }, [views.length, defaultView, addView]);
+    const getFilters = useCallback(async () => {
+        const _filters = cloneDeep(filters);
+        // Add span filter
+        if (span && !span.endsWith('custom')) {
+            _filters.push(`event.created:${convertDateToLucene(span)}`);
+        }
+        else if (startDate && endDate) {
+            _filters.push(`event.created:${convertCustomDateRangeToLucene(startDate, endDate)}`);
+        }
+        // Add bundle filter
+        const bundle = location.pathname.startsWith('/bundles') && routeParams.id;
+        if (bundle) {
+            _filters.push(`howler.bundles:${bundle}`);
+        }
+        // Fetch all view queries
+        if (views.length > 0) {
+            const viewObjects = await getCurrentViews();
+            // Filter out null/undefined views and extract queries
+            viewObjects
+                .filter(view => view?.query)
+                .map(view => view.query)
+                .forEach(viewQuery => _filters.push(viewQuery));
+        }
+        return _filters;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [endDate, filters, getCurrentViews, location.pathname, routeParams.id, span, startDate, views]);
     const search = useCallback(async (_query, appendResults) => {
         THROTTLER.debounce(async () => {
             if (_query === 'woof!') {
@@ -58,34 +98,20 @@ const HitSearchProvider = ({ children }) => {
             }
             if (!isNull(_query) && !isUndefined(_query) && _query !== query) {
                 setQuery(_query);
+                setQueryHistory({
+                    ...queryHistory,
+                    [_query]: new Date().toISOString()
+                });
             }
             setSearching(true);
             setError(null);
-            const filters = [];
-            if (span && !span.endsWith('custom')) {
-                filters.push(`event.created:${convertDateToLucene(span)}`);
-            }
-            else if (startDate && endDate) {
-                filters.push(`event.created:${convertCustomDateRangeToLucene(startDate, endDate)}`);
-            }
-            if (filter) {
-                filters.push(filter);
-            }
             try {
-                const bundle = location.pathname.startsWith('/bundles') && routeParams.id;
-                let fullQuery = _query || DEFAULT_QUERY;
-                if (bundle) {
-                    fullQuery = `(howler.bundles:${bundle}) AND (${fullQuery})`;
-                }
-                else if (viewId) {
-                    fullQuery = `(${(await getCurrentView({ viewId }))?.query || DEFAULT_QUERY}) AND (${fullQuery})`;
-                }
                 const _response = await dispatchApi(api.search.hit.post({
-                    offset: appendResults ? response.rows : offset,
+                    offset: appendResults && response ? response.rows : offset,
                     rows: pageCount,
-                    query: fullQuery,
+                    query: _query || DEFAULT_QUERY,
                     sort,
-                    filters,
+                    filters: await getFilters(),
                     track_total_hits: trackTotalHits,
                     metadata: ['template', 'overview', 'analytic']
                 }), { showError: false, throwError: true });
@@ -121,41 +147,40 @@ const HitSearchProvider = ({ children }) => {
         query,
         startDate,
         endDate,
-        filter,
+        filters,
         setQuery,
         location.pathname,
         routeParams.id,
-        viewId,
+        views,
         dispatchApi,
         offset,
         pageCount,
         trackTotalHits,
         loadHits,
-        getCurrentView,
+        getCurrentViews,
         setOffset
     ]);
     // We only run this when ancillary properties (i.e. filters, sorting) change
     useEffect(() => {
-        if (span.endsWith('custom') && (!startDate || !endDate)) {
+        if (span?.endsWith('custom') && (!startDate || !endDate)) {
             return;
         }
-        if (viewId || bundleId || (query && query !== DEFAULT_QUERY) || offset > 0) {
+        if (views.length > 0 || bundleId || (query && query !== DEFAULT_QUERY) || offset > 0 || filters.length > 0) {
             search(query);
         }
         else {
             setResponse(null);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filter, offset, pageCount, sort, span, bundleId, location.pathname, startDate, endDate, viewId]);
+    }, [offset, pageCount, sort, span, bundleId, location.pathname, startDate, endDate, filters, query]);
     return (_jsx(HitSearchContext.Provider, { value: {
-            layout,
             displayType,
             setDisplayType,
             search,
             searching,
+            getFilters,
             error,
             response,
-            viewId,
             bundleId,
             setQueryHistory,
             queryHistory,

package/components/app/providers/HitSearchProvider.test.d.ts

@@ -0,0 +1 @@
+export {};