add new learning resource drawer layout

frontends/main/src/common/feature_flags.ts

@@ -3,4 +3,5 @@
 
 export enum FeatureFlags {
   EnableEcommerce = "enable-ecommerce",
+  DrawerV2Enabled = "lr_drawer_v2",
 }

frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx

@@ -1,132 +1,14 @@
-import React, { Suspense, useCallback, useEffect, useMemo } from "react"
-import {
-  RoutedDrawer,
-  LearningResourceExpanded,
-  imgConfigs,
-} from "ol-components"
-import type {
-  LearningResourceCardProps,
-  RoutedDrawerProps,
-} from "ol-components"
-import { useLearningResourcesDetail } from "api/hooks/learningResources"
-import { useSearchParams, ReadonlyURLSearchParams } from "next/navigation"
-
+import React, { useCallback } from "react"
 import { RESOURCE_DRAWER_QUERY_PARAM } from "@/common/urls"
-import { useUserMe } from "api/hooks/user"
-import NiceModal from "@ebay/nice-modal-react"
-import {
-  AddToLearningPathDialog,
-  AddToUserListDialog,
-} from "../Dialogs/AddToListDialog"
-import { SignupPopover } from "../SignupPopover/SignupPopover"
-import { usePostHog } from "posthog-js/react"
-
-const RESOURCE_DRAWER_PARAMS = [RESOURCE_DRAWER_QUERY_PARAM] as const
-
-const useCapturePageView = (resourceId: number) => {
-  const { data, isSuccess } = useLearningResourcesDetail(Number(resourceId))
-  const posthog = usePostHog()
-  const apiKey = process.env.NEXT_PUBLIC_POSTHOG_API_KEY
-
-  useEffect(() => {
-    if (!apiKey || apiKey.length < 1) return
-    if (!isSuccess) return
-    posthog.capture("lrd_view", {
-      resourceId: data?.id,
-      readableId: data?.readable_id,
-      platformCode: data?.platform?.code,
-      resourceType: data?.resource_type,
-    })
-  }, [
-    isSuccess,
-    posthog,
-    data?.id,
-    data?.readable_id,
-    data?.platform?.code,
-    data?.resource_type,
-    apiKey,
-  ])
-}
-
-/**
- * Convert HTML to plaintext, removing any HTML tags.
- * This conversion method has some issues:
- * 1. It is unsafe for untrusted HTML
- * 2. It must be run in a browser, not on a server.
- */
-// eslint-disable-next-line camelcase
-// const unsafe_html2plaintext = (text: string) => {
-//   const div = document.createElement("div")
-//   div.innerHTML = text
-//   return div.textContent || div.innerText || ""
-// }
-
-const DrawerContent: React.FC<{
-  resourceId: number
-}> = ({ resourceId }) => {
-  const resource = useLearningResourcesDetail(Number(resourceId))
-  const [signupEl, setSignupEl] = React.useState<HTMLElement | null>(null)
-  const { data: user } = useUserMe()
-  const handleAddToLearningPathClick: LearningResourceCardProps["onAddToLearningPathClick"] =
-    useMemo(() => {
-      if (user?.is_learning_path_editor) {
-        return (event, resourceId: number) => {
-          NiceModal.show(AddToLearningPathDialog, { resourceId })
-        }
-      }
-      return null
-    }, [user])
-  const handleAddToUserListClick: LearningResourceCardProps["onAddToUserListClick"] =
-    useMemo(() => {
-      return (event, resourceId: number) => {
-        if (!user?.is_authenticated) {
-          setSignupEl(event.currentTarget)
-          return
-        }
-        NiceModal.show(AddToUserListDialog, { resourceId })
-      }
-    }, [user])
-  useCapturePageView(Number(resourceId))
-
-  return (
-    <>
-      <LearningResourceExpanded
-        imgConfig={imgConfigs.large}
-        resource={resource.data}
-        user={user}
-        onAddToLearningPathClick={handleAddToLearningPathClick}
-        onAddToUserListClick={handleAddToUserListClick}
-      />
-      <SignupPopover anchorEl={signupEl} onClose={() => setSignupEl(null)} />
-    </>
-  )
-}
-
-const PAPER_PROPS: RoutedDrawerProps["PaperProps"] = {
-  sx: {
-    maxWidth: (theme) => theme.breakpoints.values.sm,
-    minWidth: (theme) => ({
-      [theme.breakpoints.down("sm")]: {
-        minWidth: "100%",
-      },
-    }),
-  },
-}
+import { ReadonlyURLSearchParams, useSearchParams } from "next/navigation"
+import { useFeatureFlagEnabled } from "posthog-js/react"
+import LearningResourceDrawerV2 from "./LearningResourceDrawerV2"
+import LearningResourceDrawerV1 from "./LearningResourceDrawerV1"
+import { FeatureFlags } from "@/common/feature_flags"
 
 const LearningResourceDrawer = () => {
-  return (
-    <Suspense>
-      <RoutedDrawer
-        anchor="right"
-        requiredParams={RESOURCE_DRAWER_PARAMS}
-        PaperProps={PAPER_PROPS}
-      >
-        {({ params }) => {
-          return <DrawerContent resourceId={Number(params.resource)} />
-        }}
-      </RoutedDrawer>
-    </Suspense>
-  )
+  const drawerV2 = useFeatureFlagEnabled(FeatureFlags.DrawerV2Enabled)
+  return drawerV2 ? <LearningResourceDrawerV2 /> : <LearningResourceDrawerV1 />
 }
 
 const getOpenDrawerSearchParams = (

frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx → frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV1.test.tsx

@@ -6,9 +6,9 @@ import {
   waitFor,
   within,
 } from "@/test-utils"
-import LearningResourceDrawer from "./LearningResourceDrawer"
+import LearningResourceDrawerV1 from "./LearningResourceDrawerV1"
 import { urls, factories, setMockResponse } from "api/test-utils"
-import { LearningResourceExpanded } from "ol-components"
+import { LearningResourceExpandedV1 } from "ol-components"
 import { RESOURCE_DRAWER_QUERY_PARAM } from "@/common/urls"
 import { ResourceTypeEnum } from "api"
 import invariant from "tiny-invariant"
@@ -17,7 +17,7 @@ jest.mock("ol-components", () => {
   const actual = jest.requireActual("ol-components")
   return {
     ...actual,
-    LearningResourceExpanded: jest.fn(actual.LearningResourceExpanded),
+    LearningResourceExpandedV1: jest.fn(actual.LearningResourceExpandedV1),
   }
 })
 
@@ -33,7 +33,7 @@ jest.mock("posthog-js/react", () => ({
   },
 }))
 
