feat(ui/admin): remember showRoles toggle selection

ui/src/admin/actions/influxdb.js

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

ui/src/admin/containers/influxdb/UsersPage.tsx

@@ -5,6 +5,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 {
+  changeShowRoles,
   createUserAsync,
   filterUsers as filterUsersAction,
 } from 'src/admin/actions/influxdb'
@@ -47,17 +48,19 @@ const validateUser = (
 }
 
 const mapStateToProps = ({
-  adminInfluxDB: {databases, users, roles, selectedDBs},
+  adminInfluxDB: {databases, users, roles, selectedDBs, showRoles},
 }) => ({
   databases,
   users,
   roles,
   selectedDBs,
+  showRoles,
 })
 
 const mapDispatchToProps = {
   filterUsers: filterUsersAction,
   createUser: createUserAsync,
+  toggleShowRoles: changeShowRoles,
   notify: notifyAction,
 }
 
@@ -69,6 +72,7 @@ interface ConnectedProps {
   users: User[]
   roles: UserRole[]
   selectedDBs: string[]
+  showRoles: boolean
 }
 
 type ReduxDispatchProps = ResolveThunks<typeof mapDispatchToProps>
@@ -81,9 +85,11 @@ const UsersPage = ({
   users,
   roles,
   selectedDBs,
+  showRoles,
   notify,
   createUser,
   filterUsers,
+  toggleShowRoles,
 }: Props) => {
   const [isEnterprise, usersPage] = useMemo(
     () => [
@@ -118,13 +124,6 @@ const UsersPage = ({
     filterUsers(debouncedFilterText)
   }, [debouncedFilterText])
 
-  // hide role
-  const [showRoles, setShowRoles] = useState(true)
-  const changeHideRoles = useCallback(() => setShowRoles(!showRoles), [
-    showRoles,
-    setShowRoles,
-  ])
-
   const [createVisible, setCreateVisible] = useState(false)
   const createNew = useCallback(
     async (user: {name: string; password: string}) => {
@@ -170,7 +169,7 @@ const UsersPage = ({
             <div className="hide-roles-toggle">
               <SlideToggle
                 active={showRoles}
-                onChange={changeHideRoles}
+                onChange={toggleShowRoles}
                 size={ComponentSize.ExtraSmall}
               />
               Show Roles

ui/src/admin/reducers/influxdb.js

@@ -48,6 +48,7 @@ const initialState = {
   databases: [],
   selectedDBs: ['*'],
   showUsers: true,
+  showRoles: true,
 }
 
 const adminInfluxDB = (state = initialState, action) => {
@@ -372,6 +373,9 @@ const adminInfluxDB = (state = initialState, action) => {
     case 'INFLUXDB_CHANGE_SHOW_USERS': {
       return {...state, showUsers: !state.showUsers}
     }
+    case 'INFLUXDB_CHANGE_SHOW_ROLES': {
+      return {...state, showRoles: !state.showRoles}
+    }
   }
 
   return state

ui/test/admin/reducers/influxdb.test.js

@@ -22,6 +22,7 @@ import {
   loadDatabases,
   changeSelectedDBs,
   changeShowUsers,
+  changeShowRoles,
 } from 'src/admin/actions/influxdb'
 
 import {NEW_DEFAULT_DATABASE, NEW_EMPTY_RP} from 'src/admin/constants'
@@ -546,5 +547,12 @@ describe('Admin.InfluxDB.Reducers', () => {
         expect(showUsers).toEqual(!prev)
       })
     })
+    it('can change showRoles flag', () => {
+      const vals = [undefined, true, false]
+      vals.forEach(prev => {
+        const {showRoles} = reducer({showRoles: prev}, changeShowRoles())
+        expect(showRoles).toEqual(!prev)
+      })
+    })
   })
 })