Create Next.js 14 replica app of Meshery UI

[nebula-aac]

This open issue is to allow testing components outside of Meshery UI, as this will cause breaking issues while developing in the Meshery repository.

Features

• Uses Next.js 14
• Uses Next.js API Routes to rewrite routes and proxy incoming requests from the backend
• Uses the latest libraries from MUI plus @mui/material-nextjs
• Refactored Color definitions (will be added to Sistent)
• Refactor components in Theme
• Icons - testing to use SvgIcon from MUI
• Move Provider's login into one - [UI] Wrap Provider UI as an React Context in ui meshery/meshery#7212

Refactor Class components to Function components

• Header - [UI] Convert Header.js to Functional Component meshery/meshery#8721
• ReactSelectWrapper - [UI] Convert ReactSelectWrapper to Functional meshery/meshery#8722

Components that are transferred but worked on to be improved This list will change and reflect a potential name change in order to make sure refactoring easier

• BBChart
• Dashboard
• ConnectionWizard
• DateFormatter
• DryRun
• KubernetesEmptyState
• ErrorBoundary
• LifeCycle
• Loading
• Registry
• Applications
• Filters
• Patterns or Designs
• Performance
• Modals
• GenericModal
• ConfirmationModal
• TroubleshootingModal
• ExportModal
• ResultModal
• EditorModal
• LoadTestTimerModal
• PromptModal
• NotificationCenter
• TypingFilter
• Preferences
• Carousel
• Extensions
• Connections
• Subscription
• EditorConfigurator
• MeshModelConfigurator
• Breadcrumb
• Telemetry
• Charts
• Graphs
• Avatar
• ToolbarSelect
• TableFooter
• DatabaseSummary
• FlipCard
• Header
• DateTimePicker
• Metrics
• MesheryPlay
• ProgressBar
• Results
• Settings
• SnackbarWrapper
• Navigator
• NavigatorExtension
• ReactSelectWrapper
• RemoteComponent
• URLUploader
• UploadImport
• User
• Validation
• ViewSwitch
• MuiltiSelect
• Tooltip
• EarlyAccessCard

Custom hooks

• useDashboardRouter
• useFetchUserData
• useKubernetes
• useMeshModelComponent
• useNotification
• usePreventUserFromLeaving
• useStateCallback
• useTelemetry
• useUpdateMetadata

@reduxjst/toolkit slices

• Theme mode
• Authentication
• Kubernetes configuration
• Grafana configuration
• Prometheus configuration
• Load test performance configuration
• Drawer state (may be moved to use state/props) that will pass through the components that uses this specifically
• Provider login
• Session data
• User information
• Version information
• Progress

RTK Query

• Provider login retrieval

Custom styled components

• ConnectClustersButton
• CreateButton
• DashbaordInfoOutlined
• DashbaordLayout
• DashboardSection
• DashboardSubMenuTab
• DashboardTab
• DashboardTabs
• Errors404
• InnerContainer
• InnerContainerAnimate
• MainContainer
• MainContainerAnimate
• MeshModelToolbar
• PaperSquare
• SearchAndView
• ToolWrapper
• ToolWrapperAnimate

To Do List

• Research editor packages again and add to app

---

Contributor Guide

• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)