1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-23 00:22:19 +01:00
Commit Graph

51 Commits

Author SHA1 Message Date
Thomas Heartman
cdeb515488
chore: removes extra border on collapse for the event timeline (#9270)
Fixes a small visual glitch where the event timeline panel (which
usually doesn't have a bottom border on the summary) would get a
bottom border during the collapsing animation.

This happens because to make the border act as we want, we switch
between using the summary's bottom border and the content's top
border, and I'd only updated one of the borders to respect the new
design.
2025-02-10 10:52:32 +01:00
Thomas Heartman
2b668bc5c8
fix: open/close animation on personal dashboard is choppy (#9253)
Extracts each panel into its own component for the personal dashboard.
This lets us use separate states for each panel, which in turn lets each
panel change its open / close state without causing the other panels to
re-render.

When you have a lot of flags and/or projects, the list to render becomes
very long, which causes performance problems, especially when you need
to rerender both flags and projects and the timeline whenever one of
them changes.

The problems were especially noticeable in Firefox for me. Even with
this, the event timeline is a little choppy. I suspect that's because of
it might take a long time to paint? But we can look into that later.

Also updates the dashboard state hook to let you only pass in the
flags/projects you want. We could extract this into three different
hooks that all use the same localhost key, but I'm not sure whether
that's better or worse 🤷🏼
2025-02-10 10:40:26 +01:00
Thomas Heartman
4f30ce7155
chore(1-3349): no border for event timeline / dropdowns to the right (#9252)
Removes the border between the accordion summary and its contents for
the event timeline, and moves dropdown selectors to the right to avoid
overcrowding on the left.


![image](https://github.com/user-attachments/assets/b0df4c11-8e61-46f8-b844-349a709bd4e9)
2025-02-07 11:11:54 +01:00
Thomas Heartman
61f8236711
chore: changes the panel title to "Event timeline" (#9245)
Keeps it consistent with the previous title for this component and
with what it's known as in the docs.
2025-02-06 15:30:27 +01:00
Thomas Heartman
56c9584bb6
feat: move timeline to panel (#9243)
Moves the event timeline to the personal dashboard from the header when
the `frontendHeaderRedesign` flag is active.

When the flag is active, it also:
- hides the event timeline and corresponding button in the header
- renders the environment selector next to the time selector instead of
at the other end of the header


![image](https://github.com/user-attachments/assets/cccd8f07-d42a-4180-807f-20937019442d)

---------

Co-authored-by: Nuno Góis <github@nunogois.com>
2025-02-06 13:55:59 +00:00
Tymoteusz Czech
0b68fff0b7
Personal dashboard - enterprise info banner (#8825)
Info banner for personal dashboard
2024-11-21 15:21:01 +01:00
Mateusz Kwasniewski
c1dcbde8d9
fix: welcome message with no name (#8588) 2024-10-30 10:11:10 +01:00
Mateusz Kwasniewski
a8d608792d
feat: track personal dashboard seen (#8539) 2024-10-25 09:29:14 +02:00
Thomas Heartman
a8206f5118
fix: handle loading states for project details for a single project (#8492)
This PR updates the use of references on the project details page to
handle the loading state for a single project.

Now, if a project is loading, it'll show skeleton loaders for the
relevant boxes:


![image](https://github.com/user-attachments/assets/a156cc88-e4bf-421a-8afe-2b46e26d5544)

I've also updated the state type we use for this to be more accurate. Shamelessly
stolen from Elm.

```ts
type RemoteData<T> = 
  | { state: 'error', error: Error } 
  | { state: 'loading' } 
  | { state: 'success', data: T } 
```

After refactoring: 

![image](https://github.com/user-attachments/assets/03d655de-1ab8-4289-9f0c-d158ede8e116)
2024-10-21 14:27:43 +02:00
Mateusz Kwasniewski
9b3529d7cb
fix: missing page titles (#8477) 2024-10-18 13:12:58 +02:00
Thomas Heartman
6b56f8ff89
chore: add descriptions to accordion headers (#8452)
This commits adds descriptions to the accordion headers in the
personal dashboard.


![image](https://github.com/user-attachments/assets/d7b7aeff-3a69-45f7-ab42-23228a49132b)
2024-10-15 13:14:18 +00:00
Thomas Heartman
abef5deaef
chore: remove all deprecated imports of act (#8398)
don't use `act` from `react-dom`. Instead, use act from `react`
directly, as advised by the deprecation notice.

This PR fixes all of the deprecated import warnings, updates some
testing libraries we use (and tests), and fixes one or two other
warnings.
2024-10-15 13:53:26 +02:00
Thomas Heartman
e4cfb29adc
refactor: front end code pt II (#8444)
This PR continues the refactoring of the front end code for dashboards. 

The main points are:
- Extracts the `ActionBox` component that we used in a lot of places.
There were some minor differences between the various incarnations, so
this also better aligns them.
- Extract other components (`AskOwnerToAddYouToTheirProject`,
`YourAdmins`)
- Move the `NeutralCircleContainer` into `SharedComponents`
- Delete the separate no content grid (this is now handled in projects
instead)
- extract my projects grid contents into a single function so that it's
easier to understand what content you get for what states

Here's all the states side by side:

![image](https://github.com/user-attachments/assets/c5abc406-7374-41e4-8ff6-d48fe61cd7c8)
2024-10-15 09:14:24 +00:00
Thomas Heartman
9d49070cee
refactor: refactor personal dashboard front end code pt1 (#8440)
This is the first step in refactoring the front end code for personal
dashboards.

At this point:
- extract `useDashboardState` to its own file
- extract my flags to its own file
- Rename `Grid.tsx` to `SharedComponents.tsx` as it contains more than
just the grid.
2024-10-14 13:51:23 +02:00
Thomas Heartman
5a036997dc
Revert "Refactor front end code pt 1 (#8438)"
This reverts commit 8c2ed5dc30.
2024-10-14 11:46:09 +02:00
Thomas Heartman
8c2ed5dc30
Refactor front end code pt 1 (#8438)
This PR is the first in the front end code refactoring. It moves My
Flags out into a separate file and includes some extra error handling
(such as if the name of the flag causes problems for the API).


![image](https://github.com/user-attachments/assets/5aec8f0c-de79-4b7d-b56b-42297b872ec5)
2024-10-14 11:45:37 +02:00
Thomas Heartman
32816f5abf
fix: handle narrow screens better (#8430)
This PR improves handling of narrow screens. It:
- makes the owner/roles row wrap when it needs to
- makes the lifecycle + metric selectors wrap when necessary
- makes the text for the empty chart wrap (and makes it text, not label)
2024-10-11 11:21:13 +02:00
Thomas Heartman
01b2a15b8a
fix: adjust the height of the flag section (#8426)
This commit adjusts the height of the flag section in the personal
dashboard, so that the chart doesn't cause scrolling on the widest
version.

Before:

![image](https://github.com/user-attachments/assets/32a30338-b647-4458-bc09-604e821b30c7)

After:

![image](https://github.com/user-attachments/assets/c4760900-ef1b-4c45-b8aa-f81dff2a3a55)

Also fixes some issues in regards to super big lists when it goes into
flex mode and makes the chart more responsive
2024-10-11 10:09:26 +02:00
Thomas Heartman
d944eff34c
refactor: use splash api to store splash state (#8422)
To avoid showing the key concepts screen to users every time they log
back in to Unleash (after logging out), store the state in the DB splash
table.

The reason we need to do this is that we clear localstorage on logging
out, so things like splash screens and certain other settings don't get
stored.
2024-10-11 09:19:29 +02:00
Thomas Heartman
74370468d1
fix: section sizes (#8423)
This PR fixes issues with section sizes including:
- Jank when they change suddenly
- Overflowing list of admins / events
- Short lists that should stretch to the height of their container.
2024-10-11 09:10:21 +02:00
Thomas Heartman
4c8aef58ae
fix: revert link changes (#8425)
Making them absolute appears to break them. Reverting to relative links.
2024-10-11 08:09:31 +02:00
Thomas Heartman
fcce0f852c
chore: track personal dashboard navigation (#8417)
This PR adds plausible tracking for navigating to items from the
personal dashboard.

It tracks:

- Navigating to projects from the list
- Navigating to projects from the onboarding screen
- Navigating to flags from the list
- Opening the key concepts dialog
2024-10-10 13:30:47 +02:00
Thomas Heartman
a5cfd2e80e
feat: handle cases where user has no flags (#8416)
This PR handles the cases where a user has no flags to display. There's
a few different ways this can happen:

1. The user has no project membership.
2. The user has projects, but no flags.

In the first case, we tell them to reach out to their admin.
In the second case, we tell them to go to one of their projects to
create a new flag.

User has no projects:

![image](https://github.com/user-attachments/assets/84b94044-3577-4009-97ae-ab709b94fc2e)


User has no flags:

![image](https://github.com/user-attachments/assets/d7fa2fcc-d758-4d7b-b986-376315150846)
2024-10-10 12:54:42 +02:00
Thomas Heartman
23b0401381
feat: make panels collapsible (#8395)
This PR makes the projects and flags panels collapsible. The panels are
expanded by default and can be collapsed by clicking on the panel
header. The state of the panels is saved in localstorage.

As part of this, it also:
- moves the flag exposure metrics next to the metric selectors
- fixes the alignment of the "no exposure" line


![image](https://github.com/user-attachments/assets/b41ca808-f5f0-4e17-8bb1-b1388256354d)

Line alignment:
before:

![image](https://github.com/user-attachments/assets/119320d6-d39d-4c34-815a-8a25c6856ad6)

after:

![image](https://github.com/user-attachments/assets/f5b0fe51-1cda-49f9-8b22-e03988429799)
2024-10-09 14:25:58 +02:00
Thomas Heartman
3f9278be92
fix: removes welcome message and updates view details button (#8385)
The welcome message doesn't provide much help, and the question mark was
confusing. This PR removes the message and changes the button to look
like a link.


![image](https://github.com/user-attachments/assets/f2039b7a-05c8-4353-8440-22786072d0db)
2024-10-08 12:28:41 +02:00
Thomas Heartman
8a7bf865d3
fix: handle project fetching error (#8375)
Work in progress
2024-10-08 08:46:14 +02:00
Thomas Heartman
67f036c0ab
feat: store dashboard state (#8382)
This PR stores the dashboard state (selected project and flag) in
localstorage so that you get taken back to the same project and flag
when you refresh the page or navigate away and back.

It also handles scrolling the selected items into view in case they're
below the fold.
2024-10-08 08:21:23 +02:00
Mateusz Kwasniewski
ec1fe6278a
feat: make personal dashboard UI more compact (#8359) 2024-10-03 16:20:45 +02:00
Thomas Heartman
f5c78605ed
refactor: use css grid for flags and no content grid (#8347)
This PR uses the new CSS grid layout for the flag grid and the no
content grid.

In doing so, it also improves how you use the grid item (giving them a
`gridArea` prop) and extracts the breakpoint handling so that all
sections that use breakpoints use the same breakpoints.

As with the previous PR, here's screenies of the same screen width, but
with open and closed sidebar:
Open:

![image](https://github.com/user-attachments/assets/2d41d412-5072-4c66-9a48-e7aa0d8cff45)

Closed:

![image](https://github.com/user-attachments/assets/994e3f2c-6f4c-4db1-9f10-e1d1a4d96540)
2024-10-03 07:54:27 +00:00
Mateusz Kwasniewski
739ad07798
refactor: extract my projects component (#8317) 2024-10-01 11:33:03 +02:00
Mateusz Kwasniewski
7ac283aa50
feat: skeleton loaders for personal dashboard (#8313) 2024-10-01 10:16:20 +02:00
Mateusz Kwasniewski
6d16fc60ce
feat: Personal dashboard flag created (#8305) 2024-09-30 16:09:31 +02:00
Thomas Heartman
50c5af8632
feat: hook up admin / owner data to UI (#8300)
This PR hooks up the owners and admins of Unleash to the UI. They'll
only be visible in cases where you have no projects.

In addition, it adds Orval schemas for the new payload properties and
updates the generating schemas to fix some minor typing issues.
2024-09-30 13:40:33 +00:00
Mateusz Kwasniewski
d7db80d948
feat: use onboarding status to conditionally show badge and message (#8304) 2024-09-30 15:30:18 +02:00
Mateusz Kwasniewski
ac90c942db
feat: add onboarding status to personal dashboard api (#8302) 2024-09-30 14:25:56 +02:00
Mateusz Kwasniewski
6f7170dc40
feat: open unleash concepts (#8301) 2024-09-30 13:32:05 +02:00
Mateusz Kwasniewski
f000579d5b
feat: adjust search query for personal project (#8296) 2024-09-27 15:23:00 +02:00
Mateusz Kwasniewski
147984f9d5
feat: display basic list of project events (#8291) 2024-09-27 14:02:30 +02:00
Thomas Heartman
6655b2d961
feat: create page for when you have no projects (#8285)
This adds a front end fallback screen for when you have no projects.


![image](https://github.com/user-attachments/assets/1e6e0a63-968a-43cf-84ee-9a67d9f0ca91)
2024-09-27 10:41:25 +02:00
Mateusz Kwasniewski
409e0e74ba
feat: read projects from personal dashboard API (#8279) 2024-09-26 14:17:47 +02:00
Thomas Heartman
d6f5280a98
feat: show user's roles and project owners (#8253)
This change shows the user's roles and project owners in the personal
dashboard.
2024-09-26 10:47:29 +00:00
Mateusz Kwasniewski
a1a24ea0b1
feat: flag exposure in personal dashboard (#8247) 2024-09-25 11:11:30 +02:00
Mateusz Kwasniewski
54432f3f31
feat: personal flag metrics display (#8232) 2024-09-24 13:47:21 +02:00
Mateusz Kwasniewski
fee2143edf
feat: Personal flags UI component (#8221) 2024-09-24 08:42:49 +02:00
Thomas Heartman
27c977dcf7
display setup complete message when project is onboarded (#8217)
This PR adds the new `ProjectSetupComplete` component (the name can be
changed) that we display when a project has been set up with a flag and
a connected SDK.

It uses the project overview to check the project's onboarding status.


![image](https://github.com/user-attachments/assets/9e7c5986-46ee-4aa1-9c35-a921f3402468)
2024-09-23 14:23:22 +02:00
Mateusz Kwasniewski
375395bba7
feat: welcome dialog with unleash concepts (#8199) 2024-09-20 15:53:03 +02:00
Mateusz Kwasniewski
87b997698b
feat: placeholder flag metrics chart (#8197) 2024-09-20 11:05:53 +02:00
Mateusz Kwasniewski
10ec2e7de5
feat: personal dashboard connect sdk (#8190) 2024-09-19 17:01:33 +02:00
Mateusz Kwasniewski
f66854a0f0
feat: personal dashboard project selection (#8188) 2024-09-19 15:25:11 +02:00
Mateusz Kwasniewski
70e95e66a8
feat: my projects ui stub (#8185) 2024-09-19 12:37:35 +02:00