Top level masonry refactor

[FrankFlitton]

TL;DR

Normalize how parts of pages are related in the DOM to allow for more reliable flex box behavior across screen sizes.

Added a top level layout component that can be substituted in the registry.

• Screen elements resize better with less UI cut off by the window.
• Mobile nav for smaller screen sizes (ie tiling window manager, 1/2 a monitor).
• Standardize flex/flex grid within the app to be more reliable.
• Easier to make and maintain UI components and app pages - composable via MUI's Grid framework.

Type

• Bug Fix
• Feature
• Plugin

Are all requirements met?

• Code completed
• Smoke tested
• Unit tests added
• Code documentation added
• Any pending items have an associated Issue

Complete description

Refactored much of the top level code to separate the left nav from the router view. The UI is now flex box based with no top level components having fixed positioning.

Nav is now programmatically shown and hidden via a context state (with animation). The current approach is hardcoding routes with a wrapper.

During the refactor, it was discovered that the useProjects hook was using a cache system that would dump the payload when the route changed or a new project was selected. The components (left nav and main view) were remounted and created fresh caches on the route changes which masked the issue.

Tracking Issue

Remove the 'fixes' keyword if there will be multiple PRs to fix the linked issue

fixes https://github.com/flyteorg/flyte/issues/

Follow-up issue

NA

[codecov]

Codecov Report

Merging #771 (4f71f62) into master (16abb34) will decrease coverage by 1.28%.
The diff coverage is 26.45%.

❗ Current head 4f71f62 differs from pull request most recent head 1b4d1e2. Consider uploading reports for the commit 1b4d1e2 to get more accurate results

@@            Coverage Diff             @@
##           master     #771      +/-   ##
==========================================
- Coverage   66.90%   65.63%   -1.28%     
==========================================
  Files         501      504       +3     
  Lines       12293    12505     +212     
  Branches     2262     2324      +62     
==========================================
- Hits         8225     8208      -17     
- Misses       4068     4297     +229     

Files Changed	Coverage Δ
packages/components/src/AppInfo/index.tsx	100.00% <ø> (ø)
...gurationProvider/ExternalConfigurationProvider.tsx	71.42% <ø> (ø)
packages/console/src/components/App/App.tsx	0.00% <0.00%> (ø)
...console/src/components/Executions/Tables/styles.ts	100.00% <ø> (ø)
...console/src/components/Launch/LaunchForm/styles.ts	100.00% <ø> (ø)
...src/components/Navigation/DefaultAppBarContent.tsx	0.00% <0.00%> (ø)
...kages/console/src/components/Navigation/NavBar.tsx	0.00% <0.00%> (ø)
...le/src/components/Navigation/ProjectNavigation.tsx	0.00% <0.00%> (-36.85%)	⬇️
...nsole/src/components/Navigation/SideNavigation.tsx	0.00% <0.00%> (-81.82%)	⬇️
...nsole/src/components/Navigation/TopLevelLayout.tsx	0.00% <0.00%> (ø)
... and 22 more

... and 3 files with indirect coverage changes

[4nalog]

Suggested change

	padding: `0 ${theme.spacing(2)}`,
	padding: theme.spacing(0, 2),

[4nalog]

left initial set of comments

Changes addressed in a different commit.

[ursucarina]

You might need to up the package versions for components, console and update website as well

[flyte-bot]

🎉 This PR is included in version 1.9.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