From 4665be92d5b0266a1dfe836496aefe6b6b1647c9 Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Thu, 16 Jun 2022 13:36:23 +0200
Subject: [PATCH] feat(ui/admin): remember showUsers toggle selection

---
 ui/src/admin/actions/influxdb.js               |  4 ++++
 ui/src/admin/containers/influxdb/RolesPage.tsx | 17 ++++++++---------
 ui/src/admin/reducers/influxdb.js              |  4 ++++
 ui/test/admin/reducers/influxdb.test.js        |  8 ++++++++
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/ui/src/admin/actions/influxdb.js b/ui/src/admin/actions/influxdb.js
index 071a73e23..ead069c74 100644
--- a/ui/src/admin/actions/influxdb.js
+++ b/ui/src/admin/actions/influxdb.js
@@ -480,3 +480,7 @@ export const changeSelectedDBs = (selectedDBs /* : string[] */) => ({
     selectedDBs,
   },
 })
+
+export const changeShowUsers = () => ({
+  type: 'INFLUXDB_CHANGE_SHOW_USERS',
+})
diff --git a/ui/src/admin/containers/influxdb/RolesPage.tsx b/ui/src/admin/containers/influxdb/RolesPage.tsx
index 7174d033e..9c277aeb2 100644
--- a/ui/src/admin/containers/influxdb/RolesPage.tsx
+++ b/ui/src/admin/containers/influxdb/RolesPage.tsx
@@ -6,6 +6,7 @@ import {Source, NotificationAction} from 'src/types'
 import {UserRole, User, Database} from 'src/types/influxAdmin'
 import {notify as notifyAction} from 'src/shared/actions/notifications'
 import {
+  changeShowUsers,
   createRoleAsync,
   filterRoles as filterRolesAction,
 } from 'src/admin/actions/influxdb'
@@ -42,18 +43,20 @@ const validateRole = (
 }
 
 const mapStateToProps = ({
-  adminInfluxDB: {databases, users, roles, selectedDBs},
+  adminInfluxDB: {databases, users, roles, selectedDBs, showUsers},
 }) => ({
   databases,
   users,
   roles,
   selectedDBs,
+  showUsers,
 })
 
 const mapDispatchToProps = {
   filterRoles: filterRolesAction,
   createRole: createRoleAsync,
   notify: notifyAction,
+  toggleShowUsers: changeShowUsers,
 }
 
 interface OwnProps {
@@ -64,6 +67,7 @@ interface ConnectedProps {
   users: User[]
   roles: UserRole[]
   selectedDBs: string[]
+  showUsers: boolean
 }
 
 type ReduxDispatchProps = ResolveThunks<typeof mapDispatchToProps>
@@ -76,9 +80,11 @@ const RolesPage = ({
   roles,
   databases,
   selectedDBs,
+  showUsers,
   router,
   filterRoles,
   createRole,
+  toggleShowUsers,
   notify,
 }: Props) => {
   const rolesPage = useMemo(
@@ -110,13 +116,6 @@ const RolesPage = ({
     filterRoles(debouncedFilterText)
   }, [debouncedFilterText])
 
-  // hide users
-  const [showUsers, setShowUsers] = useState(true)
-  const changeHideUsers = useCallback(() => setShowUsers(!showUsers), [
-    showUsers,
-    setShowUsers,
-  ])
-
   const [createVisible, setCreateVisible] = useState(false)
   const createNew = useCallback(
     async (role: {name: string}) => {
@@ -160,7 +159,7 @@ const RolesPage = ({
           <div className="hide-roles-toggle">
             <SlideToggle
               active={showUsers}
-              onChange={changeHideUsers}
+              onChange={toggleShowUsers}
               size={ComponentSize.ExtraSmall}
               entity="users"
             />
diff --git a/ui/src/admin/reducers/influxdb.js b/ui/src/admin/reducers/influxdb.js
index c025fa683..29d93d88e 100644
--- a/ui/src/admin/reducers/influxdb.js
+++ b/ui/src/admin/reducers/influxdb.js
@@ -47,6 +47,7 @@ const initialState = {
   queryIDToKill: null,
   databases: [],
   selectedDBs: ['*'],
+  showUsers: true,
 }
 
 const adminInfluxDB = (state = initialState, action) => {
@@ -368,6 +369,9 @@ const adminInfluxDB = (state = initialState, action) => {
       const selectedDBs = allOrParticularSelection(oldDBs, newDBs)
       return {...state, selectedDBs}
     }
+    case 'INFLUXDB_CHANGE_SHOW_USERS': {
+      return {...state, showUsers: !state.showUsers}
+    }
   }
 
   return state
diff --git a/ui/test/admin/reducers/influxdb.test.js b/ui/test/admin/reducers/influxdb.test.js
index 1bd10fe35..4af5e6dd7 100644
--- a/ui/test/admin/reducers/influxdb.test.js
+++ b/ui/test/admin/reducers/influxdb.test.js
@@ -21,6 +21,7 @@ import {
   setQueriesSort,
   loadDatabases,
   changeSelectedDBs,
+  changeShowUsers,
 } from 'src/admin/actions/influxdb'
 
 import {NEW_DEFAULT_DATABASE, NEW_EMPTY_RP} from 'src/admin/constants'
@@ -538,5 +539,12 @@ describe('Admin.InfluxDB.Reducers', () => {
         expect(selectedDBs).toEqual(next)
       })
     })
+    it('can change showUsers flag', () => {
+      const vals = [undefined, true, false]
+      vals.forEach(prev => {
+        const {showUsers} = reducer({showUsers: prev}, changeShowUsers())
+        expect(showUsers).toEqual(!prev)
+      })
+    })
   })
 })