UI Session Improvements #3744

bryanculver · 2023-05-12T20:56:51Z

Closes: #

What's Changed

Couple Login/Logout to RTK Query
Proper Session State Invalidation
Reduce complexity for logged-in state hooks
Reduce complexity for menu data loading hooks (isLoading)

TODO

Explanation of Change(s)
Added change log fragment(s) (for more information see the documentation)
Attached Screenshots, Payload Example
Unit, Integration Tests
Documentation Updates (when adding/changing features)
Example Plugin Updates (when adding/changing features)
Outline Remaining Work, Constraints from Design

nautobot/ui/src/components/Layout.js

nautobot/ui/src/constants/apiPath.js

nautobot/ui/src/utils/store.js

nautobot/dcim/models/racks.py

nautobot/ui/src/components/Layout.js

nautobot/ui/src/router.js

nautobot/ui/src/utils/state.js/auth.js

nautobot/ui/src/utils/state.js/menu.js

bryanculver · 2023-05-17T18:32:07Z

@nautobot/core

I'd love to see if these files and changes make sense:

nautobot/ui/src/utils/store.js

nautobot/ui/src/views/Login.js

nautobot/ui/src/components/Layout.js

nautobot/ui/src/components/Navbar.js

nautobot/ui/src/router.js

glennmatthews

To my ignorant self, this looks like a good set of improvements.

gsnider2195 · 2023-05-19T20:39:59Z

nautobot/docs/development/react-ui.md

+
+## Introduction
+
+Nautobot 2.0 introduces a new user interface built on React. This new UI is a complete replacement for the previous Django-based UI, and is the recommended interface for all users. The Django UI will be removed in a future release.


is the recommended interface for all users

Is this true for 2.0?

nautobot/docs/development/react-ui.md

gsnider2195 · 2023-05-19T20:50:44Z

nautobot/docs/development/react-ui.md

