Add LanguageSelector to pages that do not render the Header component (PP-5158)

src/components/ItemLandingPage.tsx

@@ -4,6 +4,7 @@ import { Themed } from "@theme-ui/mdx";
 import WorkLibrarySelector from "components/WorkLibrarySelector";
 import theme from "theme/theme";
 import { useTranslation } from "next-i18next/pages";
+import MultiLibraryLandingPageHeader from "./layouts/MultiLibraryLandingPageHeader";
 
 interface ItemLandingPageProps {
   workId: string;
@@ -21,7 +22,9 @@ const ItemLandingPage: React.FC<ItemLandingPageProps> = ({ workId }) => {
           m: 3
         }}
       >
-        <h1>{t("itemLandingPage.findLibrary", "Find a Library")}</h1>
+        <MultiLibraryLandingPageHeader
+          heading={t("itemLandingPage.findLibrary", "Find a Library")}
+        />
         <WorkLibrarySelector workId={workId} />
       </Themed.root>
     </ThemeUIProvider>

src/components/LibraryFilterList.tsx

@@ -76,7 +76,7 @@ const LibraryFilterList: React.FC<LibraryFilterListProps> = ({
   return (
     <>
       {heading}
-      <div sx={{ display: "inline-block", width: "44ch", mb: 2 }}>
+      <div sx={{ width: ["auto", "44ch"], mb: 2 }}>
         <TextInput
           type="search"
           aria-label={t(

src/components/MultiLibraryHome.tsx

@@ -10,6 +10,7 @@ import LibraryFilterList from "components/LibraryFilterList";
 import { fetchLibraries } from "dataflow/fetchLibraries";
 import type { ClientLibrary, LibrariesResponse } from "pages/api/libraries";
 import { useTranslation } from "next-i18next/pages";
+import MultiLibraryLandingPageHeader from "./layouts/MultiLibraryLandingPageHeader";
 
 const MultiLibraryHome: React.FC = () => {
   const { t } = useTranslation();
@@ -56,9 +57,9 @@ const MultiLibraryHome: React.FC = () => {
           m: 3
         }}
       >
-        <h1>
-          {instanceName} {t("multiLibraryHome.home", "Home")}
-        </h1>
+        <MultiLibraryLandingPageHeader
+          heading={`${instanceName} ${t("multiLibraryHome.home", "Home")}`}
+        />
         <LibraryFilterList
           heading={<h2>{t("multiLibraryHome.choose", "Choose a library:")}</h2>}
           items={sorted.map(lib => ({

src/components/OpenEbooksLanding.tsx

@@ -14,6 +14,7 @@ import { ErrorBoundary } from "components/ErrorBoundary";
 import OpenEbooksLoginPicker from "auth/OpenEbooksLoginPicker";
 import colors from "theme/colors";
 import { Trans, useTranslation } from "next-i18next/pages";
+import LanguageSelector from "./LanguageSelector";
 
 type PopularBook = { title: string; imgHref: string };
 
@@ -279,6 +280,7 @@ const OpenEbooksHero: React.FC = () => {
               </span>
             </NavButton>
           )}
+          <LanguageSelector sx={{ ml: 3 }} />
         </div>
         <div
           sx={{

src/components/__tests__/ItemLandingPage.test.tsx

@@ -8,28 +8,31 @@ jest.mock("swr");
 
 const mockedSWR = useSWR as jest.MockedFunction<typeof useSWR>;
 
-test("renders a heading and passes workId down to the library selector", () => {
-  mockedSWR.mockReturnValue(
-    makeSwrResponse<any>({
-      data: {
-        libraries: [
-          {
-            id: "urn:testlib",
-            slug: "testlib",
-            title: "Test Library",
-            authDocUrl: "https://example.com/testlib/auth"
-          }
-        ]
-      }
-    })
-  );
+describe("ItemLandingPage", () => {
+  beforeEach(() => {
+    mockedSWR.mockReturnValue(
+      makeSwrResponse<any>({
+        data: {
+          libraries: [
+            {
+              id: "urn:testlib",
+              slug: "testlib",
+              title: "Test Library",
+              authDocUrl: "https://example.com/testlib/auth"
+            }
+          ]
+        }
+      })
+    );
+  });
+  test("renders a heading and passes workId down to the library selector", () => {
+    render(<ItemLandingPage workId="work-1" />);
 
-  render(<ItemLandingPage workId="work-1" />);
-
-  expect(
-    screen.getByRole("heading", { level: 1, name: "Find a Library" })
-  ).toBeInTheDocument();
-  expect(
-    screen.getByRole("button", { name: "Test Library" })
-  ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { level: 1, name: "Find a Library" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Test Library" })
+    ).toBeInTheDocument();
+  });
 });

src/components/__tests__/OpenEbooksLanding.test.tsx

@@ -1,12 +1,38 @@
 import * as React from "react";
-import { render } from "../../test-utils";
+import { render, screen, waitFor } from "../../test-utils";
 import { OpenEbooksLandingComponent } from "components/OpenEbooksLanding";
 
 test("renders", () => {
-  const utils = render(<OpenEbooksLandingComponent />);
+  render(<OpenEbooksLandingComponent />);
   expect(
-    utils.getByRole("heading", {
+    screen.getByRole("heading", {
       name: "Welcome to Open eBooks"
     })
   ).toBeInTheDocument();
 });
+
+describe("LanguageSelector", () => {
+  it("displays when enabled in appConfig", async () => {
+    render(<OpenEbooksLandingComponent />, {
+      appConfig: { enableLanguageSelector: true }
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("combobox", { name: "Choose language" })
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("does not display when disabled in appConfig", async () => {
+    render(<OpenEbooksLandingComponent />, {
+      appConfig: { enableLanguageSelector: false }
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole("combobox", { name: "Choose language" })
+      ).not.toBeInTheDocument();
+    });
+  });
+});

src/components/__tests__/SignedOut.test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { screen, setup } from "test-utils";
+import { render, screen, setup, waitFor } from "test-utils";
 import { SignedOutContent } from "pages/[library]/signed-out";
 
 test("renders signed out page", () => {
@@ -11,3 +11,29 @@ test("renders signed out page", () => {
     screen.getByRole("button", { name: /return to catalog/i })
   ).toBeInTheDocument();
 });
+
+describe("LanguageSelector", () => {
+  it("displays when enabled in appConfig", async () => {
+    render(<SignedOutContent />, {
+      appConfig: { enableLanguageSelector: true }
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("combobox", { name: "Choose language" })
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("does not display when disabled in appConfig", async () => {
+    render(<SignedOutContent />, {
+      appConfig: { enableLanguageSelector: false }
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole("combobox", { name: "Choose language" })
+      ).not.toBeInTheDocument();
+    });
+  });
+});

src/components/layouts/MultiLibraryLandingPageHeader.test.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable i18next/no-literal-string */
+import { render, screen, waitFor } from "test-utils";
+import MultiLibraryLandingPageHeader from "./MultiLibraryLandingPageHeader";
+
+describe("LanguageSelector", () => {
+  it("displays when enabled in appConfig", async () => {
+    render(<MultiLibraryLandingPageHeader heading="My Library" />, {
+      appConfig: { enableLanguageSelector: true }
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("combobox", { name: "Choose language" })
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("does not display when disabled in appConfig", async () => {
+    render(<MultiLibraryLandingPageHeader heading="My Library" />, {
+      appConfig: { enableLanguageSelector: false }
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole("combobox", { name: "Choose language" })
+      ).not.toBeInTheDocument();
+    });
+  });
+});

src/components/layouts/MultiLibraryLandingPageHeader.tsx

@@ -0,0 +1,31 @@
+import LanguageSelector from "components/LanguageSelector";
+import * as React from "react";
+
+interface MultiLibraryLandingPageHeaderProps {
+  heading: string;
+}
+
+const MultiLibraryLandingPageHeader: React.FC<
+  MultiLibraryLandingPageHeaderProps
+> = ({ heading }) => {
+  return (
+    <div
+      sx={{
+        display: "flex",
+        flexDirection: ["column", "row"],
+        justifyContent: "space-between"
+      }}
+    >
+      <h1 sx={{ order: [2, 1] }}>{heading}</h1>
+      <LanguageSelector
+        sx={{
+          order: [1, 2],
+          width: "fit-content",
+          alignSelf: ["end", "unset"]
+        }}
+      />
+    </div>
+  );
+};
+
+export default MultiLibraryLandingPageHeader;

src/pages/[library]/signed-out.tsx

@@ -9,6 +9,7 @@ import useUser from "components/context/UserContext";
 import { useRouter } from "next/router";
 import useLinkUtils from "hooks/useLinkUtils";
 import { useTranslation } from "next-i18next/pages";
+import LanguageSelector from "components/LanguageSelector";
 
 /**
  * This page is shown after SAML/Clever sign-out to warn users about
@@ -46,7 +47,7 @@ export const SignedOutContent: React.FC = () => {
       <Head>
         <title>{t("signedOut.signedOut", "Signed Out")}</title>
       </Head>
-
+      <LanguageSelector sx={{ alignSelf: "end" }} />
       <div
         sx={{
           maxWidth: 600,