@thepalaceproject/circulation-admin 1.31.0 → 1.32.0-post.3

package/package.json

@@ -151,5 +151,5 @@
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write",
     "*.{js,css,md}": "prettier --write"
   },
-  "version": "1.31.0"
+  "version": "1.32.0-post.3"
 }

package/tests/jest/businessRules/roleBasedAccess.test.ts

@@ -1,6 +1,5 @@
 import { renderHook } from "@testing-library/react-hooks";
 import { componentWithProviders } from "../testUtils/withProviders";
-import { ContextProviderProps } from "../../../src/components/ContextProvider";
 import { ConfigurationSettings, FeatureFlags } from "../../../src/interfaces";
 import {
   useMayRequestInventoryReports,
@@ -12,13 +11,13 @@ const setupWrapper = ({
   roles,
   featureFlags,
 }: Partial<ConfigurationSettings>) => {
-  const contextProviderProps: ContextProviderProps = {
+  const appConfigSettings: Partial<ConfigurationSettings> = {
     featureFlags,
     roles,
     email: "email",
     csrfToken: "token",
   };
-  return componentWithProviders({ contextProviderProps });
+  return componentWithProviders({ appConfigSettings });
 };
 
 describe("Business rules for role-based access", () => {

package/tests/jest/components/CirculationEventsDownload.test.tsx

@@ -3,8 +3,7 @@ import { screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
 import CirculationEventsDownload from "../../../src/components/CirculationEventsDownload";
-import { ContextProviderProps } from "../../../src/components/ContextProvider";
-import { FeatureFlags } from "../../../src/interfaces";
+import { ConfigurationSettings, FeatureFlags } from "../../../src/interfaces";
 import { defaultFeatureFlags } from "../../../src/utils/featureFlags";
 import { renderWithProviders } from "../testUtils/withProviders";
 
@@ -14,13 +13,13 @@ describe("CirculationEventsDownload", () => {
       ...defaultFeatureFlags,
       showCircEventsDownload: false,
     };
-    const contextProviderProps: Partial<ContextProviderProps> = {
+    const appConfigSettings: Partial<ConfigurationSettings> = {
       featureFlags,
     };
     const { container } = renderWithProviders(
       <CirculationEventsDownload library="testlib" />,
       {
-        contextProviderProps,
+        appConfigSettings,
       }
     );
     expect(container).toBeEmptyDOMElement();
@@ -32,13 +31,13 @@ describe("CirculationEventsDownload", () => {
       showCircEventsDownload: true,
     };
     const libraryProp = "testlib";
-    const contextProviderProps: Partial<ContextProviderProps> = {
+    const appConfigSettings: Partial<ConfigurationSettings> = {
       featureFlags,
     };
 
     beforeEach(() => {
       renderWithProviders(<CirculationEventsDownload library={libraryProp} />, {
-        contextProviderProps,
+        appConfigSettings,
       });
     });
 

package/tests/jest/components/CustomLists.test.tsx

@@ -6,6 +6,7 @@ import { http, HttpResponse } from "msw";
 import CustomLists from "../../../src/components/CustomLists";
 import renderWithContext from "../testUtils/renderWithContext";
 import buildStore from "../../../src/store";
+import { ConfigurationSettings } from "../../../src/interfaces";
 
 describe("CustomLists", () => {
   // Stub scrollTo, since a component in the render tree will try to call it, and it is not
@@ -29,7 +30,7 @@ describe("CustomLists", () => {
   it("adds filters when new filter values are entered", async () => {
     const user = userEvent.setup();
 
-    const contextProviderProps = {
+    const appConfigSettings: Partial<ConfigurationSettings> = {
       csrfToken: "",
       featureFlags: {},
       roles: [{ role: "system" }],
@@ -42,7 +43,7 @@ describe("CustomLists", () => {
         library="testlib"
         store={buildStore()}
       />,
-      contextProviderProps
+      appConfigSettings
     );
 
     await user.click(screen.getByRole("textbox", { name: "filter value" }));
@@ -69,7 +70,7 @@ describe("CustomLists", () => {
   it("replaces the existing filters when adding a new filter when the clear filters checkbox is checked", async () => {
     const user = userEvent.setup();
 
-    const contextProviderProps = {
+    const appConfigSettings: Partial<ConfigurationSettings> = {
       csrfToken: "",
       featureFlags: {},
       roles: [{ role: "system" }],
@@ -82,7 +83,7 @@ describe("CustomLists", () => {
         library="testlib"
         store={buildStore()}
       />,
-      contextProviderProps
+      appConfigSettings
     );
 
     await user.click(screen.getByRole("textbox", { name: "filter value" }));
@@ -121,7 +122,7 @@ describe("CustomLists", () => {
 
     const user = userEvent.setup();
 
-    const contextProviderProps = {
+    const appConfigSettings: Partial<ConfigurationSettings> = {
       csrfToken: "",
       featureFlags: {},
       roles: [{ role: "system" }],
@@ -134,7 +135,7 @@ describe("CustomLists", () => {
         library="testlib"
         store={buildStore()}
       />,
-      contextProviderProps
+      appConfigSettings
     );
 
     await user.click(screen.getByRole("textbox", { name: "filter value" }));
@@ -165,7 +166,7 @@ describe("CustomLists", () => {
 
     const user = userEvent.setup();
 
-    const contextProviderProps = {
+    const appConfigSettings: Partial<ConfigurationSettings> = {
       csrfToken: "",
       featureFlags: {},
       roles: [{ role: "system" }],
@@ -178,7 +179,7 @@ describe("CustomLists", () => {
         library="testlib"
         store={buildStore()}
       />,
-      contextProviderProps
+      appConfigSettings
     );
 
     await userEvent.selectOptions(

package/tests/jest/components/IndividualAdminEditForm.test.tsx

@@ -3,12 +3,13 @@ import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import IndividualAdminEditForm from "../../../src/components/IndividualAdminEditForm";
 import renderWithContext from "../testUtils/renderWithContext";
+import { ConfigurationSettings } from "../../../src/interfaces";
 
 describe("IndividualAdminEditForm", () => {
   it("clears the role checkboxes after save", async () => {
     const user = userEvent.setup();
 
-    const contextProviderProps = {
+    const appConfigSettings: Partial<ConfigurationSettings> = {
       csrfToken: "",
       featureFlags: {},
       roles: [
@@ -45,7 +46,7 @@ describe("IndividualAdminEditForm", () => {
 
     const { rerender } = renderWithContext(
       <IndividualAdminEditForm {...props} />,
-      contextProviderProps
+      appConfigSettings
     );
 
     const systemAdminCheckbox = screen.getByRole("checkbox", {

package/tests/jest/components/InventoryReportRequestModal.test.tsx

@@ -359,7 +359,7 @@ describe("InventoryReportRequestModal", () => {
           onHide={onHide}
           library={LIBRARY}
         />,
-        { queryClient, contextProviderProps: EMAIL_CONTEXT_PROVIDER_PROPS }
+        { queryClient, appConfigSettings: EMAIL_CONTEXT_PROVIDER_PROPS }
       );
       let modalBody = getByRole("document").querySelector(".modal-body");
       expect(modalBody).toHaveTextContent(
@@ -373,7 +373,7 @@ describe("InventoryReportRequestModal", () => {
           onHide={onHide}
           library={LIBRARY}
         />,
-        { queryClient, contextProviderProps: NO_EMAIL_CONTEXT_PROVIDER_PROPS }
+        { queryClient, appConfigSettings: NO_EMAIL_CONTEXT_PROVIDER_PROPS }
       ));
       modalBody = getByRole("document").querySelector(".modal-body");
       expect(modalBody).toHaveTextContent(

package/tests/jest/components/Stats.test.tsx

@@ -6,8 +6,6 @@ import {
   componentWithProviders,
   renderWithProviders,
 } from "../testUtils/withProviders";
-import { ContextProviderProps } from "../../../src/components/ContextProvider";
-
 import {
   statisticsApiResponseData,
   testLibraryKey as sampleLibraryKey,
@@ -23,6 +21,11 @@ import { renderHook } from "@testing-library/react-hooks";
 import { FetchErrorData } from "@thepalaceproject/web-opds-client/lib/interfaces";
 import { store } from "../../../src/store";
 import { api } from "../../../src/features/api/apiSlice";
+import {
+  AdminRoleData,
+  ConfigurationSettings,
+  RolesData,
+} from "../../../src/interfaces";
 
 const normalizedData = normalizeStatistics(statisticsApiResponseData);
 
@@ -292,9 +295,9 @@ describe("Dashboard Statistics", () => {
     });
 
     describe("shows the correct UI with/out sysadmin role", () => {
-      const systemAdmin = [{ role: "system" }];
-      const managerAll = [{ role: "manager-all" }];
-      const librarianAll = [{ role: "librarian-all" }];
+      const systemAdmin: AdminRoleData[] = [{ role: "system" }];
+      const managerAll: AdminRoleData[] = [{ role: "manager-all" }];
+      const librarianAll: AdminRoleData[] = [{ role: "librarian-all" }];
 
       const collectionNames = [
         "New BiblioBoard Test",
@@ -305,13 +308,13 @@ describe("Dashboard Statistics", () => {
       ];
 
       it("tests BarChart component", () => {
-        const contextProviderProps: Partial<ContextProviderProps> = {
+        const appConfigSettings: Partial<ConfigurationSettings> = {
           roles: systemAdmin,
           dashboardCollectionsBarChart: { width: 800 },
         };
         const { container, getByRole } = renderWithProviders(
           <Stats library={sampleLibraryKey} />,
-          { contextProviderProps }
+          { appConfigSettings }
         );
 
         const collectionsHeading = getByRole("heading", {
@@ -335,14 +338,11 @@ describe("Dashboard Statistics", () => {
 
       it("shows collection bar chart for sysadmins, but list for others", () => {
         // We'll use this function to test multiple scenarios.
-        const testFor = (
-          expectBarChart: boolean,
-          roles: { role: string; library?: string }[]
-        ) => {
-          const contextProviderProps: Partial<ContextProviderProps> = { roles };
+        const testFor = (expectBarChart: boolean, roles: AdminRoleData[]) => {
+          const appConfigSettings: Partial<ConfigurationSettings> = { roles };
           const { container, getByRole } = renderWithProviders(
             <Stats library={sampleLibraryKey} />,
-            { contextProviderProps }
+            { appConfigSettings }
           );
 
           const collectionsHeading = getByRole("heading", {
@@ -380,11 +380,8 @@ describe("Dashboard Statistics", () => {
         const fakeQuickSightHref = "https://example.com/fakeQS";
 
         // We'll use this function to test multiple scenarios.
-        const renderFor = (
-          onlySysadmins: boolean,
-          roles: { role: string; library?: string }[]
-        ) => {
-          const contextProviderProps: Partial<ContextProviderProps> = {
+        const renderFor = (onlySysadmins: boolean, roles: AdminRoleData[]) => {
+          const appConfigSettings: Partial<ConfigurationSettings> = {
             featureFlags: { reportsOnlyForSysadmins: onlySysadmins },
             roles,
             quicksightPagePath: fakeQuickSightHref,
@@ -395,7 +392,7 @@ describe("Dashboard Statistics", () => {
             queryByRole,
             queryByText,
           } = renderWithProviders(<Stats library={sampleLibraryKey} />, {
-            contextProviderProps,
+            appConfigSettings,
           });
 
           // We should always render a Usage reports group when a library is specified.
@@ -439,11 +436,8 @@ describe("Dashboard Statistics", () => {
         const fakeQuickSightHref = "https://example.com/fakeQS";
 
         // We'll use this function to test multiple scenarios.
-        const renderFor = (
-          onlySysadmins: boolean,
-          roles: { role: string; library?: string }[]
-        ) => {
-          const contextProviderProps: Partial<ContextProviderProps> = {
+        const renderFor = (onlySysadmins: boolean, roles: AdminRoleData[]) => {
+          const appConfigSettings: Partial<ConfigurationSettings> = {
             featureFlags: { quicksightOnlyForSysadmins: onlySysadmins },
             roles,
             quicksightPagePath: fakeQuickSightHref,
@@ -454,7 +448,7 @@ describe("Dashboard Statistics", () => {
             queryByRole,
             queryByText,
           } = renderWithProviders(<Stats library={sampleLibraryKey} />, {
-            contextProviderProps,
+            appConfigSettings,
           });
 
           // We should always render a Usage reports group when a library is specified.

package/tests/jest/context/AppContext.test.tsx

@@ -6,11 +6,15 @@ import {
   useAppFeatureFlags,
   useCsrfToken,
   useTermsOfService,
-  useSupportContactUrl,
+  useSupportContact,
+  SupportContactLink,
 } from "../../../src/context/appContext";
 import { componentWithProviders } from "../testUtils/withProviders";
-import { ContextProviderProps } from "../../../src/components/ContextProvider";
-import { FeatureFlags } from "../../../src/interfaces";
+import {
+  AdminRoleData,
+  ConfigurationSettings,
+  FeatureFlags,
+} from "../../../src/interfaces";
 
 // TODO: These tests may need to be adjusted in the future.
 //  Currently, an AppContext.Provider is injected into the component tree
@@ -26,23 +30,28 @@ describe("AppContext", () => {
     testTrue: true,
     testFalse: false,
   };
-  const expectedRoles = [{ role: "system" }];
+  const expectedRoles: AdminRoleData[] = [{ role: "system" }];
   const expectedTermsOfService = {
     text: "Terms of Service",
     href: "/terms-of-service",
   };
-  const expectedSupportContactUrl = "helpdesk@example.com";
+  const emailAddress = "helpdesk@example.com";
+  const expectedSupportContact: SupportContactLink = {
+    href: `mailto:${emailAddress}?subject=Support+request`,
+    text: `Email ${emailAddress}.`,
+  };
 
-  const contextProviderProps: ContextProviderProps = {
+  const appConfigSettings: Partial<ConfigurationSettings> = {
     csrfToken: expectedCsrfToken,
     featureFlags: expectedFeatureFlags,
     roles: expectedRoles,
     email: expectedEmail,
     tos_link_text: expectedTermsOfService.text,
     tos_link_href: expectedTermsOfService.href,
-    support_contact_url: expectedSupportContactUrl,
+    support_contact_url: "deprecated and should be overridden",
+    supportContactUrl: expectedSupportContact.href,
   };
-  const wrapper = componentWithProviders({ contextProviderProps });
+  const wrapper = componentWithProviders({ appConfigSettings });
 
   it("provides useAppContext context hook", () => {
     const { result } = renderHook(() => useAppContext(), { wrapper });
@@ -51,7 +60,7 @@ describe("AppContext", () => {
     expect(value.admin.email).toEqual(expectedEmail);
     expect(value.admin.roles).toEqual(expectedRoles);
     expect(value.featureFlags).toEqual(expectedFeatureFlags);
-    expect(value.support_contact_url).toEqual(expectedSupportContactUrl);
+    expect(value.supportContact).toEqual(expectedSupportContact);
   });
 
   it("provides useAppAdmin context hook", () => {
@@ -91,11 +100,14 @@ describe("AppContext", () => {
     expect(text).toEqual(expectedTermsOfService.text);
     expect(href).toEqual(expectedTermsOfService.href);
   });
-  it("provides useSupportContactUrl context hook", () => {
-    const { result } = renderHook(() => useSupportContactUrl(), {
+  it("provides useSupportContact context hook", () => {
+    const { result } = renderHook(() => useSupportContact(), {
       wrapper,
     });
-    const supportContactUrl = result.current;
-    expect(supportContactUrl).toEqual(expectedSupportContactUrl);
+    const supportContact = result.current;
+    expect(supportContact).toBeDefined();
+    const { href, text } = supportContact;
+    expect(href).toEqual(expectedSupportContact.href);
+    expect(text).toEqual(expectedSupportContact.text);
   });
 });

package/tests/jest/testUtils/renderWithContext.tsx

@@ -3,21 +3,23 @@ import { render, RenderOptions, RenderResult } from "@testing-library/react";
 import ContextProvider, {
   ContextProviderProps,
 } from "../../../src/components/ContextProvider";
+import { ConfigurationSettings } from "../../../src/interfaces";
 
 /**
  * Renders a given React element, wrapped in a ContextProvider. The resulting rerender function is
  * also wrapped, so that rerenders will have the identical context.
  *
  * @param ui                   The element to render
- * @param contextProviderProps Props to pass to the ContextProvider wrapper
+ * @param config Props to pass to the ContextProvider wrapper
  * @param renderOptions        Options to pass through to the RTL render function
  * @returns
  */
 export default function renderWithContext(
   ui: React.ReactElement,
-  contextProviderProps: ContextProviderProps,
+  config: Partial<ConfigurationSettings>,
   renderOptions?: Omit<RenderOptions, "queries">
 ): RenderResult {
+  const contextProviderProps = { config } as ContextProviderProps;
   const renderResult = render(
     <ContextProvider {...contextProviderProps}>{ui}</ContextProvider>,
     renderOptions

package/tests/jest/testUtils/withProviders.tsx

@@ -7,10 +7,11 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { render, RenderOptions, RenderResult } from "@testing-library/react";
 import { defaultFeatureFlags } from "../../../src/utils/featureFlags";
 import { store } from "../../../src/store";
+import { ConfigurationSettings } from "../../../src/interfaces";
 
 export type TestProviderWrapperOptions = {
   reduxProviderProps?: ProviderProps;
-  contextProviderProps?: Partial<ContextProviderProps>;
+  appConfigSettings?: Partial<ConfigurationSettings>;
   queryClient?: QueryClient;
 };
 export type TestRenderWrapperOptions = TestProviderWrapperOptions & {
@@ -21,9 +22,9 @@ export type TestRenderWrapperOptions = TestProviderWrapperOptions & {
 // be the same for both the Redux Provider and the ContextProvider.
 const defaultReduxStore = store;
 
-// The `csrfToken` context provider prop is required, so we provide
-// a default value here, so it can be easily merged with other props.
-const requiredContextProviderProps: ContextProviderProps = {
+// Some config settings from the server are required, so we provide
+// default values here, so they can be easily merged with other props.
+const requiredAppConfigSettings: Partial<ConfigurationSettings> = {
   csrfToken: "",
   featureFlags: defaultFeatureFlags,
 };
@@ -34,7 +35,7 @@ const requiredContextProviderProps: ContextProviderProps = {
  *
  * @param {TestProviderWrapperOptions} options
  * @param options.reduxProviderProps Props to pass to the Redux `Provider` wrapper
- * @param {ContextProviderProps} options.contextProviderProps Props to pass to the ContextProvider wrapper
+ * @param {ConfigurationSettings} options.appConfigSettings
  * @param {QueryClient} options.queryClient A `tanstack/react-query` QueryClient
  * @returns {React.FunctionComponent} A React component that wraps children with our providers
  */
@@ -42,17 +43,14 @@ export const componentWithProviders = ({
   reduxProviderProps = {
     store: defaultReduxStore,
   },
-  contextProviderProps = {
-    csrfToken: "",
-    featureFlags: defaultFeatureFlags,
-  },
+  appConfigSettings = {},
   queryClient = new QueryClient(),
 }: TestProviderWrapperOptions = {}): React.FunctionComponent => {
+  const config = { ...requiredAppConfigSettings, ...appConfigSettings };
   const effectiveContextProviderProps = {
-    ...requiredContextProviderProps,
-    ...contextProviderProps,
+    config: config as ConfigurationSettings,
     ...reduxProviderProps.store, // Context and Redux Provider stores must match.
-  };
+  } as ContextProviderProps;
   const wrapper = ({ children }) => (
     <Provider {...reduxProviderProps}>
       <ContextProvider {...effectiveContextProviderProps}>