@cccsaurora/howler-ui 2.13.0-dev.137 → 2.13.0-dev.142

package/api/view/index.d.ts

@@ -3,6 +3,6 @@ import type { View } from '@cccsaurora/howler-ui/models/entities/generated/View'
 export declare const uri: (id?: string) => string;
 export declare const get: () => Promise<View[]>;
 export declare const post: (newData: Partial<View>) => Promise<View>;
-export declare const put: (id: string, title: string, query: string, sort: string, span: string, advanceOnTriage: boolean) => Promise<View>;
+export declare const put: (id: string, partialView: Partial<Omit<View, "view_id">>) => Promise<View>;
 export declare const del: (id: string) => Promise<void>;
 export { favourite };

package/api/view/index.js

@@ -9,8 +9,8 @@ export const get = () => {
 export const post = (newData) => {
     return hpost(uri(), newData);
 };
-export const put = (id, title, query, sort, span, advanceOnTriage) => {
-    return hput(uri(id), { title, query, sort, span, settings: { advance_on_triage: advanceOnTriage } });
+export const put = (id, partialView) => {
+    return hput(uri(id), partialView);
 };
 export const del = (id) => {
     return hdelete(uri(id));

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

@@ -10,7 +10,7 @@ export interface ViewContextType {
     removeFavourite: (id: string) => Promise<void>;
     fetchViews: (ids?: string[]) => Promise<View[]>;
     addView: (v: View) => Promise<View>;
-    editView: (id: string, title: string, query: string, sort: string, span: string, advanceOnTriage: boolean) => Promise<View>;
+    editView: (id: string, newView: Partial<Omit<View, 'view_id' | 'owner'>>) => Promise<View>;
     removeView: (id: string) => Promise<void>;
     getCurrentView: (lazy?: boolean) => Promise<View>;
 }

package/components/app/providers/ViewProvider.js

@@ -69,11 +69,11 @@ const ViewProvider = ({ children }) => {
         }
         return views[id];
     }, [defaultView, fetchViews, location.pathname, routeParams.id, views]);
-    const editView = useCallback(async (id, title, query, sort, span, advanceOnTriage) => {
-        const result = await dispatchApi(api.view.put(id, title, query, sort, span, advanceOnTriage));
+    const editView = useCallback(async (id, partialView) => {
+        const result = await dispatchApi(api.view.put(id, partialView));
         setViews(_views => ({
             ..._views,
-            [id]: { ...(_views[id] ?? {}), title, query, sort, span, settings: { advance_on_triage: advanceOnTriage } }
+            [id]: { ...(_views[id] ?? {}), ...partialView }
         }));
         return result;
     }, [dispatchApi]);

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

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

package/components/app/providers/ViewProvider.test.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { hget, hpost, hput } from '@cccsaurora/howler-ui/api';
+import MockLocalStorage from '@cccsaurora/howler-ui/tests/MockLocalStorage';
+import { MOCK_RESPONSES } from '@cccsaurora/howler-ui/tests/server-handlers';
+import { useContextSelector } from 'use-context-selector';
+import { MY_LOCAL_STORAGE_PREFIX, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import ViewProvider, { ViewContext } from './ViewProvider';
+let mockUser = {
+    favourite_views: ['favourited_view_id']
+};
+vi.mock('@cccsaurora/howler-ui/api', { spy: true });
+vi.mock('react-router-dom', () => ({
+    useLocation: vi.fn(() => ({ pathname: '/views/searched_view_id' })),
+    useParams: vi.fn(() => ({ id: 'searched_view_id' }))
+}));
+vi.mock('@cccsaurora/howler-ui/commons/components/app/hooks', () => ({
+    useAppUser: () => ({
+        user: mockUser,
+        setUser: _user => (mockUser = _user)
+    })
+}));
+const mockLocalStorage = new MockLocalStorage();
+// Replace localStorage in global scope
+Object.defineProperty(window, 'localStorage', {
+    value: mockLocalStorage,
+    writable: true
+});
+const Wrapper = ({ children }) => {
+    return _jsx(ViewProvider, { children: children });
+};
+beforeEach(() => {
+    mockLocalStorage.clear();
+});
+describe('ViewContext', () => {
+    it('should fetch the defaultView on initialization', async () => {
+        mockLocalStorage.setItem(`${MY_LOCAL_STORAGE_PREFIX}.${StorageKey.DEFAULT_VIEW}`, JSON.stringify('searched_view_id'));
+        let hook = await act(async () => renderHook(() => useContextSelector(ViewContext, ctx => ctx.views), { wrapper: Wrapper }));
+        await waitFor(() => expect(hook.result.current.searched_view_id).not.toBeFalsy());
+        expect(hook.result.current.searched_view_id).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items[0]);
+    });
+    it('should allow the user to add and remove a favourite view', async () => {
+        const hook = await act(async () => {
+            return renderHook(() => useContextSelector(ViewContext, ctx => ({
+                addFavourite: ctx.addFavourite,
+                removeFavourite: ctx.removeFavourite
+            })), { wrapper: Wrapper });
+        });
+        await hook.result.current.addFavourite('example_view_id');
+        expect(mockUser.favourite_views).toEqual(['favourited_view_id', 'example_view_id']);
+        await hook.result.current.removeFavourite('example_view_id');
+        expect(mockUser.favourite_views).toEqual(['favourited_view_id']);
+    });
+    it('should allow the user to add and remove views', async () => {
+        const hook = await act(async () => {
+            return renderHook(() => useContextSelector(ViewContext, ctx => ({
+                addView: ctx.addView,
+                removeView: ctx.removeView,
+                views: ctx.views
+            })), { wrapper: Wrapper });
+        });
+        const result = await act(async () => hook.result.current.addView({
+            owner: 'user',
+            settings: {
+                advance_on_triage: false
+            },
+            view_id: 'example_created_view',
+            query: 'howler.id:*',
+            sort: 'event.created desc',
+            title: 'Example View',
+            type: 'personal',
+            span: 'date.range.1.month'
+        }));
+        hook.rerender();
+        expect(hook.result.current.views[result.view_id]).toEqual(result);
+        await act(async () => hook.result.current.removeView(result.view_id));
+        hook.rerender();
+        expect(hook.result.current.views[result.view_id]).toBeFalsy();
+    });
+    describe('fetchViews', () => {
+        let hook;
+        beforeEach(async () => {
+            hook = await act(async () => {
+                return renderHook(() => useContextSelector(ViewContext, ctx => ctx.fetchViews), { wrapper: Wrapper });
+            });
+            vi.mocked(hpost).mockClear();
+            vi.mocked(hget).mockClear();
+        });
+        it('Should fetch all views when no ids are provided', async () => {
+            const result = await act(async () => hook.result.current());
+            expect(result.length).toBe(2);
+            expect(result[0].view_id).toBe('example_view_id');
+            expect(result[1].view_id).toBe('another_view_id');
+        });
+        it('Should search for specified views when ids are provided', async () => {
+            const result = await act(async () => hook.result.current(['searched_view_id']));
+            expect(hpost).toHaveBeenCalledOnce();
+            expect(hpost).toBeCalledWith('/api/v1/search/view', { query: 'view_id:(searched_view_id)', rows: 1 });
+            expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items);
+        });
+        it('Should search only for new views when ids are provided', async () => {
+            await act(async () => hook.result.current(['searched_view_id']));
+            expect(hpost).toHaveBeenCalledOnce();
+            expect(hpost).toBeCalledWith('/api/v1/search/view', { query: 'view_id:(searched_view_id)', rows: 1 });
+            vi.mocked(hpost).mockClear();
+            await act(async () => hook.result.current(['searched_view_id', 'searched_view_id_2']));
+            expect(hpost).toHaveBeenCalledOnce();
+            expect(hpost).toBeCalledWith('/api/v1/search/view', { query: 'view_id:(searched_view_id_2)', rows: 1 });
+        });
+        it('Should provide cached instances as a response when the same views are requested', async () => {
+            let result = await act(async () => hook.result.current(['searched_view_id']));
+            expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items);
+            result = await act(async () => hook.result.current(['searched_view_id']));
+            expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items);
+            expect(hpost).toHaveBeenCalledOnce();
+        });
+    });
+    describe('getCurrentView', () => {
+        let hook;
+        beforeAll(async () => {
+            hook = await act(async () => {
+                return renderHook(() => useContextSelector(ViewContext, ctx => ctx.getCurrentView), { wrapper: Wrapper });
+            });
+        });
+        it('should allow the user to fetch their current view based on the location', async () => {
+            // lazy load should return nothing
+            await expect(hook.result.current(true)).resolves.toBeFalsy();
+            const result = await act(async () => hook.result.current());
+            expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items[0]);
+        });
+    });
+    describe('editView', () => {
+        let hook;
+        beforeAll(async () => {
+            hook = await act(async () => {
+                return renderHook(() => useContextSelector(ViewContext, ctx => ctx.editView), { wrapper: Wrapper });
+            });
+        });
+        beforeEach(() => {
+            vi.mocked(hput).mockClear();
+            vi.mocked(hpost).mockClear();
+        });
+        it('should allow users to edit views', async () => {
+            const result = await act(async () => hook.result.current('example_view_id', { query: 'howler.id:*' }));
+            expect(hput).toHaveBeenCalledOnce();
+            expect(hput).toBeCalledWith('/api/v1/view/example_view_id', { query: 'howler.id:*' });
+            expect(result).toEqual(MOCK_RESPONSES['/api/v1/view/example_view_id']);
+        });
+    });
+});

