feat: add enrolling/observing/complete status indicators to experiment list

[mikewilli]

Because

• the status of each experiment is not indicated under the MyExperiments tab

This commit

• adds a status indicator for each experiment under the MyExperiments tab only
• indicates whether an experiment is Enrolling or Observing if it is live

Fixes #12006

[jaredlockhart]

Yeah I've also wondered what we should do about this. In theory this is nice because it doesn't take up much space, but we don't use colours like that anywhere else in the app so it's not clear what they mean. The clearest would be to use a new column, but things are already tightly packed. One thing we could do is use the icon that we use in the status tabs since that's already in use and the tabs act as a legend for what they each mean. Could try prepending the name with the icon, should take very little space?

[mikewilli]

Hm, I don't think the current tab icons cover everything -- we'd need to differentiate Live - Enrolling vs Live - Observing (which was the main point of this addition for me). If you think it's sufficient for most users to just have Live vs Complete then that could be an option, or at least a starting point.

And yes I agree the colors seem a bit isolated here, but could we carry them forward to the summary page timeline view to make it more cohesive? The current summary page uses a blue loader bar that changes to green when the experiment completes, so it's not entirely new to use colors.

[mikewilli]

Thanks for picking this up! I like that we were able to get the enrolling/observing into this, though a little sad that it needs to take up a second line. Could we consider showing enrolling/observing on the Live tab too? Maybe the format could be something like:

<icon> **experiment-slug-bold-link** ([enrolling|observing])

with the part in parentheses omitted for non-Live experiments, and the word indicating what the icon means relegated to a title/hover text.

What do you think?