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 - 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)