[RAM] UX: Scheduled snoozing rules

[mdefazio]

Summary

Provide the ability to snooze a rule or set of rules for a period of time, starting at a specific time and date with the option to make it recurring.

Latest video walkthroughs:
Video walkthrough Part I: Setting a schedule snooze on a rule
Video walkthrough Part II: Modifying a schedule and adding a relative snooze to rule with schedules
Video walkthrough Part III: Scheduling a snooze from the overflow menu'
Video walkthrough Part IV: Enabling and Disabling rules

Updated views

• Rule table now shows a column for Notify with the below possible states for the cell in that row
• Currently only supporting single rule editing of snooze / schedule snooze
• Snooze popover can be triggered from the notify cell, or from the row's overflow action menu

Mockups

Figma link

Rule Table Row states

Tooltips on snooze button

Popover states

Row action overflow menu

Rule Detail states

Currently snoozed

Snooze scheduled

[mdefazio]

Design update

I've updated the rule table mockups and created a walkthrough (2 parts). This is certainly still a work in progress, but will need feedback quickly to keep this on schedule for development.

cc/ @ryankeairns @katrin-freihofner @XavierM @Zacqary @pmuellr @gmmorris @mikecote @arisonl

Feedback/Requirements:

• Need to have the ability to add/manage multiple schedules to a rule
• After X occurrences is already coded in and built-in to the UI, so makes sense to move forward with that
• I should be able to add a relative snooze while also having a schedule snooze applied to a rule
• I should be able to delete or modify schedules I've added to a rule

Todo (this version):

• Show cancelling the current occurrence of a snooze but keeping the remaining schedule
• Show the snooze popover triggered from the overflow menu
• Show how a rule is enabled or disabled within the table and how that effects (scheduled) snoozing.

Future:

• Show the snooze popover from the bulk action menu
• Add a schedule from one rule to another

Videos

Part I: Setting a schedule snooze on a rule
Loom ~ 5min

Part II: Modifying a schedule and adding a relative snooze to rule with schedules
Loom ~ 5min

Part III: Scheduling a snooze from the overflow menu
Loom ~ 4min

[ryankeairns]

Feels simpler, yet still powerful enough to create some rather complex snooze logic. The context menu approach - as opposed to tabs - makes for a clear mental model, imo.

It's tempting to add more and more information to this table, but I think this is heading in a simpler direction by peeling a few things off and not indicating a status for each thing on every row. The overall scannability has improved and the quick/grouped filters help in the investigative flow, as well.

[mdefazio]

Added a video walkthrough (Part III) for the overflow menu as it pertains to snooze schedules. (Added to previous comment and top description)

[mdefazio]

@arisonl @XavierM @Zacqary @mikecote
Can you review please to make sure this is as expected and i'm not missing something? Currently coordinating the rule detail view updates with O11y and will post those designs shortly.

I know the discussion here will potentially require changes to these.

[Zacqary]

It looks like this doesn't actually exist in EUI:

Seems like this design is asking for an inline EuiDateRangePicker, but the only thing EUI can do is either a popover range picker:

Or a single inline datepicker:

I can try to hack something together that will use an inline <EuiDatePicker> to display the value of an <EuiDateRangePicker>, but it's possible that executing this design as-is might require modifications to EUI.

[mdefazio]

Thanks for noting this—I think I assumed you could show both even though there wasn't a specific example. I'll check with that team to see if there's a reason why that extra option isn't allowed.

It looks like we can add a class to the popover when inline is false (popperClassName). Perhaps we're simply able to override the (assuming absolute positioning) styles with this class? Hoping this would be minimal until EUI can add in that extra option (barring any glaring reason it's not there currently).

[Zacqary]

Welp I got it

It's kinda hacky but I got it

Here's a demo of the UX, handling focusing of the different dates in an intuitive way. Keyboard interaction is almost there, ran into a bug with typing in dates but I'll get there.

[gmmorris]

It's kinda hacky but I got it

:elasticheart: 😆

[Zacqary]

Ok so this bit right here:

That's gonna be tough. We have the capability to generate these strings using the rrule library, but unfortunately it's:

• A very large file size which makes it only economical to use on the server side and not the frontend
• Only in English, no i18n included

So if we were gonna do this we'd probably have to roll our own parser and i18nize it ourselves.

You'll notice though that even Google Calendar's custom recurrence UI doesn't even generate preview strings like this:

IMO the UI itself is expressive enough that as a user, I don't think I'd miss the descriptive strings too badly. What do you think @mdefazio?

[Zacqary]

Custom recurrence frequency wasn't spec'd in the UI but I thought I'd add it since we want capabilities like muting on the weekends:

Also copied Google Calendar's recurrence dropdown options:

[Zacqary]

I think we can generate these strings server-side with RRule but that doesn't solve the i18n problem.

[mdefazio]

@Zacqary Thanks for dropping this in.
How do the repeat dropdown options get internationalized? If I just choose 'Daily', i'm assuming that's more straightforward?

[Zacqary]

@mdefazio I internationalized them as best I could, there's Weekly on {weekday} and then I had to make 5 individual i18n values for Monthly on the first/second/third/fourth/last {weekday}. For Yearly on {date} I'm actually leaning on moment's i18n.

[mdefazio]

@Zacqary Makes sense and thanks for the update.

IMO the UI itself is expressive enough that as a user, I don't think I'd miss the descriptive strings too badly. What do you think

FWIW, I believe we backed off the custom route because of the added complexity to that summary.

Does it make more sense to say 'Every ...' vs 'Daily on', 'Weekly on', 'Monthly on'...

Every {day} (24th)
Every {weekday} (Monday)
Every {weekday1}, {weekday2}, {weekday3} (Monday, Tuesday, Wednesday)
Every week
Every month on {day}
Every {month} on {day}

Perhaps we can then also have:
Every other {weekday}
Every other week
Every other month on {day}
Every other {month} on {day}

Not sure what's easier for i18n

[mdefazio]

@JiaweiWu Updated the description to include tooltips for the snooze button and the 'indefinitely' state. Thanks for catching this.

[Zacqary]

Turns out I was able to i18nize these things with full customization support without too much effort.

Every {month} on {day}

This ends up being difficult but I'm able to get Every {x} year(s) on {month}{day} without too much trouble. Can keep working at it if need be though

[mdefazio]

This ends up being difficult but I'm able to get Every {x} year(s) on {month}{day} without too much trouble. Can keep working at it if need be though

@Zacqary I think this works. Let's wait for more feedback to see what changes need to happen.

Awesome work! Thanks for going the extra bit on this!

[elasticmachine]

Pinging @elastic/response-ops (Team:ResponseOps)

[mdefazio]

Closing this to clean up some issues: we have implemented the feature and will create another issue for follow-up improvements.