@cccsaurora/howler-ui 3.1.0-dev.1618 → 3.1.0-dev.1621

package/package.json

@@ -97,7 +97,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "3.1.0-dev.1618",
+  "version": "3.1.0-dev.1621",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",

package/plugins/clue/Provider.d.ts

@@ -1,3 +1,18 @@
+import type { DatabaseConfig } from '@cccsaurora/clue-ui/database/types';
 import { type PropsWithChildren } from 'react';
-declare const Provider: React.FC<PropsWithChildren<{}>>;
+export interface CluePluginOptions {
+    baseURL?: string;
+    getToken?: () => string;
+    publicIconify?: boolean;
+    customIconify?: string;
+    includeContext?: boolean;
+    defaultTimeout?: number;
+    chunkSize?: number;
+    replicate?: boolean;
+    storageType?: DatabaseConfig['storageType'];
+}
+type ProviderProps = PropsWithChildren<{
+    options?: CluePluginOptions;
+}>;
+declare const Provider: React.FC<ProviderProps>;
 export default Provider;

package/plugins/clue/Provider.js

@@ -1,13 +1,39 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { buildDatabase } from '@cccsaurora/clue-ui';
 import { ClueProvider } from '@cccsaurora/clue-ui/hooks/ClueProvider';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import { useContext } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { getStored } from '@cccsaurora/howler-ui/utils/localStorage';
