MPDX- 8231 - Announcements #1162

dr-bizz · 2024-10-30T12:35:40Z

Description

In this PR, I add the announcements to MPDX. There are two versions of announcements, Banners and Modals; I've added both.

You will also see that I have moved the <AlertBanner/> into the announcements component; this is because we don't want both showing at the same time, and we need to have an authenticated session to use GraphQL, where AlertBanner does not, meaning we can show an alert on all pages if we wanted to. AlertBanner will primarily be used to show an alert on the login page.

You will see that I also have to use font awesome, but as we only want it for this component, I load it just after the initial render and then remove it on unmount.

How to Test

The banners and modals should only show announcements that are in your language. See PR here: https://github.com/CruGlobal/mpdx_api/pull/2875.

I found it easier to test on local with a local version of the API running, as I can alter the DB quickly, but test as you prefer.

You will need to alter an existing announcement (which you haven't acknowledged) or create a new one.
If you need additional reference of what it should look like, you can go to old.stage-mpdx.org to see how it used to look.

Banner UI

Set up a banner announcement.
Ensure it is showing
Alter the start and end dates to test; it doesn't show outside the allotted window.
Ensure the title and body are showing
Test the banner styles to ensure the banner changes colour
Add actions and tests they show as expected. Actions with the style icon should display an icon; the other styles should change how the button looks.
Clicking the close button should acknowledge the banner, and it will not reappear. (I still need to work out how to un-acknowledge it, so you might need to create a new banner.)
The image doesn't show on the banner.

Modal UI

Set up a modal announcement.
Ensure it is showing
Alter the start date and end date to test it doesn't show outside the allotted window.
Ensure the title and body are showing
Test that the image is showing and is styled nicely
The announcement style shouldn't change the modal background, so you don't need to test.
Add actions and tests they show as expected. Actions with the style icon should display an icon; the other styles should change how the button looks.
Clicking the close buttons or outside the modal should acknowledge the banner, and it will not reappear. (I still need to work out how to un-acknowledge it, so you might need to create a new banner.)

Announcement Actions

The Go action should redirect the user to another page. And then acknowledge the announcement so it doesn't show again.
The AppealCreate action should open the create appeal modal, prefill details about the end-of-year appeal, and acknowledge the announcement.
The Track action should dispatch the announcement args to analytics and then acknowledge the announcement.

This PR will fail until I merge the API PR into production https://github.com/CruGlobal/mpdx_api/pull/2875.

Checklist:

I have given my PR a title with the format "MPDX-(JIRA#) (summary sentence max 80 chars)"
I have applied the appropriate labels. (Add the label "On Staging" to get the branch automatically merged into staging.)
I have requested a review from another person on the project

wrandall22 · 2024-10-30T13:03:01Z

Is there no Material icons that can substitute for these FA icons? It seems like a step backwards to re-introduce those icons. Is this the free or paid version of FA?

dr-bizz · 2024-10-30T13:34:04Z

Is there no Material icons that can substitute for these FA icons? It seems like a step backwards to re-introduce those icons. Is this the free or paid version of FA?

It's a free version. I can look into seeing if we can get MUI to work, but I was trying to avoid having to update all the announcement icon actions, as they are 337 of them.

They all look like they are using the aa-user-rating-{num} so we could use the material icons, but that would still require us to load in the material icons. I guess your comment is more referring to using FontAwesome rather than not wanting to load in third party icons.

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

wrandall22 · 2024-10-30T13:38:46Z

Ah, I assumed since the whole site was using Material icons already that we would have already loaded them.

wrandall22 · 2024-10-30T13:39:58Z

If we're using the free version of FA here, it is less of a concern. One of the benefits to moving to Material/React was dropping the dependency on a paid license of FA, in particular for non-Cru orgs.

canac

This looks great! I'll have to spend some time testing it, but the code and tests look really well-written and organized!

src/theme.ts

src/components/Announcements/AnnouncementAction/AnnouncementAction.tsx

src/components/Announcements/AnnouncementBanner/AnnouncementBanner.tsx

src/components/Announcements/Announcements.tsx

src/components/Announcements/AnnouncementAction/AnnouncementAction.test.tsx

src/components/Announcements/AnnouncementModal/AnnouncementModal.test.tsx

src/components/Announcements/Announcements.test.tsx

src/components/Announcements/Announcements.graphql

src/components/Announcements/Announcements.tsx

dr-bizz · 2024-10-30T18:17:52Z

@wrandall22 @canac should we use Material Icons instead of Font-Awesome? I'm okay with switching it. I guess one of the advantages of using material icons, is that it's in the MUI family, the only down side is we would have to update 337 rows in the DB, but this shouldn't take long.

canac · 2024-10-30T18:35:50Z

@dr-bizz It seems cleaner to just use Material Icons since that's what we're already using in this project. For the migration, do you have to create a mapping of icon names from MUI to FA? That kind of migration feels difficult. Also, will it be harder to make the MUI icons show up since it's an import instead of just adding the right classname?

canac

I couldn't find any issues during testing. Great work!

FYI, to undismiss announcements, I connected to the staging database and ran delete from "person_announcements" where "announcement_id" = 'xxx' and "user_id" = 'xxx'; It worked really well.

dr-bizz · 2024-10-30T19:59:16Z

I couldn't find any issues during testing. Great work!

FYI, to undismiss announcements, I connected to the staging database and ran delete from "person_announcements" where "announcement_id" = 'xxx' and "user_id" = 'xxx'; It worked really well.

This is great to know. It's weird that they used the word "person" instead of user. I think that is what threw me off finding the table.

I've messaged in slack about how we can use Material Icons

github-actions · 2024-10-31T14:31:55Z

Preview branch generated at https://MPDX-8231.d3dytjb8adxkk5.amplifyapp.com

github-actions · 2024-10-31T17:52:04Z

Bundle sizes [mpdx-react]

Compared against 9d15d74

Route	Size (gzipped)	Diff
`/_app`	381.67 KB	+5.94 KB
`/accountLists/[accountListId]`	267.13 KB	-1.42 KB
`/accountLists/[accountListId]/coaching/[coachingId]`	248.12 KB	-1.87 KB
`/accountLists/[accountListId]/contacts/flows/setup`	175.69 KB	-5.64 KB
`/accountLists/[accountListId]/reports/coaching`	248.07 KB	-1.87 KB
`/accountLists/[accountListId]/reports/designationAccounts`	242.18 KB	-2.09 KB
`/accountLists/[accountListId]/reports/donations/[[...contactId]]`	346.54 KB	-2.11 KB
`/accountLists/[accountListId]/reports/expectedMonthlyTotal/[[...contactId]]`	128.34 KB	-2.11 KB
`/accountLists/[accountListId]/reports/financialAccounts`	253.62 KB	-2.1 KB
`/accountLists/[accountListId]/reports/financialAccounts/[financialAccountId]`	120.11 KB	-2.1 KB
`/accountLists/[accountListId]/reports/financialAccounts/[financialAccountId]/entries`	292.76 KB	-2.11 KB
`/accountLists/[accountListId]/reports/partnerCurrency/[[...contactId]]`	135.52 KB	-2.11 KB
`/accountLists/[accountListId]/reports/partnerGivingAnalysis/[[...contactId]]`	133.99 KB	-2.11 KB
`/accountLists/[accountListId]/reports/salaryCurrency/[[...contactId]]`	135.52 KB	-2.11 KB
`/accountLists/[accountListId]/settings/admin`	135.31 KB	-2.1 KB
`/accountLists/[accountListId]/settings/integrations`	162.17 KB	-2.09 KB
`/accountLists/[accountListId]/settings/manageAccounts`	142.97 KB	-2.09 KB
`/accountLists/[accountListId]/settings/manageCoaches`	139.47 KB	-2.1 KB
`/accountLists/[accountListId]/settings/notifications`	137.15 KB	-2.1 KB
`/accountLists/[accountListId]/settings/organizations`	137.08 KB	-2.1 KB
`/accountLists/[accountListId]/settings/organizations/accountLists`	139.04 KB	-2.09 KB
`/accountLists/[accountListId]/settings/organizations/contacts`	135.83 KB	-2.09 KB
`/accountLists/[accountListId]/settings/preferences`	211.46 KB	-2.09 KB
`/accountLists/[accountListId]/tasks/[[...contactId]]`	146.01 KB	-1.44 KB
`/accountLists/[accountListId]/tools/appeals/appeal/[[...appealId]]`	218.12 KB	-1.97 KB
`/accountLists/[accountListId]/tools/fix/commitmentInfo/[[...contactId]]`	252.88 KB	-1.44 KB
`/accountLists/[accountListId]/tools/merge/contacts/[[...contactId]]`	122.95 KB	-1.18 KB
`/accountLists/[accountListId]/tools/merge/people/[[...contactId]]`	122.24 KB	-1.18 KB

Dynamic import	Size (gzipped)	Diff
`../src/components/Announcements/AnnouncementBanner/DynamicAnnouncementBanner.tsx -> ./AnnouncementBanner`	2.45 KB	added
`../src/components/Announcements/AnnouncementModal/DynamicAnnouncementModal.tsx -> ./AnnouncementModal`	2.71 KB	added
`../src/components/Contacts/ContactFlow/DynamicContactFlow.tsx -> ./ContactFlow`	58.83 KB	-5.65 KB
`../src/components/Contacts/ContactsList/DynamicContactsList.tsx -> ./ContactsList`	40.85 KB	-1.44 KB
`../src/components/Contacts/ContactsMap/DynamicContactsMap.tsx -> ./ContactsMap`	34.33 KB	-1.88 KB
`../src/components/Contacts/ContactsMap/DynamicContactsMapPanel.tsx -> ./ContactsMapPanel`	6.11 KB	-2.17 KB
`../src/components/Contacts/ContactsRightPanel/DynamicContactsRightPanel.tsx -> ./ContactsRightPanel`	135.34 KB	-1.44 KB
`../src/components/Shared/Filters/DynamicFilterPanel.tsx -> ./FilterPanel`	107.21 KB	-1.67 KB
`../src/components/Task/MassActions/EditTasks/DynamicMassActionsEditTasksModal.tsx -> ./MassActionsEditTasksModal`	97.6 KB	-1.95 KB
`../src/components/Task/Modal/Form/Complete/DynamicTaskModalCompleteForm.tsx -> ./TaskModalCompleteForm`	110.19 KB	-2.65 KB
`../src/components/Task/Modal/Form/DynamicTaskModalForm.tsx -> ./TaskModalForm`	118.31 KB	-2.65 KB
`../src/components/Task/Modal/Form/LogForm/DynamicTaskModalLogForm.tsx -> ./TaskModalLogForm`	148.96 KB	-2.65 KB
`../src/components/Tool/Appeal/Flow/DynamicContactFlow.tsx -> ./ContactFlow`	58.83 KB	-5.65 KB
`../src/components/Tool/Appeal/List/ContactsList/DynamicContactsList.tsx -> ./ContactsList`	40.85 KB	-1.44 KB
`../src/components/Tool/Appeal/Modals/AddAppealModal/DynamicAddAppealModal.tsx -> ./AddAppealModal`	42.79 KB	added
`../src/components/Tool/Import/Csv/DynamicCsvHeaders.tsx -> ./CsvHeaders`	42.02 KB	-1.3 KB
`../src/components/Tool/Import/Csv/DynamicCsvPreview.tsx -> ./CsvPreview`	54 KB	-1.3 KB
`../src/components/Tool/Import/Csv/DynamicCsvValues.tsx -> ./CsvValues`	38.91 KB	-1.3 KB

…E if it's on a page without apollo (login screen.)

…times. I also updated a colour on the new MPDX as it was slightly off from the MPDX logo

…o page)

