[UI] Migrate to @reduxjs/toolkit tracker

[acald-creator]

UPDATE There is an open PR and open issue to track migrating Meshery UI to the latest libraries and using the latest styles and components from the Sistent Design System.

Open Issue: layer5io/sistent#496
Open PR: layer5io/sistent#498

In the open PR, I've already started work on using the @reduxjs/toolkit store. But they are not tested very well because of needing to make sure that the Provider's login works correctly before authenticating and redirecting back to the homepage.

UPDATE This milestone has been pushed back to v7 only because we have couple of tickets that are asking for React Class to Function components conversion, and this is impacted because using the existing implementations of mapStateToProps and mapDispatchToProps are commonly associated with connect HOC component with react-redux.

Current Behavior

Redux has always been a complex library, but they've recently released a package called @reduxjs/toolkit which simplifies how you use react-redux in the app.

next-redux-wrapper has also released a newer version at v8, which is vastly different from v3 and also has support for @reduxjs/toolit.

After some research, I found that is best to not just use Redux as the only global state management package for Meshery.

I would like to point out other packages that can be of use with Redux, or without Redux.

• jotai
• xstate
• zustand
• mobx

Desired Behavior

This is an open issue to track progress after certain milestones occur.

1. [UI] Convert React Class components to Function components tracker #7187
2. [UI] Wrap Provider UI as an React Context in ui #7212
3. [UI] Update CodeEditor to a different package #6965

Implementation

• Research @reduxjs/toolkit
• Consider moving some of the actions to not be used by Redux, and use it as a local state, (perhaps by Next.js or React context)
• Create Theme Provider context to toggle light and dark theme done in forked branch

Research the current store.js and break it down into multiple slices.

• update page path and title (could be used as a custom hook) Revised to be a Context API
• update user information (could revise data-fetch.js to be a hook and reused within multiple components)
• provider information
• Kubernetes cluster information
• Grafana / Prometheus information
• Modify existing Drawer / App Bar collapse conditions to be used with useState instead of redux (WIP)

In this forked branch at https://github.com/nebula-aac/meshery/tree/feat/reduxjs-toolkit-migration, here are the list of features within the Redux store that will be implemented. Please note that these are in progress and already created in the forked branch.

• Filters page state
• Confirmation modal state
• Grid state for Filters page
• Kubernetes config state
• Transform property state (could be revised)
• User update state

Acceptance Tests

Mockups

---

Contributor Guides and Handbook

• 🎨 Wireframes and designs for Meshery UI in Figma
• 🖥 Contributing to Meshery UI
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

[github-actions]

This issue has been labeled with 'component/ui'. 🧰 Here are docs on Contributing to Meshery UI. 🎨 Here is the Meshery UI Figma File File. Lastly, here are docs on Contributing to Meshery's End-to-End Tests Using Cypress.

---

        Be sure to join the community, if you haven't yet and please leave a ⭐ star on the project 😄

[roopeshsn]

Hi @acald-creator! I would like to work on this.

[acald-creator]

@roopeshsn Awesome

Thanks for reaching out. This migration tracker is aiming for v0.8 milestone while we are still in v0.6.

It is quite possible to achieve this sooner but I will be updating this issue as time goes by to list some of the changes that will needs to be made.

In the meantime, you can still help and provide insights if you have any.

[roopeshsn]

Sure, @acald-creator! Let me see the existing implementation of react-redux and provide insights if any.

[github-actions]

This issue has been labeled with 'design-required'. Note that prior to commencing on implementation, a design specification needs to be created and reviewed for approval. See Creating a Functional Specification to create a design spec.

---

        Be sure to join the community, if you haven't yet and please leave a ⭐ star on the project 😄

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[nebula-aac]

bump

[Pranjal7852]

@nebula-aac I would like to work on this issue

[nebula-aac]

bump

[github-actions]

Checking in... it has been awhile since we've heard from you on this issue. Are you still working on it? Please let us know and please don't hesitate to contact a MeshMate or any other community member for assistance.

---

        Be sure to join the community, if you haven't yet and please leave a ⭐ star on the project 😄

[Yashsharma1911]

// @senali-d @sudhanshutech

[nebula-aac]

bump

[nebula-aac]

bump again, updated this issue

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions]

Checking in... it has been awhile since we've heard from you on this issue. Are you still working on it? Please let us know and please don't hesitate to contact a MeshMate or any other community member for assistance.

---

        Be sure to join the community, if you haven't yet and please leave a ⭐ star on the project 😄