+
+### Hooks
+
+The React UI uses hooks to manage state and side effects. Hooks are functions that let you “hook into” React state and lifecycle features. To learn more about hooks, see the [React Hooks documentation](https://react.dev/reference/react).


Hooks are functions that let you “hook into” React state and lifecycle features

A little bit more context on what value this provides would be good. (Maybe "Hooks are events that can be fired when specified state data changes or components are rendered/re-rendered")

gsnider2195 · 2023-05-19T20:52:30Z

nautobot/docs/development/react-ui.md

+
+These sections are known as "slices" of state, and have their own methods for updating and retrieving state. For more information on Redux, see the [Redux documentation](https://redux.js.org/).
+
+### Hooks


Future enhancement idea for some more sections under Hooks:

useDispatch

useEffect

useSelector

gsnider2195 · 2023-05-19T20:53:15Z

nautobot/docs/development/react-ui.md

+
+In most cases, we build the UI with the preference we only display the final component once the data is available and display a loading indicator until then.
+
+### State Management


Future enhancement idea for some more sections under State Management:

Reducers

gsnider2195 · 2023-05-19T20:54:08Z

nautobot/ui/.gitignore

@@ -4,3 +4,6 @@ build
 # These files get rendered by `nautobot-server build_ui`
 app_imports.js
 jsconfig.paths.json
+
+# The output of `npm run analyze`
+analyze_report.html


Are there docs on how to generate this report?

There is an NPM command but hasn't been exposed as an invoke command yet.

gsnider2195 · 2023-05-19T20:56:14Z

nautobot/ui/src/components/Layout.js

-    // if (!sessionLoaded || !menuLoaded || sessionInfo === undefined)
-    //     toRender = <LoadingWidget name="application" />;
-
+    /** Invalidate the newui cookie and reload the page in order to return to the legacy UI. */


Is this js doc syntax or should it be //?

https://jsdoc.app/about-getting-started.html

gsnider2195 · 2023-05-19T20:58:17Z

nautobot/ui/src/utils/api.js

+            api,
+            extraOptions
+        );
+        const dontRetryHeaders = [400, 401, 403, 404, 405, 406, 407];


Nope, 500 might be successful with a retry later. The backend could be restarted.

gsnider2195

Added some comments but no blockers. Looks great!

jathanism

Just some comments for posterity. Good to see the evolution!

jathanism · 2023-05-19T20:56:23Z

nautobot/ui/src/utils/store.js

+// Configure redux-persist to save state in Local Storage for performance
+const persistConfig = {
+    key: "root",
+    version: 3, // Increment this number if you change the shape of the state


This one deserves a pretty big callout IMO. I can see this biting us. Can we clarify what changing the "shape" of the state means? Perhaps not here, but for our more robust documentation?

For example, if the state dict/object/shape goes from:

{ "root": { "auth": { // ... }, "navigation": { // ... } } }

To:

{ "root": { "core": { "user": { // ... }, "menu": { // ... } }, "apps": { // ... }, "auth": true } }

code accessing the state can throw undefineds and other errors, and trying to set previous caches into the new structure can cause issues.

jathanism · 2023-05-19T20:58:26Z

nautobot/ui/src/views/generic/ObjectList.js

+                schema: true,
+                plugin: isPluginView,
+            },
+            { keepUnusedDataFor: 600 } // Let's keep the header schema cached for longer than the default 60 seconds


This number, even at 10 minutes seems arbitrary. Feels like we might still want to consider some more deterministic way of doing this for posterity?

jathanism · 2023-05-19T21:00:49Z

nautobot/ui/src/components/SidebarNav.js

+                                                                            <SidebarButton
+                                                                                as={
+                                                                                    ReactRouterLink
+                                                                                }
+                                                                                key={
+                                                                                    submenu_idx
+                                                                                }
+                                                                                level={
+                                                                                    2
+                                                                                }
+                                                                                to={
+                                                                                    submenu[1]
+                                                                                }
+                                                                                isLast={
+                                                                                    submenu_idx ===
+                                                                                    submenu_arr.length -
+                                                                                        1
+                                                                                }
+                                                                            >
+                                                                                {
+                                                                                    submenu[0]
+                                                                                }
+                                                                            </SidebarButton>


MY EYES! THE GOGGLES DO NOTHING!

indent: 2

nautobot/docs/development/react-ui.md

Co-authored-by: Gary Snider <75227981+gsnider2195@users.noreply.github.com>

Stashing improvements

784ed82

glennmatthews assigned bryanculver May 15, 2023

glennmatthews reviewed May 15, 2023

View reviewed changes

nautobot/ui/src/components/Layout.js Outdated Show resolved Hide resolved

nautobot/ui/src/constants/apiPath.js Show resolved Hide resolved

nautobot/ui/src/utils/store.js Outdated Show resolved Hide resolved

nautobot/ui/src/utils/store.js Outdated Show resolved Hide resolved

glennmatthews added this to the v2.0.0 milestone May 15, 2023

bryanculver added 2 commits May 16, 2023 14:57

Stashing changes

935c6e3

Working session, nav improvments

ee964d9

bryanculver commented May 17, 2023

View reviewed changes

glennmatthews reviewed May 18, 2023

View reviewed changes

nautobot/ui/src/utils/store.js Outdated Show resolved Hide resolved

nautobot/ui/src/utils/store.js Show resolved Hide resolved

nautobot/ui/src/utils/store.js Outdated Show resolved Hide resolved

nautobot/ui/src/views/Login.js Show resolved Hide resolved

gsnider2195 reviewed May 19, 2023

View reviewed changes

nautobot/ui/src/components/Layout.js Show resolved Hide resolved

gsnider2195 reviewed May 19, 2023

View reviewed changes

nautobot/ui/src/components/Navbar.js Outdated Show resolved Hide resolved

gsnider2195 reviewed May 19, 2023

View reviewed changes

nautobot/ui/src/router.js Outdated Show resolved Hide resolved

bryanculver added 2 commits May 19, 2023 16:14

ready for review

348c014

lint and fragment

50d18e5

bryanculver marked this pull request as ready for review May 19, 2023 20:21

glennmatthews approved these changes May 19, 2023

View reviewed changes

gsnider2195 reviewed May 19, 2023

View reviewed changes

nautobot/docs/development/react-ui.md Outdated Show resolved Hide resolved

gsnider2195 reviewed May 19, 2023

View reviewed changes

gsnider2195 approved these changes May 19, 2023

View reviewed changes

jathanism reviewed May 19, 2023

View reviewed changes

jathanism approved these changes May 19, 2023

View reviewed changes

bryanculver commented May 22, 2023

View reviewed changes

nautobot/docs/development/react-ui.md Outdated Show resolved Hide resolved

Apply suggestions from code review

9c0bde8

Co-authored-by: Gary Snider <75227981+gsnider2195@users.noreply.github.com>

bryanculver merged commit bb3b0ac into next May 22, 2023
21 checks passed

bryanculver deleted the u/bryanculver-session-improvements branch May 22, 2023 17:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI Session Improvements #3744

UI Session Improvements #3744

bryanculver commented May 12, 2023 •

edited

bryanculver commented May 17, 2023

glennmatthews left a comment

gsnider2195 May 19, 2023

gsnider2195 May 19, 2023

gsnider2195 May 19, 2023

gsnider2195 May 19, 2023

gsnider2195 May 19, 2023

bryanculver May 19, 2023

gsnider2195 May 19, 2023

bryanculver May 19, 2023

gsnider2195 May 19, 2023

bryanculver May 20, 2023

gsnider2195 left a comment

jathanism left a comment

jathanism May 19, 2023

bryanculver May 22, 2023

jathanism May 19, 2023

jathanism May 19, 2023

bryanculver May 22, 2023


		## Introduction

		Nautobot 2.0 introduces a new user interface built on React. This new UI is a complete replacement for the previous Django-based UI, and is the recommended interface for all users. The Django UI will be removed in a future release.


		### Hooks

		The React UI uses hooks to manage state and side effects. Hooks are functions that let you “hook into” React state and lifecycle features. To learn more about hooks, see the [React Hooks documentation](https://react.dev/reference/react).


		These sections are known as "slices" of state, and have their own methods for updating and retrieving state. For more information on Redux, see the [Redux documentation](https://redux.js.org/).

		### Hooks


		In most cases, we build the UI with the preference we only display the final component once the data is available and display a loading indicator until then.

		### State Management

UI Session Improvements #3744

UI Session Improvements #3744

Conversation

bryanculver commented May 12, 2023 • edited

Closes: #

What's Changed

TODO

bryanculver commented May 17, 2023

glennmatthews left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gsnider2195 left a comment

Choose a reason for hiding this comment

jathanism left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bryanculver commented May 12, 2023 •

edited