Modal dialog component and styles

* Dialog header styles, message prop, add to SubscriptionToggle

* Button and close styles

* Rename BasicDialog to Dialog

* Style lint

* Pass MUI props through

* Update tests

* Copy update

* Dialog story state wrapper

* Copy update

* Changes requested - cleanup and aria label

* Remove follow confirmation dialog

frontends/mit-open/src/page-components/ArticleUpsertForm/ArticleUpsertForm.tsx

@@ -12,7 +12,7 @@ import {
   FormHelperText,
   Grid,
   TextField,
-  BasicDialog,
+  Dialog,
   styled,
 } from "ol-components"
 import * as Yup from "yup"
@@ -151,15 +151,15 @@ const ArticleUpsertForm = ({
           </Button>
         </FormControls>
       </FormFooter>
-      <BasicDialog
+      <Dialog
         open={confirmationOpen}
         onClose={toggleConfirmationOpen.off}
         title="Are you sure?"
         onConfirm={handleDestroy}
         confirmText="Yes, delete"
       >
         Are you sure you want to delete {article.data?.title}?
-      </BasicDialog>
+      </Dialog>
     </form>
   )
 }

frontends/mit-open/src/page-components/Dialogs/AddToListDialog.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from "react"
 import {
-  BasicDialog,
+  Dialog,
   Chip,
   MuiCheckbox,
   List,
   ListItem,
   ListItemButton,
   ListItemText,
   LoadingSpinner,
+  Typography,
   styled,
 } from "ol-components"
 
@@ -168,21 +169,6 @@ const useToggleItemInUserList = (resource?: LearningResource) => {
   return { handleToggle, isChecked, isAdding, isRemoving }
 }
 
-const StyledBasicDialog = styled(BasicDialog)`
-  .MuiDialog-paper {
-    width: 325px;
-  }
-
-  .MuiDialogContent-root {
-    padding: 0;
-  }
-`
-
-const Description = styled.div({
-  marginLeft: 20,
-  marginRight: 20,
-})
-
 const ResourceTitle = styled.span({
   fontStyle: "italic",
 })
@@ -231,16 +217,17 @@ const AddToListDialogInner: React.FC<AddToListDialogInnerProps> = ({
     dialogTitle = "Add to User List"
   }
   return (
-    <StyledBasicDialog
+    <Dialog
       title={dialogTitle}
       showFooter={false}
+      fullWidth
       {...NiceModal.muiDialogV5(modal)}
     >
       {isReady ? (
         <>
-          <Description>
+          <Typography variant="body1">
             Adding <ResourceTitle>{resource?.title}</ResourceTitle>
-          </Description>
+          </Typography>
           {listType === ListType.LearningPath ? (
             <Listing>
               <LearningPathToggleList
@@ -277,7 +264,7 @@ const AddToListDialogInner: React.FC<AddToListDialogInnerProps> = ({
       ) : (
         <LoadingSpinner loading={!isReady} />
       )}
-    </StyledBasicDialog>
+    </Dialog>
   )
 }
 

frontends/mit-open/src/page-components/ManageListDialogs/ManageListDialogs.tsx

@@ -7,7 +7,7 @@ import {
   Autocomplete,
   BooleanRadioChoiceField,
   FormDialog,
-  BasicDialog,
+  Dialog,
   styled,
   RadioChoiceField,
   MenuItem,
@@ -351,14 +351,14 @@ const DeleteLearningPathDialog = NiceModal.create(
       hideModal()
     }, [destroyList, hideModal, resource])
     return (
-      <BasicDialog
+      <Dialog
         {...NiceModal.muiDialogV5(modal)}
         onConfirm={handleConfirm}
         title="Delete Learning Path"
         confirmText="Yes, delete"
       >
         Are you sure you want to delete this list?
-      </BasicDialog>
+      </Dialog>
     )
   },
 )
@@ -380,14 +380,14 @@ const DeleteUserListDialog = NiceModal.create(
       hideModal()
     }, [destroyList, hideModal, userList])
     return (
-      <BasicDialog
+      <Dialog
         {...NiceModal.muiDialogV5(modal)}
         onConfirm={handleConfirm}
         title="Delete User List"
         confirmText="Yes, delete"
       >
         Are you sure you want to delete this list?
-      </BasicDialog>
+      </Dialog>
     )
   },
 )

frontends/mit-open/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.test.tsx

