1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-01 00:08:27 +01:00
Commit Graph

766 Commits

Author SHA1 Message Date
Thomas Heartman
993d87516d
fix: show "System" for system users, instead of "User ID n" where n is the project's number in the order. (#7734)
Fixes a bug introduced with the new tooltips where the system user was
shown as "User ID n" instead of "System". The "n" in this case is
actually the user's index number in the list of project owners
(including duplicates).

There's a few things happening: 
1. Change the object for system owners: use `name` instead of
`description`. At the same time, remove the `description` property
completely because it's not used at the moment.
2. Remove the assignnment of `id: objectId(user)` to the user sent to
the User Avatar component. This was a leftover from when we split out
the AvatarGroup component, and is not something we use anymore.

Before:

![image](https://github.com/user-attachments/assets/bd348daf-c81e-4ea9-b8a9-f10af71a0da7)

After:

![image](https://github.com/user-attachments/assets/d147f7c7-d683-43ac-9ee2-6116f155dad6)
2024-08-02 11:29:31 +00:00
Thomas Heartman
f1e95108d1
Wip: split out avatar group; use same tooltip for all avatars (#7681)
Extracts the Avatar Group component into a `common` component and adds a
standard tooltip to all avatars.

Relates to linear issue 1-2606

This is a suggestion / proof of concept for how we can solve it. While I
think we can merge this as is, I'd also be happy to take any discussions
on other ways to approach it etc.

## Why are these changes made together?

Because extracting the avatar group without adding the new tooltip data
made the existing tooltip misbehave (it'd show up in the top left of the
screen, not synced to the avatar in any way).

I probably could have (and still can if you think it's prudent) split it
out such that the avatar gets a standardized tooltip first (and disable
it for the group card avatars), and split out the avatars in a
follow-up. Happy to do that if you think it's better.

## What does this mean? 

It used to be that we had no consistent way of dealing with avatars and
tooltips. Some places had them, some places didn't. This change makes it
so that all avatars that we can show tooltips for will get the same
tooltip.

Previously, we had at least 4 different ways of dealing with tooltips:
- The HTML tooltip (that would be standardized with this PR) in the
project flags table

![image](https://github.com/user-attachments/assets/91098d31-a5e3-4091-9125-332fe5d106fd)
- The "title" that you'd get on your user avatar

![image](https://github.com/user-attachments/assets/39062b61-db8c-4bd5-9fa3-3ecc9bc192ee)
- The group card list tooltip

![image](https://github.com/user-attachments/assets/0d4a696a-e944-446c-8bff-4dcec02d8afb)
- And sometimes you'd get nothing at all

![image](https://github.com/user-attachments/assets/8975afaf-9ca1-4eb6-b443-9ab94b52bbd8)

with this change, we'll always show the same kind of tooltip if we can:


![image](https://github.com/user-attachments/assets/974c592c-c844-4b65-8a55-05e84d3df130)

## What goes in the tooltip? 

We use the `UserAvatar` component for a fair few different things and I
didn't want to extract separate components for all the different use
cases. Instead, I wanted to get an overview over what we use it for and
what is relevant info to show.

I found all the places we used it and tried to form an opinion. 

This tooltip will work with a user's email, name, username, and id. If
there is no user (such as for empty avatars and avatars displaying only
"+n" for remaining members), we show no tooltip.

Following the example set by the group card avatars, we'll try to use
email or username (in that order) as the main bit of text. If the user
has an email or a username and also a name, the name will be used as
secondary text.

If the user does not have an email or username, but has a name, we'll
use the name as the main text.

If the user does not have an email, a username, or a name, we'll try to
show "User ID: N" if they have an id.

If they do not have a username, a name, an email, or an ID, we bail out
and show nothing.

## Why can you disable the tooltip?

In some cases, you might want to disable the tooltip because you have
more information to feed into it. An example of that is in the project
flags table, where we want to show more information in cases where the
user is 'unknown':


![image](https://github.com/user-attachments/assets/758b4e86-e934-47e3-91ce-ce900f76bc54)


## Additional fixes

This PR also adds a few lines of CSS to fix a minor avatar layout bug.

Before:

![image](https://github.com/user-attachments/assets/0150efbf-c51a-40bb-898f-7ddd3565ce21)


After:

![image](https://github.com/user-attachments/assets/f337cf68-c572-4610-b1de-a27749325da8)
2024-08-01 10:45:24 +02:00
Thomas Heartman
2822746fc1
refactor: Make event log look and act like other pages (#7704)
Updates the way the event log works. Previously, we'd use the
`displayInline` parameter to disable padding and border. However,
recent pages (including project overview etc) have moved away from
this look.

By bringing the event log into line with how those other pages look,
it'll be easier to make designs for the new filtering capability align
with other Unleash filters.

## Changes

The eventlog is used in three places. In two of them, it used to not
have a separating border. However, when we look at other screens that
have seen recent work (such as feature flags), we see that they *do*
have a separator, so bringing the event log in line seems like a
reasonable change.

Project flags list (notice the separator):

![image](https://github.com/user-attachments/assets/9b56a53d-38ef-4492-b1f8-f40ad5f3b6eb)


Here's what they look like before and after the change:

### Global event log
Before: 

![image](https://github.com/user-attachments/assets/ccf428f6-3491-4c60-a853-13c50ae771f0)

After (no change):

![image](https://github.com/user-attachments/assets/cfc74538-285c-4565-bd38-dfb5e421e966)


### Project event log

Before:

![image](https://github.com/user-attachments/assets/80ef1a36-3b13-4e76-8d59-534d63f0e6bd)


After:

![image](https://github.com/user-attachments/assets/7380518c-f6dc-4d4f-b085-48ed3761bb20)


### Flag event log

Before:

![image](https://github.com/user-attachments/assets/345a5d72-d358-49fd-967c-f6cb0706a4f6)


After:

![image](https://github.com/user-attachments/assets/b4e0d8e9-e79c-477e-8fc4-181c366207fc)
2024-07-31 09:46:47 +02:00
Thomas Heartman
344e599b09
fix: don't cut off hover-color of favorite button (#7691)
This PR fixes a minor visual issue where the "favorite project" button's
hover outline would get cut off due to its container having `overflow:
hidden`.

The overflow value was introduced in
[#7575](https://github.com/Unleash/unleash/pull/7575) as way to handle
long project names. We didn't discover the hover issue back then because
it's not apparent unless you hover the fav star.

I found the solution in the CSS-tricks post [Preventing a Grid
Blowout](https://css-tricks.com/preventing-a-grid-blowout/). To quote
the article, the reason this works is that:

> the minimum width of a grid column is auto. (The same is true for flex
items, by the way.)
>
> And since auto is entirely based on content, we can say it is
“indefinitely” sized, its dimensions flex. If we were to put an explicit
width on the column, like 50% or 400px, then we would say it is
“definitely” sized.
>
> To apply our fix, we need to make sure that there is the column has a
definite minimum width instead of auto.

Before:

![image](https://github.com/user-attachments/assets/d9296afd-326e-4712-a389-f1bc3a1f821e)


After:

![image](https://github.com/user-attachments/assets/2fd88a51-08be-4bc4-8969-cd6ebbaf255c)

Additionally, I've removed a duplicate declaration of font size,
removing the deprecated version.
2024-07-29 17:03:47 +02:00
Thomas Heartman
1cd1f982ee
fix: allow editors to submit flag form (#7687)
This change is a follow-up to
https://github.com/Unleash/unleash/pull/7685 and fixes another
instance of the same issue.

It wasn't caught previously, because the permissions are passed as
props here, and not used directly.


![image](https://github.com/user-attachments/assets/e8c4cb90-92e3-42ca-9c15-458b5b9d37c2)
2024-07-29 09:45:52 +00:00
Thomas Heartman
80cff0a5fa
fix: allow editors to create flags again (#7685)
This change fixes a bug where editors were suddenly unable to create
flags. The issue is that the new project creation dialog used a
permission button, but didn't supply the project ID.
2024-07-29 09:24:32 +00:00
Thomas Heartman
a42970a153
fix: Avoid weird spacing between title and collab mode icon (#7683)
This change fixes an issue where the title of the project would be
pushed all the way to the right when the project was set to "private".

The cause was that the container with the project mode and the title
was a flex box with `justifyContent` set to `space-between`.

Removing that line fixes the issue, and the contents align to the
start of the box. There are no other elements in that container, so it
does not affect anything else.

Before:

![image](https://github.com/user-attachments/assets/e8024e3f-8c68-4ed8-b135-ae49f24664b4)


After:

![image](https://github.com/user-attachments/assets/c5039e59-4ea4-49bb-b391-89864e7520d0)
2024-07-29 08:18:52 +00:00
Thomas Heartman
3a3aaad37d
feat: Use a toggling button for impression data on/off (#7682)
Instead of using a dropdown list for impression data, this PR introduces
a new config button that is a switch type button. It will be filled
(contained) when impression data is on and will be outlined when
impression data is off.

Off:

![image](https://github.com/user-attachments/assets/4710c8aa-a853-43c3-bf3b-86dbbf1a2779)


On:

![image](https://github.com/user-attachments/assets/08316155-83d1-45a2-941f-1c49c254a02b)
2024-07-29 08:05:35 +00:00
Thomas Heartman
9b2c0bf55b
fix: shorten max project name width in feature toggles creation form (#7678)
This change sets the max project name label width to 20ch instead of
30ch.

At 30ch, the button is wide enough that it causes the buttons always
to overflow. At 20, it's about as wide as the impression data button,
and it renders on one line.


Before:

![image](https://github.com/user-attachments/assets/8d28a948-dfa1-4f75-bc8d-473ceb322631)

After:

![image](https://github.com/user-attachments/assets/c73ccc58-13ab-4b33-a82e-275130494c3d)
2024-07-26 12:08:58 +02:00
Thomas Heartman
39cda30dab
chore: update description/docs for the new feature creation dialog fields (#7677)
This PR updates the text used to describe the different fields used in
the new creation dialog.

It also removes a redundant aria attribute (that MUI already handles).
2024-07-26 09:57:22 +00:00
Thomas Heartman
c7bb6c5179
fix: prevent long project names from blowing out the form (#7673)
This change prevents long project names from blowing the form out of
proportion.

To do so, it:
1. sets `whitespace: no-wrap` on the button labels. Judging by the other
styles, this was the intention all along, but it didn't really come up
until now.

2. It also sets the label width for projects to 30ch,so that you'll get
to see quite a bit of the project name before it gets cut off.

It would be possible to set a dynamic width for this button based on the
longest project name, but I'm not sure it adds much value, so I'm
leaning towards keeping it simple.

Here's what the dynamic width would look like:

``` tsx
    const projectButtonLabelWidth = useMemo(() => {
        const longestProjectName = projects.reduce(
            (prev: number, type: { name: string }) =>
                prev >= type.name.length ? prev : type.name.length,
            0,
        );
        return `${Math.min(longestProjectName, 30)}ch`;
    }, [projects]);
```

What it looks like:

![image](https://github.com/user-attachments/assets/51bca3f6-aeb3-4a41-b57e-5ebd9baa3ef6)
2024-07-26 11:39:43 +02:00
Thomas Heartman
c0d7be040d
fix: make config dropdown list generic over values (#7676)
This PR makes the config dropdown list generic over its values, so that
you can pass stuff that isn't strings.

It also updates the existing impression data button to use booleans
instead.
2024-07-26 11:38:29 +02:00
Jaanus Sellin
b55d6f46d0
feat: add tags selection to feature creation (#7674)
![image](https://github.com/user-attachments/assets/539bd2a0-d036-4a8d-9752-fd60c7e4bf24)
2024-07-26 12:13:56 +03:00
Thomas Heartman
6e34ae4ada
fix: project icon sizing and color (#7672)
This PR fixes the project icon sizing and color in the create feature
form. However, it includes a little more cleanup work.

1. I've switched out the previous project icon with a new one. The
difference? The old one had lots of whitespace around it, which made
sizing it awkward.
2. I've added a wrapping Icon component to common. The idea was taken
from this thread on the MUI GitHub about how to make imported icons
behave consistently with MUI icons.
3. Because I've switched the icon and added a new component, I've also
gone and updated the other places we used the old icon, so that we're
consistent about the usage.

In create dialog form:

![image](https://github.com/user-attachments/assets/9b5caed7-cd50-437b-82bb-1d7ccbfaac3f)

Updated icon in:
Project card component

![image](https://github.com/user-attachments/assets/4ce809f4-4083-4554-ac4c-3597d9bf42df)


Project creation form

![image](https://github.com/user-attachments/assets/4227416f-a56d-41ed-96a4-99b71a11dbf7)


Sidebar and command bar (it's actually larger here, but maybe that's
okay? Previous project was kinda small):

![image](https://github.com/user-attachments/assets/72b8aa2e-6970-4c11-9a4d-250648b44ad9)

(Previous sidebar and command bar):

![image](https://github.com/user-attachments/assets/bcef9208-9819-4742-87a1-3a20d50d741c)


I'd be willing to leave the sidebar and command bar for now if we think
it's better to leave them using the same size as previously, but we can
talk about that. I think it's better in the sidebar; undecided about the
command bar.

Bonus changes: I fixed some typos
2024-07-26 10:26:16 +02:00
Thomas Heartman
d96da453a4
fix: show the selected project's name on the button, not its ID (#7671)
This change makes it so that we show the name of the project that is
selected on the selection button instead of the ID. There is a chance
that the name is not unique, but I'm willing to take that risk (plus
it's how we do it today).

I've used a useMemo for this, because we have to scan through a list
to find the right project. Sure, it's always a small list (less than
500 items, I should think), but still nice to avoid doing it every
render. Happy to remove it if you think it obfuscates something.

We *could* also use a `useState` hook and initialize it with the right
value, update when it changes, but I actually think this is a better
option (requires less code and less "remember to update this when that
changes").
2024-07-26 09:27:25 +02:00
Thomas Heartman
464568dace
fix: Hide project selection option in CreateFeatureDialog when OSS (#7669)
This change wraps the project selection option in the
CreateFeatureDialog in a conditional that hides it when Unleash is
OSS.

OSS doesn't have access to the project creation API, so there's no
point in showing this.
2024-07-25 17:59:47 +02:00
Thomas Heartman
2c41cbbd3c
fix: validate project names on blur (#7668)
This fix validates the project name when you blur the field in the new
project form. The only instances where it'll be wrong is if you have
just whitespace or an empty string, but you'll be notified immediately.

Also removes some unused variables and parameters that I found.
2024-07-25 12:43:38 +00:00
Jaanus Sellin
10489c7534
feat: added PoC for the new feature creation dialog (#7666)
![image](https://github.com/user-attachments/assets/82412746-34b3-48f2-95b1-1cdfdeb1ea72)
2024-07-25 15:12:48 +03:00
Thomas Heartman
eb7208025f
chore: create shared dialog form template (#7663)
This PR extracts the dialog form that we created for the new project
form into a shared component in the `common` folder.

Most of the code has been lifted and shifted, but there's been some
minor adjustments along the way. The main file is
`frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.tsx`.
Everything else is just cleanup.
2024-07-25 13:41:09 +02:00
Thomas Heartman
e2b90ae91d
fix: add workaround for tooltip (#7649)
This PR adds the UI part of feature flag collaborators. Collaborators are hidden on windows smaller than size XL because we're not sure how to deal with them in those cases yet.
2024-07-24 09:33:29 +00:00
Mateusz Kwasniewski
d1959dd0e2
feat: filter project flags by state (#7618) 2024-07-18 14:52:27 +02:00
Thomas Heartman
d7adee3f64
chore: fix project name overflow (#7575)
Fix overflow in long project names. Show ellipsis where it overflows.


![image](https://github.com/Unleash/unleash/assets/17786332/4723134b-b667-47ab-83e8-02cb3cda9093)


![image](https://github.com/Unleash/unleash/assets/17786332/7f4f0b5b-bc03-460d-8ba1-e0cda51e9a5c)


![image](https://github.com/Unleash/unleash/assets/17786332/8b6528f0-2ed8-4a26-9d22-42fa356583c8)
2024-07-11 10:00:38 +02:00
Tymoteusz Czech
f6c05eb877
API tokens - virtualized table (#7531)
API tokens table in both main list and project API tokens list can now
support more items - it doesn't slow the browser down if there is >500
items.
2024-07-09 13:22:55 +02:00
Mateusz Kwasniewski
2aea6e688c
feat: project limits ui (#7558) 2024-07-09 11:04:23 +02:00
Thomas Heartman
ef80d7f81e
ui limits for flags (#7541)
This PR disables the "create feature flag" button when you've reached
the limits.

This one is a little more complex than the other UI limits, because we
also have to take into account the project feature limit. I've tried to
touch as little as possible, but I _have_ extracted the calculation of
both limits into a single hook.
2024-07-08 10:27:01 +02:00
Tymoteusz Czech
1d7cd2e274
feat: update description on project deletion (#7539)
Improving the project deletion experience by adding information about
API keys and refining the messaging, making it easier to comprehend.
2024-07-05 11:07:47 +00:00
Mateusz Kwasniewski
e9b643761c
feat: Project limit UI (#7518) 2024-07-02 15:29:58 +02:00
Jaanus Sellin
e8511789fd
feat: command menu items can have description as tooltip now (#7455)
![image](https://github.com/Unleash/unleash/assets/964450/7a55a1a7-7aea-4f9c-96ac-46adf2edd36f)
2024-06-26 12:39:53 +03:00
Thomas Heartman
0af5bbad38
chore: remove createProjectWithEnvironmentConfig and newCreateProjectUI flags (#7429)
This PR removes the last two flags related to the project managament
improvements project, making the new project creation form GA.

In doing so, we can also delete the old project creation form (or at
least the page, the form is still in use in the project settings).
2024-06-24 12:53:55 +02:00
Nuno Góis
4736084e00
fix: check for permission in group access assignment (#7408)
Fix project role assignment for users with `ADMIN` permission, even if
they don't have the Admin root role. This happens when e.g. users
inherit the `ADMIN` permission from a group root role, but are not
Admins themselves.

---------

Co-authored-by: Gastón Fournier <gaston@getunleash.io>
2024-06-18 17:06:34 +01:00
Thomas Heartman
1f4126e495
fix: make rendering of new project form independent of rendering the project list (#7405)
This change takes the rendering of the new project form component and
puts in a child component of the project list, thereby
significantly speeding up the time it takes to render the form if you
have lots of projects (about to 10x for 50 projects on my machine).

The reason it was so slow before was that the open state of the form
component was stored in the project list component. This meant that
whenever you wanted to open or close the form, you'd have to rerender
the entire project list.

This change abstracts that process into the new ProjectCreationButton
component. This component takes care of checking the feature flag for
whether to render the dialog or to send the user to the old form, and
takes care of state management for the dialog.

Because this is a child component of the project list, it does not
cause rerenders of the entire project list.
2024-06-18 09:36:36 +02:00
Thomas Heartman
4c4d6e8aeb
chore: use new ScreenReaderOnly component in config buttons (#7352)
This PR uses the new ScreenReaderOnly component in existing code,
replacing custom code with a shared component.
2024-06-12 11:04:47 +02:00
Thomas Heartman
2191de7713
chore: disable filtering for unknown users (#7369)
This PR disables the filtering capability in the front end for unknown
users.

Modifying the back end to support filtering for unknown users is not
something we want to do yet. It's possible, but it requires adding a lot
of special cases to the handling code (refer to [PR
#7359](https://github.com/Unleash/unleash/pull/7359)), which we'd like
to avoid if possible. To avoid annoying cases where the filtering
doesn't work as expected and breaks user expectations, we're disabling
the filtering capability for unknown users in the front end.

We can consider whether to enable back-end results for unknown in the future if we get
user feedback that it's important.

This PR works by changing the avatar cell component. When the user has
id 0 (and is therefore unknown), we:
- set aria-disabled to true. This alerts users with assistive tech that
the button is disabled, but it doesn't take it out of the tab order, so
it's not mysteriously missing.
- change the tooltip text, telling users that they can't filter by
unknown users.
- disable the avatar callback function, so clicking on the avatar
doesn't do anything.

The accompanying tests assert this functionality.

I considered also updating the screen reader text, but I think that
would add more confusion or be more information than the user needs.
According to MDN's article on the [aria-disabled
attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled):

> [the aria-disabled] declaration will inform people using assistive
technologies, such as screen readers, that such elements are not meant
to be editable or otherwise operable.
2024-06-12 07:41:40 +00:00
Jaanus Sellin
3acb3ad2c2
feat: upgrade from react v17 to v18 (#7265)
**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>
2024-06-11 13:59:52 +03:00
Mateusz Kwasniewski
5225452bfd
fix: remove stale stats widget (#7353) 2024-06-11 12:39:24 +02:00
Thomas Heartman
3643016a0e
feat: filter by user when interacting with the avatar (#7347)
This PR lets you filter by flag creator by interacting with the user's
avatar.


Additionally, I've switched the custom popover for the standard tooltip
that we use elsewhere in the table. This gives the table a more cohesive
feel. As such, I have also deleted the component created in a previous
PR, because it's no longer in use anywhere.

It now looks like this (when tabbed to; notice the focus ring):


![image](https://github.com/Unleash/unleash/assets/17786332/d321d9df-0b17-49c3-bea7-89331df3f994)
2024-06-11 12:15:35 +02:00
Thomas Heartman
24c0976d56
feat: add popover to users in flags list (#7344)
This PR adds a popover to the user avatars in the flag list.

The popover is similar to the one used for projects and groups, but it
differs in a few ways:
- There's less padding. There's quite a lot of padding in the other
popovers, and it felt like too much for this table.
- It only shows one bit of text (the user's name/username/email). The
other popovers show email and name/username, but we don't have all that
information, so this is a stripped down version.

Flag list popover:

![image](https://github.com/Unleash/unleash/assets/17786332/6a86f638-ba6d-48e0-87e2-078b582697cf)

Group popover:

![image](https://github.com/Unleash/unleash/assets/17786332/d5fc7172-8fcb-4fac-87c4-05f211c0938c)

or if no email

![image](https://github.com/Unleash/unleash/assets/17786332/51955ead-849f-4bfc-81aa-e1852677647c)
2024-06-11 09:40:48 +02:00
Thomas Heartman
df3ca10a6d
chore: make the User Avatar size configurable (#7332)
This change makes the width of the user avatar configurable via a new
"avatarWidth" property.

It also sets the width to be `theme.spacing(3)` (currently 24px) for the
feature flag table.

It looks like this now:

![image](https://github.com/Unleash/unleash/assets/17786332/5e12ddad-234e-4e81-9eff-303b116991bb)

It used to look like this:


![image](https://github.com/Unleash/unleash/assets/17786332/357f7a52-7765-4f38-8700-c9884b6c49f0)
2024-06-10 12:43:27 +02:00
Mateusz Kwasniewski
7df1321128
test: filter by created by/author (#7307) 2024-06-06 13:20:38 +02:00
Mateusz Kwasniewski
a91b77a7ce
feat: filter by created by (#7306) 2024-06-06 12:59:11 +02:00
Mateusz Kwasniewski
2cc4b5faab
feat: display created by user in search (#7292) 2024-06-06 11:51:54 +02:00
Thomas Heartman
c129541df6
feat: adds information about project modes to the project creation form (#7250)
This change adds information about the project modes to the new
project creation form, using the tooltip for project creation modes.

In doing so, it updates the config button tooltip to accept extra
elements and adds styling for them.

What it looks like: 


![image](https://github.com/Unleash/unleash/assets/17786332/809fb48e-2404-416b-a867-6fa04978ccc1)

## a11y issues

This solution does present one problem: the popover doesn't get focus,
so it's impossible for you to scroll with only a keyboard. However, this
is something that's present in Unleash already, and not something that I
think would be easily solvable, so I don't think this is when we should
solve it.
2024-06-05 09:20:18 +02:00
Mateusz Kwasniewski
fef77c1fde
feat: filter by feature type (#7273) 2024-06-05 08:17:54 +02:00
Christopher Kolstad
0db5bc193f
task: upgraded semver dependency (and biome) (#7272)
Sorry for the extra noise here, but this seems to be the biome upgrade
altering formatting slightly.
2024-06-04 15:01:43 +02:00
Mateusz Kwasniewski
75529f465d
feat: clickable tags in project overview (#7263) 2024-06-04 11:08:38 +02:00
Thomas Heartman
048d604518
chore: update project overview to flags (#7247)
This PR changes the project screen by calling the main tab "flags"
instead of "overview". There isn't really an overview available on that
tab anymore, only a list of flags.
2024-06-04 09:35:17 +02:00
Thomas Heartman
de74faac46
chore: remove flag for new project cards (#7225)
This PR removes the flag for the new project card design, making it GA.

It also removes deprecated components and updates one reference (in the
groups card) to the new components instead.
2024-05-31 10:58:31 +02:00
Thomas Heartman
bea5929460
chore: remove project list split feature flags (#7224)
This PR removes all the feature flags related to the project list split
and updates the snapshot.

Now the project list will always contain "my projects" and "other
projects"
2024-05-31 10:38:23 +02:00
Thomas Heartman
f28989749b
fix: correctly align project card info when some cards have multi-line names (#7223)
This change updates the styling of the project card bodies so that
alignment of the project data (number of flags, members, health) stays
at the bottom of the project card body, even if some cards have longer
bodies than others. It also updates the icon placement so that it is
consistent even when the title is multi-line.

Before this change, the bottom row would be misaligned if some (but
not all) project cards on a row had names long enough to span multiple
lines. The project icon would also be misaligned

Before:

![image](https://github.com/Unleash/unleash/assets/17786332/1d1b99a3-263a-4472-8872-0ac59afd252b)

Misaligned project icon: 

![image](https://github.com/Unleash/unleash/assets/17786332/3b805728-c61d-409c-b293-45b37d096b45)



After:


![image](https://github.com/Unleash/unleash/assets/17786332/e81fcdbc-619a-4da3-a559-89af5acff656)

Icon alignment: 

![image](https://github.com/Unleash/unleash/assets/17786332/0e6f669f-1a25-4074-b8c0-6dbdcafbb828)
2024-05-31 10:37:51 +02:00
Thomas Heartman
abf4966a37
fix: handle overflowing avatars in the new project card (#7217)
This change prevents the project owner avatars in the new project card
footer from overflowing by making the number of avatars to show
configurable.

It defaults to 9, the old hard-coded number of avatars shown, but can
be configured.

The reason it overflows here is probably that the extra button in the
project card footer (the favorite) makes the footer smaller than what
we have for the group card footer.

Before: 

![image](https://github.com/Unleash/unleash/assets/17786332/972fe471-a78a-436a-a08d-18afefd2501e)

After:


![image](https://github.com/Unleash/unleash/assets/17786332/af569412-85e2-4b9b-97b8-12b91d372a70)
2024-05-30 12:01:17 +02:00
Thomas Heartman
1ac447141a
fix: handle long names in new project card footers (#7216)
This is a redo of #7215. I missed the case where you have multiple
owners, causing it to lay out weird in that case.

This version handles that by returning an empty div for the owners
instead to fill up that space.

![image](https://github.com/Unleash/unleash/assets/17786332/4d0944a8-988c-4507-a127-755bbda90921)


![image](https://github.com/Unleash/unleash/assets/17786332/14feee20-e1f7-4507-b53d-c70b7d2961dc)


There **are** edge cases where the owners wrap:

![image](https://github.com/Unleash/unleash/assets/17786332/159838e3-2ea1-4846-9d53-357b1377c8e0)


But that is also the case with the current implementation:

![image](https://github.com/Unleash/unleash/assets/17786332/3e3be245-5ca7-46d9-bb3f-a453c90b4b78)

And only happens at very specific breakpoints.
2024-05-30 10:59:44 +02:00
Thomas Heartman
669e21eef0
Revert "fix: handle long owner names for projects (#7215)"
This reverts commit 5c1cd49aaa.
2024-05-30 10:30:23 +02:00
Thomas Heartman
5c1cd49aaa
fix: handle long owner names for projects (#7215)
This change updates the new project card footer to better handle long
names. Previously, if a name was too long to fit on a single line,
it'd wrap. It didn't cause any layout shift, but it made the card look
off.

So instead of wrapping, we now truncate the name and add an ellipsis.

To achieve this, I changed the layout to grid instead of flexbox and
removed a nested flex container.

Before: 


![image](https://github.com/Unleash/unleash/assets/17786332/2074ac85-ce73-4292-beed-a3da05083a8d)

After:


![image](https://github.com/Unleash/unleash/assets/17786332/8302aae8-959f-4336-acd3-dbc207767d5a)

Other cards remain the same, as shown here (new code on left, old code
on right):


<img width="601" alt="image"
src="https://github.com/Unleash/unleash/assets/17786332/009c5d5d-3f9d-4640-86a1-3b6afcd04041">
2024-05-30 10:03:21 +02:00
Thomas Heartman
50c725e2a9
feat: add tooltips to new project creation form config buttons (#7213)
This PR adds tooltips to the new project creation form buttons to make
it clearer what they do. The tooltips tell you what the buttons do and
contains the same description that we use for docs.


![image](https://github.com/Unleash/unleash/assets/17786332/74667ff8-25b7-4daa-bb93-8938fe4e3dd2)

The tooltips will cover other buttons on narrow windows, but I think
that's an acceptable tradeoff


![image](https://github.com/Unleash/unleash/assets/17786332/9886f717-9db9-40bd-bd0b-0e6150896889)
2024-05-30 08:30:44 +02:00
Thomas Heartman
82d401be1b
fix: get rid of horizontal scrollbar on narrow screens in CreateProjectDialog (#7198)
This PR hides horizontal overflow in the dialog.

The pop-up docs that we have on small windows was causing a tiny bit of
overflow, giving us an annoying (and pretty useless) horizontal
scrollbar. We can hide that scrollbar by hiding horizontal overflow.
2024-05-29 08:55:11 +02:00
Thomas Heartman
0f3d93099d
fix: CR button shows docs for change requests when selected (#7196)
The props had been left out of the config button by mistake.

It also puts the CR table in a scrollable div that had been removed by
mistake.
2024-05-29 08:38:00 +02:00
Thomas Heartman
3aa7e89a3e
chore: fix button design on narrow screens for new project form (#7195)
This PR contains a few fixes for button designs on small screens for the
new project form.

It makes all buttons (config and actions) full-width and addresses some
sizing stuff.

It also caps the width of the stickiness button on non-small screens to
avoid shifting.




![image](https://github.com/Unleash/unleash/assets/17786332/83af0a1c-8eb0-4a6b-aa5c-491bbcfab8e9)
2024-05-29 08:37:52 +02:00
Thomas Heartman
06de5de85c
chore: code cleanup for new project form pt 2 (#7190)
This is the second part of the code cleanup job. It primarily consists
of breaking apart large files and organizing the code better
2024-05-29 08:10:47 +02:00
Thomas Heartman
ff377cd704
chore: new project dialog code cleanup 1 (#7113)
This PR implements some initial cleanup work for the new project
creation dialog.

The primary focus here is to remove unused props and to use the same
logic for the configuration buttons regardless of the content (mode,
stickiness, envs, change requests).
2024-05-28 14:01:59 +02:00
Mateusz Kwasniewski
029d43bbcc
feat: project insights out of beta (#7188) 2024-05-28 12:53:50 +02:00
Thomas Heartman
c8fa7e477a
chore: allow CR selection when no envs are enabled (#7183)
This PR allows you to configure change requests for all environments
when no environments are enabled explicitly. This is the default state
of the form and makes it so that you can configure CRs even if you want
all envs enabled.

Additionally, it preserves the case where you configure CRs for an
environment and then disable all envs.

This is logic only. It's not available in the UI yet.
2024-05-28 11:35:06 +02:00
Thomas Heartman
2c7a654860
fix: use a fixed-width button label for CR selector in new project creation form (#7179)
This change makes the button label for the CR selector in the new
project creation form have a fixed width. It adds a missing wrapper
element.
2024-05-28 09:48:30 +02:00
Thomas Heartman
2698ddf704
fix: change request environment selector button label (#7176)
This change makes it so that the button for change request
environments reads correctly when:
1. You have no envs configured: "Configure change requests"
2. One env configured: "1 environment configured"
3. More than one env configured: "`n` environments configured"
2024-05-28 08:40:58 +02:00
Thomas Heartman
5f3eae7035
chore: rename component to match file name and american spelling (#7174)
Renames the create project dialog component to match the name of the
file (both using the same spelling of dialog)
2024-05-28 08:30:11 +02:00
Thomas Heartman
be0f073b89
chore: fix create project form environment selector button width (#7175)
This commit sets the width of the environment selector button to a
fixed width (wide enough to display "all environments").
2024-05-28 08:22:58 +02:00
Thomas Heartman
cae3d78ced
fix: make CR button wider always (#7173)
This change makes the CR button wider when you have environments
selected, reducing the difference between "no environments" and "envs
configured" states, thereby reducing the difference in the layout.
2024-05-28 07:23:49 +02:00
Thomas Heartman
10155935ae
fix: minor UI adjustments (#7117)
This PR contains two small UI improvements for the new project creation
form:

1. Wrap the action buttons when necessary (so that they don't become
unavailable when the window gets narrow enough.)
2. Make the change request table scrollable horizontally, so that it can
still be configured on narrow windows.

---------

Co-authored-by: sjaanus <sellinjaanus@gmail.com>
2024-05-28 07:10:50 +02:00
Thomas Heartman
9a51f68f5f
chore: new create project dialog UI fixes (#7167)
This PR addresses several related fixes to the new project creation
dialog to prevent unnecessary growing and shifting:

- use a fixed width for the guidance sidebar
- use a fixed height for the guidance code snippet
- use a fixed height for the mobile guidance
- use a fixed width for the mode selector button
- cap description height

This is a little tricky because we don't want the changes for the dialog
to affect other forms. As such, I've added some new options you can use
when you create the guidance components / sidebar.
2024-05-28 07:10:34 +02:00
Jaanus Sellin
b3dd460d2f
chore: rename toggle to flag #7 (#7125) 2024-05-23 13:19:49 +03:00
Jaanus Sellin
29e7c4035d
chore: rename toggle to flag #4 (#7114) 2024-05-22 16:26:22 +03:00
Thomas Heartman
be4bb86b92
fix: add accessible descriptions to the dropdowns (#7112)
This PR adds accessible descriptions to the dropdown widgets in the new
project creation form. The description is the same as we show in the
background
2024-05-22 14:02:05 +02:00
Thomas Heartman
57f66f3b55
fix: prevent single-select lists from reopening when you select an item from the search bar (#7111)
We have this very specific edge case in the new project form
dropdowns. It only occurs for the single-select lists and only if you
select an item via search.

When the search input is non-empty, you can use enter to select the
first item in the list.

For some reason, this also triggers a click on the underlying button
that opens the dropdown (I'm guessing this is to do with an underlying
focus).

To work around it, we create a variable that prevents you from opening
the dropdown if it is true. We set it to 'true' when you close it (for
single-selects), but also set single-millisecond timeout that sets it
to false thereafter.

This is much to short for the user to notice anything, but it prevents
the browser from noticing the click.
2024-05-22 13:53:35 +02:00
Thomas Heartman
78fcdbf132
feat: show docs with icons in sidebar (#7109)
Adds icons to sidebar documentation and removes the link when you can't
interact with it.

I'm a little concerned that this won't be very accessible at the moment,
because we don't announce that anything has changed (i.e. there's no way
to find out that the text has changed if you can't see it), and the text
isn't labeled as describing anything. (this is being addressed in #7110
)


![image](https://github.com/Unleash/unleash/assets/17786332/2f482aa1-b74d-4b0f-97aa-2dbc1d1f82f9)

There's a few caveats to this:
1. we don't set a min height at the moment. I've avoided this because we
use the sidebar a number of other places and I wanted to touch as little
as possible. This means we can still get height adjustments
2. The new project icon doesn't have the same proportions as the mui
icons. This adds some additional jank. We should probably look at this,
though.
2024-05-22 13:45:47 +02:00
Thomas Heartman
688bac9f87
chore: update input field text sizes (#7107)
Make sure that the main input fields have enough space between them and
that their size is correct in both light and dark modes.
2024-05-22 13:26:22 +02:00
Thomas Heartman
4a46c8adbf
fix: set min-height on dropdown item list (#7106)
This ensures that the dropdown items without checkbox are the same
height as the dropdown items with checkbox.
2024-05-22 13:25:39 +02:00
Thomas Heartman
c47154b939
fix: make dialog the right height and make it scroll if it's smaller (#7103)
I've marked the project creation dialog as "compact", so that it's only
as tall as it needs to be.

However, by default, compact forms don't scroll because they have
overflow set to hidden. This is a problem on very short windows. To get
around this, I've set overflow to unset on compact forms.

I've also removed `min-height: 0` which has some weird side effects on
the centered dialog. Instead, I'm setting `min-height` to `unset` if
it's compact.


![image](https://github.com/Unleash/unleash/assets/17786332/e7d5db52-32d3-47d9-b31f-c73a5bb8e00f)

This task also uncovered some inconsistencies and some borders that only
show up sometimes, so I've removed them too.
2024-05-22 13:24:42 +02:00
Jaanus Sellin
2fb95339ef
chore: change toggle to flag #3 (#7101) 2024-05-22 09:58:53 +03:00
Thomas Heartman
14fd624faa
fix: don't send change request info unless using the new form (#7102)
I realized that, in an oversight, the form now shows and sends project
CR config, even if the new form isn't active. The API just ignores it if
it doesn't understand it, so it's not very harmful, but it's better if
we don't send it at all. This PR does that.

It does not actually test that change request info isn't included (but
it does test ID inclusion). This is because:
- change request info is only included if we're enterprise. The rendered
version of the hook isn't by default.
- Setting up module mocking and making it work seems like a lot of work
for a small gain, considering we're probably going to be removing the
old form anyway.
- I've tested it locally.

Also adds some testing for the hook related to name validation and
payload creation
2024-05-22 08:44:39 +02:00
Jaanus Sellin
8542cafc9f
chore: rename toggle to flag #2 (#7097) 2024-05-22 08:20:11 +03:00
Jaanus Sellin
8897f2ea75
chore: rename toggle to flag #1 (#7092)
Rename feature toggle to feature flag in the UI and code.
Starting with low hanging fruits.
Trying to keep these ~100 LoC.
2024-05-21 15:18:00 +03:00
Mateusz Kwasniewski
8a6daeee1e
refactor: replace useProject with useProjectOverview (#7087) 2024-05-20 15:15:24 +02:00
Mateusz Kwasniewski
ee92001bf5
fix: deprecate useProjectNameOrId (#7086) 2024-05-20 14:20:13 +02:00
Mateusz Kwasniewski
0537d3d5f6
feat: switch to hook without features list (#7085) 2024-05-20 13:52:21 +02:00
Jaanus Sellin
17e340ab40
feat: project level outdated sdks, project level banner (#7083)
At first, I was creating a new component, Project Banner, which was 90%
of the old banner and 10% new code, but it did not feel right. The
current banner is actually smart enough to be used in any container. So
now, I have moved the outdated SDK banner to the project level.

I like the simplicity of the change.


![image](https://github.com/Unleash/unleash/assets/964450/e57c1ace-e8f9-4866-a063-6f9ae561c6c0)
2024-05-20 14:15:39 +03:00
Mateusz Kwasniewski
659b3391c3
fix: refresh project after import (#7082) 2024-05-20 12:25:23 +02:00
Mateusz Kwasniewski
50ee7fa779
fix: new strategy using default strategy (#7075) 2024-05-20 09:50:44 +02:00
andreas-unleash
9fc01233c6
fix: disable the create button when api call is made (#7063)
Prevends duplicate calls to api

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
2024-05-16 10:52:12 +03:00
andreas-unleash
28ca626bac
fix: loading is causing a glitch that changes the size of the dialog for a split second (#7062)
The loading state of the FormTemplate is causing the form glitch. This
fixes it by removing the loading

Closes #
[1-2362](https://linear.app/unleash/issue/1-2362/fix-visual-glitch-when-you-submit-the-form)


https://github.com/Unleash/unleash/assets/104830839/1782ca09-a8b4-4fd1-92c1-111843869b25

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
2024-05-16 09:59:56 +03:00
Mateusz Kwasniewski
701c845f09
feat: uncomplete tracking (#7053) 2024-05-14 15:04:31 +02:00
Mateusz Kwasniewski
b2b8d94617
feat: lifecycle column extracted (#7049) 2024-05-14 09:24:54 +02:00
Thomas Heartman
20c3ef30f3
fix: make name validation work properly. (#7042)
Instead of using the `required` attribute, we manually make it
required. This is indicated visually by red error text if the value is
empty (or whitespace only). To indicate to screen readers that it is
required, we add the `aria-required` attribute.

We didn't previously validate if the name
was whitespace only.

Also: if no envs are selected, indicate that all will be included

This prevents this form value from ever being invalid.
2024-05-13 14:43:49 +02:00
Jaanus Sellin
4241e36819
fix: lifecycle improvements/fixes (#7044)
1. Now completed modal works from project view
2. Changed text for modal
3. Now variant selection will only appear if there are any variants
2024-05-13 13:41:36 +03:00
Thomas Heartman
fddb78380e
fix: make the project submission work from the project creation modal (#7040)
It seems the code that was copied was copied from before we changed
the validation logic, so it wouldn't submit. This fixes that to remove
any ID validation in the new form.
2024-05-13 10:49:05 +02:00
Thomas Heartman
40e4e355e3
Chore: visually hide labels in the create project form (#7015)
This PR visually hides the labels in the new create project form.
They're still rendered for screen readers, however.

It means it looks like this now:


![image](https://github.com/Unleash/unleash/assets/17786332/718772e7-4691-41d6-a70a-bbfc795d60ec)
2024-05-13 07:33:06 +02:00
andreas-unleash
9fbb041bfd
feat: create project dialog (#7012)
Adds a redirect to `/projects?create=true` to keep the `projects/create`
url still usable.
Loads the form in a modal

Closes
[1-2296](https://linear.app/unleash/issue/1-2296/project-creation-move-to-modal)

<img width="1537" alt="Screenshot 2024-05-09 at 14 06 50"
src="https://github.com/Unleash/unleash/assets/104830839/c108c7ee-5751-4380-9766-11368281a11a">

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
2024-05-10 11:01:49 +03:00
Mateusz Kwasniewski
3fc7714e78
feat: Lifecycle in project overview (#7024) 2024-05-09 13:38:18 +02:00
Thomas Heartman
b043bcdd4a
feat: front end can create projects without ids (#7009)
This PR updates the new project creation form to not include the project
ID in the payload (because it's generated by the back end now).
2024-05-08 14:57:07 +02:00
Mateusz Kwasniewski
f30910f628
fix: optimize table placeholder loading (#7002) 2024-05-08 09:40:37 +02:00
Thomas Heartman
6477ccf34b
test: test how the project form deals with project envs and cr env interaction (#6997)
This PR adds some tests around how project envs and change request envs
interact in the new project form. It tests that:
1. If you remove an env from the project setup, that env is also removed
from the change request list.
2. If you try to enable CRs for an env that isn't enabled, nothing
happens.
2024-05-08 07:26:49 +02:00
Mateusz Kwasniewski
843aab7447
fix: remove columns from the search api query (#6996) 2024-05-07 14:44:09 +02:00