mattermost-plugin-playbooks icon indicating copy to clipboard operation
mattermost-plugin-playbooks copied to clipboard

Published 20 hours ago • verified publisher icon mattermost

Task Inbox

Open trilopin opened this issue 2 years ago • 5 comments

Summary

Taskinbox rescued from the last hackathon:

  • RHS is handled as it was done (before RDP)
  • feature behind playbooks experimental features
  • added e2e tests
  • added telemetry
  • change globalheader icon approach to use directly SVG icon (and avoid webapp exposing IconButton on window)

RHS is open above Run Details Page RHS, covering it. If you close tasks inbox RHS, RDP RHS will be shown.

This pr DOESN'T include some optimizations such as:

  • handle data through graphql to reduce payload
  • use global RHS
  • use CSS grid

Ticket Link

Nope

Checklist

  • [X] Telemetry updated
  • [X] Gated by experimental feature flag
  • [X] Unit tests updated

trilopin avatar Oct 03 '22 14:10 trilopin

@calebroseland & @iomodo, @trilopin and I worked together on this, so we thought we'd get a second review of this "feature branch merge".

lieut-data avatar Oct 07 '22 11:10 lieut-data

This is awesome @trilopin! Love the transition when a task is checked off 😍 Would be so awesome to have that in all checklist views!

I have a few requests for the task inbox:

  1. Can we make the run and checklist icons of the color rgba(63, 67, 80, 0.56). Right now they are too dark and prominent.
  2. Can we make the font-weight of the run name 600 or semi-bold? The checklist name can remain as is.
  3. Can we add 4px padding above and below the header row that contains the run name and checklist name? image
  4. Can we change the padding for the task container to top:16px, bottom:12px? Currently it seems to be 15px and 5px. Just looking to add some white space. image
  5. The filters button text changes to grey when you hover on it. It should stay blue. image
  6. The first item in the filters dropdown seems to be blue. It should have the center-channel-color. image

abhijit-singh avatar Oct 19 '22 11:10 abhijit-singh

I have a few requests for the task inbox:

  1. Can we make the run and checklist icons of the color rgba(63, 67, 80, 0.56). Right now they are too dark and prominent.

done, let me know if that code could match any of the existing variables (to avoid the random numbers) additionally, I've replaced two icons with the compass ones.However, I couldn't make it for the third. Could you please create the compass version of circle-small

  1. Can we make the font-weight of the run name 600 or semi-bold? The checklist name can remain as is.
  2. Can we add 4px padding above and below the header row that contains the run name and checklist name?
image

  1. Can we change the padding for the task container to top:16px, bottom:12px? Currently it seems to be 15px and 5px. Just looking to add some white space. image

  2. The filters button text changes to grey when you hover on it. It should stay blue. image done

  1. The first item in the filters dropdown seems to be blue. It should have the center-channel-color. image

this was already solved by @gbochora, it was a general problem with the dotmenu.

trilopin avatar Oct 21 '22 13:10 trilopin

Also, I noticed a significant delay while loading the task inbox, especially for the first time. Other than any optimization possible, I'm wondering if a loader or a skeleton screen (like we have for insights) would make sense here instead od showing No tasks? 2022-10-27 14 31 51

abhijit-singh avatar Oct 27 '22 09:10 abhijit-singh

Also, I noticed a significant delay while loading the task inbox, especially for the first time. Other than any optimization possible, I'm wondering if a loader or a skeleton screen (like we have for insights) would make sense here instead od showing No tasks?

Agree on this one, we have two challenges in perf (reduce payload and improve selectors/render) but the experience could improve with the loading skeleton while we are retrieving the data.

trilopin avatar Oct 27 '22 09:10 trilopin

New approach with react-infinite-scroller to avoid rendering all at once

https://user-images.githubusercontent.com/4096774/199942309-4f20c156-b17c-4589-8807-98572bfc0dac.mp4

trilopin avatar Nov 04 '22 09:11 trilopin

New approach with react-infinite-scroller to avoid rendering all at once

🤯

Wow, totally wasn't expecting this level of performance polish. Nice work!!

lieut-data avatar Nov 04 '22 15:11 lieut-data

  1. When I open the task inbox for the first time, it does not show some tasks, especially the overdue tasks which should be shown up top. They only come in after closing and opening again.

I left a couple of states without the right update-flow..Fixed

  1. (Non-blocking) There seems to be some truncation of the text even where it is not needed. When I inspected and removed the max-width: 43% property from the checklist name it seemed to work fine, but I could be missing something.

I've adjusted to 50% which seems far better. It's not perfect tho because if the checklist name is very long and the playbook name is very short it will be ellipsified anyways (more edge case than before).

  1. (Non-blocking) The task inbox RHS width seems to be behaving differently from the run details RHS in screen size ranging from around 1500px to 1600px. This looks slightly odd and is a little bit of an issue because 1536x864 is a common resolution.

I noticed this. The only solution that comes to my mind is to jump to @calebroseland's global RHS since it's really hard to match a hardcoded media-queried absolute positioning 400/500px with the minmax fr grid style in the RDP RHS. If this is important enough, we should use the new stuff.

trilopin avatar Nov 06 '22 17:11 trilopin

@calebroseland / @abhijit-singh, thoughts on merging this in time to deploy live tomorrow? I'd love to be able to get it in the hands of community behind the experimental flag and iterate as needed.

lieut-data avatar Nov 07 '22 01:11 lieut-data