From a8cfd376ffeffdd14835683a6536cc6d3d600297 Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Mon, 16 Sep 2024 15:53:19 -0400 Subject: [PATCH 1/3] move SignupPopover to ol-components, update imports and tests, add to learning resource drawer user list button --- .../LearningResourceDrawer.test.tsx | 30 ++++---------- .../LearningResourceDrawer.tsx | 6 +++ .../ResourceCard/ResourceCard.tsx | 24 +++++++++-- .../SearchSubscriptionToggle.tsx | 15 +++++-- .../SignupPopover/SignupPopover.test.tsx | 23 ----------- .../InfoSection.test.tsx | 33 +++++++++++---- .../LearningResourceExpanded/InfoSection.tsx | 40 ++++++++++++------- .../LearningResourceExpanded.tsx | 3 ++ .../SignupPopover/SignupPopover.test.tsx | 26 ++++++++++++ .../SignupPopover/SignupPopover.tsx | 24 +++++------ frontends/ol-components/src/index.ts | 2 + 11 files changed, 139 insertions(+), 87 deletions(-) delete mode 100644 frontends/mit-learn/src/page-components/SignupPopover/SignupPopover.test.tsx create mode 100644 frontends/ol-components/src/components/SignupPopover/SignupPopover.test.tsx rename frontends/{mit-learn/src/page-components => ol-components/src/components}/SignupPopover/SignupPopover.tsx (71%) diff --git a/frontends/mit-learn/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx b/frontends/mit-learn/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx index bbfb594b2c..eec35b4112 100644 --- a/frontends/mit-learn/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx +++ b/frontends/mit-learn/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx @@ -105,19 +105,16 @@ describe("LearningResourceDrawer", () => { isLearningPathEditor: true, isAuthenticated: true, expectAddToLearningPathButton: true, - expectAddToUserListButton: true, }, { isLearningPathEditor: false, isAuthenticated: true, expectAddToLearningPathButton: false, - expectAddToUserListButton: true, }, { isLearningPathEditor: false, isAuthenticated: false, expectAddToLearningPathButton: false, - expectAddToUserListButton: false, }, ])( "Renders info section list buttons correctly", @@ -125,7 +122,6 @@ describe("LearningResourceDrawer", () => { isLearningPathEditor, isAuthenticated, expectAddToLearningPathButton, - expectAddToUserListButton, }) => { const resource = factories.learningResources.resource({ resource_type: ResourceTypeEnum.Course, @@ -159,24 +155,14 @@ describe("LearningResourceDrawer", () => { .closest("section") invariant(section) - if (!isAuthenticated) { - const buttons = within(section).queryAllByRole("button") - expect(buttons).toHaveLength(0) - return - } else { - const buttons = within(section).getAllByRole("button") - const expectedButtons = - expectAddToLearningPathButton && expectAddToUserListButton ? 2 : 1 - expect(buttons).toHaveLength(expectedButtons) - expect( - !!within(section).queryByRole("button", { - name: "Add to Learning Path", - }), - ).toBe(expectAddToLearningPathButton) - expect( - !!within(section).queryByRole("button", { name: "Add to User List" }), - ).toBe(expectAddToUserListButton) - } + const buttons = within(section).getAllByRole("button") + const expectedButtons = expectAddToLearningPathButton ? 2 : 1 + expect(buttons).toHaveLength(expectedButtons) + expect( + !!within(section).queryByRole("button", { + name: "Add to Learning Path", + }), + ).toBe(expectAddToLearningPathButton) }, ) }) diff --git a/frontends/mit-learn/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx b/frontends/mit-learn/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx index cc762d7b83..8dc5f85f96 100644 --- a/frontends/mit-learn/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx +++ b/frontends/mit-learn/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx @@ -19,6 +19,7 @@ import { AddToLearningPathDialog, AddToUserListDialog, } from "../Dialogs/AddToListDialog" +import * as urls from "@/common/urls" const RESOURCE_DRAWER_PARAMS = [RESOURCE_DRAWER_QUERY_PARAM] as const @@ -64,6 +65,7 @@ const unsafe_html2plaintext = (text: string) => { const DrawerContent: React.FC<{ resourceId: number }> = ({ resourceId }) => { + const loc = useLocation() const resource = useLearningResourcesDetail(Number(resourceId)) const { data: user } = useUserMe() const handleAddToLearningPathClick: LearningResourceCardProps["onAddToLearningPathClick"] = @@ -101,6 +103,10 @@ const DrawerContent: React.FC<{ user={user} onAddToLearningPathClick={handleAddToLearningPathClick} onAddToUserListClick={handleAddToUserListClick} + signupUrl={urls.login({ + pathname: loc.pathname, + search: loc.search, + })} /> ) diff --git a/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.tsx b/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.tsx index c439cefbf3..25f9f1c289 100644 --- a/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.tsx +++ b/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.tsx @@ -3,6 +3,7 @@ import { LearningResourceCard, LearningResourceListCard, LearningResourceListCardCondensed, + SignupPopover, } from "ol-components" import * as NiceModal from "@ebay/nice-modal-react" import type { @@ -15,8 +16,9 @@ import { } from "../Dialogs/AddToListDialog" import { useResourceDrawerHref } from "../LearningResourceDrawer/LearningResourceDrawer" import { useUserMe } from "api/hooks/user" -import { SignupPopover } from "../SignupPopover/SignupPopover" import { LearningResource } from "api" +import * as urls from "@/common/urls" +import { useLocation } from "react-router" const useResourceCard = (resource?: LearningResource | null) => { const getDrawerHref = useResourceDrawerHref() @@ -80,6 +82,7 @@ type ResourceCardProps = Omit< * - onAddToLearningPathClick opens the Add to Learning Path modal */ const ResourceCard: React.FC = ({ resource, ...others }) => { + const loc = useLocation() const { getDrawerHref, anchorEl, @@ -100,7 +103,14 @@ const ResourceCard: React.FC = ({ resource, ...others }) => { inLearningPath={inLearningPath} {...others} /> - + ) } @@ -124,6 +134,7 @@ const ResourceListCard: React.FC = ({ condensed, ...props }) => { + const loc = useLocation() const { getDrawerHref, anchorEl, @@ -148,7 +159,14 @@ const ResourceListCard: React.FC = ({ inLearningPath={inLearningPath} {...props} /> - + ) } diff --git a/frontends/mit-learn/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx b/frontends/mit-learn/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx index b80f87e884..fe9b3b119f 100644 --- a/frontends/mit-learn/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx +++ b/frontends/mit-learn/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx @@ -5,12 +5,13 @@ import { useSearchSubscriptionDelete, useSearchSubscriptionList, } from "api/hooks/searchSubscription" -import { Button, SimpleMenu, styled } from "ol-components" +import { Button, SignupPopover, SimpleMenu, styled } from "ol-components" import type { SimpleMenuItem } from "ol-components" import { RiArrowDownSLine, RiMailLine } from "@remixicon/react" import { useUserMe } from "api/hooks/user" import { SourceTypeEnum } from "api" -import { SignupPopover } from "../SignupPopover/SignupPopover" +import * as urls from "@/common/urls" +import { useLocation } from "react-router" const StyledButton = styled(Button)({ minWidth: "130px", @@ -26,6 +27,7 @@ const SearchSubscriptionToggle: React.FC = ({ searchParams, sourceType, }) => { + const loc = useLocation() const [buttonEl, setButtonEl] = useState(null) const subscribeParams: Record = useMemo(() => { @@ -90,7 +92,14 @@ const SearchSubscriptionToggle: React.FC = ({ > Follow - setButtonEl(null)} /> + setButtonEl(null)} + /> ) } diff --git a/frontends/mit-learn/src/page-components/SignupPopover/SignupPopover.test.tsx b/frontends/mit-learn/src/page-components/SignupPopover/SignupPopover.test.tsx deleted file mode 100644 index f5c6fe4cee..0000000000 --- a/frontends/mit-learn/src/page-components/SignupPopover/SignupPopover.test.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react" -import { SignupPopover } from "./SignupPopover" -import { renderWithProviders, screen, within } from "@/test-utils" -import invariant from "tiny-invariant" -import * as urls from "@/common/urls" - -test("SignupPopover shows link to sign up", async () => { - renderWithProviders( - , - { - url: "/some-path?dog=woof", - }, - ) - const dialog = screen.getByRole("dialog") - const link = within(dialog).getByRole("link") - invariant(link instanceof HTMLAnchorElement) - expect(link.href).toMatch( - urls.login({ - pathname: "/some-path", - search: "?dog=woof", - }), - ) -}) diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.test.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.test.tsx index 973b3ebe4a..772f55da5e 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.test.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.test.tsx @@ -2,10 +2,13 @@ import React from "react" import { render, screen } from "@testing-library/react" import { courses } from "../LearningResourceCard/testUtils" import InfoSection from "./InfoSection" +import { ThemeProvider } from "../ThemeProvider/ThemeProvider" describe("Learning resource info section pricing", () => { test("Free course, no certificate", () => { - render() + render(, { + wrapper: ThemeProvider, + }) screen.getByText("Free") expect(screen.queryByText("Paid")).toBeNull() @@ -14,7 +17,9 @@ describe("Learning resource info section pricing", () => { }) test("Free course, with certificate, one price", () => { - render() + render(, { + wrapper: ThemeProvider, + }) screen.getByText("Free") expect(screen.queryByText("Paid")).toBeNull() @@ -23,7 +28,9 @@ describe("Learning resource info section pricing", () => { }) test("Free course, with certificate, price range", () => { - render() + render(, { + wrapper: ThemeProvider, + }) screen.getByText("Free") expect(screen.queryByText("Paid")).toBeNull() @@ -32,7 +39,9 @@ describe("Learning resource info section pricing", () => { }) test("Unknown price, no certificate", () => { - render() + render(, { + wrapper: ThemeProvider, + }) screen.getByText("Paid") expect(screen.queryByText("Free")).toBeNull() @@ -41,7 +50,9 @@ describe("Learning resource info section pricing", () => { }) test("Unknown price, with certificate", () => { - render() + render(, { + wrapper: ThemeProvider, + }) screen.getByText("Paid") expect(screen.queryByText("Free")).toBeNull() @@ -49,7 +60,9 @@ describe("Learning resource info section pricing", () => { }) test("Paid course, no certificate", () => { - render() + render(, { + wrapper: ThemeProvider, + }) screen.getByText("$49") expect(screen.queryByText("Paid")).toBeNull() @@ -59,7 +72,9 @@ describe("Learning resource info section pricing", () => { }) test("Paid course, with certificate, one price", () => { - render() + render(, { + wrapper: ThemeProvider, + }) screen.getByText("$49") expect(screen.queryByText("Paid")).toBeNull() @@ -67,7 +82,9 @@ describe("Learning resource info section pricing", () => { }) test("Paid course, with certificate, price range", () => { - render() + render(, { + wrapper: ThemeProvider, + }) screen.getByText("$49 – $99") expect(screen.queryByText("Paid")).toBeNull() diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx index 67c767fb42..ad38595bbe 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx @@ -1,4 +1,4 @@ -import React from "react" +import React, { useState } from "react" import styled from "@emotion/styled" import ISO6391 from "iso-639-1" import { @@ -26,6 +26,7 @@ import Typography from "@mui/material/Typography" import type { User } from "api/hooks/user" import { CardActionButton } from "../LearningResourceCard/LearningResourceListCard" import { LearningResourceCardProps } from "../LearningResourceCard/LearningResourceCard" +import { SignupPopover } from "../SignupPopover/SignupPopover" const InfoItems = styled.section` display: flex; @@ -86,6 +87,10 @@ const Certificate = styled.div` height: 16px; } ` +// The SignupPopover needs to display over the top of the resource drawer +const StyledSignupPopover = styled(SignupPopover)({ + zIndex: 9999, +}) const CertificatePrice = styled.span` ${{ ...theme.typography.body2 }} @@ -242,13 +247,17 @@ const InfoSection = ({ user, onAddToLearningPathClick, onAddToUserListClick, + signupUrl, }: { resource?: LearningResource run?: LearningResourceRun user?: User onAddToLearningPathClick?: LearningResourceCardProps["onAddToLearningPathClick"] onAddToUserListClick?: LearningResourceCardProps["onAddToUserListClick"] + signupUrl?: string }) => { + const [buttonEl, setButtonEl] = useState(null) + if (!resource) { return null } @@ -286,19 +295,22 @@ const InfoSection = ({ )} - {user?.is_authenticated && ( - - onAddToUserListClick - ? onAddToUserListClick(event, resource.id) - : null - } - > - - - )} + + onAddToUserListClick + ? onAddToUserListClick(event, resource.id) + : setButtonEl(event.currentTarget) + } + > + + + setButtonEl(null)} + /> {infoItems.map((props, index) => ( diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx index 8949a85719..17e645ab36 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx @@ -144,6 +144,7 @@ type LearningResourceExpandedProps = { imgConfig: EmbedlyConfig onAddToLearningPathClick?: LearningResourceCardProps["onAddToLearningPathClick"] onAddToUserListClick?: LearningResourceCardProps["onAddToUserListClick"] + signupUrl?: string } const ImageSection: React.FC<{ @@ -323,6 +324,7 @@ const LearningResourceExpanded: React.FC = ({ imgConfig, onAddToLearningPathClick, onAddToUserListClick, + signupUrl, }) => { const [selectedRun, setSelectedRun] = useState(resource?.runs?.[0]) @@ -425,6 +427,7 @@ const LearningResourceExpanded: React.FC = ({ user={user} onAddToLearningPathClick={onAddToLearningPathClick} onAddToUserListClick={onAddToUserListClick} + signupUrl={signupUrl} /> ) diff --git a/frontends/ol-components/src/components/SignupPopover/SignupPopover.test.tsx b/frontends/ol-components/src/components/SignupPopover/SignupPopover.test.tsx new file mode 100644 index 0000000000..ee23a4d921 --- /dev/null +++ b/frontends/ol-components/src/components/SignupPopover/SignupPopover.test.tsx @@ -0,0 +1,26 @@ +import React from "react" +import { SignupPopover } from "./SignupPopover" +import invariant from "tiny-invariant" +import { render, screen, within } from "@testing-library/react" +import { ThemeProvider } from "../ThemeProvider/ThemeProvider" +import { BrowserRouter } from "react-router-dom" + +test("SignupPopover shows link to sign up", async () => { + const signupUrl = "https://example.com/signup" + render( + + + + , + + , + ) + const dialog = screen.getByRole("dialog") + const link = within(dialog).getByRole("link") + invariant(link instanceof HTMLAnchorElement) + expect(link.href).toMatch(signupUrl) +}) diff --git a/frontends/mit-learn/src/page-components/SignupPopover/SignupPopover.tsx b/frontends/ol-components/src/components/SignupPopover/SignupPopover.tsx similarity index 71% rename from frontends/mit-learn/src/page-components/SignupPopover/SignupPopover.tsx rename to frontends/ol-components/src/components/SignupPopover/SignupPopover.tsx index 64487d1b25..5036c91926 100644 --- a/frontends/mit-learn/src/page-components/SignupPopover/SignupPopover.tsx +++ b/frontends/ol-components/src/components/SignupPopover/SignupPopover.tsx @@ -1,8 +1,9 @@ import React from "react" -import { Popover, Typography, styled, ButtonLink } from "ol-components" import type { PopoverProps } from "ol-components" -import * as urls from "@/common/urls" -import { useLocation } from "react-router" +import styled from "@emotion/styled" +import { Popover } from "../Popover/Popover" +import Typography from "@mui/material/Typography" +import { ButtonLink } from "../Button/Button" const StyledPopover = styled(Popover)({ width: "300px", @@ -25,11 +26,13 @@ const Footer = styled.div({ type SignupPopoverProps = Pick< PopoverProps, "anchorEl" | "onClose" | "placement" -> +> & { + signupUrl?: string +} const SignupPopover: React.FC = (props) => { - const loc = useLocation() + const { signupUrl, ...popoverProps } = props return ( - + Join {APP_SETTINGS.SITE_NAME} for free. @@ -38,14 +41,7 @@ const SignupPopover: React.FC = (props) => { and follow your areas of interest.
- - Sign Up - + Sign Up
) diff --git a/frontends/ol-components/src/index.ts b/frontends/ol-components/src/index.ts index 9c988a0768..d71d04ae61 100644 --- a/frontends/ol-components/src/index.ts +++ b/frontends/ol-components/src/index.ts @@ -199,6 +199,8 @@ export * from "./constants/imgConfigs" export { Input, AdornmentButton } from "./components/Input/Input" export type { InputProps, AdornmentButtonProps } from "./components/Input/Input" +export { SignupPopover } from "./components/SignupPopover/SignupPopover" +export type { SignupPopoverProps } from "./components/SignupPopover/SignupPopover" export { SearchInput } from "./components/SearchInput/SearchInput" export type { SearchInputProps } from "./components/SearchInput/SearchInput" export { TextField } from "./components/TextField/TextField" From 3b56405ba4c48bfed99c80067ba7c1c78a163f28 Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Tue, 17 Sep 2024 11:09:46 -0400 Subject: [PATCH 2/3] consolidate ResourceCard and ResourceListCard --- .../ItemsListing/ItemsListing.tsx | 5 +- .../ResourceCard/ResourceCard.test.tsx | 10 +-- .../ResourceCard/ResourceCard.tsx | 77 ++++--------------- .../SearchDisplay/SearchDisplay.tsx | 6 +- 4 files changed, 27 insertions(+), 71 deletions(-) diff --git a/frontends/mit-learn/src/page-components/ItemsListing/ItemsListing.tsx b/frontends/mit-learn/src/page-components/ItemsListing/ItemsListing.tsx index 0f5eafd120..7f4b03e1da 100644 --- a/frontends/mit-learn/src/page-components/ItemsListing/ItemsListing.tsx +++ b/frontends/mit-learn/src/page-components/ItemsListing/ItemsListing.tsx @@ -12,7 +12,7 @@ import { LearningResourceListCard, LearningResourceListCardCondensed, } from "ol-components" -import { ResourceListCard } from "@/page-components/ResourceCard/ResourceCard" +import { ResourceCard } from "@/page-components/ResourceCard/ResourceCard" import { useListItemMove } from "api/hooks/learningResources" const EmptyMessage = styled.p({ @@ -153,9 +153,10 @@ const ItemsListing: React.FC = ({ {items.map((item) => (
  • -
    • ))} diff --git a/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx b/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx index 51c1bde37a..cbfc3672a3 100644 --- a/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx +++ b/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx @@ -7,7 +7,7 @@ import { expectProps, } from "../../test-utils" import type { User } from "../../test-utils" -import { ResourceCard, ResourceListCard } from "./ResourceCard" +import { ResourceCard } from "./ResourceCard" import { AddToLearningPathDialog, AddToUserListDialog, @@ -39,14 +39,14 @@ jest.mock("@ebay/nice-modal-react", () => { describe.each([ { - CardComponent: ResourceCard, BaseComponent: LearningResourceCard, + isList: false, }, { - CardComponent: ResourceListCard, BaseComponent: LearningResourceListCard, + isList: true, }, -])("$CardComponent", ({ CardComponent, BaseComponent }) => { +])("$CardComponent", ({ BaseComponent, isList }) => { const makeResource = factories.learningResources.resource type SetupOptions = { user?: Partial @@ -60,7 +60,7 @@ describe.each([ setMockResponse.get(urls.userMe.get(), {}, { code: 403 }) } const { view, location } = renderWithProviders( - , + , ) return { resource, view, location } } diff --git a/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.tsx b/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.tsx index 25f9f1c289..a31ca28c69 100644 --- a/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.tsx +++ b/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.tsx @@ -6,10 +6,7 @@ import { SignupPopover, } from "ol-components" import * as NiceModal from "@ebay/nice-modal-react" -import type { - LearningResourceCardProps, - LearningResourceListCardProps, -} from "ol-components" +import type { LearningResourceCardProps } from "ol-components" import { AddToLearningPathDialog, AddToUserListDialog, @@ -72,67 +69,23 @@ const useResourceCard = (resource?: LearningResource | null) => { type ResourceCardProps = Omit< LearningResourceCardProps, "href" | "onAddToLearningPathClick" | "onAddToUserListClick" -> - -/** - * Just like `ol-components/LearningResourceCard`, but with builtin actions: - * - click opens the Resource Drawer - * - onAddToListClick opens the Add to List modal - * - for unauthenticated users, a popover prompts signup instead. - * - onAddToLearningPathClick opens the Add to Learning Path modal - */ -const ResourceCard: React.FC = ({ resource, ...others }) => { - const loc = useLocation() - const { - getDrawerHref, - anchorEl, - handleClosePopover, - handleAddToLearningPathClick, - handleAddToUserListClick, - inUserList, - inLearningPath, - } = useResourceCard(resource) - return ( - <> - - - - ) -} - -type ResourceListCardProps = Omit< - LearningResourceListCardProps, - "href" | "onAddToLearningPathClick" | "onAddToUserListClick" > & { condensed?: boolean + list?: boolean } /** - * Just like `ol-components/LearningResourceListCard`, but with builtin actions: + * Just like `ol-components/LearningResourceCard`, but with builtin actions: * - click opens the Resource Drawer * - onAddToListClick opens the Add to List modal * - for unauthenticated users, a popover prompts signup instead. * - onAddToLearningPathClick opens the Add to Learning Path modal */ -const ResourceListCard: React.FC = ({ +const ResourceCard: React.FC = ({ resource, condensed, - ...props + list, + ...others }) => { const loc = useLocation() const { @@ -144,20 +97,22 @@ const ResourceListCard: React.FC = ({ inUserList, inLearningPath, } = useResourceCard(resource) - - const ListCardComponent = condensed - ? LearningResourceListCardCondensed - : LearningResourceListCard + const CardComponent = + list && condensed + ? LearningResourceListCardCondensed + : list + ? LearningResourceListCard + : LearningResourceCard return ( <> - = ({ ) } -export { ResourceCard, ResourceListCard } -export type { ResourceCardProps, ResourceListCardProps } +export { ResourceCard } +export type { ResourceCardProps } diff --git a/frontends/mit-learn/src/page-components/SearchDisplay/SearchDisplay.tsx b/frontends/mit-learn/src/page-components/SearchDisplay/SearchDisplay.tsx index 7e0d8e8299..d269fa71ae 100644 --- a/frontends/mit-learn/src/page-components/SearchDisplay/SearchDisplay.tsx +++ b/frontends/mit-learn/src/page-components/SearchDisplay/SearchDisplay.tsx @@ -48,7 +48,7 @@ import SliderInput from "./SliderInput" import type { TabConfig } from "./ResourceCategoryTabs" -import { ResourceListCard } from "../ResourceCard/ResourceCard" +import { ResourceCard } from "../ResourceCard/ResourceCard" import { useSearchParams } from "@mitodl/course-search-utils/react-router" import { useUserMe } from "api/hooks/user" @@ -855,7 +855,7 @@ const SearchDisplay: React.FC = ({ .fill(null) .map((a, index) => (
  • - +
    • ))} @@ -863,7 +863,7 @@ const SearchDisplay: React.FC = ({ {data.results.map((resource) => (
  • - +
    • ))}     From b0de72669a5b0956193bee193e42a23a81bc4e0e Mon Sep 17 00:00:00 2001 From: Carey Gumaer Date: Tue, 17 Sep 2024 11:28:55 -0400 Subject: [PATCH 3/3] instead of hard coded 9999 z index on popover, set z index in the theme to the default mui value for the drawer, then take that value plus one for popover --- .../components/LearningResourceExpanded/InfoSection.tsx | 6 +----- .../ol-components/src/components/Popover/Popover.tsx | 3 ++- .../src/components/ThemeProvider/ThemeProvider.tsx | 8 ++++++++ frontends/ol-components/src/constants/styleOverrides.ts | 3 +++ 4 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 frontends/ol-components/src/constants/styleOverrides.ts diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx index ad38595bbe..2393f428fa 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx @@ -87,10 +87,6 @@ const Certificate = styled.div` height: 16px; } ` -// The SignupPopover needs to display over the top of the resource drawer -const StyledSignupPopover = styled(SignupPopover)({ - zIndex: 9999, -}) const CertificatePrice = styled.span` ${{ ...theme.typography.body2 }} @@ -306,7 +302,7 @@ const InfoSection = ({ > - setButtonEl(null)} diff --git a/frontends/ol-components/src/components/Popover/Popover.tsx b/frontends/ol-components/src/components/Popover/Popover.tsx index 46b9e003eb..b1c7de92ae 100644 --- a/frontends/ol-components/src/components/Popover/Popover.tsx +++ b/frontends/ol-components/src/components/Popover/Popover.tsx @@ -5,13 +5,14 @@ import type { PopperProps } from "@mui/material/Popper" import Fade from "@mui/material/Fade" import { FocusTrap } from "@mui/base/FocusTrap" import ClickAwayListener from "@mui/material/ClickAwayListener" +import { MUI_DRAWER_Z_INDEX } from "../../constants/styleOverrides" /** * Based on MUI demo: * https://github.com/mui/material-ui/blob/d3ef60158ba066779102fba775dda6765e2cc0f5/docs/data/material/components/popper/ScrollPlayground.js#L175 */ const StyledPopper = styled(MuiPopper)(({ theme }) => ({ - zIndex: 1, + zIndex: MUI_DRAWER_Z_INDEX + 1, "& > div": { position: "relative", }, diff --git a/frontends/ol-components/src/components/ThemeProvider/ThemeProvider.tsx b/frontends/ol-components/src/components/ThemeProvider/ThemeProvider.tsx index f2bb97970d..9ab02b196b 100644 --- a/frontends/ol-components/src/components/ThemeProvider/ThemeProvider.tsx +++ b/frontends/ol-components/src/components/ThemeProvider/ThemeProvider.tsx @@ -9,6 +9,7 @@ import * as typography from "./typography" import * as buttons from "./buttons" import * as chips from "./chips" import { colors } from "./colors" +import { MUI_DRAWER_Z_INDEX } from "../../constants/styleOverrides" const shadow = { shadowOffsetX: 3, @@ -80,6 +81,13 @@ const themeOptions: ThemeOptions = { styleOverrides: { paper: { borderRadius: "4px" } }, }, MuiChip: chips.chipComponent, + MuiDrawer: { + styleOverrides: { + paper: { + zIndex: MUI_DRAWER_Z_INDEX, + }, + }, + }, }, } diff --git a/frontends/ol-components/src/constants/styleOverrides.ts b/frontends/ol-components/src/constants/styleOverrides.ts new file mode 100644 index 0000000000..25ba13e46f --- /dev/null +++ b/frontends/ol-components/src/constants/styleOverrides.ts @@ -0,0 +1,3 @@ +const MUI_DRAWER_Z_INDEX = 1200 + +export { MUI_DRAWER_Z_INDEX }