From d94c3a8c47b043eb3e8dfba7ef225a66bb9572de Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Fri, 26 Jul 2024 14:22:30 -0400
Subject: [PATCH 01/36] adding initial method to return original url query
 params

---
 learning_resources_search/models.py | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/learning_resources_search/models.py b/learning_resources_search/models.py
index e8ef4d0a8a..599b9b654d 100644
--- a/learning_resources_search/models.py
+++ b/learning_resources_search/models.py
@@ -1,3 +1,5 @@
+from urllib.parse import unquote_plus, urlencode
+
 from django.contrib.auth import get_user_model
 from django.db import models
 from django.db.models import JSONField
@@ -30,3 +32,11 @@ def __str__(self):
 
     class Meta:
         unique_together = (("source_type", "original_query"),)
+
+    def original_url_params(self):
+        ignore_params = ["endpoint"]
+        query = self.original_query
+        defined_params = {
+            key: query[key] for key in query if query[key] and key not in ignore_params
+        }
+        unquote_plus(urlencode(defined_params, doseq=True))

From 104560acd6232950874e5b6bfe5048dece10f55a Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Fri, 26 Jul 2024 14:37:23 -0400
Subject: [PATCH 02/36] adding subscription management page

---
 .../DashboardPage/SubscriptionManagementPage.tsx   | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 frontends/mit-open/src/pages/DashboardPage/SubscriptionManagementPage.tsx

diff --git a/frontends/mit-open/src/pages/DashboardPage/SubscriptionManagementPage.tsx b/frontends/mit-open/src/pages/DashboardPage/SubscriptionManagementPage.tsx
new file mode 100644
index 0000000000..999e88bf25
--- /dev/null
+++ b/frontends/mit-open/src/pages/DashboardPage/SubscriptionManagementPage.tsx
@@ -0,0 +1,14 @@
+import React from "react"
+import { Profile, useProfileMeMutation } from "api/hooks/profile"
+
+type Props = {
+  profile: Profile
+}
+
+const SubscriptionManagementPage: React.FC<Props> = ({ profile }) => {
+  const { isLoading: isSaving, mutateAsync } = useProfileMeMutation()
+  console.log(profile, isLoading, isSaving, mutateAsync)
+  return <></>
+}
+
+export { SubscriptionManagementPage }

From 7f263a9f5c735079318fb41bb1737e0c0ac65b41 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Fri, 26 Jul 2024 15:00:39 -0400
Subject: [PATCH 03/36] switching name to preferences page

---
 .../src/pages/DashboardPage/DashboardPage.tsx | 16 +++++++++++
 .../pages/DashboardPage/PreferencesPage.tsx   | 28 +++++++++++++++++++
 .../SubscriptionManagementPage.tsx            | 14 ----------
 3 files changed, 44 insertions(+), 14 deletions(-)
 create mode 100644 frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
 delete mode 100644 frontends/mit-open/src/pages/DashboardPage/SubscriptionManagementPage.tsx

diff --git a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
index b578c594f3..f99c480e68 100644
--- a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
@@ -38,6 +38,7 @@ import {
 } from "./carousels"
 import ResourceCarousel from "@/page-components/ResourceCarousel/ResourceCarousel"
 import UserListDetailsTab from "./UserListDetailsTab"
+import { PreferencesPage } from "./PreferencesPage"
 
 /**
  *
@@ -284,12 +285,14 @@ const UserMenuTab: React.FC<UserMenuTabProps> = (props) => {
 enum TabValues {
   HOME = "home",
   MY_LISTS = "my-lists",
+  PREFERENCES = "preferences",
   PROFILE = "profile",
 }
 
 const TabLabels = {
   [TabValues.HOME.toString()]: "Home",
   [TabValues.MY_LISTS.toString()]: "My Lists",
+  [TabValues.PREFERENCES.toString()]: "Preferences",
   [TabValues.PROFILE.toString()]: "Profile",
 }
 
@@ -467,6 +470,19 @@ const DashboardPage: React.FC = () => {
                     </div>
                   )}
                 </TabPanelStyled>
+                <TabPanelStyled
+                  key={TabValues.PREFERENCES}
+                  value={TabValues.PREFERENCES}
+                >
+                  <TitleText role="heading">Preferences</TitleText>
+                  {isLoadingProfile || typeof profile === "undefined" ? (
+                    <Skeleton variant="text" width={128} height={32} />
+                  ) : (
+                    <div id="user-preferences">
+                      <PreferencesPage />
+                    </div>
+                  )}
+                </TabPanelStyled>
                 <TabPanelStyled
                   key={TabValues.PROFILE}
                   value={TabValues.PROFILE}
diff --git a/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx b/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
new file mode 100644
index 0000000000..cc2011fae3
--- /dev/null
+++ b/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+import { Profile, useProfileMeMutation } from "api/hooks/profile"
+import { useUserMe } from "api/hooks/user"
+import {
+  useSearchSubscriptionDelete,
+  useSearchSubscriptionList,
+} from "api/hooks/searchSubscription"
+
+type Props = {
+  profile: Profile
+}
+
+const PreferencesPage: React.FC<Props> = () => {
+  const { isLoading: isSaving, mutateAsync } = useProfileMeMutation()
+  const { data: user } = useUserMe()
+  const subscriptionDelete = useSearchSubscriptionDelete()
+  const subscriptionList = useSearchSubscriptionList(subscribeParams, {
+    enabled: !!user?.is_authenticated,
+  })
+  console.log(profile, isLoading, isSaving, mutateAsync, subscriptionDelete)
+
+  if (!user || subscriptionList.isLoading) return null
+  console.log(subscriptionList)
+
+  return <></>
+}
+
+export { PreferencesPage }
diff --git a/frontends/mit-open/src/pages/DashboardPage/SubscriptionManagementPage.tsx b/frontends/mit-open/src/pages/DashboardPage/SubscriptionManagementPage.tsx
deleted file mode 100644
index 999e88bf25..0000000000
--- a/frontends/mit-open/src/pages/DashboardPage/SubscriptionManagementPage.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react"
-import { Profile, useProfileMeMutation } from "api/hooks/profile"
-
-type Props = {
-  profile: Profile
-}
-
-const SubscriptionManagementPage: React.FC<Props> = ({ profile }) => {
-  const { isLoading: isSaving, mutateAsync } = useProfileMeMutation()
-  console.log(profile, isLoading, isSaving, mutateAsync)
-  return <></>
-}
-
-export { SubscriptionManagementPage }

From 72cb080c750633b809411f35c14828e32c03d63c Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Fri, 26 Jul 2024 15:38:39 -0400
Subject: [PATCH 04/36] adding preferences to dashboard page

---
 .../src/pages/DashboardPage/DashboardPage.tsx    | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
index f99c480e68..d48fc97523 100644
--- a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
@@ -295,9 +295,9 @@ const TabLabels = {
   [TabValues.PREFERENCES.toString()]: "Preferences",
   [TabValues.PROFILE.toString()]: "Profile",
 }
-
+console.log("TabLabels", TabLabels)
 const keyFromHash = (hash: string) => {
-  const keys = [TabValues.HOME, TabValues.MY_LISTS, TabValues.PROFILE]
+  const keys = Object.values(TabValues)
   const match = keys.find((key) => `#${key}` === hash)
   return match ?? "home"
 }
@@ -349,6 +349,12 @@ const DashboardPage: React.FC = () => {
             currentValue={tabValue}
             onClick={() => setUserListAction("list")}
           />
+          <UserMenuTab
+            icon={<RiBookMarkedLine />}
+            text={TabLabels[TabValues.PREFERENCES]}
+            value={TabValues.PREFERENCES}
+            currentValue={tabValue}
+          />
           <UserMenuTab
             icon={<RiEditLine />}
             text={TabLabels[TabValues.PROFILE]}
@@ -375,6 +381,12 @@ const DashboardPage: React.FC = () => {
         label="My Lists"
         onClick={() => setUserListAction("list")}
       />
+      <TabButtonLink
+        data-testid={`mobile-tab-${TabValues.PREFERENCES}`}
+        value={TabValues.PREFERENCES}
+        href={`#${TabValues.PREFERENCES}`}
+        label="Preferences"
+      />
       <TabButtonLink
         data-testid={`mobile-tab-${TabValues.PROFILE}`}
         value={TabValues.PROFILE}

From ba4ab69873d02571f1db5234a0750f0a4d2a3357 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Mon, 29 Jul 2024 09:40:06 -0400
Subject: [PATCH 05/36] changing icon

---
 frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
index d48fc97523..0507cf971c 100644
--- a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
@@ -4,6 +4,7 @@ import {
   RiDashboardLine,
   RiBookMarkedLine,
   RiEditLine,
+  RiNotificationLine,
 } from "@remixicon/react"
 import {
   ButtonLink,
@@ -350,7 +351,7 @@ const DashboardPage: React.FC = () => {
             onClick={() => setUserListAction("list")}
           />
           <UserMenuTab
-            icon={<RiBookMarkedLine />}
+            icon={<RiNotificationLine />}
             text={TabLabels[TabValues.PREFERENCES]}
             value={TabValues.PREFERENCES}
             currentValue={tabValue}

From 9c93f0ef8dcb082abaaa4bf00f18804d0990ee1a Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Mon, 29 Jul 2024 10:21:24 -0400
Subject: [PATCH 06/36] adding source types and labels and regenerating api to
 match

---
 frontends/api/src/generated/v1/api.ts    | 12 ++++++++++++
 learning_resources_search/models.py      | 21 ++++++++++++++++++++-
 learning_resources_search/serializers.py |  3 +++
 openapi/specs/v1.yaml                    |  8 ++++++++
 4 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/frontends/api/src/generated/v1/api.ts b/frontends/api/src/generated/v1/api.ts
index ffb2c69453..ff61423386 100644
--- a/frontends/api/src/generated/v1/api.ts
+++ b/frontends/api/src/generated/v1/api.ts
@@ -3277,6 +3277,18 @@ export interface PercolateQuery {
    * @memberof PercolateQuery
    */
   id: number