-describe("LearningResourceDrawer", () => {
+describe("LearningResourceDrawerV1", () => {
   it.each([
     { descriptor: "is enabled", enablePostHog: true },
     { descriptor: "is not enabled", enablePostHog: false },
@@ -50,12 +50,12 @@ describe("LearningResourceDrawer", () => {
         resource,
       )
 
-      renderWithProviders(<LearningResourceDrawer />, {
+      renderWithProviders(<LearningResourceDrawerV1 />, {
         url: `?dog=woof&${RESOURCE_DRAWER_QUERY_PARAM}=${resource.id}`,
       })
-      expect(LearningResourceExpanded).toHaveBeenCalled()
+      expect(LearningResourceExpandedV1).toHaveBeenCalled()
       await waitFor(() => {
-        expectProps(LearningResourceExpanded, { resource })
+        expectProps(LearningResourceExpandedV1, { resource })
       })
       await screen.findByRole("heading", { name: resource.title })
 
@@ -68,10 +68,10 @@ describe("LearningResourceDrawer", () => {
   )
 
   it("Does not render drawer content when resource=id is NOT in the URL", async () => {
-    renderWithProviders(<LearningResourceDrawer />, {
+    renderWithProviders(<LearningResourceDrawerV1 />, {
       url: "?dog=woof",
     })
-    expect(LearningResourceExpanded).not.toHaveBeenCalled()
+    expect(LearningResourceExpandedV1).not.toHaveBeenCalled()
   })
 
   test.each([
@@ -118,14 +118,14 @@ describe("LearningResourceDrawer", () => {
         setMockResponse.get(urls.userMe.get(), null, { code: 403 })
       }
 
-      renderWithProviders(<LearningResourceDrawer />, {
+      renderWithProviders(<LearningResourceDrawerV1 />, {
         url: `?resource=${resource.id}`,
       })
 
-      expect(LearningResourceExpanded).toHaveBeenCalled()
+      expect(LearningResourceExpandedV1).toHaveBeenCalled()
 
       await waitFor(() => {
-        expectProps(LearningResourceExpanded, { resource })
+        expectProps(LearningResourceExpandedV1, { resource })
       })
 
       const section = screen

frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV1.tsx

@@ -0,0 +1,131 @@
+import React, { Suspense, useEffect, useMemo } from "react"
+import {
+  RoutedDrawer,
+  LearningResourceExpandedV1,
+  imgConfigs,
+} from "ol-components"
+import type {
+  LearningResourceCardProps,
+  RoutedDrawerProps,
+} from "ol-components"
+import { useLearningResourcesDetail } from "api/hooks/learningResources"
+
+import { RESOURCE_DRAWER_QUERY_PARAM } from "@/common/urls"
+import { useUserMe } from "api/hooks/user"
+import NiceModal from "@ebay/nice-modal-react"
+import {
+  AddToLearningPathDialog,
+  AddToUserListDialog,
+} from "../Dialogs/AddToListDialog"
+import { SignupPopover } from "../SignupPopover/SignupPopover"
+import { usePostHog } from "posthog-js/react"
+
+const RESOURCE_DRAWER_PARAMS = [RESOURCE_DRAWER_QUERY_PARAM] as const
+
+const useCapturePageView = (resourceId: number) => {
+  const { data, isSuccess } = useLearningResourcesDetail(Number(resourceId))
+  const posthog = usePostHog()
+  const apiKey = process.env.NEXT_PUBLIC_POSTHOG_API_KEY
+
+  useEffect(() => {
+    if (!apiKey || apiKey.length < 1) return
+    if (!isSuccess) return
+    posthog.capture("lrd_view", {
+      resourceId: data?.id,
+      readableId: data?.readable_id,
+      platformCode: data?.platform?.code,
+      resourceType: data?.resource_type,
+    })
+  }, [
+    isSuccess,
+    posthog,
+    data?.id,
+    data?.readable_id,
+    data?.platform?.code,
+    data?.resource_type,
+    apiKey,
+  ])
+}
+
+/**
+ * Convert HTML to plaintext, removing any HTML tags.
+ * This conversion method has some issues:
+ * 1. It is unsafe for untrusted HTML
+ * 2. It must be run in a browser, not on a server.
+ */
+// eslint-disable-next-line camelcase
+// const unsafe_html2plaintext = (text: string) => {
+//   const div = document.createElement("div")
+//   div.innerHTML = text
+//   return div.textContent || div.innerText || ""
+// }
+
+const DrawerContent: React.FC<{
+  resourceId: number
+}> = ({ resourceId }) => {
+  const resource = useLearningResourcesDetail(Number(resourceId))
+  const [signupEl, setSignupEl] = React.useState<HTMLElement | null>(null)
+  const { data: user } = useUserMe()
+  const handleAddToLearningPathClick: LearningResourceCardProps["onAddToLearningPathClick"] =
+    useMemo(() => {
+      if (user?.is_learning_path_editor) {
+        return (event, resourceId: number) => {
+          NiceModal.show(AddToLearningPathDialog, { resourceId })
+        }
+      }
+      return null
+    }, [user])
+  const handleAddToUserListClick: LearningResourceCardProps["onAddToUserListClick"] =
+    useMemo(() => {
+      return (event, resourceId: number) => {
+        if (!user?.is_authenticated) {
+          setSignupEl(event.currentTarget)
+          return
+        }
+        NiceModal.show(AddToUserListDialog, { resourceId })
+      }
+    }, [user])
+  useCapturePageView(Number(resourceId))
+
+  return (
+    <>
+      <LearningResourceExpandedV1
+        imgConfig={imgConfigs.large}
+        resource={resource.data}
+        user={user}
+        onAddToLearningPathClick={handleAddToLearningPathClick}
+        onAddToUserListClick={handleAddToUserListClick}
+      />
+      <SignupPopover anchorEl={signupEl} onClose={() => setSignupEl(null)} />
+    </>
+  )
+}
+
+const PAPER_PROPS: RoutedDrawerProps["PaperProps"] = {
+  sx: {
+    maxWidth: (theme) => theme.breakpoints.values.sm,
+    minWidth: (theme) => ({
+      [theme.breakpoints.down("sm")]: {
+        minWidth: "100%",
+      },
+    }),
+  },
+}
+
+const LearningResourceDrawerV1 = () => {
+  return (
+    <Suspense>
+      <RoutedDrawer
+        anchor="right"
+        requiredParams={RESOURCE_DRAWER_PARAMS}
+        PaperProps={PAPER_PROPS}
+      >
+        {({ params }) => {
+          return <DrawerContent resourceId={Number(params.resource)} />
+        }}
+      </RoutedDrawer>
+    </Suspense>
+  )
+}
+
+export default LearningResourceDrawerV1