Subscription management page

[shanbady]

What are the relevant tickets?

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

Description (What does it do?)

Adds a "Preferences" page to the dashboard that contains a list of channels a user has subscribed to (from which they can unsubscribe)

Screenshots (if appropriate):

How can this be tested?

1. Checkout this branch
2. Subscribe to a few channels of different types (unit, department, topic)
3. go to the settings page by navigating to the dashboard and clicking "settings"

4. Unsubscribe from topics and see that it works as expected.

Additional context

Functionally the unsubscribe buttons on this preferences page are the same as if you unsubscribed directly from the relevant channel's page. We are just consolidating all the subscriptions in one location here.

[ChristopherChudzicki]

This generally works well thought I noticed a couple issues.

Styling: Doesn't quite match figma in terms of spacing and, in a couple places, font sizes. Apologies we don't have a more immediately useable ListItem for you.

Functionality: I noticed some issues around url encoding. Note that we started url encoding search filters for channels in #1326 because new topic names have ampersands. I noticed two things:

1. On the new subscripts page, channels subscriptions to topics with ampersands aren't compared correctly to the original search. I believe the immediate solution is to NOT unquote_plus the search filter.
2. Topics with commas in their name can't be subscriped to.
   • this bug exists on main, but imo makes sense to fix here. I believe getSearchParamMap should NOT split on commas.

It seems to me that (1) and (2) above might both be easier if we stored search_filter—both for channels and for subscription queries—as objects rather than encoded strings, but that seems longer term.

[shanbady]

@ChristopherChudzicki this is ready to be looked at again

[ChristopherChudzicki]

Works and looks great. Noticed a small issue with borders.

I also think it would be worth adding a simple frontend test, along the lines of

// SettingsPage.test.tsx
import React from "react"
import { SettingsPage } from "./SettingsPage"
import { renderWithProviders } from "@/test-utils"

describe("SettingsPage", () => {
  it("Renders user subscriptions in a list", () => {

  })

  test("Clicking 'Unfollow' removes the subscription", () => {

  })
})

[ChristopherChudzicki]

👍 LGTM

[ChristopherChudzicki]

I try to use getByRole* for most things, since it effectively adds an assertion about the role in the accessibility treat. E.g., if we know it's an element with role link, it's almost certainly tab-navigable[^1]

Suggested change

	const unsubscribeButton = within(followList).getAllByText("Unfollow")[0]
	const unsubscribeButton = within(followList).getAllByRole("link", { name: "Unfollow" })[0]

[^1] I say "almost certainly" because it's probably an anchor tag. If someone did <div role="link" /> (don't!), that would show up as a link in the browser's accessibility treat, but wouldn't be tab navigable.