+  /**
+   *
+   * @type {string}
+   * @memberof PercolateQuery
+   */
+  source_description: string
+  /**
+   *
+   * @type {string}
+   * @memberof PercolateQuery
+   */
+  source_label: string
   /**
    *
    * @type {any}
diff --git a/learning_resources_search/models.py b/learning_resources_search/models.py
index 599b9b654d..4e9d721587 100644
--- a/learning_resources_search/models.py
+++ b/learning_resources_search/models.py
@@ -4,6 +4,8 @@
 from django.db import models
 from django.db.models import JSONField
 
+from channels.constants import ChannelType
+from channels.models import Channel
 from main.models import TimestampedModel
 
 User = get_user_model()
@@ -39,4 +41,21 @@ def original_url_params(self):
         defined_params = {
             key: query[key] for key in query if query[key] and key not in ignore_params
         }
-        unquote_plus(urlencode(defined_params, doseq=True))
+        return unquote_plus(urlencode(defined_params, doseq=True))
+
+    def source_label(self):
+        original_query_params = self.original_url_params()
+        channels_filtered = Channel.objects.filter(search_filter=original_query_params)
+        if channels_filtered.exists():
+            return channels_filtered.first().channel_type
+        else:
+            return "custom_search"
+
+    def source_description(self):
+        original_query_params = self.original_url_params()
+        source_label = self.source_label()
+
+        if source_label in ChannelType:
+            channel = Channel.objects.get(search_filter=original_query_params)
+            return channel.title
+        return self.original_url_params()
diff --git a/learning_resources_search/serializers.py b/learning_resources_search/serializers.py
index 34884e3897..a3c85c8525 100644
--- a/learning_resources_search/serializers.py
+++ b/learning_resources_search/serializers.py
@@ -544,6 +544,9 @@ class PercolateQuerySerializer(serializers.ModelSerializer):
     Serializer for PercolateQuery objects
     """
 
+    source_description = serializers.ReadOnlyField()
+    source_label = serializers.ReadOnlyField()
+
     class Meta:
         model = PercolateQuery
         exclude = (*COMMON_IGNORED_FIELDS, "users")
diff --git a/openapi/specs/v1.yaml b/openapi/specs/v1.yaml
index b0838ebf07..4010226213 100644
--- a/openapi/specs/v1.yaml
+++ b/openapi/specs/v1.yaml
@@ -9413,6 +9413,12 @@ components:
         id:
           type: integer
           readOnly: true
+        source_description:
+          type: string
+          readOnly: true
+        source_label:
+          type: string
+          readOnly: true
         original_query: {}
         query: {}
         source_type:
@@ -9421,6 +9427,8 @@ components:
       - id
       - original_query
       - query
+      - source_description
+      - source_label
       - source_type
     PercolateQuerySubscriptionRequestRequest:
       type: object

From a21fd3867e6ec2577bbdb6a5e87018c85ce47e98 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Mon, 29 Jul 2024 11:14:29 -0400
Subject: [PATCH 07/36] changing response for saved search

---
 learning_resources_search/models.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/learning_resources_search/models.py b/learning_resources_search/models.py
index 4e9d721587..d7591b4c03 100644
--- a/learning_resources_search/models.py
+++ b/learning_resources_search/models.py
@@ -49,7 +49,7 @@ def source_label(self):
         if channels_filtered.exists():
             return channels_filtered.first().channel_type
         else:
-            return "custom_search"
+            return "saved search"
 
     def source_description(self):
         original_query_params = self.original_url_params()

From 5542dfaf942db38fe3da6ed958069424bf3c1c77 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Mon, 29 Jul 2024 11:17:56 -0400
Subject: [PATCH 08/36] updating frontend to match mocks

---
 .../pages/DashboardPage/PreferencesPage.tsx   | 78 +++++++++++++++++--
 1 file changed, 72 insertions(+), 6 deletions(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx b/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
index cc2011fae3..b6b82335cc 100644
--- a/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
@@ -1,5 +1,13 @@
 import React from "react"
-import { Profile, useProfileMeMutation } from "api/hooks/profile"
+import {
+  List,
+  ListItem,
+  ListItemText,
+  ListItemButton,
+  Typography,
+  styled,
+} from "ol-components"
+import { Profile } from "api/hooks/profile"
 import { useUserMe } from "api/hooks/user"
 import {
   useSearchSubscriptionDelete,
@@ -10,19 +18,77 @@ type Props = {
   profile: Profile
 }
 
+const SOURCE_LABEL_DISPLAY = {
+  topic: "Topic",
+  unit: "MIT Unit",
+  department: "MIT Academic Department",
+  "saved search": "Saved Search",
+}
+
+const FollowList = styled(List)(() => ({
+  borderRadius: "4px",
+  background: "#fff",
+  padding: "0px",
+}))
+
+const TitleText = styled(Typography)(({ theme }) => ({
+  marginTop: "10px",
+  marginBottom: "10px",
+
+  color: theme.custom.colors.darkGray2,
+  ...theme.typography.h5,
+  [theme.breakpoints.down("md")]: {
+    ...theme.typography.h5,
+  },
+}))
+
+const SubTitleText = styled(Typography)(({ theme }) => ({
+  marginBottom: "10px",
+  color: theme.custom.colors.darkGray2,
+  fontSize: "14px",
+  ...theme.typography.body2,
+  [theme.breakpoints.down("md")]: {
+    ...theme.typography.subtitle3,
+  },
+}))
+
 const PreferencesPage: React.FC<Props> = () => {
-  const { isLoading: isSaving, mutateAsync } = useProfileMeMutation()
   const { data: user } = useUserMe()
   const subscriptionDelete = useSearchSubscriptionDelete()
-  const subscriptionList = useSearchSubscriptionList(subscribeParams, {
+  const subscriptionList = useSearchSubscriptionList({
     enabled: !!user?.is_authenticated,
   })
-  console.log(profile, isLoading, isSaving, mutateAsync, subscriptionDelete)
 
+  const unsubscribe = subscriptionDelete.mutate
   if (!user || subscriptionList.isLoading) return null
-  console.log(subscriptionList)
+  console.log(subscriptionList.data[0])
 
-  return <></>
+  return (
+    <>
+      <TitleText>Following</TitleText>
+      <SubTitleText>
+        All topics, academic departments, and MIT units you are following.
+      </SubTitleText>
+      <FollowList>
+        {subscriptionList.data.map((subscriptionItem) => (
+          <ListItem
+            divider={true}
+            key={subscriptionItem.id}
+            secondaryAction={
+              <ListItemButton onClick={() => unsubscribe(subscriptionItem.id)}>
+                Unfollow
+              </ListItemButton>
+            }
+          >
+            <ListItemText
+              primary={subscriptionItem.source_description}
+              secondary={SOURCE_LABEL_DISPLAY[subscriptionItem.source_label]}
+            />
+          </ListItem>
+        ))}
+      </FollowList>
+    </>
+  )
 }
 
 export { PreferencesPage }

From c22f07faf41e081ef9184dd275c21459ec0072e7 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Mon, 29 Jul 2024 11:43:28 -0400
Subject: [PATCH 09/36] style changes

---
 .../src/pages/DashboardPage/PreferencesPage.tsx     | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx b/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
index b6b82335cc..0ed8070d95 100644
--- a/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
@@ -3,8 +3,8 @@ import {
   List,
   ListItem,
   ListItemText,
-  ListItemButton,
   Typography,
+  Link,
   styled,
 } from "ol-components"
 import { Profile } from "api/hooks/profile"
@@ -29,6 +29,11 @@ const FollowList = styled(List)(() => ({
   borderRadius: "4px",
   background: "#fff",
   padding: "0px",
+  margin: "0px",
+}))
+
+const StyledLink = styled(Link)(({ theme }) => ({
+  color: theme.custom.colors.red,
 }))
 
 const TitleText = styled(Typography)(({ theme }) => ({
@@ -46,7 +51,7 @@ const SubTitleText = styled(Typography)(({ theme }) => ({
   marginBottom: "10px",
   color: theme.custom.colors.darkGray2,
   fontSize: "14px",
-  ...theme.typography.body2,
+  ...theme.typography.p2,
   [theme.breakpoints.down("md")]: {
     ...theme.typography.subtitle3,
   },
@@ -75,9 +80,9 @@ const PreferencesPage: React.FC<Props> = () => {
             divider={true}
             key={subscriptionItem.id}
             secondaryAction={
-              <ListItemButton onClick={() => unsubscribe(subscriptionItem.id)}>
+              <StyledLink onClick={() => unsubscribe(subscriptionItem.id)}>
                 Unfollow
-              </ListItemButton>
+              </StyledLink>
             }
           >
             <ListItemText

From 6ea88469d2df0d1f60d4e378ef6f473b7951b4ca Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Mon, 29 Jul 2024 12:15:00 -0400
Subject: [PATCH 10/36] fixing typechecks

---
 .../test-utils/factories/percolateQueries.ts  |  2 ++
 .../pages/DashboardPage/PreferencesPage.tsx   | 24 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontends/api/src/test-utils/factories/percolateQueries.ts b/frontends/api/src/test-utils/factories/percolateQueries.ts
index 42c66642d2..c89e37ea7b 100644
--- a/frontends/api/src/test-utils/factories/percolateQueries.ts
+++ b/frontends/api/src/test-utils/factories/percolateQueries.ts
@@ -9,6 +9,8 @@ const percolateQuery: Factory<PercolateQuery> = (overrides = {}) => {
     original_query: {},
     query: {},
     source_type: SourceTypeEnum.SearchSubscriptionType,
+    source_description: "",
+    source_label: "",
     ...overrides,
   }
   return percolateQuery
diff --git a/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx b/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
index 0ed8070d95..edb0fcdef3 100644
--- a/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
@@ -7,17 +7,12 @@ import {
   Link,
   styled,
 } from "ol-components"
-import { Profile } from "api/hooks/profile"
 import { useUserMe } from "api/hooks/user"
 import {
   useSearchSubscriptionDelete,
   useSearchSubscriptionList,
 } from "api/hooks/searchSubscription"
 
-type Props = {
-  profile: Profile
-}
-
 const SOURCE_LABEL_DISPLAY = {
   topic: "Topic",
   unit: "MIT Unit",
@@ -37,11 +32,11 @@ const StyledLink = styled(Link)(({ theme }) => ({
 }))
 
 const TitleText = styled(Typography)(({ theme }) => ({
-  marginTop: "10px",
-  marginBottom: "10px",
+  marginTop: "20px",
+  marginBottom: "5px",
 
   color: theme.custom.colors.darkGray2,
-  ...theme.typography.h5,
+  ...theme.typography.subtitle1,
   [theme.breakpoints.down("md")]: {
     ...theme.typography.h5,
   },
@@ -51,13 +46,13 @@ const SubTitleText = styled(Typography)(({ theme }) => ({
   marginBottom: "10px",
   color: theme.custom.colors.darkGray2,
   fontSize: "14px",
-  ...theme.typography.p2,
+  ...theme.typography.body2,
   [theme.breakpoints.down("md")]: {
     ...theme.typography.subtitle3,
   },
 }))
 
-const PreferencesPage: React.FC<Props> = () => {
+const PreferencesPage: React.FC = () => {
   const { data: user } = useUserMe()
   const subscriptionDelete = useSearchSubscriptionDelete()
   const subscriptionList = useSearchSubscriptionList({
@@ -66,7 +61,6 @@ const PreferencesPage: React.FC<Props> = () => {
 
   const unsubscribe = subscriptionDelete.mutate
   if (!user || subscriptionList.isLoading) return null
-  console.log(subscriptionList.data[0])
 
   return (
     <>
@@ -75,7 +69,7 @@ const PreferencesPage: React.FC<Props> = () => {
         All topics, academic departments, and MIT units you are following.
       </SubTitleText>
       <FollowList>
-        {subscriptionList.data.map((subscriptionItem) => (
+        {subscriptionList?.data?.map((subscriptionItem) => (
           <ListItem
             divider={true}
             key={subscriptionItem.id}
@@ -87,7 +81,11 @@ const PreferencesPage: React.FC<Props> = () => {
           >
             <ListItemText
               primary={subscriptionItem.source_description}
-              secondary={SOURCE_LABEL_DISPLAY[subscriptionItem.source_label]}
+              secondary={
+                SOURCE_LABEL_DISPLAY[
+                  subscriptionItem.source_label as keyof typeof SOURCE_LABEL_DISPLAY
+                ]
+              }
             />
           </ListItem>
         ))}

From cae76c9a7c8f5d9319f3cc88ff902bab807b4c3c Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Mon, 29 Jul 2024 12:35:14 -0400
Subject: [PATCH 11/36] removing log

---
 frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
index 0507cf971c..48eb824d8a 100644
--- a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
@@ -296,7 +296,6 @@ const TabLabels = {
   [TabValues.PREFERENCES.toString()]: "Preferences",
   [TabValues.PROFILE.toString()]: "Profile",
 }
-console.log("TabLabels", TabLabels)
 const keyFromHash = (hash: string) => {
   const keys = Object.values(TabValues)
   const match = keys.find((key) => `#${key}` === hash)

From 0a3e82f5038d1dd20761e24b2283a97492922f52 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Mon, 29 Jul 2024 12:44:06 -0400
Subject: [PATCH 12/36] fixing typecheck

---
 learning_resources_search/serializers.py | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/learning_resources_search/serializers.py b/learning_resources_search/serializers.py
index a3c85c8525..c7878157d6 100644
--- a/learning_resources_search/serializers.py
+++ b/learning_resources_search/serializers.py
@@ -544,8 +544,9 @@ class PercolateQuerySerializer(serializers.ModelSerializer):
     Serializer for PercolateQuery objects
     """
 
-    source_description = serializers.ReadOnlyField()
-    source_label = serializers.ReadOnlyField()
+    source_description = serializers.CharField(read_only=True)
+
+    source_label = serializers.CharField(read_only=True)
 
     class Meta:
         model = PercolateQuery

From 70a41bbc184f30eec3271c7403d558bdaf430695 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Mon, 29 Jul 2024 12:48:53 -0400
Subject: [PATCH 13/36] fixing tests

---
 .../mit-open/src/pages/DashboardPage/Dashboard.test.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/Dashboard.test.tsx b/frontends/mit-open/src/pages/DashboardPage/Dashboard.test.tsx
index 0e6b9ff33e..acc6a70d58 100644
--- a/frontends/mit-open/src/pages/DashboardPage/Dashboard.test.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/Dashboard.test.tsx
@@ -230,9 +230,9 @@ describe("DashboardPage", () => {
     const tabPanels = await screen.findAllByRole("tabpanel", { hidden: true })
     // 1 for mobile, 1 for desktop
     expect(tabLists).toHaveLength(2)
-    expect(mobileTabs).toHaveLength(3)
-    expect(desktopTabs).toHaveLength(3)
-    expect(tabPanels).toHaveLength(3)
+    expect(mobileTabs).toHaveLength(4)
+    expect(desktopTabs).toHaveLength(4)
+    expect(tabPanels).toHaveLength(4)
     Object.values(DashboardTabLabels).forEach((label) => {
       const desktopLabel = within(desktopTabList).getByText(label)
       const mobileLabel = within(mobileTabList).getByText(label)

From 03ba1c4d5f66c74aec95b9480c75b7f5cd2def3f Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Mon, 29 Jul 2024 13:22:12 -0400
Subject: [PATCH 14/36] styling fix for mobile and preventing nav

---
 .../src/pages/DashboardPage/PreferencesPage.tsx       | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx b/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
index edb0fcdef3..940bda18d8 100644
--- a/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
@@ -37,9 +37,6 @@ const TitleText = styled(Typography)(({ theme }) => ({
 
   color: theme.custom.colors.darkGray2,
   ...theme.typography.subtitle1,
-  [theme.breakpoints.down("md")]: {
-    ...theme.typography.h5,
-  },
 }))
 
 const SubTitleText = styled(Typography)(({ theme }) => ({
@@ -74,7 +71,13 @@ const PreferencesPage: React.FC = () => {
             divider={true}
             key={subscriptionItem.id}
             secondaryAction={
-              <StyledLink onClick={() => unsubscribe(subscriptionItem.id)}>
+              <StyledLink
+                component="button"
+                onClick={(event) => {
+                  event.preventDefault()
+                  unsubscribe(subscriptionItem.id)
+                }}
+              >
                 Unfollow
               </StyledLink>
             }

From f922d49681c27038fd5d6dbece811ab22aeeae52 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Mon, 29 Jul 2024 13:31:56 -0400
Subject: [PATCH 15/36] removing bad prop

---
 frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx b/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
index 940bda18d8..d0e8b9dbe3 100644
--- a/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
@@ -72,7 +72,6 @@ const PreferencesPage: React.FC = () => {
             key={subscriptionItem.id}
             secondaryAction={
               <StyledLink
-                component="button"
                 onClick={(event) => {
                   event.preventDefault()
                   unsubscribe(subscriptionItem.id)

From a9caa588c010b4ce284081b11e57f2718b9a6d2d Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Mon, 29 Jul 2024 14:00:53 -0400
Subject: [PATCH 16/36] switching to settings page instead of preferences page

---
 .../src/pages/DashboardPage/DashboardPage.tsx | 50 +++++++++----------
 .../{PreferencesPage.tsx => SettingsPage.tsx} |  7 +--
 2 files changed, 27 insertions(+), 30 deletions(-)
 rename frontends/mit-open/src/pages/DashboardPage/{PreferencesPage.tsx => SettingsPage.tsx} (94%)

diff --git a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
index 48eb824d8a..a6bec42daf 100644
--- a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
@@ -39,7 +39,7 @@ import {
 } from "./carousels"
 import ResourceCarousel from "@/page-components/ResourceCarousel/ResourceCarousel"
 import UserListDetailsTab from "./UserListDetailsTab"
-import { PreferencesPage } from "./PreferencesPage"
+import { SettingsPage } from "./SettingsPage"
 
 /**
  *
@@ -286,15 +286,15 @@ const UserMenuTab: React.FC<UserMenuTabProps> = (props) => {
 enum TabValues {
   HOME = "home",
   MY_LISTS = "my-lists",
-  PREFERENCES = "preferences",
+  SETTINGS = "settings",
   PROFILE = "profile",
 }
 
 const TabLabels = {
   [TabValues.HOME.toString()]: "Home",
   [TabValues.MY_LISTS.toString()]: "My Lists",
-  [TabValues.PREFERENCES.toString()]: "Preferences",
   [TabValues.PROFILE.toString()]: "Profile",
+  [TabValues.SETTINGS.toString()]: "Settings",
 }
 const keyFromHash = (hash: string) => {
   const keys = Object.values(TabValues)
@@ -349,18 +349,18 @@ const DashboardPage: React.FC = () => {
             currentValue={tabValue}
             onClick={() => setUserListAction("list")}
           />
-          <UserMenuTab
-            icon={<RiNotificationLine />}
-            text={TabLabels[TabValues.PREFERENCES]}
-            value={TabValues.PREFERENCES}
-            currentValue={tabValue}
-          />
           <UserMenuTab
             icon={<RiEditLine />}
             text={TabLabels[TabValues.PROFILE]}
             value={TabValues.PROFILE}
             currentValue={tabValue}
           />
+          <UserMenuTab
+            icon={<RiNotificationLine />}
+            text={TabLabels[TabValues.SETTINGS]}
+            value={TabValues.SETTINGS}
+            currentValue={tabValue}
+          />
         </TabsContainer>
       </Card.Content>
     </ProfileSidebar>
@@ -381,18 +381,18 @@ const DashboardPage: React.FC = () => {
         label="My Lists"
         onClick={() => setUserListAction("list")}
       />
-      <TabButtonLink
-        data-testid={`mobile-tab-${TabValues.PREFERENCES}`}
-        value={TabValues.PREFERENCES}
-        href={`#${TabValues.PREFERENCES}`}
-        label="Preferences"
-      />
       <TabButtonLink
         data-testid={`mobile-tab-${TabValues.PROFILE}`}
         value={TabValues.PROFILE}
         href={`#${TabValues.PROFILE}`}
         label="Profile"
       />
+      <TabButtonLink
+        data-testid={`mobile-tab-${TabValues.SETTINGS}`}
+        value={TabValues.SETTINGS}
+        href={`#${TabValues.SETTINGS}`}
+        label="Settings"
+      />
     </TabButtonList>
   )
 
@@ -483,28 +483,28 @@ const DashboardPage: React.FC = () => {
                   )}
                 </TabPanelStyled>
                 <TabPanelStyled
-                  key={TabValues.PREFERENCES}
-                  value={TabValues.PREFERENCES}
+                  key={TabValues.PROFILE}
+                  value={TabValues.PROFILE}
                 >
-                  <TitleText role="heading">Preferences</TitleText>
+                  <TitleText role="heading">Profile</TitleText>
                   {isLoadingProfile || typeof profile === "undefined" ? (
                     <Skeleton variant="text" width={128} height={32} />
                   ) : (
-                    <div id="user-preferences">
-                      <PreferencesPage />
+                    <div id="user-profile-edit">
+                      <ProfileEditForm profile={profile} />
                     </div>
                   )}
                 </TabPanelStyled>
                 <TabPanelStyled
-                  key={TabValues.PROFILE}
-                  value={TabValues.PROFILE}
+                  key={TabValues.SETTINGS}
+                  value={TabValues.SETTINGS}
                 >
-                  <TitleText role="heading">Profile</TitleText>
+                  <TitleText role="heading">Settings</TitleText>
                   {isLoadingProfile || typeof profile === "undefined" ? (
                     <Skeleton variant="text" width={128} height={32} />
                   ) : (
-                    <div id="user-profile-edit">
-                      <ProfileEditForm profile={profile} />
+                    <div id="user-settings">
+                      <SettingsPage />
                     </div>
                   )}
                 </TabPanelStyled>
diff --git a/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
similarity index 94%
rename from frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
rename to frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
index d0e8b9dbe3..cede0a0bbf 100644
--- a/frontends/mit-open/src/pages/DashboardPage/PreferencesPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
@@ -44,12 +44,9 @@ const SubTitleText = styled(Typography)(({ theme }) => ({
   color: theme.custom.colors.darkGray2,
   fontSize: "14px",
   ...theme.typography.body2,
-  [theme.breakpoints.down("md")]: {
-    ...theme.typography.subtitle3,
-  },
 }))
 
-const PreferencesPage: React.FC = () => {
+const SettingsPage: React.FC = () => {
   const { data: user } = useUserMe()
   const subscriptionDelete = useSearchSubscriptionDelete()
   const subscriptionList = useSearchSubscriptionList({
@@ -96,4 +93,4 @@ const PreferencesPage: React.FC = () => {
   )
 }
 
-export { PreferencesPage }
+export { SettingsPage }

From cf7de0b94773b43fa2ef4af50acefe0b20c0854e Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Tue, 30 Jul 2024 10:20:43 -0400
Subject: [PATCH 17/36] adding tests for percolate match labels

---
 learning_resources_search/models_test.py | 119 +++++++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 learning_resources_search/models_test.py

diff --git a/learning_resources_search/models_test.py b/learning_resources_search/models_test.py
new file mode 100644
index 0000000000..96790cd237
--- /dev/null
+++ b/learning_resources_search/models_test.py
@@ -0,0 +1,119 @@
+import pytest
+
+from channels.factories import ChannelFactory
+from learning_resources_search.factories import PercolateQueryFactory
+
+
+@pytest.mark.django_db()
+def test_percolate_query_unit_labels(mocker, mocked_es):
+    mocker.patch(
+        "learning_resources_search.indexing_api.index_percolators", autospec=True
+    )
+    mocker.patch(
+        "learning_resources_search.indexing_api._update_document_by_id", autospec=True
+    )
+
+    ChannelFactory.create(search_filter="topic=Math", channel_type="topic")
+    ChannelFactory.create(search_filter="department=physics", channel_type="department")
+    unit_channel = ChannelFactory.create(
+        search_filter="offered_by=mitx", channel_type="unit"
+    )
+    original_query = {
+        "free": None,
+        "endpoint": "learning_resource",
+        "offered_by": ["mitx"],
+        "professional": None,
+        "certification": None,
+        "yearly_decay_percent": None,
+    }
+    query = PercolateQueryFactory.create(
+        original_query=original_query, query=original_query
+    )
+    assert query.original_url_params() == "offered_by=mitx"
+    assert query.source_label() == "unit"
+    assert query.source_description() == unit_channel.title
+
+
+@pytest.mark.django_db()
+def test_percolate_query_topic_labels(mocker, mocked_es):
+    mocker.patch(
+        "learning_resources_search.indexing_api.index_percolators", autospec=True
+    )
+    mocker.patch(
+        "learning_resources_search.indexing_api._update_document_by_id", autospec=True
+    )
+
+    topic_channel = ChannelFactory.create(
+        search_filter="topic=Math", channel_type="topic"
+    )
+    original_query = {
+        "free": None,
+        "endpoint": "learning_resource",
+        "topic": ["Math"],
+        "professional": None,
+        "certification": None,
+        "yearly_decay_percent": None,
+    }
+    query = PercolateQueryFactory.create(
+        original_query=original_query, query=original_query
+    )
+    assert query.original_url_params() == "topic=Math"
+    assert query.source_label() == "topic"
+    assert query.source_description() == topic_channel.title
+
+
+@pytest.mark.django_db()
+def test_percolate_query_department_labels(mocker, mocked_es):
+    mocker.patch(
+        "learning_resources_search.indexing_api.index_percolators", autospec=True
+    )
+    mocker.patch(
+        "learning_resources_search.indexing_api._update_document_by_id", autospec=True
+    )
+
+    department_channel = ChannelFactory.create(
+        search_filter="department=physics", channel_type="department"
+    )
+    original_query = {
+        "free": None,
+        "department": ["physics"],
+        "professional": None,
+        "certification": None,
+        "yearly_decay_percent": None,
+    }
+    query = PercolateQueryFactory.create(
+        original_query=original_query, query=original_query
+    )
+    assert query.original_url_params() == "department=physics"
+    assert query.source_label() == "department"
+    assert query.source_description() == department_channel.title
+
+
+@pytest.mark.django_db()
+def test_percolate_query_search_labels(mocker, mocked_es):
+    mocker.patch(
+        "learning_resources_search.indexing_api.index_percolators", autospec=True
+    )
+    mocker.patch(
+        "learning_resources_search.indexing_api._update_document_by_id", autospec=True
+    )
+    ChannelFactory.create(search_filter="topic=Math", channel_type="topic")
+    ChannelFactory.create(search_filter="department=physics", channel_type="department")
+    ChannelFactory.create(search_filter="offered_by=mitx", channel_type="unit")
+    original_query = {
+        "q": "testing search filter",
+        "free": None,
+        "department": ["physics"],
+        "topic": ["math"],
+        "professional": None,
+        "certification": None,
+        "yearly_decay_percent": None,
+    }
+    query = PercolateQueryFactory.create(
+        original_query=original_query, query=original_query
+    )
+    assert (
+        query.original_url_params()
+        == "q=testing search filter&department=physics&topic=math"
+    )
+    assert query.source_label() == "saved search"

From f4be241e7e839d1e009b9d436394c0f05af02fc1 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Tue, 30 Jul 2024 10:31:53 -0400
Subject: [PATCH 18/36] adding tests for percolate match labels

---
 learning_resources_search/models_test.py | 35 ++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/learning_resources_search/models_test.py b/learning_resources_search/models_test.py
index 96790cd237..9d290d08c5 100644
--- a/learning_resources_search/models_test.py
+++ b/learning_resources_search/models_test.py
@@ -1,7 +1,42 @@
+from types import SimpleNamespace
+
 import pytest
 
 from channels.factories import ChannelFactory
+from learning_resources_search.connection import get_default_alias_name
+from learning_resources_search.constants import (
+    COURSE_TYPE,
+)
 from learning_resources_search.factories import PercolateQueryFactory
+from learning_resources_search.indexing_api import (
+    get_reindexing_alias_name,
+)
+
+pytestmark = [pytest.mark.django_db, pytest.mark.usefixtures("mocked_es")]
+
+
+@pytest.fixture()
+def mocked_es(mocker, settings):
+    """ES client objects/functions mock"""
+    index_name = "test"
+    settings.OPENSEARCH_INDEX = index_name
+    conn = mocker.Mock()
+    get_conn_patch = mocker.patch(
+        "learning_resources_search.indexing_api.get_conn",
+        autospec=True,
+        return_value=conn,
+    )
+    mocker.patch("learning_resources_search.connection.get_conn", autospec=True)
+    default_alias = get_default_alias_name(COURSE_TYPE)
+    reindex_alias = get_reindexing_alias_name(COURSE_TYPE)
+    return SimpleNamespace(
+        get_conn=get_conn_patch,
+        conn=conn,
+        index_name=index_name,
+        default_alias=default_alias,
+        reindex_alias=reindex_alias,
+        active_aliases=[default_alias, reindex_alias],
+    )
 
 
 @pytest.mark.django_db()

From 0b928b8732e7d098ae47409e427813ddb724dd5e Mon Sep 17 00:00:00 2001
From: Shankar Ambady <shanbady@gmail.com>
Date: Wed, 31 Jul 2024 09:02:15 -0400
Subject: [PATCH 19/36] Update learning_resources_search/models.py

Co-authored-by: Chris Chudzicki <christopher.chudzicki@gmail.com>
---
 learning_resources_search/models.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/learning_resources_search/models.py b/learning_resources_search/models.py
index d7591b4c03..f33f264a54 100644
--- a/learning_resources_search/models.py
+++ b/learning_resources_search/models.py
@@ -41,7 +41,7 @@ def original_url_params(self):
         defined_params = {
             key: query[key] for key in query if query[key] and key not in ignore_params
         }
-        return unquote_plus(urlencode(defined_params, doseq=True))
+        return urlencode(defined_params, doseq=True)
 
     def source_label(self):
         original_query_params = self.original_url_params()

From f2e04afc38585c6187fe71be6472a1c12ea7b22d Mon Sep 17 00:00:00 2001
From: Shankar Ambady <shanbady@gmail.com>
Date: Wed, 31 Jul 2024 09:02:45 -0400
Subject: [PATCH 20/36] Update
 frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx

Co-authored-by: Chris Chudzicki <christopher.chudzicki@gmail.com>
---
 frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
index cede0a0bbf..81cb822da3 100644
--- a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
@@ -36,7 +36,7 @@ const TitleText = styled(Typography)(({ theme }) => ({
   marginBottom: "5px",
 
   color: theme.custom.colors.darkGray2,
-  ...theme.typography.subtitle1,
+  ...theme.typography.h5,
 }))
 
 const SubTitleText = styled(Typography)(({ theme }) => ({

From 28e5879103d8e34605ae4cbb20e7847e9204c6d7 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Wed, 31 Jul 2024 13:04:09 +0000
Subject: [PATCH 21/36] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 learning_resources_search/models.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/learning_resources_search/models.py b/learning_resources_search/models.py
index f33f264a54..546a1dbad4 100644
--- a/learning_resources_search/models.py
+++ b/learning_resources_search/models.py
@@ -1,4 +1,4 @@
-from urllib.parse import unquote_plus, urlencode
+from urllib.parse import urlencode
 
 from django.contrib.auth import get_user_model
 from django.db import models

From 05fcb28624fb24de2b9963ad69babe0d290e1fd3 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Wed, 31 Jul 2024 08:56:35 -0400
Subject: [PATCH 22/36] updating font size

---
 frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
index 81cb822da3..39ad91622c 100644
--- a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
@@ -17,7 +17,7 @@ const SOURCE_LABEL_DISPLAY = {
   topic: "Topic",
   unit: "MIT Unit",
   department: "MIT Academic Department",
-  "saved search": "Saved Search",
+  saved_search: "Saved Search",
 }
 
 const FollowList = styled(List)(() => ({
@@ -42,7 +42,7 @@ const TitleText = styled(Typography)(({ theme }) => ({
 const SubTitleText = styled(Typography)(({ theme }) => ({
   marginBottom: "10px",
   color: theme.custom.colors.darkGray2,
-  fontSize: "14px",
+  fontSize: theme.typography.p3,
   ...theme.typography.body2,
 }))
 

From 578fa1d79142e656d7dd5487791d70f9c4312e04 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Wed, 31 Jul 2024 08:57:04 -0400
Subject: [PATCH 23/36] snake casing 'saved search'

---
 learning_resources_search/models.py      | 2 +-
 learning_resources_search/models_test.py | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/learning_resources_search/models.py b/learning_resources_search/models.py
index 546a1dbad4..5a37efebc6 100644
--- a/learning_resources_search/models.py
+++ b/learning_resources_search/models.py
@@ -49,7 +49,7 @@ def source_label(self):
         if channels_filtered.exists():
             return channels_filtered.first().channel_type
         else:
-            return "saved search"
+            return "saved_search"
 
     def source_description(self):
         original_query_params = self.original_url_params()
diff --git a/learning_resources_search/models_test.py b/learning_resources_search/models_test.py
index 9d290d08c5..e921c3ae6e 100644
--- a/learning_resources_search/models_test.py
+++ b/learning_resources_search/models_test.py
@@ -151,4 +151,4 @@ def test_percolate_query_search_labels(mocker, mocked_es):
         query.original_url_params()
         == "q=testing search filter&department=physics&topic=math"
     )
-    assert query.source_label() == "saved search"
+    assert query.source_label() == "saved_search"

From aa045f16f80d80ec535776ac0db49566adc458c3 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Wed, 31 Jul 2024 08:58:15 -0400
Subject: [PATCH 24/36] switching to plainlist

---
 frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
index 39ad91622c..b32b23bedc 100644
--- a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import {
-  List,
+  PlainList,
   ListItem,
   ListItemText,
   Typography,
@@ -20,7 +20,7 @@ const SOURCE_LABEL_DISPLAY = {
   saved_search: "Saved Search",
 }
 
-const FollowList = styled(List)(() => ({
+const FollowList = styled(PlainList)(() => ({
   borderRadius: "4px",
   background: "#fff",
   padding: "0px",

From bee5e8cac3e05515bdb45d01078dca4f476c7b34 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Wed, 31 Jul 2024 09:13:16 -0400
Subject: [PATCH 25/36] style fixes

---
 .../mit-open/src/pages/DashboardPage/DashboardPage.tsx    | 8 ++++----
 .../mit-open/src/pages/DashboardPage/SettingsPage.tsx     | 7 +++----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
index a6bec42daf..5aa7889a6b 100644
--- a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
@@ -291,10 +291,10 @@ enum TabValues {
 }
 
 const TabLabels = {
-  [TabValues.HOME.toString()]: "Home",
-  [TabValues.MY_LISTS.toString()]: "My Lists",
-  [TabValues.PROFILE.toString()]: "Profile",
-  [TabValues.SETTINGS.toString()]: "Settings",
+  [TabValues.HOME]: "Home",
+  [TabValues.MY_LISTS]: "My Lists",
+  [TabValues.PROFILE]: "Profile",
+  [TabValues.SETTINGS]: "Settings",
 }
 const keyFromHash = (hash: string) => {
   const keys = Object.values(TabValues)
diff --git a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
index b32b23bedc..316c6957e4 100644
--- a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
@@ -24,7 +24,6 @@ const FollowList = styled(PlainList)(() => ({
   borderRadius: "4px",
   background: "#fff",
   padding: "0px",
-  margin: "0px",
 }))
 
 const StyledLink = styled(Link)(({ theme }) => ({
@@ -32,15 +31,15 @@ const StyledLink = styled(Link)(({ theme }) => ({
 }))
 
 const TitleText = styled(Typography)(({ theme }) => ({
-  marginTop: "20px",
-  marginBottom: "5px",
+  marginTop: "16px",
+  marginBottom: "8px",
 
   color: theme.custom.colors.darkGray2,
   ...theme.typography.h5,
 }))
 
 const SubTitleText = styled(Typography)(({ theme }) => ({
-  marginBottom: "10px",
+  marginBottom: "16px",
   color: theme.custom.colors.darkGray2,
   fontSize: theme.typography.p3,
   ...theme.typography.body2,

From 5a66e85aa0773feff0e593a12da634feeba66342 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Wed, 31 Jul 2024 09:47:24 -0400
Subject: [PATCH 26/36] using custom listitem element

---
 .../src/pages/DashboardPage/SettingsPage.tsx  | 87 +++++++++++++------
 1 file changed, 62 insertions(+), 25 deletions(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
index 316c6957e4..92e045da53 100644
--- a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
@@ -1,12 +1,5 @@
 import React from "react"
-import {
-  PlainList,
-  ListItem,
-  ListItemText,
-  Typography,
-  Link,
-  styled,
-} from "ol-components"
+import { PlainList, Typography, Link, styled } from "ol-components"
 import { useUserMe } from "api/hooks/user"
 import {
   useSearchSubscriptionDelete,
@@ -45,6 +38,55 @@ const SubTitleText = styled(Typography)(({ theme }) => ({
   ...theme.typography.body2,
 }))
 
+const ListItem = styled.li(({ theme }) => [
+  {
+    padding: "16px 32px",
+    display: "flex",
+    gap: "16px",
+    alignItems: "center",
+    border: `1px solid ${theme.custom.colors.lightGray2}`,
+    ":not(:last-child)": {
+      borderBottom: "none",
+    },
+    ":first-child, :last-child": {
+      borderRadius: "4px",
+    },
+  },
+])
+const _ListItemBody = styled.div({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  gap: "4px",
+  flex: "1 0 0",
+})
+const Title = styled.span(({ theme }) => ({
+  ...theme.typography.subtitle1,
+  color: theme.custom.colors.darkGray2,
+}))
+const Subtitle = styled.span(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.custom.colors.silverGrayDark,
+}))
+type ListItemBodyProps = {
+  children?: React.ReactNode
+  title?: string
+  subtitle?: string
+}
+const ListItemBody: React.FC<ListItemBodyProps> = ({
+  children,
+  title,
+  subtitle,
+}) => {
+  return (
+    <_ListItemBody>
+      {children}
+      <Title>{title}</Title>
+      <Subtitle>{subtitle}</Subtitle>
+    </_ListItemBody>
+  )
+}
+
 const SettingsPage: React.FC = () => {
   const { data: user } = useUserMe()
   const subscriptionDelete = useSearchSubscriptionDelete()
@@ -63,28 +105,23 @@ const SettingsPage: React.FC = () => {
       </SubTitleText>
       <FollowList>
         {subscriptionList?.data?.map((subscriptionItem) => (
-          <ListItem
-            divider={true}
-            key={subscriptionItem.id}
-            secondaryAction={
-              <StyledLink
-                onClick={(event) => {
-                  event.preventDefault()
-                  unsubscribe(subscriptionItem.id)
-                }}
-              >
-                Unfollow
-              </StyledLink>
-            }
-          >
-            <ListItemText
-              primary={subscriptionItem.source_description}
-              secondary={
+          <ListItem divider={true} key={subscriptionItem.id}>
+            <ListItemBody
+              title={subscriptionItem.source_description}
+              subtitle={
                 SOURCE_LABEL_DISPLAY[
                   subscriptionItem.source_label as keyof typeof SOURCE_LABEL_DISPLAY
                 ]
               }
             />
+            <StyledLink
+              onClick={(event) => {
+                event.preventDefault()
+                unsubscribe(subscriptionItem.id)
+              }}
+            >
+              Unfollow
+            </StyledLink>
           </ListItem>
         ))}
       </FollowList>

From 10120188a7eda5da5933835afcde3be5fba3ff98 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Wed, 31 Jul 2024 09:51:15 -0400
Subject: [PATCH 27/36] removing divider param

---
 frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
index 92e045da53..b551f7f3e4 100644
--- a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
@@ -105,7 +105,7 @@ const SettingsPage: React.FC = () => {
       </SubTitleText>
       <FollowList>
         {subscriptionList?.data?.map((subscriptionItem) => (
-          <ListItem divider={true} key={subscriptionItem.id}>
+          <ListItem key={subscriptionItem.id}>
             <ListItemBody
               title={subscriptionItem.source_description}
               subtitle={

From eba3e8b8fd3c2e11e1a09948cd68adb0d4c00055 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Wed, 31 Jul 2024 11:15:05 -0400
Subject: [PATCH 28/36] dropping support for comma-delim'd array params

---
 frontends/mit-open/src/common/utils.ts   | 4 +---
 learning_resources_search/models_test.py | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontends/mit-open/src/common/utils.ts b/frontends/mit-open/src/common/utils.ts
index 8f020c25d8..462ac1d428 100644
--- a/frontends/mit-open/src/common/utils.ts
+++ b/frontends/mit-open/src/common/utils.ts
@@ -1,9 +1,7 @@
 const getSearchParamMap = (urlParams: URLSearchParams) => {
   const params: Record<string, string[] | string> = {}
   for (const [key] of urlParams.entries()) {
-    const paramValues = urlParams.getAll(key)
-    const finalparams = paramValues.flatMap((p) => p.split(","))
-    params[key] = finalparams
+    params[key] = urlParams.getAll(key)
   }
   return params
 }
diff --git a/learning_resources_search/models_test.py b/learning_resources_search/models_test.py
index e921c3ae6e..70dcefb42b 100644
--- a/learning_resources_search/models_test.py
+++ b/learning_resources_search/models_test.py
@@ -149,6 +149,6 @@ def test_percolate_query_search_labels(mocker, mocked_es):
     )
     assert (
         query.original_url_params()
-        == "q=testing search filter&department=physics&topic=math"
+        == "q=testing+search+filter&department=physics&topic=math"
     )
     assert query.source_label() == "saved_search"

From 23e35a828a6b5237c3163fa1a42351e7d81cc09d Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Wed, 31 Jul 2024 11:20:00 -0400
Subject: [PATCH 29/36] removing broken style

---
 frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
index b551f7f3e4..582bafcec9 100644
--- a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
@@ -34,7 +34,6 @@ const TitleText = styled(Typography)(({ theme }) => ({
 const SubTitleText = styled(Typography)(({ theme }) => ({
   marginBottom: "16px",
   color: theme.custom.colors.darkGray2,
-  fontSize: theme.typography.p3,
   ...theme.typography.body2,
 }))
 

From 2108735802cb7704e2e4f1c33f5a1c2c90cd74f4 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Wed, 31 Jul 2024 11:27:45 -0400
Subject: [PATCH 30/36] fixing heading padding

---
 frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
index 5aa7889a6b..6b90be86b9 100644
--- a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
@@ -208,6 +208,7 @@ const TabPanelStyled = styled(TabPanel)({
 
 const TitleText = styled(Typography)(({ theme }) => ({
   color: theme.custom.colors.black,
+  paddingBottom: "16px",
   ...theme.typography.h3,
   [theme.breakpoints.down("md")]: {
     ...theme.typography.h5,

From b48ea135f18ef47c1980a031b0591dc67812e2c2 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Wed, 31 Jul 2024 11:33:59 -0400
Subject: [PATCH 31/36] remove defunct test

---
 frontends/mit-open/src/common/utils.test.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/frontends/mit-open/src/common/utils.test.ts b/frontends/mit-open/src/common/utils.test.ts
index fc9bec2138..a03b08387b 100644
--- a/frontends/mit-open/src/common/utils.test.ts
+++ b/frontends/mit-open/src/common/utils.test.ts
@@ -29,11 +29,4 @@ describe("getSearchParamMap", () => {
     const result = getSearchParamMap(urlParams)
     expect(result).toEqual({ topic: ["Leadership", "Business"] })
   })
-
-  it("should handle parameters with comma-separated values", () => {
-    const urlParams = new URLSearchParams()
-    urlParams.append("topic", "Leadership,Business,Management")
-    const result = getSearchParamMap(urlParams)
-    expect(result).toEqual({ topic: ["Leadership", "Business", "Management"] })
-  })
 })

From ed7ca31ee0c65a11e714866cffb54e274a9e696c Mon Sep 17 00:00:00 2001
From: Shankar Ambady <shanbady@gmail.com>
Date: Fri, 2 Aug 2024 13:27:15 -0400
Subject: [PATCH 32/36] Update
 frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx

Co-authored-by: Chris Chudzicki <christopher.chudzicki@gmail.com>
---
 .../mit-open/src/pages/DashboardPage/SettingsPage.tsx      | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
index 582bafcec9..c8f4a0a003 100644
--- a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
@@ -43,13 +43,10 @@ const ListItem = styled.li(({ theme }) => [
     display: "flex",
     gap: "16px",
     alignItems: "center",
-    border: `1px solid ${theme.custom.colors.lightGray2}`,
-    ":not(:last-child)": {
+    borderBottom: `1px solid ${theme.custom.colors.lightGray2}`,
+    ":last-child": {
       borderBottom: "none",
     },
-    ":first-child, :last-child": {
-      borderRadius: "4px",
-    },
   },
 ])
 const _ListItemBody = styled.div({

From 2e57307836b7cdcfc637dfb768c463afec7df801 Mon Sep 17 00:00:00 2001
From: Shankar Ambady <shanbady@gmail.com>
Date: Fri, 2 Aug 2024 13:27:28 -0400
Subject: [PATCH 33/36] Update
 frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx

Co-authored-by: Chris Chudzicki <christopher.chudzicki@gmail.com>
---
 .../mit-open/src/pages/DashboardPage/SettingsPage.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
index c8f4a0a003..6a2130f9e9 100644
--- a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
@@ -13,10 +13,10 @@ const SOURCE_LABEL_DISPLAY = {
   saved_search: "Saved Search",
 }
 
-const FollowList = styled(PlainList)(() => ({
-  borderRadius: "4px",
-  background: "#fff",
-  padding: "0px",
+const FollowList = styled(PlainList)(({ theme } ) => ({
+  borderRadius: "8px",
+  background: theme.custom.colors.white,
+  border: `1px solid ${theme.custom.colors.lightGray2}`,
 }))
 
 const StyledLink = styled(Link)(({ theme }) => ({

From 88600496f36bebd636c211db8d12f8c32130b9c6 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Fri, 2 Aug 2024 17:28:50 +0000
Subject: [PATCH 34/36] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
index 6a2130f9e9..032d512830 100644
--- a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
@@ -13,7 +13,7 @@ const SOURCE_LABEL_DISPLAY = {
   saved_search: "Saved Search",
 }
 
-const FollowList = styled(PlainList)(({ theme } ) => ({
+const FollowList = styled(PlainList)(({ theme }) => ({
   borderRadius: "8px",
   background: theme.custom.colors.white,
   border: `1px solid ${theme.custom.colors.lightGray2}`,

From 59a393b634dd1fb6fe983cf7bb2be5e66533ef34 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Fri, 2 Aug 2024 13:29:23 -0400
Subject: [PATCH 35/36] simplify check for null profile

---
 frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
index 6b90be86b9..6433bc8d9f 100644
--- a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx
@@ -501,7 +501,7 @@ const DashboardPage: React.FC = () => {
                   value={TabValues.SETTINGS}
                 >
                   <TitleText role="heading">Settings</TitleText>
-                  {isLoadingProfile || typeof profile === "undefined" ? (
+                  {isLoadingProfile || !profile ? (
                     <Skeleton variant="text" width={128} height={32} />
                   ) : (
                     <div id="user-settings">

From 2992f849879cbe4dc351b76f8ff0868613e148b7 Mon Sep 17 00:00:00 2001
From: shankar ambady <ambady@mit.edu>
Date: Fri, 2 Aug 2024 13:53:39 -0400
Subject: [PATCH 36/36] adding frontend tests

---
 .../pages/DashboardPage/SettingsPage.test.tsx | 66 +++++++++++++++++++
 .../src/pages/DashboardPage/SettingsPage.tsx  |  2 +-
 2 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 frontends/mit-open/src/pages/DashboardPage/SettingsPage.test.tsx

diff --git a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.test.tsx b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.test.tsx
new file mode 100644
index 0000000000..38812527f3
--- /dev/null
+++ b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.test.tsx
@@ -0,0 +1,66 @@
+import React from "react"
+import { SettingsPage } from "./SettingsPage"
+import { renderWithProviders, screen, within, user } from "@/test-utils"
+import { urls, setMockResponse, factories, makeRequest } from "api/test-utils"
+import type { LearningResourcesUserSubscriptionApiLearningResourcesUserSubscriptionCheckListRequest as CheckSubscriptionRequest } from "api"
+
+type SetupApisOptions = {
+  isAuthenticated?: boolean
+  isSubscribed?: boolean
+  subscriptionRequest?: CheckSubscriptionRequest
+}
+const setupApis = ({
+  isAuthenticated = false,
+  isSubscribed = false,
+  subscriptionRequest = {},
+}: SetupApisOptions = {}) => {
+  setMockResponse.get(urls.userMe.get(), {
+    is_authenticated: isAuthenticated,
+  })
+
+  const subscribeResponse = isSubscribed
+    ? factories.percolateQueries.percolateQueryList({ count: 5 }).results
+    : factories.percolateQueries.percolateQueryList({ count: 0 }).results
+  setMockResponse.get(
+    `${urls.userSubscription.check(subscriptionRequest)}`,
+    subscribeResponse,
+  )
+  const unsubscribeUrl = urls.userSubscription.delete(subscribeResponse[0]?.id)
+  setMockResponse.delete(unsubscribeUrl, subscribeResponse[0])
+  return {
+    unsubscribeUrl,
+  }
+}
+
+describe("SettingsPage", () => {
+  it("Renders user subscriptions in a list", async () => {
+    setupApis({
+      isAuthenticated: true,
+      isSubscribed: true,
+      subscriptionRequest: {},
+    })
+    renderWithProviders(<SettingsPage />)
+
+    const followList = await screen.findByTestId("follow-list")
+    expect(followList.children.length).toBe(5)
+  })
+
+  test("Clicking 'Unfollow' removes the subscription", async () => {
+    const { unsubscribeUrl } = setupApis({
+      isAuthenticated: true,
+      isSubscribed: true,
+      subscriptionRequest: {},
+    })
+    renderWithProviders(<SettingsPage />)
+
+    const followList = await screen.findByTestId("follow-list")
+    const unsubscribeButton = within(followList).getAllByText("Unfollow")[0]
+    await user.click(unsubscribeButton)
+
+    expect(makeRequest).toHaveBeenCalledWith(
+      "delete",
+      unsubscribeUrl,
+      undefined,
+    )
+  })
+})
diff --git a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
index 032d512830..2a135a5178 100644
--- a/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
+++ b/frontends/mit-open/src/pages/DashboardPage/SettingsPage.tsx
@@ -99,7 +99,7 @@ const SettingsPage: React.FC = () => {
       <SubTitleText>
         All topics, academic departments, and MIT units you are following.
       </SubTitleText>
-      <FollowList>
+      <FollowList data-testid="follow-list">
         {subscriptionList?.data?.map((subscriptionItem) => (
           <ListItem key={subscriptionItem.id}>
             <ListItemBody