MM-27009 - Show workflow duration

[cpoile]

Summary

• Does what it says.
• There isn't a convenient momentjs function for this (Duration missing features moment/moment#463), but it's just a bit of code to do what we want.

UX review questions:

• I assumed you wanted to hide leading 0's, like: 2h 3m 4s instead of 0d 2h 3m 4s.
• I also assumed you wanted to hide internal 0's, like: 1d 3m 4s instead of 1d 0h 3m 4s. Let me know if you want to show internal 0's. (Personally, I think we /should/ show the internal 0s -- it's less cognitive load.)

Looks like:

Ticket Link

• https://mattermost.atlassian.net/browse/MM-27014

[crspeller]

Do we have to show seconds? I think that might be more distracting then helpful.

[cpoile]

That's what it says in the UX prototype, and the ticket. @asaadmahmood?

[crspeller]

Code looks good. The only issue might be the sample rate on the seconds counter making it behave strangely if you are watching it. But I think we shouldn't have seconds.

Deferring to @itao and @asaadmahmood on the design question.

[asaadmahmood]

Duration looks good to me.

[agarciamontoro]

Great! 🎉

I left the nittiest nits you could imagine, of course nothing blocking. Also, I think I share Christopher Speller's feelings about the seconds.

[agarciamontoro]

Nit: can we do this here?

Suggested change

	const timerId = setInterval(() => tick(), 1000);
	const timerId = setInterval(tick, 1000);

[agarciamontoro]

Also, a nittier nit: can we make const oneSecond = 1000 or something similar and use it inside setInterval? I never know what units setInterval (or any other time-related function, for that matter) uses.

[cpoile]

Maybe it's good we're not designers. :P
I upped the res of the timer; the seconds shouldn't hiccup too badly, even if it falls close to the clock's second tick.