…ing "show" class to banner.

…nd adding better support for admin entered GO arguments.

dr-bizz requested a review from canac October 30, 2024 12:37

canac reviewed Oct 30, 2024

View reviewed changes

src/components/Announcements/Announcements.graphql Outdated Show resolved Hide resolved

canac reviewed Oct 30, 2024

View reviewed changes

src/components/Announcements/Announcements.tsx Outdated Show resolved Hide resolved

canac reviewed Oct 30, 2024

View reviewed changes

src/components/Announcements/Announcements.tsx Outdated Show resolved Hide resolved

canac approved these changes Oct 30, 2024

View reviewed changes

dr-bizz added the Preview Environment Add this label to create an Amplify Preview label Oct 31, 2024

dr-bizz added 10 commits October 31, 2024 14:50

Showing the bare bones of announcements and only showing ALERT_MESSAG…

e523519

…E if it's on a page without apollo (login screen.)

Moving components into dynamicly loaded components to help with load …

52420c9

…times. I also updated a colour on the new MPDX as it was slightly off from the MPDX logo

Banner announcement actions (buttons, open appeal modal or navigate t…

679e76b

…o page)

Modal announcement

f131e8e

Slide banner in animation

a439476

Adding tests and updating GraphQL to use pagination in announcements

e1e4c6f

