@cccsaurora/howler-ui 2.14.0-dev.259 → 2.14.0-dev.264

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

@@ -0,0 +1,244 @@
+import type { RenderHookResult } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { hget, hpost, hput } from 'api';
+import MockLocalStorage from 'tests/MockLocalStorage';
+import { MOCK_RESPONSES } from 'tests/server-handlers';
+import { useContextSelector } from 'use-context-selector';
+import { MY_LOCAL_STORAGE_PREFIX, StorageKey } from 'utils/constants';
+import ViewProvider, { ViewContext, type ViewContextType } from './ViewProvider';
+
+let mockUser = {
+  favourite_views: ['favourited_view_id']
+};
+
+vi.mock('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('commons/components/app/hooks', () => ({
+  useAppUser: () => ({
+    user: mockUser,
+    setUser: _user => (mockUser = _user)
+  })
+}));
+
+const mockLocalStorage: Storage = new MockLocalStorage() as any;
+
+// Replace localStorage in global scope
+Object.defineProperty(window, 'localStorage', {
+  value: mockLocalStorage,
+  writable: true
+});
+
+const Wrapper = ({ children }) => {
+  return <ViewProvider>{children}</ViewProvider>;
+};
+
+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 () => {
+    interface HookResult {
+      addFavourite: ViewContextType['addFavourite'];
+      removeFavourite: ViewContextType['removeFavourite'];
+    }
+
+    const hook: RenderHookResult<HookResult, any> = 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 () => {
+    interface HookResult {
+      addView: ViewContextType['addView'];
+      removeView: ViewContextType['removeView'];
+      views: ViewContextType['views'];
+    }
+
+    const hook: RenderHookResult<HookResult, any> = 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: RenderHookResult<ViewContextType['fetchViews'], any>;
+    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,
+        sort: 'title asc'
+      });
+
+      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,
+        sort: 'title asc'
+      });
+
+      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,
+        sort: 'title asc'
+      });
+    });
+
+    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: RenderHookResult<ViewContextType['getCurrentView'], any>;
+    beforeEach(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({ lazy: true })).resolves.toBeFalsy();
+
+      const result = await act(async () => hook.result.current());
+
+      expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items[0]);
+    });
+
+    it('should allow the user to fetch their current view based on the view ID', async () => {
+      // lazy load should return nothing
+      await expect(hook.result.current({ lazy: true })).resolves.toBeFalsy();
+
+      const result = await act(async () => hook.result.current({ viewId: 'searched_view_id' }));
+
+      expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items[0]);
+    });
+  });
+
+  describe('editView', () => {
+    let hook: RenderHookResult<ViewContextType['editView'], any>;
+    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/app/providers/ViewProvider.tsx

@@ -0,0 +1,207 @@
+import api from 'api';
+import { useAppUser } from 'commons/components/app/hooks';
+import useMyApi from 'components/hooks/useMyApi';
+import { useMyLocalStorageItem } from 'components/hooks/useMyLocalStorage';
+import { has, omit } from 'lodash-es';
+import type { HowlerUser } from 'models/entities/HowlerUser';
+import type { View } from 'models/entities/generated/View';
+import { useCallback, useEffect, useState, type FC, type PropsWithChildren } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
+import { createContext, useContextSelector } from 'use-context-selector';
+import { StorageKey } from 'utils/constants';
+
+export interface ViewContextType {
+  defaultView: string;
+  setDefaultView: (viewId: string) => void;
+  views: { [viewId: string]: View };
+  addFavourite: (id: string) => Promise<void>;
+  removeFavourite: (id: string) => Promise<void>;
+  fetchViews: (ids?: string[]) => Promise<View[]>;
+  addView: (v: View) => Promise<View>;
+  editView: (id: string, newView: Partial<Omit<View, 'view_id' | 'owner'>>) => Promise<View>;
+  removeView: (id: string) => Promise<void>;
+  getCurrentView: (config?: { viewId?: string; lazy?: boolean }) => Promise<View>;
+}
+
+export const ViewContext = createContext<ViewContextType>(null);
+
+const ViewProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { dispatchApi } = useMyApi();
+  const appUser = useAppUser<HowlerUser>();
+  const [defaultView, setDefaultView] = useMyLocalStorageItem<string>(StorageKey.DEFAULT_VIEW);
+  const location = useLocation();
+  const routeParams = useParams();
+
+  const [views, setViews] = useState<{ [viewId: string]: View }>({});
+
+  const fetchViews: ViewContextType['fetchViews'] = useCallback(
+    async (ids?: string[]) => {
+      if (!ids) {
+        const newViews = (await dispatchApi(api.view.get(), { throwError: false })) ?? [];
+
+        setViews(_views => ({
+          ..._views,
+          ...Object.fromEntries(newViews.map(_view => [_view.view_id, _view]))
+        }));
+
+        return newViews;
+      }
+
+      const missingIds = ids.filter(_id => !has(views, _id));
+
+      if (missingIds.length < 1) {
+        return ids.map(id => views[id]);
+      }
+
+      try {
+        const response = await dispatchApi(
+          api.search.view.post({
+            query: `view_id:(${missingIds.join(' OR ')})`,
+            rows: missingIds.length,
+            sort: 'title asc'
+          })
+        );
+
+        const newViews = Object.fromEntries(response.items.map(_view => [_view.view_id, _view]));
+
+        setViews(_views => ({
+          ..._views,
+          ...Object.fromEntries(missingIds.map(_view_id => [_view_id, null])),
+          ...newViews
+        }));
+
+        return ids.map(id => views[id] ?? newViews[id]);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn(e);
+
+        return [];
+      }
+    },
+    [dispatchApi, views]
+  );
+
+  useEffect(() => {
+    if (!defaultView || has(views, defaultView)) {
+      return;
+    }
+
+    (async () => {
+      const result = await fetchViews([defaultView]);
+
+      if (!result.length) {
+        setDefaultView(undefined);
+      }
+    })();
+  }, [defaultView, fetchViews, setDefaultView, views]);
+
+  const getCurrentView: ViewContextType['getCurrentView'] = useCallback(
+    async ({ viewId, lazy = false } = {}) => {
+      if (!viewId) {
+        viewId = location.pathname.startsWith('/views') ? routeParams.id : defaultView;
+      }
+
+      if (!viewId) {
+        return null;
+      }
+
+      if (!has(views, viewId) && !lazy) {
+        return (await fetchViews([viewId]))[0];
+      }
+
+      return views[viewId];
+    },
+    [defaultView, fetchViews, location.pathname, routeParams.id, views]
+  );
+
+  const editView: ViewContextType['editView'] = useCallback(
+    async (id, partialView) => {
+      const result = await dispatchApi(api.view.put(id, partialView));
+
+      setViews(_views => ({
+        ..._views,
+        [id]: { ...(_views[id] ?? {}), ...partialView }
+      }));
+
+      return result;
+    },
+    [dispatchApi]
+  );
+
+  const addFavourite: ViewContextType['addFavourite'] = useCallback(
+    async (id: string) => {
+      await dispatchApi(api.view.favourite.post(id));
+
+      appUser.setUser({
+        ...appUser.user,
+        favourite_views: [...appUser.user.favourite_views, id]
+      });
+    },
+    [appUser, dispatchApi]
+  );
+
+  const addView: ViewContextType['addView'] = useCallback(
+    async (view: View) => {
+      const newView = await dispatchApi(api.view.post(view));
+
+      setViews(_views => ({ ..._views, [newView.view_id]: newView }));
+
+      addFavourite(newView.view_id);
+
+      return newView;
+    },
+    [addFavourite, dispatchApi]
+  );
+
+  const removeFavourite: ViewContextType['removeFavourite'] = useCallback(
+    async (id: string) => {
+      await dispatchApi(api.view.favourite.del(id));
+
+      appUser.setUser({
+        ...appUser.user,
+        favourite_views: appUser.user.favourite_views.filter(v => v !== id)
+      });
+    },
+    [appUser, dispatchApi]
+  );
+
+  const removeView: ViewContextType['removeView'] = useCallback(
+    async (id: string) => {
+      const result = await dispatchApi(api.view.del(id));
+
+      setViews(_views => omit(_views, id));
+
+      if (appUser.user?.favourite_views.includes(id)) {
+        removeFavourite(id);
+      }
+
+      return result;
+    },
+    [appUser.user?.favourite_views, dispatchApi, removeFavourite]
+  );
+
+  return (
+    <ViewContext.Provider
+      value={{
+        views,
+        addFavourite,
+        removeFavourite,
+        fetchViews,
+        addView,
+        editView,
+        removeView,
+        defaultView,
+        setDefaultView,
+        getCurrentView
+      }}
+    >
+      {children}
+    </ViewContext.Provider>
+  );
+};
+
+export const useViewContextSelector = <Selected,>(selector: (value: ViewContextType) => Selected): Selected => {
+  return useContextSelector<ViewContextType, Selected>(ViewContext, selector);
+};
+
+export default ViewProvider;