Merge pull request #5945 from influxdata/5943/avoid_empty_table

fix(ui/admin): simplify no data message

ui/cypress/integration/admin.test.ts

@@ -238,15 +238,6 @@ describe('Use Admin tab', () => {
       })
 
       it('create a role, edit it, assign it to a user, and delete it', () => {
-        cy.getByTestID('admin-table--head').within(() => {
-          cy.get('th').contains('Users').should('exist')
-        })
-
-        cy.getByTestID('hide-users--toggle').click()
-        cy.getByTestID('admin-table--head').within(() => {
-          cy.get('th').contains('Users').should('not.exist')
-        })
-
         cy.getByTestID(`role-${influxDB.role.name}--row`).should('not.exist')
         cy.getByTestID('create-role--button').click({force: true})
         cy.getByTestID('dismiss-button').click()

ui/src/admin/components/EmptyRow.tsx

@@ -1,23 +0,0 @@
-import React, {FunctionComponent} from 'react'
-
-interface Props {
-  entities: string
-  colSpan?: number
-  filtered?: boolean
-}
-const EmptyRow: FunctionComponent<Props> = ({entities, colSpan, filtered}) => (
-  <tr className="table-empty-state">
-    <th colSpan={colSpan || 5}>
-      {filtered ? (
-        <p>No Matching {entities}</p>
-      ) : (
-        <p>
-          You don't have any {entities},<br />
-          why not create one?
-        </p>
-      )}
-    </th>
-  </tr>
-)
-
-export default EmptyRow

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

@@ -0,0 +1,17 @@
+import React, {FunctionComponent} from 'react'
+
+interface Props {
+  entities: string
+  filtered?: boolean
+}
+const NoEntities: FunctionComponent<Props> = ({entities, filtered}) =>
+  filtered ? (
+    <p className="empty">No Matching {entities} Found</p>
+  ) : (
+    <p className="empty">
+      You don't have any {entities},<br />
+      why not create one?
+    </p>
+  )
+
+export default NoEntities

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

@@ -18,7 +18,7 @@ import AdminInfluxDBTabbedPage, {
   isConnectedToLDAP,
 } from './AdminInfluxDBTabbedPage'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
-import EmptyRow from 'src/admin/components/EmptyRow'
+import NoEntities from 'src/admin/components/influxdb/NoEntities'
 import RoleRow from 'src/admin/components/RoleRow'
 import {useCallback} from 'react'
 import allOrParticularSelection from '../../util/allOrParticularSelection'
@@ -207,30 +207,30 @@ const RolesPage = ({
           </div>
         </div>
         <div className="panel-body">
-          <FancyScrollbar>
-            <table className="table v-center admin-table table-highlight admin-table--compact">
-              <thead data-test="admin-table--head">
-                <tr>
-                  <th>Role</th>
-                  {showUsers && (
-                    <th className="admin-table--left-offset">Users</th>
-                  )}
-                  {visibleRoles.length && visibleDBNames.length
-                    ? visibleDBNames.map(name => (
-                        <th
-                          className="admin-table__dbheader"
-                          title={`effective permissions for db: ${name}`}
-                          key={name}
-                        >
-                          {name}
-                        </th>
-                      ))
-                    : null}
-                </tr>
-              </thead>
-              <tbody data-test="admin-table--body">
-                {visibleRoles.length ? (
-                  visibleRoles.map((role, roleIndex) => (
+          {visibleRoles.length ? (
+            <FancyScrollbar>
+              <table className="table v-center admin-table table-highlight admin-table--compact">
+                <thead data-test="admin-table--head">
+                  <tr>
+                    <th>Role</th>
+                    {showUsers && (
+                      <th className="admin-table--left-offset">Users</th>
+                    )}
+                    {visibleDBNames.length
+                      ? visibleDBNames.map(name => (
+                          <th
+                            className="admin-table__dbheader"
+                            title={`effective permissions for db: ${name}`}
+                            key={name}
+                          >
+                            {name}
+                          </th>
+                        ))
+                      : null}
+                  </tr>
+                </thead>
+                <tbody data-test="admin-table--body">
+                  {visibleRoles.map((role, roleIndex) => (
                     <RoleRow
                       key={role.name}
                       role={role}
@@ -241,17 +241,13 @@ const RolesPage = ({
                       allUsers={users}
                       showUsers={showUsers}
                     />
-                  ))
-                ) : (
-                  <EmptyRow
-                    entities="Roles"
-                    colSpan={1 + +showUsers}
-                    filtered={!!filterText}
-                  />
-                )}
-              </tbody>
-            </table>
-          </FancyScrollbar>
+                  ))}
+                </tbody>
+              </table>
+            </FancyScrollbar>
+          ) : (
+            <NoEntities entities="Roles" filtered={!!debouncedFilterText} />
+          )}
         </div>
       </div>
     </AdminInfluxDBTabbedPage>

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

@@ -18,7 +18,7 @@ import AdminInfluxDBTabbedPage, {
   isConnectedToLDAP,
 } from './AdminInfluxDBTabbedPage'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
-import EmptyRow from 'src/admin/components/EmptyRow'
+import NoEntities from 'src/admin/components/influxdb/NoEntities'
 import UserRow from 'src/admin/components/UserRow'
 import useDebounce from 'src/utils/useDebounce'
 import useChangeEffect from 'src/utils/useChangeEffect'
@@ -218,32 +218,32 @@ const UsersPage = ({
           </div>
         </div>
         <div className="panel-body">
-          <FancyScrollbar>
-            <table className="table v-center admin-table table-highlight admin-table--compact">
-              <thead>
-                <tr>
-                  <th>User</th>
-                  {showRoles && (
-                    <th className="admin-table--left-offset">
-                      {isEnterprise ? 'Roles' : 'Admin'}
-                    </th>
-                  )}
-                  {visibleUsers.length && visibleDBNames.length
-                    ? visibleDBNames.map(name => (
-                        <th
-                          className="admin-table__dbheader"
-                          title={`effective permissions for db: ${name}`}
-                          key={name}
-                        >
-                          {name}
-                        </th>
-                      ))
-                    : null}
-                </tr>
-              </thead>
-              <tbody>
-                {visibleUsers.length ? (
-                  visibleUsers.map((user, userIndex) => (
+          {visibleUsers.length ? (
+            <FancyScrollbar>
+              <table className="table v-center admin-table table-highlight admin-table--compact">
+                <thead>
+                  <tr>
+                    <th>User</th>
+                    {showRoles && (
+                      <th className="admin-table--left-offset">
+                        {isEnterprise ? 'Roles' : 'Admin'}
+                      </th>
+                    )}
+                    {visibleDBNames.length
+                      ? visibleDBNames.map(name => (
+                          <th
+                            className="admin-table__dbheader"
+                            title={`effective permissions for db: ${name}`}
+                            key={name}
+                          >
+                            {name}
+                          </th>
+                        ))
+                      : null}
+                  </tr>
+                </thead>
+                <tbody>
+                  {visibleUsers.map((user, userIndex) => (
                     <UserRow
                       key={user.name}
                       user={user}
@@ -255,17 +255,13 @@ const UsersPage = ({
                       showRoles={showRoles}
                       hasRoles={isEnterprise}
                     />
-                  ))
-                ) : (
-                  <EmptyRow
-                    entities="Users"
-                    colSpan={1 + +showRoles}
-                    filtered={!!filterText}
-                  />
-                )}
-              </tbody>
-            </table>
-          </FancyScrollbar>
+                  ))}
+                </tbody>
+              </table>
+            </FancyScrollbar>
+          ) : (
+            <NoEntities entities="Users" filtered={!!debouncedFilterText} />
+          )}
         </div>
       </div>
     </AdminInfluxDBTabbedPage>

ui/src/style/pages/admin.scss

@@ -153,6 +153,12 @@ pre.admin-table--query {
     padding: 0 30px;
     min-height: 60px;
   }
+  p.empty {
+    font-weight: 400;
+    font-size: 18px;
+    color: $g9-mountain;
+  }
+  
   .influxdb-admin--contents{
     height: calc(100%-60px);
   }