Skip to content
This repository has been archived by the owner on Nov 30, 2022. It is now read-only.

1401 admin UI persist redux store to localstorage #1409

Merged

Conversation

chriscalhoun1974
Copy link
Contributor

@chriscalhoun1974 chriscalhoun1974 commented Sep 30, 2022

Purpose

Currently, the Admin UI Redux store is persisted in memory by default. This storage mechanism is problematic when a user reloads a browser page. Maintaining state via URL query string parameters is not a scalable solution. In order to provide a better overall user experience, the Redux store must maintain state between user page reloads.

Changes

  • Added redux-persist NPM package as a dependency
  • Redux store storage mechanism changes from memory to localStorage

Checklist

  • Update CHANGELOG.md file
    • Merge in main so the most recent CHANGELOG.md file is being appended to
    • Add description within the Unreleased section in an appropriate category. Add a new category from the list at the top of the file if the needed one isn't already there.
    • Add a link to this PR at the end of the description with the PR number as the text. example: #1
  • Applicable documentation updated (guides, quickstart, postman collections, tutorial, fidesdemo, database diagram.
  • If docs updated (select one):
    • documentation complete, or draft/outline provided (tag docs-team to complete/review on this branch)
    • documentation issue created (tag docs-team to complete issue separately)
  • Good unit test/integration test coverage
  • This PR contains a DB migration. If checked, the reviewer should confirm with the author that the down_revision correctly references the previous migration before merging
  • The Run Unsafe PR Checks label has been applied, and checks have passed, if this PR touches any external services

Ticket

Fixes #1401

Screen Shot 2022-09-29 at 10 02 15 PM

@chriscalhoun1974 chriscalhoun1974 linked an issue Sep 30, 2022 that may be closed by this pull request
@@ -56,27 +52,6 @@ export const selectToken = (state: RootState) => selectAuth(state).token;

export const { login, logout } = authSlice.actions;

export const credentialStorage = createListenerMiddleware();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the following event listeners given the redux-perist localStorage functionality. Redux-persist localStorage root key is persist-root.


const { connectionOption, step } = useAppSelector(selectConnectionTypeState);

/**
* NOTE: If the user reloads the web page via F5, the react redux store state is lost.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The following code snippet was no longer needed given the Redux store is persisted in localStorage.

@@ -65,7 +66,14 @@ const RequestTable: React.FC<RequestTableProps> = () => {
isFetching,
} = useRequestTable();

return (
useEffect(() => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This resolved a React memory leak at runtime when a user clicks the User icon to logout. Memory leak warning was visible via browser console.

@chriscalhoun1974 chriscalhoun1974 marked this pull request as ready for review September 30, 2022 01:56
@chriscalhoun1974 chriscalhoun1974 marked this pull request as draft September 30, 2022 02:00
Copy link

@ssangervasi ssangervasi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only really necessary change is the excluding the API reducers from persistence.

clients/ops/admin-ui/src/app/store.ts Outdated Show resolved Hide resolved
clients/ops/admin-ui/src/app/store.ts Outdated Show resolved Hide resolved
clients/ops/admin-ui/src/app/store.ts Outdated Show resolved Hide resolved
clients/ops/admin-ui/src/app/store.ts Show resolved Hide resolved
Copy link
Contributor

@LKCSmith LKCSmith left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not personally super familiar with this pattern, but maybe @ssangervasi can provide some more useful feedback. Otherwise, I think this looks okay, just one small thing.

clients/ops/admin-ui/src/app/store.ts Outdated Show resolved Hide resolved
Copy link

@ssangervasi ssangervasi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🏬

@chriscalhoun1974 chriscalhoun1974 merged commit ddf0247 into main Oct 2, 2022
@chriscalhoun1974 chriscalhoun1974 deleted the 1401-admin-ui-persist-redux-store-to-localstorage branch October 2, 2022 01:16
ssangervasi added a commit to ethyca/fides that referenced this pull request Oct 14, 2022
This was driving me crazy debugging while working on the config wizard. The persist
code merged in, but the necessity of excluding these reducers was missed:

ethyca/fidesops#1409 (comment)

I'm actually a bit surprised ctl stuff has been working okay at all. Maye there
are some bug issues I haven't seen yet.
chriscalhoun1974 pushed a commit to ethyca/fides that referenced this pull request Oct 14, 2022
This was driving me crazy debugging while working on the config wizard. The persist
code merged in, but the necessity of excluding these reducers was missed:

ethyca/fidesops#1409 (comment)

I'm actually a bit surprised ctl stuff has been working okay at all. Maye there
are some bug issues I haven't seen yet.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Admin UI: Persist Redux store to localStorage
4 participants