-const Provider = ({ children }) => {
+const Provider = ({ children, options = {} }) => {
     const { config } = useContext(ApiConfigContext);
     const features = config?.configuration?.features ?? {};
-    return (_jsx(ClueProvider, { baseURL: location.origin + '/api/v1/clue', getToken: () => getStored(StorageKey.APP_TOKEN) ?? '', enabled: features.clue, publicIconify: location.origin.includes('localhost'), customIconify: location.origin.replace(/howler(-stg)?/, 'icons'), defaultTimeout: 5, i18next: useTranslation('clue'), chunkSize: 50, children: children }));
+    const [database, setDatabase] = useState();
+    const defaultGetToken = useCallback(() => getStored(StorageKey.APP_TOKEN) ?? '', []);
+    const baseURL = options.baseURL ?? `${location.origin}/api/v1/clue`;
+    const getToken = options.getToken ?? defaultGetToken;
+    const publicIconify = options.publicIconify ?? location.origin.includes('localhost');
+    const customIconify = options.customIconify ?? location.origin.replace('howler', 'icons');
+    useEffect(() => {
+        let cancelled = false;
+        if (!features.clue) {
+            return;
+        }
+        void buildDatabase({
+            storageType: options.storageType ?? 'memory',
+            replicate: !!options.replicate,
+            baseURL,
+            getToken
+        }).then(database => {
+            if (!cancelled) {
+                setDatabase(database);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [baseURL, features.clue, getToken, options.storageType, options.replicate]);
+    return (_jsx(ClueProvider, { baseURL: baseURL, getToken: getToken, enabled: features.clue, publicIconify: publicIconify, customIconify: customIconify, defaultTimeout: options.defaultTimeout ?? 5, i18next: useTranslation('clue'), chunkSize: options.chunkSize ?? 50, database: database, includeContext: options.includeContext, children: children }));
 };
 export default Provider;

package/plugins/clue/Provider.test.d.ts

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

package/plugins/clue/Provider.test.js

@@ -0,0 +1,119 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { act, render, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const mocks = vi.hoisted(() => ({
+    buildDatabase: vi.fn(),
+    clueProviderProps: undefined,
+    token: 'stored-token'
+}));
+vi.mock('@cccsaurora/clue-ui', () => ({
+    buildDatabase: mocks.buildDatabase
+}));
+vi.mock('@cccsaurora/clue-ui/hooks/ClueProvider', () => ({
+    ClueProvider: ({ children, ...props }) => {
+        mocks.clueProviderProps = props;
+        return _jsx(_Fragment, { children: children });
+    }
+}));
+vi.mock('components/app/providers/ApiConfigProvider', async () => {
+    const { createContext } = await import('react');
+    return { ApiConfigContext: createContext({ config: {} }) };
+});
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ i18n: { language: 'en' } })
+}));
+vi.mock('utils/constants', () => ({
+    StorageKey: { APP_TOKEN: 'app_token' }
+}));
+vi.mock('utils/localStorage', () => ({
+    getStored: () => mocks.token
+}));
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import Provider, {} from './Provider';
+const getProviderProps = () => {
+    if (!mocks.clueProviderProps) {
+        throw new Error('ClueProvider was not rendered');
+    }
+    return mocks.clueProviderProps;
+};
+const renderProvider = (config, options) => render(_jsx(ApiConfigContext.Provider, { value: { config: config, setConfig: vi.fn(), loaded: true }, children: _jsx(Provider, { options: options, children: "content" }) }));
+describe('Clue Provider', () => {
+    beforeEach(() => {
+        mocks.buildDatabase.mockReset();
+        mocks.clueProviderProps = undefined;
+        mocks.token = 'stored-token';
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+    it('does not start replication while Clue is disabled and returns an empty absent token', () => {
+        mocks.token = null;
+        renderProvider({ configuration: { features: { clue: false } } });
+        expect(mocks.buildDatabase).not.toHaveBeenCalled();
+        expect(getProviderProps().enabled).toBe(false);
+        expect(getProviderProps().database).toBeUndefined();
+        expect(getProviderProps().getToken?.()).toBe('');
+    });
+    it('returns the current stored application token by default', () => {
+        renderProvider({ configuration: { features: { clue: false } } });
+        expect(getProviderProps().getToken?.()).toBe('stored-token');
+    });
+    it('builds a configured database and passes supplied deployment options', async () => {
+        const database = { name: 'replicated' };
+        const getToken = vi.fn(() => 'custom-token');
+        mocks.buildDatabase.mockResolvedValue(database);
+        renderProvider({ configuration: { features: { clue: true } } }, {
+            baseURL: 'https://howler.example/api/v1/clue',
+            getToken,
+            publicIconify: false,
+            customIconify: 'https://icons.example',
+            includeContext: true,
+            defaultTimeout: 7,
+            chunkSize: 25,
+            replicate: true,
+            storageType: 'memory'
+        });
+        await waitFor(() => {
+            expect(mocks.buildDatabase).toHaveBeenCalledWith({
+                storageType: 'memory',
+                replicate: true,
+                baseURL: 'https://howler.example/api/v1/clue',
+                getToken
+            });
+        });
+        expect(getProviderProps()).toMatchObject({
+            baseURL: 'https://howler.example/api/v1/clue',
+            database,
+            enabled: true,
+            publicIconify: false,
+            customIconify: 'https://icons.example',
+            includeContext: true,
+            defaultTimeout: 7,
+            chunkSize: 25
+        });
+    });
+    it('uses non-replicated in-memory storage by default', async () => {
+        mocks.buildDatabase.mockResolvedValue({ name: 'local' });
+        renderProvider({ configuration: { features: { clue: true } } });
+        await waitFor(() => {
+            expect(mocks.buildDatabase).toHaveBeenCalledWith({
+                storageType: 'memory',
+                replicate: false,
+                baseURL: `${location.origin}/api/v1/clue`,
+                getToken: expect.any(Function)
+            });
+        });
+    });
+    it('ignores a database that resolves after the provider unmounts', async () => {
+        let resolveDatabase = () => { };
+        mocks.buildDatabase.mockReturnValue(new Promise(resolve => {
+            resolveDatabase = resolve;
+        }));
+        const { unmount } = renderProvider({ configuration: { features: { clue: true } } });
+        unmount();
+        await act(async () => {
+            resolveDatabase({ name: 'late' });
+        });
+        expect(getProviderProps().database).toBeUndefined();
+    });
+});

package/plugins/clue/index.d.ts

@@ -3,16 +3,19 @@ import type { PluginChipProps } from '@cccsaurora/howler-ui/components/elements/
 import type { PluginTypographyProps } from '@cccsaurora/howler-ui/components/elements/PluginTypography';
 import type { i18n as I18N } from 'i18next';
 import HowlerPlugin from '@cccsaurora/howler-ui/plugins/HowlerPlugin';
+import type { FC, PropsWithChildren } from 'react';
+import { type CluePluginOptions } from './Provider';
 import useSetup from './setup';
+export type { CluePluginOptions } from './Provider';
 declare class CluePlugin extends HowlerPlugin {
+    private readonly options;
+    constructor(options?: CluePluginOptions);
     name: string;
     version: string;
     author: string;
     description: string;
     activate(): void;
-    provider(): import("react").FC<{
-        children?: import("react").ReactNode | undefined;
-    }>;
+    provider(): FC<PropsWithChildren>;
     setup(): typeof useSetup;
     localization(i18nInstance: I18N): void;
     helpers(): HowlerHelper[];

package/plugins/clue/index.js

@@ -13,9 +13,14 @@ import ClueTypography from './components/ClueTypography';
 import HELPERS from './helpers';
 import howlerClueEN from './locales/clue.en.json';
 import howlerClueFR from './locales/clue.fr.json';
-import Provider from './Provider';
+import Provider, {} from './Provider';
 import useSetup from './setup';
 class CluePlugin extends HowlerPlugin {
+    options;
+    constructor(options = {}) {
+        super();
+        this.options = options;
+    }
     name = 'CluePlugin';
     version = '0.0.1';
     author = 'Matthew Rafuse <matthew.rafuse@cyber.gc.ca>';
@@ -41,7 +46,8 @@ class CluePlugin extends HowlerPlugin {
         super.addPivot('clue', pivotForm, pivotRenderer);
     }
     provider() {
-        return Provider;
+        const options = this.options;
+        return ({ children }) => _jsx(Provider, { options: options, children: children });
     }
     setup() {
         return useSetup;

package/plugins/clue/setup.js

@@ -1,6 +1,6 @@
-import { useAppUser } from '@tui/core';
 import { SNACKBAR_EVENT_ID } from '@cccsaurora/clue-ui/data/event';
 import useClue from '@cccsaurora/clue-ui/hooks/useClue';
+import { useAppUser } from '@tui/core';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import { useContext, useEffect } from 'react';
@@ -9,7 +9,7 @@ const useSetup = () => {
     const appUser = useAppUser();
     const { config } = useContext(ApiConfigContext);
     const { showSuccessMessage, showErrorMessage, showInfoMessage, showWarningMessage } = useMySnackbar();
-    const features = config.configuration?.features ?? {};
+    const features = config?.configuration?.features ?? {};
     useEffect(() => {
         // eslint-disable-next-line no-console
         console.debug('Initializing clue snackbar event handler');
@@ -37,7 +37,7 @@ const useSetup = () => {
         if (!appUser.isReady()) {
             return;
         }
-        if (features.borealis || features.clue) {
+        if (features.clue) {
             clue.setReady(true);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/plugins/clue/setup.test.d.ts

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

package/plugins/clue/setup.test.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const mocks = vi.hoisted(() => ({
+    appUserReady: true,
+    setReady: vi.fn(),
+    snackbars: {
+        showErrorMessage: vi.fn(),
+        showInfoMessage: vi.fn(),
+        showSuccessMessage: vi.fn(),
+        showWarningMessage: vi.fn()
+    }
+}));
+vi.mock('@tui/core', () => ({
+    useAppUser: () => ({ isReady: () => mocks.appUserReady })
+}));
+vi.mock('@cccsaurora/clue-ui/data/event', () => ({
+    SNACKBAR_EVENT_ID: 'clue.snackbar'
+}));
+vi.mock('@cccsaurora/clue-ui/hooks/useClue', () => ({
+    default: () => ({ setReady: mocks.setReady })
+}));
+vi.mock('components/app/providers/ApiConfigProvider', async () => {
+    const { createContext } = await import('react');
+    return { ApiConfigContext: createContext({ config: {} }) };
+});
+vi.mock('components/hooks/useMySnackbar', () => ({
+    default: () => mocks.snackbars
+}));
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import useSetup from './setup';
+const setupWrapper = (config) => ({ children }) => (_jsx(ApiConfigContext.Provider, { value: { config: config, setConfig: vi.fn(), loaded: true }, children: children }));
+describe('Clue setup', () => {
+    beforeEach(() => {
+        mocks.appUserReady = true;
+        mocks.setReady.mockReset();
+        Object.values(mocks.snackbars).forEach(snackbar => snackbar.mockReset());
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+    it('routes snackbar events and removes the event listener on cleanup', () => {
+        const { unmount } = renderHook(() => useSetup(), {
+            wrapper: setupWrapper({ configuration: { features: { clue: true } } })
+        });
+        window.dispatchEvent(new CustomEvent('clue.snackbar', { detail: { level: 'success', message: 'done' } }));
+        expect(mocks.snackbars.showSuccessMessage).toHaveBeenCalledWith('done', undefined, undefined);
+        expect(mocks.setReady).toHaveBeenCalledWith(true);
+        unmount();
+        window.dispatchEvent(new CustomEvent('clue.snackbar', { detail: { level: 'error', message: 'ignored' } }));
+        expect(mocks.snackbars.showErrorMessage).not.toHaveBeenCalled();
+    });
+    it('does not enable readiness for Borealis alone or before the app user is ready', () => {
+        renderHook(() => useSetup(), {
+            wrapper: setupWrapper({ configuration: { features: { borealis: true } } })
+        });
+        expect(mocks.setReady).not.toHaveBeenCalled();
+        mocks.appUserReady = false;
+        renderHook(() => useSetup(), {
+            wrapper: setupWrapper({ configuration: { features: { clue: true } } })
+        });
+        expect(mocks.setReady).not.toHaveBeenCalled();
+    });
+});