feat: update project creation

[lorenzo-cavazzi]

This PR updates the project and group creation pages, which are now available as modals.
The settings pages have been updated accordingly, but they will undergo further updates in another pitch.

Reference: https://www.notion.so/renku/Clean-up-Project-Group-Creation-0bee33f12b624525a100df79327eb5e7

/deploy

[RenkuBot]

You can access the deployment of this PR at https://renku-ci-ui-3399.dev.renku.ch

[leafty]

Some more comments here 👇 .

The PR is overall good, but form code needs to be improved.

[lorenzo-cavazzi]

@leafty thank you for the review!

I either updated the code as suggested or dropped an inline content. Most points are solved or trivial to solve after a confirmation (E.G: Group vs GroupV2).
The one outstanding is "how to treat routes" / "where to put modals". I'm happy to talk about it offline to explain the requirements better and understand your proposed solution.

[leafty]

What is countAsDirty? It looks like a hack because react-hook-form is being mis-used.

[lorenzo-cavazzi]

Mis-used?
The UX has been optimized to avoid showing useless interactions; on some pages, it's easier to integrate this component seamlessly by considering other component's states. I don't think that logic should be embedded here.

[leafty]

Note that this is not working at the moment on the deployment: the reset button does not appear when it I type a custom slug.

[lorenzo-cavazzi]

Perhaps the name wasn't filled in?
I updated the logic a little to make it more consistent. The button should show when:

• The URL is invalid
• The name isn't blank

and in no other case.

[leafty]

Shouldn't I see the reset button in this case? I filled in the name of the project and edited the slug. What if I want to reset its value now?

[leafty]

NOTE: the modals with useLocationHash are broken on the search page. Let's make an issue for this. The useSearchParams hook may be interfering with it on the search page.

[lorenzo-cavazzi]

NOTE: the modals with useLocationHash are broken on the search page. Let's make an issue for this. The useSearchParams hook may be interfering with it on the search page.

@leafty Should we use a query parameter instead of the hash? We would have an additional useless network request, which isn't a big deal, and it should work fine on the search page.

If you prefer the hash solution (I agree it's really neat) and already have an idea of what could be the conflict, I can either open the issue or, if it's quick enough, try to fix it in this PR.

[leafty]

NOTE: the modals with useLocationHash are broken on the search page. Let's make an issue for this. The useSearchParams hook may be interfering with it on the search page.

@leafty Should we use a query parameter instead of the hash? We would have an additional useless network request, which isn't a big deal, and it should work fine on the search page.

If you prefer the hash solution (I agree it's really neat) and already have an idea of what could be the conflict, I can either open the issue or, if it's quick enough, try to fix it in this PR.

I highly suspect it would not work, given how the search page works. That's why fixing it later is probably fine, because creating a new project or group from the search page is not the biggest use case.

[lorenzo-cavazzi]

@leafty Ok, sounds good 👍

I opened a new issue #3415 and added a simple workaround to avoid having broken buttons on the navbar 0bc7bfe

[leafty]

Should be the last small things to fix.

[leafty]

You should keep the <FormText> component here, otherwise the association with the input field is broken.

Suggested change

	{helpText}
	{helpText && <FormText id={`${entityName}-help`}>{helpText}</FormText>}