@@ -43,6 +43,7 @@ test("Shows subscription popover if user is NOT authenticated", async () => {
   setMockResponse.get(urls.userMe.get(), {}, { code: 403 })
   renderWithProviders(
     <SearchSubscriptionToggle
+      itemName="Test"
       searchParams={new URLSearchParams()}
       sourceType="channel_subscription_type"
     />,
@@ -68,6 +69,7 @@ test.each(Object.values(SourceTypeEnum))(
     })
     renderWithProviders(
       <SearchSubscriptionToggle
+        itemName="Test"
         searchParams={new URLSearchParams([["offered_by", "ocw"]])}
         sourceType={sourceType}
       />,
@@ -76,6 +78,7 @@ test.each(Object.values(SourceTypeEnum))(
       name: "Follow",
     })
     await user.click(subscribeButton)
+
     expect(makeRequest).toHaveBeenCalledWith("post", subscribeUrl, {
       source_type: sourceType,
       offered_by: ["ocw"],
@@ -97,6 +100,7 @@ test.each(Object.values(SourceTypeEnum))(
 
     renderWithProviders(
       <SearchSubscriptionToggle
+        itemName="Test"
         searchParams={new URLSearchParams([["offered_by", "ocw"]])}
         sourceType={sourceType}
       />,

frontends/mit-open/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react"
+import React, { useState, useMemo } from "react"
 import { getSearchParamMap } from "@/common/utils"
 import {
   useSearchSubscriptionCreate,
@@ -10,14 +10,14 @@ 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"
 
 const StyledButton = styled(Button)({
   minWidth: "130px",
 })
 
 type SearchSubscriptionToggleProps = {
+  itemName: string
   searchParams: URLSearchParams
   sourceType: SourceTypeEnum
 }
@@ -26,7 +26,8 @@ const SearchSubscriptionToggle: React.FC<SearchSubscriptionToggleProps> = ({
   searchParams,
   sourceType,
 }) => {
-  const [buttonEl, setButtonEl] = React.useState<null | HTMLElement>(null)
+  const [buttonEl, setButtonEl] = useState<null | HTMLElement>(null)
+
   const subscribeParams: Record<string, string[] | string> = useMemo(() => {
     return { source_type: sourceType, ...getSearchParamMap(searchParams) }
   }, [searchParams, sourceType])
@@ -41,6 +42,7 @@ const SearchSubscriptionToggle: React.FC<SearchSubscriptionToggleProps> = ({
   const unsubscribe = subscriptionDelete.mutate
   const subscriptionId = subscriptionList.data?.[0]?.id
   const isSubscribed = !!subscriptionId
+
   const unsubscribeItems: SimpleMenuItem[] = useMemo(() => {
     if (!subscriptionId) return []
     return [
@@ -52,8 +54,19 @@ const SearchSubscriptionToggle: React.FC<SearchSubscriptionToggleProps> = ({
     ]
   }, [unsubscribe, subscriptionId])
 
+  const onFollowClick = async (event: React.MouseEvent<HTMLElement>) => {
+    if (user?.is_authenticated) {
+      await subscriptionCreate.mutateAsync({
+        PercolateQuerySubscriptionRequestRequest: subscribeParams,
+      })
+    } else {
+      setButtonEl(event.currentTarget)
+    }
+  }
+
   if (user?.is_authenticated && subscriptionList.isLoading) return null
   if (!user) return null
+
   if (isSubscribed) {
     return (
       <SimpleMenu
@@ -66,21 +79,14 @@ const SearchSubscriptionToggle: React.FC<SearchSubscriptionToggleProps> = ({
       />
     )
   }
+
   return (
     <>
       <StyledButton
         variant="primary"
         disabled={subscriptionCreate.isLoading}
         startIcon={<RiMailLine />}
-        onClick={(e) => {
-          if (user?.is_authenticated) {
-            subscriptionCreate.mutateAsync({
-              PercolateQuerySubscriptionRequestRequest: subscribeParams,
-            })
-          } else {
-            setButtonEl(e.currentTarget)
-          }
-        }}
+        onClick={onFollowClick}
       >
         Follow
       </StyledButton>

frontends/mit-open/src/pages/ArticleUpsertPages/ArticleEditPage.test.tsx

@@ -4,7 +4,6 @@ import {
   screen,
   user,
   waitFor,
-  within,
 } from "../../test-utils"
 import type { Article } from "api"
 import { articles as factory } from "api/test-utils/factories"
@@ -100,16 +99,18 @@ describe("ArticleEditPage", () => {
     async ({ confirmed }) => {
       const article = factory.article()
       setup({ article })
-      const deleteButton = await screen.findByRole("button", { name: "Delete" })
 
+      const deleteButton = await screen.findByRole("button", { name: "Delete" })
       await user.click(deleteButton)
-      const dialog = await screen.findByRole("dialog", {
+
+      await screen.findByRole("heading", {
         name: "Are you sure?",
       })
-      const cancelButton = within(dialog).getByRole("button", {
+
+      const cancelButton = await screen.findByRole("button", {
         name: "Cancel",
       })
-      const confirmButton = within(dialog).getByRole("button", {
+      const confirmButton = await screen.findByRole("button", {
         name: "Yes, delete",
       })
       makeRequest.mockClear()

frontends/mit-open/src/pages/ChannelPage/ChannelPage.tsx

@@ -3,10 +3,10 @@ import { useParams } from "react-router"
 import { ChannelPageTemplate } from "./ChannelPageTemplate"
 import { useChannelDetail } from "api/hooks/channels"
 import FieldSearch from "./ChannelSearch"
-import {
-  type Facets,
-  type FacetKey,
-  type BooleanFacets,
+import type {
+  Facets,
+  FacetKey,
+  BooleanFacets,
 } from "@mitodl/course-search-utils"
 import { ChannelTypeEnum } from "api/v0"
 

frontends/mit-open/src/pages/ChannelPage/DefaultChannelTemplate.tsx

@@ -121,6 +121,7 @@ const DefaultChannelTemplate: React.FC<DefaultChannelTemplateProps> = ({
             <ChannelControls>
               {channel.data?.search_filter ? (
                 <SearchSubscriptionToggle
+                  itemName={channel.data?.title}
                   sourceType={SourceTypeEnum.ChannelSubscriptionType}
                   searchParams={urlParams}
                 />

frontends/mit-open/src/pages/ChannelPage/UnitChannelTemplate.tsx

@@ -159,6 +159,7 @@ const UnitChannelTemplate: React.FC<UnitChannelTemplateProps> = ({
                 <ChannelControls>
                   {channel.data?.search_filter ? (
                     <SearchSubscriptionToggle
+                      itemName={channel.data?.title}
                       sourceType={SourceTypeEnum.ChannelSubscriptionType}
                       searchParams={urlParams}
                     />