programs too

mitodl · Jan 22, 2025 · ab9b4e3 · ab9b4e3
1 parent 1a9ed05
commit ab9b4e3
Showing 1 changed file with 25 additions and 37 deletions.
diff --git a/frontend/public/src/components/EnrolledItemCard.js b/frontend/public/src/components/EnrolledItemCard.js
@@ -72,8 +72,7 @@ type EnrolledItemCardState = {
   submittingEnrollmentId: number | null,
   emailSettingsModalVisibility: boolean,
   runUnenrollmentModalVisibility: boolean,
-  programUnenrollmentModalVisibility: boolean,
-  menuVisibility: boolean
+  programUnenrollmentModalVisibility: boolean
 }
 
 export class EnrolledItemCard extends React.Component<
@@ -84,8 +83,7 @@ export class EnrolledItemCard extends React.Component<
     submittingEnrollmentId:             null,
     emailSettingsModalVisibility:       false,
     runUnenrollmentModalVisibility:     false,
-    programUnenrollmentModalVisibility: false,
-    menuVisibility:                     false
+    programUnenrollmentModalVisibility: false
   }
 
   toggleEmailSettingsModalVisibility = () => {
@@ -109,13 +107,6 @@ export class EnrolledItemCard extends React.Component<
     })
   }
 
-  toggleMenuVisibility = () => {
-    const { menuVisibility } = this.state
-    this.setState({
-      menuVisibility: !menuVisibility
-    })
-  }
-
   toggleProgramInfo = () => {
     const { toggleProgramDrawer, enrollment } = this.props
 
@@ -632,7 +623,6 @@ export class EnrolledItemCard extends React.Component<
 
   renderProgramEnrollment() {
     const { enrollment } = this.props
-    const { menuVisibility } = this.state
 
     const title = enrollment.program.title
     const certificateLinks = null
@@ -675,32 +665,30 @@ export class EnrolledItemCard extends React.Component<
                   </a>
                 </h2>
               </div>
-              <Dropdown
-                isOpen={menuVisibility}
-                toggle={this.toggleMenuVisibility.bind(this)}
-                id={`programEnrollmentDropdown-${enrollment.id}`}
+              <button
+                className="dropdown-toggle menu-button"
+                data-bs-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+                type="button"
+                id={`enrollmentDropdown-${enrollment.id}`}
               >
-                <DropdownToggle
-                  className="d-inline-flex unstyled dot-menu"
-                  aria-label={menuTitle}
-                >
-                  <span className="material-icons" title={menuTitle}>
-                    more_vert
-                  </span>
-                </DropdownToggle>
-                <DropdownMenu end>
-                  <span id={`unenrollButtonWrapper-${enrollment.id}`}>
-                    <DropdownItem
-                      className="unstyled d-block"
-                      onClick={() =>
-                        this.toggleProgramUnenrollmentModalVisibility()
-                      }
-                    >
-                      Unenroll
-                    </DropdownItem>
-                  </span>
-                </DropdownMenu>
-              </Dropdown>
+                <span className="material-icons" title={menuTitle}>
+                  more_vert
+                </span>
+              </button>
+              <ul className="dropdown-menu dropdown-menu-end">
+                <li className="dropdown-item">
+                  <button
+                    className="unenroll-btn unstyled d-block"
+                    onClick={() =>
+                      this.toggleProgramUnenrollmentModalVisibility()
+                    }
+                  >
+                    Unenroll
+                  </button>
+                </li>
+              </ul>
               {this.renderProgramUnenrollmentModal(enrollment)}
             </div>
             <div className="detail detail-program">