Simplifying removal of font-awesome and using useState to control add…

b494aca

…ing "show" class to banner.

Only fetch one announcement.

d34d1a0

Switching font awesome to material icons

92b7c16

Updating test to work with material icons and removing TODO comment a…

8362446

…nd adding better support for admin entered GO arguments.

dr-bizz force-pushed the MPDX-8231 branch from d8fa224 to 8362446 Compare October 31, 2024 18:50

dr-bizz merged commit 7fe882a into main Nov 1, 2024
17 of 18 checks passed

dr-bizz deleted the MPDX-8231 branch November 1, 2024 16:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MPDX- 8231 - Announcements #1162

MPDX- 8231 - Announcements #1162

dr-bizz commented Oct 30, 2024 •

edited

Loading

wrandall22 commented Oct 30, 2024

dr-bizz commented Oct 30, 2024 •

edited

Loading

wrandall22 commented Oct 30, 2024

wrandall22 commented Oct 30, 2024

canac left a comment

dr-bizz commented Oct 30, 2024

canac commented Oct 30, 2024

canac left a comment

dr-bizz commented Oct 30, 2024

github-actions bot commented Oct 31, 2024

github-actions bot commented Oct 31, 2024 •

edited

Loading

MPDX- 8231 - Announcements #1162

MPDX- 8231 - Announcements #1162

Conversation

dr-bizz commented Oct 30, 2024 • edited Loading

Description

How to Test

Banner UI

Modal UI

Announcement Actions

This PR will fail until I merge the API PR into production https://github.com/CruGlobal/mpdx_api/pull/2875.

Checklist:

wrandall22 commented Oct 30, 2024

dr-bizz commented Oct 30, 2024 • edited Loading

wrandall22 commented Oct 30, 2024

wrandall22 commented Oct 30, 2024

canac left a comment

Choose a reason for hiding this comment

dr-bizz commented Oct 30, 2024

canac commented Oct 30, 2024

canac left a comment

Choose a reason for hiding this comment

dr-bizz commented Oct 30, 2024

github-actions bot commented Oct 31, 2024

github-actions bot commented Oct 31, 2024 • edited Loading

Bundle sizes [mpdx-react]

dr-bizz commented Oct 30, 2024 •

edited

Loading

dr-bizz commented Oct 30, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024 •

edited

Loading