feat(ui): Add InfluxDB admin tabs to user/role detail page

CHANGELOG.md

@@ -10,6 +10,7 @@
 1. [#5927](https://github.com/influxdata/chronograf/pull/5927): Show effective permissions on Users page.
 1. [#5929](https://github.com/influxdata/chronograf/pull/5926): Add refresh button to InfluxDB Users/Roles/Databases page.
 1. [#5940](https://github.com/influxdata/chronograf/pull/5940): Support InfluxDB behind proxy under subpath.
+1. [#5956](https://github.com/influxdata/chronograf/pull/5956): Add InfluxDB admin tabs to user/role detail page.
 
 ### Bug Fixes
 

ui/cypress/integration/admin_influxdb.test.ts

@@ -107,7 +107,8 @@ describe('InfluxDB', () => {
         .contains('Create')
         .should('not.be.disabled')
         .click({force: true})
-      cy.getByTestID('exit--button').click({force: true})
+      cy.url().should('match', new RegExp(`${influxDB.user.name}$`))
+      cy.get('.subsection--tab.active').click({force: true})
       cy.getByTestID(`user-row--${influxDB.user.name}`).should('exist')
       cy.getByTestID('user-filter--input').type('Non existing user')
       cy.getByTestID(`user-row--${influxDB.user.name}`).should('not.exist')
@@ -133,6 +134,12 @@ describe('InfluxDB', () => {
       })
 
       cy.getByTestID('apply-changes--button').click({force: true})
+      cy.url().should('match', /users$/)
+      cy.getByTestID(`user-row--${influxDB.user.name}`)
+        .should('exist')
+        .within(() => {
+          cy.get('a').contains(influxDB.user.name).click({force: true})
+        })
       cy.getByTestID(`${influxDB.db.name}-permissions--row`).within(() => {
         influxDB.user.db[0].permissions.forEach((permission: any) => {
           cy.getByTestID(
@@ -149,7 +156,7 @@ describe('InfluxDB', () => {
       cy.getByTestID('change-password--button').click({force: true})
       cy.getByTestID('new-password--input').type(influxDB.user.password)
       cy.getByTestID('confirm').click({force: true})
-      cy.getByTestID('exit--button').click({force: true})
+      cy.get('.subsection--tab.active').click({force: true})
       cy.getByTestID(`user-row--${influxDB.user.name}`).within(() => {
         cy.getByTestID('permissions--values').within(() => {
           cy.getByTestID('read-permission').should('have.class', 'granted')
@@ -176,7 +183,8 @@ describe('InfluxDB', () => {
         .contains('Create')
         .should('not.be.disabled')
         .click({force: true})
-      cy.getByTestID('exit--button').click({force: true})
+      cy.url().should('match', new RegExp(`${influxDB.user.name}$`))
+      cy.get('.subsection--tab.active').click({force: true})
       cy.get('.dropdown--selected').click({force: true})
       cy.getByTestID('dropdown-menu').within(() => {
         cy.getByTestID('dropdown--item')
@@ -202,11 +210,17 @@ describe('InfluxDB', () => {
         'value-changed'
       )
       cy.getByTestID('apply-changes--button').click({force: true})
+      cy.url().should('match', new RegExp(`users$`))
+      cy.getByTestID(`user-row--${influxDB.user.name}`)
+        .should('exist')
+        .within(() => {
+          cy.get('a').contains(influxDB.user.name).click({force: true})
+        })
       cy.getByTestID(`role-${influxDB.role.name}--button`).should(
         'not.have.class',
         'value-changed'
       )
-      cy.getByTestID('exit--button').click({force: true})
+      cy.get('.subsection--tab.active').click({force: true})
       cy.getByTestID('roles-granted').within(() => {
         cy.get('.role-value').contains(influxDB.role.name).should('exist')
       })
@@ -236,7 +250,8 @@ describe('InfluxDB', () => {
       cy.getByTestID('form--create-role--button')
         .should('not.be.disabled')
         .click()
-      cy.getByTestID('exit--button').click({force: true})
+      cy.url().should('match', new RegExp(`${influxDB.role.name}$`))
+      cy.get('.subsection--tab.active').click({force: true})
       cy.getByTestID(`role-${influxDB.role.name}--row`)
         .should('exist')
         .within(() => {
@@ -260,6 +275,10 @@ describe('InfluxDB', () => {
       })
 
       cy.getByTestID('apply-changes--button').click({force: true})
+      cy.url().should('match',new RegExp(`roles$`))
+      cy.getByTestID(`role-${influxDB.role.name}--row`).within(() => {
+        cy.get('a').contains(influxDB.role.name).click({force: true})
+      })
 
       cy.getByTestID(`${influxDB.db.name}-db-perm--row`).within(() => {
         influxDB.role.permissions.forEach((perm: any) => {
@@ -270,7 +289,8 @@ describe('InfluxDB', () => {
         })
       })
 
-      cy.getByTestID('exit--button').click({force: true})
+      cy.get('.subsection--tab.active').click({force: true})
+      cy.url().should('match',new RegExp(`roles$`))
       cy.getByTestID('wizard-bucket-selected').click({force: true})
       cy.getByTestID('dropdown-menu').within(() => {
         cy.getByTestID('dropdown--item')
@@ -296,7 +316,7 @@ describe('InfluxDB', () => {
       cy.getByTestID('show-users--toggle').click()
       cy.getByTestID('admin-table--head').within(() => {
         cy.get('th').contains('Users').should('exist')
-      })      
+      })
     })
   })
 })

ui/src/admin/actions/influxdb.js

@@ -410,11 +410,13 @@ export const updateRoleUsersAsync = (role, users) => async dispatch => {
     const {data} = await updateRoleAJAX(role.links.self, {users})
     dispatch(notify(notifyRoleUsersUpdated()))
     dispatch(syncRole(role, data))
+    return true
   } catch (error) {
     dispatch(
       errorThrown(error, notifyRoleUsersUpdateFailed(error.data.message))
     )
   }
+  return false
 }
 
 export const updateRolePermissionsAsync = (
@@ -425,11 +427,13 @@ export const updateRolePermissionsAsync = (
     const {data} = await updateRoleAJAX(role.links.self, {permissions})
     dispatch(notify(notifyRolePermissionsUpdated()))
     dispatch(syncRole(role, data))
+    return true
   } catch (error) {
     dispatch(
       errorThrown(error, notifyRolePermissionsUpdateFailed(error.data.message))
     )
   }
+  return false
 }
 
 export const updateUserPermissionsAsync = (
@@ -440,6 +444,7 @@ export const updateUserPermissionsAsync = (
     const {data} = await updateUserAJAX(user.links.self, {permissions})
     dispatch(notify(notifyDBUserPermissionsUpdated()))
     dispatch(syncUser(user, data))
+    return true
   } catch (error) {
     dispatch(
       errorThrown(
@@ -455,11 +460,13 @@ export const updateUserRolesAsync = (user, roles) => async dispatch => {
     const {data} = await updateUserAJAX(user.links.self, {roles})
     dispatch(notify(notifyDBUserRolesUpdated()))
     dispatch(syncUser(user, data))
+    return true
   } catch (error) {
     dispatch(
       errorThrown(error, notifyDBUserRolesUpdateFailed(error.data.message))
     )
   }
+  return false
 }
 
 export const updateUserPasswordAsync = (user, password) => async dispatch => {

ui/src/admin/components/influxdb/ConfirmDiscardDialog.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import {
+  Form,
+  OverlayContainer,
+  OverlayHeading,
+  OverlayTechnology,
+} from 'src/reusable_ui'
+
+const minLen = 3
+export function validateRoleName(name: string): boolean {
+  return name?.length >= minLen
+}
+
+interface Props {
+  onCancel: () => void
+  onOK: () => void
+  visible: boolean
+}
+const ConfirmDiscardDialog = ({visible, onOK, onCancel}: Props) => {
+  return (
+    <OverlayTechnology visible={visible}>
+      <OverlayContainer maxWidth={400}>
+        <OverlayHeading title="Discard unsaved changes?" />
+        <div
+          className="overlay--body"
+          style={{minHeight: '100px', padding: '0px'}}
+        >
+          <form>
+            <Form>
+              {[
+                <Form.Footer key={1}>
+                  <div className="form-group text-center col-xs-12">
+                    <button
+                      className="btn btn-sm btn-warning"
+                      type="button"
+                      onClick={onOK}
+                      data-test="confirm--ok--button"
+                    >
+                      OK
+                    </button>
+                    <button
+                      className="btn btn-sm btn-default"
+                      onClick={onCancel}
+                      type="button"
+                      data-test="confirm--cancel--button"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </Form.Footer>,
+              ]}
+            </Form>
+          </form>
+        </div>
+      </OverlayContainer>
+    </OverlayTechnology>
+  )
+}
+
+export default ConfirmDiscardDialog

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

@@ -2,12 +2,14 @@ import React from 'react'
 import {useMemo} from 'react'
 import SubSections from 'src/shared/components/SubSections'
 import {Source, SourceAuthenticationMethod} from 'src/types'
+import {PageSection} from 'src/types/shared'
 import {WrapToPage} from './AdminInfluxDBScopedPage'
 
 interface Props {
   source: Source
   activeTab: 'databases' | 'users' | 'roles' | 'queries'
   children: JSX.Element | JSX.Element[]
+  onTabChange?: (section: PageSection, url: string) => void
 }
 export function hasRoleManagement(source: Source) {
   return !!source?.links?.roles
@@ -16,7 +18,12 @@ export function isConnectedToLDAP(source: Source) {
   return source.authentication === SourceAuthenticationMethod.LDAP
 }
 
-const AdminInfluxDBTabbedPage = ({source, activeTab, children}: Props) => {
+export const AdminTabs = ({
+  source,
+  activeTab,
+  children,
+  onTabChange,
+}: Props) => {
   const sections = useMemo(() => {
     const hasRoles = hasRoleManagement(source)
     const isLDAP = isConnectedToLDAP(source)
@@ -43,17 +50,34 @@ const AdminInfluxDBTabbedPage = ({source, activeTab, children}: Props) => {
       },
     ]
   }, [source])
+  return (
+    <SubSections
+      parentUrl="admin-influxdb"
+      sourceID={source.id}
+      activeSection={activeTab}
+      sections={sections}
+      position="top"
+      onTabChange={onTabChange}
+    >
+      {children}
+    </SubSections>
+  )
+}
+const AdminInfluxDBTabbedPage = ({
+  source,
+  activeTab,
+  children,
+  onTabChange,
+}: Props) => {
   return (
     <WrapToPage hideRefresh={activeTab === 'queries'}>
-      <SubSections
-        parentUrl="admin-influxdb"
-        sourceID={source.id}
-        activeSection={activeTab}
-        sections={sections}
-        position="top"
+      <AdminTabs
+        source={source}
+        activeTab={activeTab}
+        onTabChange={onTabChange}
       >
         {children}
-      </SubSections>
+      </AdminTabs>
     </WrapToPage>
   )
 }