Skip to content

Fix(oncallschedule): Week draw edge cases and small rotation CSS

David O'Regan requested to merge 262852-adjsut-schedule-mobile-css into master

What does this MR do?

A small MVC for two issues:

Decide with UX how to adjust tiny shifts on large timeframes - as they are really tiny - maybe not to show name/avatar at all, as well as tooltips

To handle this we:

  • Handle the MVC 1 for mobile displays via text truncate and showing only a avatar when needed

Also, I think there is an issue with positioning shifts on WEEK's timeframe - it should be easier to see when each shift has a dedicated color

To handle this we:

  • Abstract the render / calculation logic to helpers for better spec coverage and handle any edge cases
  • Improve render time drastically by filtering the shift list and removing its reactivity
  • Handle weekly edge cases(24 hours, less than 24 hours) via a series of conditional checks

Known issues:

  1. Shifts that are less than or equal to 3 hours cannot be rendered on the weekly view as we return a maximum of 100 shifts per rotation on the backend , this will be looked at in a follow-up. We will either add a message for our users, lock this option or expand what the backend can return.
  2. ~~The backend for day shifts does not seem to return all available shifts, this is a ~bug AFAICT. I have asked for clarification for this via slack: https://gitlab.slack.com/archives/C011SEJ6SPR/p1613069995022900?thread_ts=1613002136.015500&cid=C011SEJ6SPR~~ => Fixed
  3. Rotation time selections are not respected currently as the grid renders in the users current timezone and not the timezone supplied to the rotation, this is a ~bug that will be fixed in a follow-up.

How/What to test

🇺🇦 This feature is behind the feature flag oncall_schedules_mvc and the minimal license is GitLab Premium 👀

To check Enable the feature flag:

  • Navigate to Operations => On-call Schedules or direct link is your_project/-/oncall_schedules e.g. http://127.0.0.1:3000/gitlab-org/gitlab-shell/-/oncall_schedules.
  • Click "Add schedule on empty state"
  • Add a base schedule
  • You will see a empty grid with no rotations
  • Click add a rotation
  • Add a rotation with a handful of members that have access to the current project and pick a start date / time
  • A rotation will be added
  • Each rotation will have a selection of assignee's drawn against the schedule/rotation data
  • Each rotation assignee can be hovered over to confirm their start / end time
  • These rotation items will dynamically resize depending on the screen size
  • Verify the rotation start / end times for the week view

This merge is part 4/4:

What Merge
Update oncall Apollo cache methods !52773 (merged)
Update oncall assignee colours !52839 (merged)
Add a base loader for grid changing !52917 (merged)
Update mobile CSS and week calculations 🤘

Screenshots (strongly suggested)

R1

Screenshot_2021-02-11_at_12.07.07

Screenshot_2021-02-11_at_12.07.14

Screenshot_2021-02-11_at_12.08.45

Screenshot_2021-02-11_at_12.09.06

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • [-] Label as security and @ mention @gitlab-com/gl-security/appsec
  • [-] The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • [-] Security reports checked/validated by a reviewer from the AppSec team

Related to #262852 (closed)

Edited by David O'Regan

Merge request reports