Create Next.js 14 replica app of Meshery UI

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 - https://github.com/meshery/meshery/issues/7212

Refactor Class components to Function components

• Header - https://github.com/meshery/meshery/issues/8721
• ReactSelectWrapper - https://github.com/meshery/meshery/issues/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)

Start by reviewing the repository and the linked Contributor Guide, then identify the app entry point and current component structure. The issue's completion criteria span a Next.js 14 replica, API-route proxying, component and hook transfers, state slices, and styling; confirm the intended scope before starting.