style: Navigation improvements

[kyle-ssg]

trafficstars

Thanks for submitting a PR! Please check the boxes below:

• [x] I have run pre-commit to check linting
• [x] I have added information to docs/ if required so people know about the feature!
• [x] I have filled in the "Changes" section below?
• [x] I have filled in the "How did you test this code" section below?
• [x] I have used a Conventional Commit title for this Pull Request

Changes

Improves navigation such that

• Segments, integrations and compare no longer have environment ids in their urls
• Header nav sits above sidebar and show sub navigation based on if we are viewing the organisation or project
• The side menu will only show for environment specific pages
• The top nav has a breadcrumb and menu allowing users to navigate to any organisation or project
• Clicking home will go to an organisation select page
• Users and permissions and usage is separated from settings at the organisation level
• Settings / usage links are restricted to organisation admin
• Reduces font sizes in some places
• Dev experience: Migrates some components to RTK and TypeScript
• Dev experience: removes a lot of custom css
• Minor: Remove unused images

How did you test this code?

Please describe.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 9, 2024 8:31am
flagsmith-frontend-preview	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 9, 2024 8:31am
flagsmith-frontend-staging	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 9, 2024 8:31am

[github-actions[bot]]

Uffizzi Preview deployment-51105 was deleted.

[dabeeeenster]

The separator/left hand area seems too wide? Also is it possible to make it user adjustable?

[kyle-ssg]

Done 1 - Fixed 5 - Fixed

Done but not sure 3 - Yeah this does make sense, it might help make it more obvious which environment we are on whilst reducing nav items. I think there are pros and cons to this, I've opened up internally for conversation.

Not sure 2 - This followed inspiration from Vercel after discussing with Ben, it felt like navigation between organisations and projects was the most intuitive example we found. It's a bit subjective, it might be worth leaving this one to wider feedback. 4 - I think this could be said about a lot of links in products (e.g , view a project in Vercel, view a repository in GH). We could put it in settings but I feel like there's more than enough real estate to keep it here. Also, we want to encourage and highlight new integrations, we're going to push more and more into them. 6 - Yes but there are far to many small changes (See changes) for it to be viable.

[kyle-ssg]

The separator/left hand area seems too wide? Also is it possible to make it user adjustable?

Ok yeah will do that

[rolodato]

2 - This followed inspiration from Vercel after discussing with Ben, it felt like navigation between organisations and projects was the most intuitive example we found. It's a bit subjective, it might be worth leaving this one to wider feedback.

I hadn't noticed this from Vercel, that makes sense. I like that Vercel uses a higher contrast background colour here, I struggle to see the difference in ours:

vs

Also the changing background colour on mouseover doesn't seem to work as well (tested on Firefox):

https://github.com/Flagsmith/flagsmith/assets/829698/7a0fb4b5-64bb-43c1-aaea-0e1e1ae2bd22

https://github.com/Flagsmith/flagsmith/assets/829698/7cb94de7-ba9a-4c0e-befa-acb269b0df28

Lastly, I think we're missing the option to create a new organisation? We could add it to the same dropdown. Same for creating new projects, but at least that's still doable from the Projects page.

4 - I think this could be said about a lot of links in products (e.g , view a project in Vercel, view a repository in GH). We could put it in settings but I feel like there's more than enough real estate to keep it here. Also, we want to encourage and highlight new integrations, we're going to push more and more into them.

That's fair - in that case, could we put Integrations next to Settings? So the order from left to right would be:

1. Environments
2. Segments
3. Compare
4. Integrations
5. Settings

That way Integrations and Settings have a similar importance.

[kyle-ssg]

Also the changing background colour on mouseover doesn't seem to work as well (tested on Firefox):

Ok yeah I'll look at improving this.

Lastly, I think we're missing the option to create a new organisation? We could add it to the same dropdown.

I'll do that just like with the env dropdown, however you can click the brand icon to go to organisations.

That's fair - in that case, could we put Integrations next to Settings? So the order from left to right would be:

Yep that makes sense

[rolodato]

One last thing, there's still an error shown after creating a new organisation, but before the first project is created:

I'm sure there's little things we can find here and there to improve but I'd love to get this merged ASAP. Ship it! :shipit:

[kyle-ssg]

Done ^^

[matthewelwell]

Seems like there's still some nasty debugging going on here. I managed to get this to appear by just navigating to project settings.

[kyle-ssg]

Figured this out, was due to tags and is an existing issue in production. This PR will resolve it.

[sentry[bot]]

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

• ‼️ TypeError: Cannot read properties of undefined (reading 'tags') <object>.renderRow(web/components/pages/UserPage) View Issue

_{Did you find this useful? React with a 👍 or 👎}