Removes all usages of flag addEditStrategy and refactors code where
necessary.
This is only the first step of the cleanup. After this, there's still
lots of code to be removed. I've got a different PR that removes ~5k
lines of code (https://github.com/Unleash/unleash/pull/10105) that I
want to reach in pieces to make sure that everythnig works on the way
there.
Update the title of the insights / analytics page when the menu item
changes
While the side menu item has already changed, this change also updates
the page header and title.
Also fixes an error with a prop that shouldn't have been forwarded.
This is the first pass at the full lifecycle tiles. It adds the tile
header and current and historical median data.
I have also added large number handling to all the number instances in
the tile: in the header, the graph, and the median data. In doing so, I
exposed the algorithm we use in the PrettifyLargeNumber component.
Returning a react component isn't always a valid option (such as in the
chart). This does mean that you don't get a tooltip when you use the
function directly, but in things like the chart and the median
measurement that makes sense to me.
I've decided to return "No data" if the median days value is 0 or lower.
There's no data for historical medians yet, so I'm using the same number
for now.
<img width="1538" alt="image"
src="https://github.com/user-attachments/assets/72e6a90a-6b84-47ce-af02-59596a7ff91f"
/>
Adds aria label and description to the lifecycle trend charts
The label explains that it's a bar chart, which stage it's describing,
and
the number of flags in each category.
The description provides more information about the split between new
flags this week and older flags.
Adds lifecycle trend graphs to the insights page.
The graphs are each placed within their own boxes. The boxes do not have
any more information in them yet.
Also, because the data returned from the API is still all zeroes, I've
used mock data that matches the sketches.
Finally, the chart configuration and how it's split into a
LifecycleChart that lazy loads a LifecycleChartComponent is based on the
LineChart and LineChartComponent that we use elsewhere on the insights
page.
Light mode:
<img width="1562" alt="image"
src="https://github.com/user-attachments/assets/6dd11168-be24-42d4-aa97-a7a55651fa0e"
/>
We might want to tweak some colors in dark mode, but maybe not? 🤷🏼
Creates sections for the insights dashboard and moves charts around into
the same order as the sketches and into the right sections. There's no
charts for the top section (lifecycle currently) yet, and the sections
also don't have their own filters.
To make this re-ordering easier, I've also moved the previous insights
chart into a legacy file and set up a proxy component that handles
switching based on the flag.
Next step is separating the filters.
We're migrating to ESM, which will allow us to import the latest
versions of our dependencies.
Co-Authored-By: Christopher Kolstad <chriswk@getunleash.io>
This PR updates the tooltips for the health chart to also include
information on how healthy flags there are. The user could make this
calculation themselves before, but it'd require them to subtract the sum
of stale and potentially stale flags from the total. This makes it so
that they don't have to do the calculation.
I've also included a bar for the healthy flags in the overview, so that
it's easier to see how large a portion it is compared to the others.
Also: clean up some uses of the now-deprecated VFC.
**Upgrade to React v18 for Unleash v6. Here's why I think it's a good
time to do it:**
- Command Bar project: We've begun work on the command bar project, and
there's a fantastic library we want to use. However, it requires React
v18 support.
- Straightforward Upgrade: I took a look at the upgrade guide
https://react.dev/blog/2022/03/08/react-18-upgrade-guide and it seems
fairly straightforward. In fact, I was able to get React v18 running
with minimal changes in just 10 minutes!
- Dropping IE Support: React v18 no longer supports Internet Explorer
(IE), which is no longer supported by Microsoft as of June 15, 2022.
Upgrading to v18 in v6 would be a good way to align with this change.
TS updates:
* FC children has to be explicit:
https://stackoverflow.com/questions/71788254/react-18-typescript-children-fc
* forcing version 18 types in resolutions:
https://sentry.io/answers/type-is-not-assignable-to-type-reactnode/
Test updates:
* fixing SWR issue that we have always had but it manifests more in new
React (https://github.com/vercel/swr/issues/2373)
---------
Co-authored-by: kwasniew <kwasniewski.mateusz@gmail.com>
Loading state for
- charts (placeholder data, animation)
- user stats - loading skeleton animation
- empty flags stats
- kept other "stat" widgets as-is, usually not visible
