add new learning resource drawer layout

[gumaerc]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/5819

Description (What does it do?)

This PR is a first pass at implementing the new wider learning resource drawer design. The structure and styles have been altered to match what's included in the design, minus the out of scope items listed in the issue. As part of this, the dropdown UI for selecting runs that changes the information section has been removed. Instead, all possible values across all runs are shown in a pipe separated list.

Screenshots (if appropriate):

How can this be tested?

• Spin up mit-learn on this branch
• Ensure that your local database is sufficiently populated with enough learning resources for testing:
  • A variety of courses
  • Podcasts
  • Videos
• Ensure that you have built a search index
• Visit the search page at http://localhost:8062/search
• Search for and click on learning resources to bring up the new drawer
• Check all of the above resource type and ensure that the general structure and information presented matches what's expected and aligns with the provided designs

[abeglova]

Overall looks good. Did catch a couple of bugs

In mobile mode, the drawer is too wide for some programs and video. It looks ok for other types of resources

I'm not sure why this video is cut off

But this one is fine

[abeglova]

This adds a call to action for all resource types. The button does not go anywhere for video playlists and learning paths since url is null for those resources and getCallToActionUrl only has special logic for podcasts. http://api.open.odl.local:8063/api/v1/learning_resources_search/?resource_type=video_playlist . You can add special logic to construct the correct url based on the channel_id for the video playlist. I'm not sure if we are supposed to have learning paths in prod. There is currently one in the production search but I think that it might not be supposed to be visible

[gumaerc]

Note to self: fix alignment of bookmark buttons when "on platform" section is not present.

[gumaerc]

@abeglova Thanks for your review, this is ready for another look. The mobile video issue actually had to do with the description on that particular video causing the description field to overflow the flex parent because of the white-space: pre-line rule. I changed this to use white-space: pre-wrap and word-break: break-word to fix this. Really the issue was caused by a really long unbroken line of text that was a URL. In reality, URLs like this should be actual links but I don't think we're set up for that yet. Video playlists should now have a proper CTA as well as thumbnail image. Learning paths we will leave as-is, as we discussed.

[abeglova]

lgtm

[ChristopherChudzicki]

The only instance we have of RoutedDrawer sets hideCloseButton={true}... Can we skip changing the close button style here?

[ChristopherChudzicki]

@gumaerc I checked out the posthog stuff. Worked well.