feat(ui/admin): remember showUsers toggle selection

ui/src/admin/actions/influxdb.js

@@ -480,3 +480,7 @@ export const changeSelectedDBs = (selectedDBs /* : string[] */) => ({
     selectedDBs,
   },
 })
+
+export const changeShowUsers = () => ({
+  type: 'INFLUXDB_CHANGE_SHOW_USERS',
+})

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"
             />

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

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)
+      })
+    })
   })
 })