LB-1555: Fresh Releases Page fixes

frontend/css/sidebar.less

@@ -8,7 +8,7 @@
   flex: 0 0 250px;
   max-height: 100vh;
   overflow-y: auto;
-  z-index: 9997;
+  z-index: 109;
   right: 0;
   background: #f3f3f3;
 
@@ -30,6 +30,7 @@
     transition: right 0.3s ease-in-out;
     &.open {
       right: 0;
+      z-index: 112;
     }
   }
 
@@ -86,7 +87,7 @@
 
 .toggle-sidebar-button {
   position: fixed;
-  bottom: 20px;
+  bottom: 20px + @brainzplayer-height;
   right: 20px;
   z-index: 9999;
   width: 64px;

frontend/js/src/components/Pill.tsx

@@ -10,7 +10,14 @@ type PillProps = {
 };
 
 export default function Pill(props: React.PropsWithChildren<PillProps>) {
-  const { active, children, type, style: propStyle, ...buttonProps } = props;
+  const {
+    active,
+    children,
+    type,
+    style: propStyle,
+    className: propClassName = "",
+    ...buttonProps
+  } = props;
 
   return (
     <button
@@ -19,7 +26,7 @@ export default function Pill(props: React.PropsWithChildren<PillProps>) {
       {...buttonProps}
       className={`pill ${type === "secondary" ? "secondary" : ""} ${
         active ? "active" : ""
-      }`}
+      } ${propClassName}`}
     >
       {children}
     </button>

frontend/js/src/explore/fresh-releases/FreshReleases.tsx

@@ -4,6 +4,7 @@ import Spinner from "react-loader-spinner";
 import { toast } from "react-toastify";
 import { Helmet } from "react-helmet";
 import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
 import GlobalAppContext from "../../utils/GlobalAppContext";
 import { ToastMsg } from "../../notifications/Notifications";
 import ReleaseFilters from "./components/ReleaseFilters";
@@ -104,6 +105,7 @@ type FreshReleasesData = {
 
 export default function FreshReleases() {
   const { APIService, currentUser } = React.useContext(GlobalAppContext);
+  const navigate = useNavigate();
 
   const isLoggedIn: boolean = Object.keys(currentUser).length !== 0;
 
@@ -278,6 +280,18 @@ export default function FreshReleases() {
     message = `0/${releases.length} releases match your filters.`;
   }
 
+  const handleLoginRedirect = () => {
+    toast.error(
+      <ToastMsg
+        title="You must be logged in to view personalized releases"
+        message="Please log in to view personalized releases"
+      />,
+      { toastId: "login-error" }
+    );
+
+    navigate("/login");
+  };
+
   return (
     <>
       <Helmet>
@@ -301,10 +315,16 @@ export default function FreshReleases() {
               </Pill>
               <Pill
                 id="user-releases"
-                onClick={() => setPageType(PAGE_TYPE_USER)}
+                onClick={() => {
+                  if (isLoggedIn) {
+                    setPageType(PAGE_TYPE_USER);
+                  } else {
+                    handleLoginRedirect();
+                  }
+                }}
                 active={pageType === PAGE_TYPE_USER}
                 type="secondary"
-                disabled={!isLoggedIn}
+                className={isLoggedIn ? "" : "disabled"}
               >
                 For You
               </Pill>

frontend/js/tests/components/Pill.test.tsx

@@ -6,16 +6,22 @@ import Pill from "../../src/components/Pill";
 describe("Pill", () => {
   it("renders correctly for primary active", () => {
     const wrapper = mount(<Pill active type="primary" />);
-    expect(wrapper.getDOMNode()).toContainHTML('<button type="button" class="pill  active"></button>');
+    expect(wrapper.getDOMNode()).toContainHTML(
+      '<button type="button" class="pill  active "></button>'
+    );
   });
-  
+
   it("renders correctly for secondary active", () => {
     const wrapper = mount(<Pill active type="secondary" />);
-    expect(wrapper.getDOMNode()).toContainHTML('<button type="button" class="pill secondary active"></button>');
+    expect(wrapper.getDOMNode()).toContainHTML(
+      '<button type="button" class="pill secondary active "></button>'
+    );
   });
-  
+
   it("renders correctly for inactive", () => {
     const wrapper = mount(<Pill />);
-    expect(wrapper.getDOMNode()).toContainHTML('<button type="button" class="pill  "></button>');
+    expect(wrapper.getDOMNode()).toContainHTML(
+      '<button type="button" class="pill   "></button>'
+    );
   });
 });

frontend/js/tests/explore/fresh-releases/FreshReleases.test.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
-import { BrowserRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, screen, waitFor } from "@testing-library/react";
+import { screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import APIService from "../../../src/utils/APIService";
@@ -13,9 +12,8 @@ import * as sitewideFilters from "../../__mocks__/freshReleasesSitewideFilters.j
 import * as userDisplayFilters from "../../__mocks__/freshReleasesDisplaySettings.json";
 import RecordingFeedbackManager from "../../../src/utils/RecordingFeedbackManager";
 
-import GlobalAppContext, {
-  GlobalAppContextT,
-} from "../../../src/utils/GlobalAppContext";
+import type { GlobalAppContextT } from "../../../src/utils/GlobalAppContext";
+import { renderWithProviders } from "../../test-utils/rtl-test-utils";
 
 const freshReleasesProps = {
   user: {
@@ -86,12 +84,11 @@ describe("FreshReleases", () => {
     });
     mountOptions.context.APIService.fetchUserFreshReleases = mockFetchUserFreshReleases;
 
-    render(
-      <GlobalAppContext.Provider value={{ ...mountOptions.context }}>
-        <QueryClientProvider client={queryClient}>
-          <FreshReleases />
-        </QueryClientProvider>
-      </GlobalAppContext.Provider>
+    renderWithProviders(
+      <QueryClientProvider client={queryClient}>
+        <FreshReleases />
+      </QueryClientProvider>,
+      mountOptions.context
     );
 
     await waitFor(() => {
@@ -117,14 +114,11 @@ describe("FreshReleases", () => {
     });
     mountOptions.context.APIService.fetchUserFreshReleases = mockFetchUserFreshReleases;
 
-    render(
-      <GlobalAppContext.Provider value={{ ...mountOptions.context }}>
-        <BrowserRouter>
-          <QueryClientProvider client={queryClient}>
-            <FreshReleases />
-          </QueryClientProvider>
-        </BrowserRouter>
-      </GlobalAppContext.Provider>
+    renderWithProviders(
+      <QueryClientProvider client={queryClient}>
+        <FreshReleases />
+      </QueryClientProvider>,
+      mountOptions.context
     );
 
     await waitFor(() => {
@@ -151,7 +145,7 @@ describe("FreshReleases", () => {
     const setShowFutureReleases = jest.fn();
     const releaseCardGridRef: React.RefObject<HTMLDivElement> = React.createRef();
 
-    render(
+    renderWithProviders(
       <ReleaseFilters
         releaseTags={sitewideFilters.releaseTags}
         releaseTypes={sitewideFilters.releaseTypes}