Library Viewing Modals + Context Menu

[mxc-maggiechen]

Notion ticket link

Unit Context Menu + CUD Modals

[Figma] https://www.figma.com/design/BVjAeCcvNSYMyaf9Vd9T6M/Extend-a-Family---Primary-Working-File?node-id=986-7956&p=f&t=iJzYmkscoomdnxy4-0

• Admin Stuff > Library Viewing

Implementation description

• Implemented context menu library unit sidebar
• Implemented the following modals for library viewing/courses page:
  • Create unit
  • Unpublish unit
  • Delete unit

Steps to test

Context menu is correctly implemented

1. Login into an administrator account
2. Go to the /course page
3. Hover over a unit element on the side bar
4. Click on the 3 dots button on the right side of the unit element

Expected result:

• A context menu should open with all of the menu items defined on the Figma file

Modals are correctly implemented

1. Login into an administrator account
2. Go to the /course page
   Follow the instructions below to open the implemented modals:

• Create unit modal: open the "Create Unit" button on the bottom of the unit sidebar
• Delete unit modal: open with the context menu
• Unpublish unit modal: open with context menu

Expected result:

• The correct modal should open, the modal is implemented according to the Figma file

Context menu and modals are only available for administrators

1. Login into a non-admin account
2. Go to the /course page

Expected result:

• The 3 dots button on the right side of the unit element that opens the context menu does not appear
• The "Create Unit" button does not appear

What should reviewers focus on?

• Please make sure the Figma design is correctly implemented
• This is a chunky ticket, I tried to break it up as much as I can, please let me know if the way things are organized doesn't make sense

Checklist

• My PR name is descriptive and in imperative tense
• My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
• I have run the appropriate linter(s)
• I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

[mxc-maggiechen]

I set it as 301px because 300px causes a weird horizontal scrollbar situation

[github-actions]

Visit the preview URL for this PR (updated for commit 27d145f):

https://extendafamily-7613e--pr112-maggie-cud-models-ewdkg6q6.web.app

_{(expires Fri, 04 Apr 2025 01:14:11 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: f8bb7b5cd838ab636347dc54fd0ab08ab3715d31}

[mxc-maggiechen]

Visit the preview URL for this PR (updated for commit 801f542):

https://extendafamily-7613e--pr112-maggie-cud-models-ewdkg6q6.web.app

(expires Mon, 31 Mar 2025 18:45:51 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: f8bb7b5cd838ab636347dc54fd0ab08ab3715d31

The preview here shows a very strange bug for the unit side bar. If you run this branch locally, it should look normal and according to figma.

Bugged deployed version

Normal local version

EDIT: RESOLVED BY 5c97766

[harishan-r]

Looks good!