package/components/elements/hit/HitBanner.js

@@ -94,7 +94,11 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
                 }, spacing: layout !== HitLayout.COMFY ? 1 : 2, divider: _jsx(Divider, { orientation: "horizontal", sx: [
                         layout !== HitLayout.COMFY && { marginTop: '4px !important' },
                         { mr: `${theme.spacing(-1)} !important` }
-                    ] }), children: [_jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf: 'start', '& a': { color: 'text.primary' } }, children: [analyticId ? (_jsx(Link, { to: `/analytics/${analyticId}`, onClick: e => e.stopPropagation(), children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }), hit.howler?.rationale && (_jsxs(Typography, { flex: 1, variant: textVariant, color: ESCALATION_COLORS[hit.howler.escalation] + '.main', sx: { fontWeight: 'bold' }, children: [t('hit.header.rationale'), ": ", hit.howler.rationale] })), hit.howler?.outline && (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: layout !== HitLayout.COMFY ? 1 : 2, sx: { ml: `${theme.spacing(-1)} !important` }, children: [hit.howler.outline.threat && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.threat", value: hit.howler.outline.threat }) })), hit.howler.outline.target && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.target", value: hit.howler.outline.target }) }))] }), hit.howler.outline.indicators?.length > 0 && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Typography, { component: "span", variant: textVariant, children: [t('hit.header.indicators'), ":"] }), _jsx(Grid, { container: true, spacing: 0.5, sx: { mt: `${theme.spacing(-0.5)} !important`, ml: `${theme.spacing(0.25)} !important` }, children: uniq(hit.howler.outline.indicators).map((_indicator, index) => {
+                    ] }), children: [_jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf: 'start', '& a': { color: 'text.primary' } }, children: [analyticId ? (_jsx(Link, { to: `/analytics/${analyticId}`, onAuxClick: e => {
+                                    e.stopPropagation();
+                                }, onClick: e => {
+                                    e.stopPropagation();
+                                }, children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }), hit.howler?.rationale && (_jsxs(Typography, { flex: 1, variant: textVariant, color: ESCALATION_COLORS[hit.howler.escalation] + '.main', sx: { fontWeight: 'bold' }, children: [t('hit.header.rationale'), ": ", hit.howler.rationale] })), hit.howler?.outline && (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: layout !== HitLayout.COMFY ? 1 : 2, sx: { ml: `${theme.spacing(-1)} !important` }, children: [hit.howler.outline.threat && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.threat", value: hit.howler.outline.threat }) })), hit.howler.outline.target && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.target", value: hit.howler.outline.target }) }))] }), hit.howler.outline.indicators?.length > 0 && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Typography, { component: "span", variant: textVariant, children: [t('hit.header.indicators'), ":"] }), _jsx(Grid, { container: true, spacing: 0.5, sx: { mt: `${theme.spacing(-0.5)} !important`, ml: `${theme.spacing(0.25)} !important` }, children: uniq(hit.howler.outline.indicators).map((_indicator, index) => {
                                             return (_jsx(Grid, { item: true, children: _jsxs(Stack, { direction: "row", children: [_jsx(PluginTypography, { context: "indicators", variant: textVariant, value: _indicator, children: _indicator }), index < hit.howler.outline.indicators.length - 1 && (_jsx(Typography, { variant: textVariant, children: ',' }))] }) }, _indicator));
                                         }) })] })), hit.howler.outline.summary && (_jsx(Wrapper, { i18nKey: "hit.header.summary", value: hit.howler.outline.summary, paragraph: true, textOverflow: "wrap", sx: [compressed && { marginTop: `0 !important` }] }))] }))] }), _jsxs(Stack, { direction: "column", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, alignSelf: "stretch", sx: [
                     { minWidth: 0, alignItems: { sm: 'end', md: 'start' }, flex: 1, pl: 1 },

package/components/routes/hits/search/SearchPane.js

@@ -45,7 +45,7 @@ const Item = memo(({ hit, onClick }) => {
         }
     }, []);
     // Search result list item renderer.
-    return (_jsx(Box, { id: hit.howler.id, onMouseUp: e => checkMiddleClick(e, hit.howler.id), onClick: ev => onClick(ev, hit), sx: [
+    return (_jsx(Box, { id: hit.howler.id, onAuxClick: e => checkMiddleClick(e, hit.howler.id), onClick: ev => onClick(ev, hit), sx: [
             {
                 mb: 2,
                 cursor: 'pointer',

package/components/routes/views/ViewComposer.js

@@ -72,7 +72,14 @@ const ViewComposer = () => {
                 navigate(`/views/${newView.view_id}`);
             }
             else {
-                await editView(routeParams.id, title, query, sort || null, span || null, advanceOnTriage);
+                await editView(routeParams.id, {
+                    title,
+                    type,
+                    query,
+                    sort,
+                    span,
+                    settings: { advance_on_triage: advanceOnTriage }
+                });
             }
             showSuccessMessage(t(routeParams.id ? 'route.views.update.success' : 'route.views.create.success'));
         }

package/package.json

@@ -96,13 +96,14 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.13.0-dev.137",
+  "version": "2.13.0-dev.142",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",
     "./api/*": "./api/*.js",
     "./api": "./api/index.js",
     "./commons/*": "./commons/*.js",
+    "./tests/*": "./tests/*.js",
     "./rest/*": "./rest/*.js",
     "./rest": "./rest/index.js",
     "./locales/*.json": "./locales/*.json",

package/setupTests.js

@@ -2,7 +2,11 @@
 import * as matchers from '@testing-library/jest-dom/matchers';
 import '@testing-library/jest-dom/vitest';
 import { configure } from '@testing-library/react';
+import { server } from '@cccsaurora/howler-ui/tests/server';
 // Extend vitest with the dom matchers from jest-dom.
 expect.extend(matchers);
 // tell React Testing Library to look for id as the testId.
 configure({ testIdAttribute: 'id' });
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());

package/tests/MockLocalStorage.d.ts

@@ -0,0 +1,5 @@
+export default class MockLocalStorage {
+    constructor();
+    get length(): number;
+    get __STORE__(): this;
+}

package/tests/MockLocalStorage.js

@@ -0,0 +1,44 @@
+export default class MockLocalStorage {
+    constructor() {
+        Object.defineProperty(this, 'getItem', {
+            enumerable: false,
+            value: vi.fn(key => (this[key] !== undefined ? this[key] : null))
+        });
+        Object.defineProperty(this, 'setItem', {
+            enumerable: false,
+            // not mentioned in the spec, but we must always coerce to a string
+            value: vi.fn((key, val) => {
+                this[key] = `${val}`;
+            })
+        });
+        Object.defineProperty(this, 'removeItem', {
+            enumerable: false,
+            value: vi.fn(key => {
+                delete this[key];
+            })
+        });
+        Object.defineProperty(this, 'clear', {
+            enumerable: false,
+            value: vi.fn(() => {
+                Object.keys(this).map(key => delete this[key]);
+            })
+        });
+        Object.defineProperty(this, 'toString', {
+            enumerable: false,
+            value: vi.fn(() => {
+                return '[object Storage]';
+            })
+        });
+        Object.defineProperty(this, 'key', {
+            enumerable: false,
+            value: vi.fn(idx => Object.keys(this)[idx] || null)
+        });
+    } // end constructor
+    get length() {
+        return Object.keys(this).length;
+    }
+    // for backwards compatibility
+    get __STORE__() {
+        return this;
+    }
+}

package/tests/server-handlers.d.ts

@@ -0,0 +1,5 @@
+export declare const MOCK_RESPONSES: {
+    [path: string]: any;
+};
+declare const handlers: import("msw").HttpHandler[];
+export { handlers };

package/tests/server-handlers.js

@@ -0,0 +1,97 @@
+import { http, HttpResponse } from 'msw';
+export const MOCK_RESPONSES = {
+    '/api/v1/view/example_view_id': {
+        owner: 'user',
+        settings: {
+            advance_on_triage: false
+        },
+        view_id: 'example_view_id',
+        query: 'howler.id:*',
+        sort: 'event.created desc',
+        title: 'Example View',
+        type: 'personal',
+        span: 'date.range.1.month'
+    },
+    '/api/v1/search/view': {
+        items: [
+            {
+                owner: 'user',
+                settings: {
+                    advance_on_triage: false
+                },
+                view_id: 'searched_view_id',
+                query: 'howler.id:searched',
+                sort: 'event.created desc',
+                title: 'Searched View',
+                type: 'personal',
+                span: 'date.range.1.month'
+            }
+        ],
+        total: 1,
+        rows: 1
+    },
+    '/api/v1/view/new_view_id': {
+        owner: 'user',
+        settings: {
+            advance_on_triage: false
+        },
+        view_id: 'new_view_id',
+        query: 'howler.id:new',
+        sort: 'event.created desc',
+        title: 'New View',
+        type: 'personal',
+        span: 'date.range.1.month'
+    },
+    '/api/v1/view/:view_id/favourite': { success: true }
+};
+const handlers = [
+    ...Object.entries(MOCK_RESPONSES).map(([path, data]) => http.all(path, async () => HttpResponse.json({ api_response: data }))),
+    http.post('/api/v1/view', async () => HttpResponse.json({
+        api_response: {
+            owner: 'user',
+            settings: {
+                advance_on_triage: false
+            },
+            view_id: 'example_created_view',
+            query: 'howler.id:*',
+            sort: 'event.created desc',
+            title: 'Example View',
+            type: 'personal',
+            span: 'date.range.1.month'
+        }
+    }, { status: 201 })),
+    http.delete('/api/v1/view/:view_id', async () => HttpResponse.json({
+        api_response: {
+            success: true
+        }
+    }, { status: 204 })),
+    http.get('/api/v1/view', async () => HttpResponse.json({
+        api_response: [
+            {
+                owner: 'user',
+                settings: {
+                    advance_on_triage: false
+                },
+                view_id: 'example_view_id',
+                query: 'howler.id:*',
+                sort: 'event.created desc',
+                title: 'Example View',
+                type: 'personal',
+                span: 'date.range.1.month'
+            },
+            {
+                owner: 'user',
+                settings: {
+                    advance_on_triage: true
+                },
+                view_id: 'another_view_id',
+                query: 'howler.status:open',
+                sort: 'event.created asc',
+                title: 'Another View',
+                type: 'global',
+                span: 'date.range.1.week'
+            }
+        ]
+    }))
+];
+export { handlers };

package/tests/server.d.ts

@@ -0,0 +1,3 @@
+import { http } from 'msw';
+declare const server: import("msw/node").SetupServerApi;
+export { http, server };

package/tests/server.js

@@ -0,0 +1,5 @@
+import { http } from 'msw';
+import { setupServer } from 'msw/node';
+import { handlers } from './server-handlers';
+const server = setupServer(...handlers);
+export { http, server };