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
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.
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.
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.
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.
This PR adds the ability to configure CRs when creating a project.
The design is unfinished, and the code certainly needs cleanup, but I'd
like to get this into sandbox so we can look at it.
Things that still need to be done:
1. What do we do about this button when the user has no environments
selected? As a rough draft, I've disabled it. However, we should make it
possible to navigate to and give you an explanation why it was disabled,
e.g. "You have no project environments selected. Please select at least
one project environment.".
2. The form design is not done: the width should be constant and not
jumpy the way it is now. Also, the search field is too wide.
3. I've made the desicion that if you deselect a project env, we also
remove that env from your CR config it it's in there.
4. Potential improvement: if you enable and then disable CRs for an env,
we *could* probably store the data in between, so that if you set
required approvers 5 and then disabled it, it'd still be 5 when you
re-enabled it. That sounds like a good user experience. We should also
be able to extend that to adding/removing environments from project
envs.
This PR is a combination of two PRs:
This PR adds a functioning environment selection button to the new project creation form. Selected environments are added to the payload and to the API preview.
The implementation is mostly lifted from the existing FilterItem component we have for search filters. However, our need here is less complex, so I've removed some of the things we don't need. There is still more cleanup to be done, however, but I'd like to implement the rest of the submenus first, to see what we really do need in the end.
---
This PR adds support for stickiness and project mode in the new project
creation form.
Achieve this, it does a few things:
1. Moves `resolveStickinessOptions` from
`frontend/src/component/feature/StrategyTypes/FlexibleStrategy/StickinessSelect/StickinessSelect.tsx`
and into a separate hook. This component was used by the old project
creation form. Because the new form has a different input, but needs the
same option, moved that code into a reusable hook.
2. It adds functioning buttons for project stickiness and mode.
3. It adds labels to the search inputs for the dropdowns. Inputs *must*
have labels to meet a11y requirements. However, the designs don't have
labels, so we can hide them visually. Though that leads to another issue
(refer to the screen shot below).
4. It updates the `SelectionButton` component to handle both single- and
multiselect cases. It instead exports these two subcomponents. These are
currently in one file, but I'll split them out into their separate files
in a later PR.
As a side effect of working with the selection buttons, it also improves
how we handle keyboard interaction for these buttons.
Here's what it looks like for single-select lists. Notice the missing
part of the input's border around the top (where the label *would* be if
we showed it). We should figure out how best to handle it. I've done
like this for now, but we can sort it out later.
This PR allows very simple project creation. You can add a name and
description. The ID is generated for you at the moment (we'll fix this
later). Nothing else works, but the project is created successfully.
This PR adds a very rough first implementation of the look of the new
project form. *It is not final and does not work yet*.
The important part here is that the layout is roughly right (we'll
adjust spacing etc later) and that we've got all the basic elements
present.
I'll hook it up to actually work in an upcoming PR.
The missing icon, text alignment, etc, will also be solved later.
This PR removes the previous "my projects" filter in favor always
splitting projects, but showing both on the main screen.
To make it a bit easier to work with, it also moves the project group
component into its own file, causing some extra lines of code change. My
apologies 🙇🏼
This change adds filtering functionality to the project list filter
buttons.
In this case, "my projects" is defined as any project that is marked as
a favorite OR (inclusive or) that you are a part of, as defined by your
user profile.
This PR adds the buttons (only UI, no functionality) to show either "all
projects" or "my projects".
The buttons use a styled button group and are hidden behind the new
`projectListFilterMyProjects` flag.
The button placement breaks with the previously established page header
pattern of having all actions moved to the right. To accommodate this
new placement, I created a new flex container in the header called
`leftActions`, which is essentially just a mirror of the normal actions.
I went with `leftActions` instead of `inlineStartActions` or something
similar because I think it's clearer, and I don't see us adapting
Unleash for different writing directions right now. We can always change
it later.
I have also slightly increased the end margin of the page header to
accommodate the new designs and to adjust the spacing before the
buttons. I adjusted the margin of the text instead of the padding of the
left actions because this will keep the spacing to the page header the
same on every page. Without it, we could end up in situations where the
spacing changes from page to page based on whether it has left actions
or not, which is probably undesirable.
## Still to do:
### Hover colors
~~Find out what the right hover color variable is. I'm using the light
mode hover color for now, which works well in both light and dark modes
(looks nice and is AAccessible), but it's not the same as the hover
color for other buttons in dark mode.~~
Fixed ☝🏼
### Small windows
Also worth noting: at around 500px, the layout shift starts to cause
problems and we end up with overlapping elements. How do we want to deal
with narrower screens? Today, the UI is pretty functional until we reach
about 250px. It would be nice to not increase that size.
The new version breaking at about 500px:
The old version breaking at about 250px:
### Margins
We also need to figure out how much space we want on smaller windows:
This adds replace: true to navigate on the create feature toggle screen
and create project screen. This will make it so you don't go back to the
form after you have created the resource, replacing the entry in the
history with the new url. We can do this in more places, but some of
them require a bit more thought. For example when creating a user, you
navigate from the admin screen to the user page, and then back to the
same screen. Adding `{ replace: true }` in this context makes it so that
when you press back you end up on the same screen, because it's recorded
twice in history.
Another discussion point:
* Would you expect the edit screens to also replace the history?
This PR changes the behavior of the project tables' environment columns
based on input from customers.
Up until now, you have been shown either the first project or the first
three projects in the list of the project's environment. The decision on
whether to show one or three is based on screen size. The breakpoint
appears to be about 1280px. Above that you get three, below it you get
one.
With this PR, we'll show you *all* environments by default, regardless
of screen size. However, that's just for the default values. If you
manually change column visibility, those changes will of course be
respected.
I've used a new package, `css-mediaquery`, to test that all screen sizes
show all envs.
Previously, the dummy data would persist when there is no data coming
from the API. This causes us to display dummy data in the dora metrics
table which is not correct. This PR fixes that by only showing the
loading features when we are actually loading.
