This would be extremely useful not only for temporary alerts but for links to release notes and documentation of new functionality. We are making significant changes to Argo but have no way other than Slack or email to notify people.

1. Display separate boxes for each message.
2. Yellow border and exclamation point (fa-exclamation-circle []): EAAB01, fill is 10% transparency
3. Black 'x' (fa-remove (alias) []) on right side of box allows user to close the message after viewing it. Message will not display again during this session, but will appear the next time user logs in.
4. Secondary messages appear in a bulleted list below yellow boxes.

@astrid are you working on designs for how one sets/removes/changes these messages?

I am not. Is there a ticket for that, or should I put it in here?

I think putting it in here is fine.

I could probably start working on this mocking out some UI. Unless there is some generalized library tool we can use for this purpose (or we want to build one, which I think is not likely), I think it makes sense to put these messages in a simple local db table in argo, with a simple CRUD interface for admins to edit what's there, and a rails partial to show any active messages?

Sorry for the delay, I just created a design for the admin UI that creates/removes/changes the messages.

And Andrew approved.

@astridu does that indicate we can remove the "feedback" and "Indexer Backlog: $x" items from the header?

That just got cut off in the screen grab, but let me see if Indexer Backlog can be removed.

We want to keep Feedback, but you can remove 'Indexer Backlog'. Thanks!

@astridu currently the "Impersonate" button goes away if the user is impersonating another user and there is a message that shows who they are impersonating pops up. Can you say how the header bar should look while impersonating another user with the "Message alerts" addition?

Put the 'Impersonating...' link in place of 'Impersonate' in the dropdown and keep the down arrow to indicate you can click on that item to stop impersonating.

@astridu I'm not sure I understand. Should there be a submenu under that carret? Bootstrap 4, the UI toolkit we're using doesn't have support for nested dropdowns. https://getbootstrap.com/docs/4.5/components/dropdowns/

@astridu can you talk more about the behavior of the form?

• Should we be able to have more than one row open at a time?
• What happens if they hit cancel, should it allow them to come back to their changes or should it reset them?
• Does the calendar icon do anything?
• Is there a reason we don't allow expired messages to be removed?
• Should there be any confirmation dialogs (on save, cancel, or delete) ?
• Do we need to accommodate smaller screens (tablets, phones)?
• Have you chosen alternative text for icons for screen reader users?
• Is there a reason you edit the date as MM/DD/YYYY and then display it as YYYY-MM-DD?
• Should the date values have defaults? What should they be?
• Are there any constraints we should be placing on the values?
• What should it look like if they enter a very long message?

@jcoyne Re- submenu. If we can't do the submenu, then behavior should be:

1. User clicks on Impersonate under 'Admin'
2. 'Admin' menu is replaced with 'Impersonating......' link as it appears today. User won't be able to access Message alerts while impersonating.

@jcoyne Answers to your questions:
*Should we be able to have more than one row open at a time?
No

*What happens if they hit cancel, should it allow them to come back to their changes or should it reset them?
If they hit 'cancel', any changes they made won't be saved.

*Does the calendar icon do anything?
It would be nice if it opened a calendar UI so user can select date/month in the calendar, but this is a nice to have.

*Is there a reason we don't allow expired messages to be removed?
We just didn't see the need to do anything w/the expired messages, but I guess you could put x's next to them so the admin could delete them if s/he wanted to.

*Should there be any confirmation dialogs (on save, cancel, or delete) ?
Not for save or cancel, but for deleting active messages, it would be nice to have a 'Are you sure you want to delete this message?', but again, not mandatory since it's easy to create messages.

*Do we need to accommodate smaller screens (tablets, phones)?
No

*Have you chosen alternative text for icons for screen reader users?
alt text for pencil = edit
alt text for x = delete

*Is there a reason you edit the date as MM/DD/YYYY and then display it as YYYY-MM-DD?
For data entry, I think it's more intuitive to enter as MM/DD/YYYY, but it appears that it displays as YYYY first throughout Argo (I'm assuming for readability purposes in long lists that span multiple years).

*Should the date values have defaults? What should they be?
Yes. Start date = today's date, Expired date = 3 months from today's date

*Are there any constraints we should be placing on the values?
For the text, I think 1000 character max limit is sufficient.

*What should it look like if they enter a very long message?
It shouldn't be longer than 1000 characters, and the text field should be expandable if they need it.

@astridu sorry for all the questions. What about the time? Should this be at midnight pacific time? Do we need to indicate this anywhere?

Oops, and what do we display when there are no messages?

If there are no messages created yet, it would just be page title, sub title, and a 'create a message alert' button.

Yes, let's do midnight Pacific Time. I can add a note to the top of the page.

"Primary messages will appear in a yellow box at the top of the homepage. Secondary messages will appear below the yellow primary message boxes in a bulleted list. Max 1,000 characters per message. Message will display and expire on the dates specified below at 12:00am PT."

The top table is "active message alerts" but it should also display messages that are not active yet, right?

Yes, just title it 'Message alerts'. Thanks!

@astridu @andrewjbtw this is ready to be tested on argo-stage:

Sorry, am I too late to see this? I didn't see it on stage, but the screenshot looks good.

Can you make the text in the yellow box black so it's accessible?

Thanks!

This will go on stage this afternoon for review. But it's based on Blacklight 7 so that will need to go out for this to go out when it's all ready.

@astridu I'm pretty sure this contrast ratio is accessible: https://contrast-ratio.com/#%23856404-on-%23fff3cd

It's not AAA compliant, but I guess we're not aiming for that. In any case, can we change it to black because it looks better in black.

Yes.

is this done? If so, please close the ticket. If not - can it be attached to a PR (near bottom of PR in zenhub view)

Yes, it's done. Thanks!

The implementation for this is in #2045, it is still awaiting review by @andrewjbtw

It's on hold because we determined that we need to sort out permissions to restrict this to a small number of editors #2045 (comment)