[UI] Migrate to `@reduxjs/toolkit` tracker

acald-creator commented 1 year ago

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: https://github.com/layer5io/sistent/issues/496 Open PR: https://github.com/layer5io/sistent/pull/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.

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[bot] commented 1 year ago

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: star on the project :smile:

roopeshsn commented 1 year ago

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

acald-creator commented 1 year ago

@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 commented 1 year ago

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

github-actions[bot] commented 1 year ago

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: star on the project :smile:

stale[bot] commented 1 year ago

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 commented 1 year ago

bump

Pranjal7852 commented 1 year ago

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

nebula-aac commented 10 months ago

bump

github-actions[bot] commented 6 months ago

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: star on the project :smile:

Yashsharma1911 commented 5 months ago

// @senali-d @sudhanshutech

nebula-aac commented 5 months ago

bump

nebula-aac commented 4 months ago

bump again, updated this issue

stale[bot] commented 3 months ago

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[bot] commented 3 months ago

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: star on the project :smile:

meshery / meshery