Merge pull request #328 from nulib/4706-ai-shared-link-bug

Prompt user login when ai chat query param is in the url

components/Search/GenerativeAIToggle.test.tsx

@@ -84,34 +84,29 @@ describe("GenerativeAIToggle", () => {
  )
  );
 
- const checkbox = screen.getByRole("checkbox");
+ const checkbox = await screen.findByRole("checkbox");
  await user.click(checkbox);
 
- const generativeAIDialog = screen.queryByText(
+ const generativeAIDialog = await screen.findByText(
  "You must be logged in with a Northwestern NetID to use the Generative AI search feature."
  );
- const cancelButton = screen.getByText("Cancel");
 
  expect(generativeAIDialog).toBeInTheDocument();
- expect(screen.getByText("Login")).toBeInTheDocument();
- expect(cancelButton).toBeInTheDocument();
-
- await user.click(cancelButton);
-
- expect(generativeAIDialog).not.toBeInTheDocument();
  });
 
- it("renders a toggled generative ai state when a query param is set", () => {
+ it("renders a toggled generative ai state when a query param is set and user is logged in", () => {
  const activeSearchState = {
  ...defaultSearchState,
  isGenerativeAI: true,
  };
 
  mockRouter.setCurrentUrl("/search?ai=true");
  render(
- withSearchProvider(
- <GenerativeAIToggle isSearchActive={true} />,
- activeSearchState
+ withUserProvider(
+ withSearchProvider(
+ <GenerativeAIToggle isSearchActive={true} />,
+ activeSearchState
+ )
  )
  );
 
@@ -123,6 +118,7 @@ describe("GenerativeAIToggle", () => {
  const user = userEvent.setup();
 
  mockRouter.setCurrentUrl("/");
+
  render(
  withUserProvider(
  withSearchProvider(

hooks/useGenerativeAISearchToggle.ts

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { DCAPI_ENDPOINT } from "@/lib/constants/endpoints";
 import { UserContext } from "@/context/user-context";
@@ -13,14 +13,23 @@ const aiQueryParam = "ai";
 
 export default function useGenerativeAISearchToggle() {
  const router = useRouter();
- const isChecked = router.query[aiQueryParam] === "true";
+ const [dialog, setDialog] = useState(defaultModalState);
 
  const { user } = React.useContext(UserContext);
 
- const [dialog, setDialog] = useState(defaultModalState);
+ const isAiQueryParam = router.query[aiQueryParam] === "true";
+ const isChecked = isAiQueryParam && user?.isLoggedIn;
 
  const loginUrl = `${DCAPI_ENDPOINT}/auth/login?goto=${goToLocation()}`;
 
+ // If the "ai" query param is present and the user is not logged in on
+ // initial load, show the dialog
+ useEffect(() => {
+ if (isAiQueryParam && !user?.isLoggedIn) {
+ setDialog((prevDialog) => ({ ...prevDialog, isOpen: true }));
+ }
+ }, [isAiQueryParam, user?.isLoggedIn]);
+
  function goToLocation() {
  const currentUrl = `${window.location.origin}${router.asPath}`;
  const url = new URL(currentUrl);