From dba6fe4420c17235c8a74d83f6a2b6d140143729 Mon Sep 17 00:00:00 2001
From: Pavel Zavora <pavel.zavora@bonitoo.io>
Date: Wed, 25 May 2022 14:40:27 +0200
Subject: [PATCH] feat(ui): allow to hide roles on Users page

---
 ui/src/admin/components/FilterBar.js          |  18 +--
 ui/src/admin/components/UserRow.tsx           |   9 +-
 .../admin/containers/influxdb/UsersPage.tsx   | 120 ++++++++++--------
 ui/src/style/pages/admin.scss                 |  31 ++---
 4 files changed, 102 insertions(+), 76 deletions(-)

diff --git a/ui/src/admin/components/FilterBar.js b/ui/src/admin/components/FilterBar.js
index 60bc84a42..21034eedd 100644
--- a/ui/src/admin/components/FilterBar.js
+++ b/ui/src/admin/components/FilterBar.js
@@ -41,14 +41,16 @@ class FilterBar extends Component {
             <span className="icon search" />
           </div>
         </div>
-        <button
-          className="btn btn-sm btn-primary"
-          disabled={isEditing}
-          onClick={onClickCreate}
-        >
-          <span className="icon plus" /> Create{' '}
-          {placeholderText.substring(0, placeholderText.length - 1)}
-        </button>
+        <div className="panel-heading--right">
+          <button
+            className="btn btn-sm btn-primary"
+            disabled={isEditing}
+            onClick={onClickCreate}
+          >
+            <span className="icon plus" /> Create{' '}
+            {placeholderText.substring(0, placeholderText.length - 1)}
+          </button>
+        </div>
       </div>
     )
   }
diff --git a/ui/src/admin/components/UserRow.tsx b/ui/src/admin/components/UserRow.tsx
index e1d2ca06d..470926887 100644
--- a/ui/src/admin/components/UserRow.tsx
+++ b/ui/src/admin/components/UserRow.tsx
@@ -27,6 +27,7 @@ interface Props {
   isEditing: boolean
   page: string
   userDBPermissions: Array<Record<string, boolean>>
+  hideRoles: boolean
   onCancel: (user: User) => void
   onEdit: (User: User, updates: Partial<User>) => void
   onSave: (user: User) => Promise<void>
@@ -41,6 +42,7 @@ const UserRow = ({
   isEditing,
   page,
   userDBPermissions,
+  hideRoles,
   onEdit,
   onSave,
   onCancel,
@@ -54,7 +56,7 @@ const UserRow = ({
         onEdit={onEdit}
         onSave={onSave}
         onCancel={onCancel}
-        colSpan={2 + userDBPermissions.length}
+        colSpan={1 + +!hideRoles + userDBPermissions.length}
       />
     )
   }
@@ -71,7 +73,7 @@ const UserRow = ({
       <td style={{width: `${USERS_TABLE.colUsername}px`}}>
         <Link to={page}>{user.name}</Link>
       </td>
-      {hasRoles ? (
+      {hasRoles && !hideRoles && (
         <td className="admin-table--left-offset">
           {allRoles.length ? (
             <UserRoleDropdown
@@ -83,7 +85,8 @@ const UserRow = ({
             <i>N/A</i>
           )}
         </td>
-      ) : (
+      )}
+      {!hasRoles && (
         <td style={{width: `${USERS_TABLE.colAdministrator}px`}}>
           <span className={adminStyle.style}>{adminStyle.text}</span>
         </td>
diff --git a/ui/src/admin/containers/influxdb/UsersPage.tsx b/ui/src/admin/containers/influxdb/UsersPage.tsx
index b457839ea..ee0aa281e 100644
--- a/ui/src/admin/containers/influxdb/UsersPage.tsx
+++ b/ui/src/admin/containers/influxdb/UsersPage.tsx
@@ -26,6 +26,7 @@ import UserRow from 'src/admin/components/UserRow'
 import useDebounce from 'src/utils/useDebounce'
 import useChangeEffect from 'src/utils/useChangeEffect'
 import MultiSelectDropdown from 'src/reusable_ui/components/dropdowns/MultiSelectDropdown'
+import {ComponentSize, SlideToggle} from 'src/reusable_ui'
 
 const isValidUser = (user: User) => {
   const minLen = 3
@@ -171,57 +172,73 @@ const UsersPage = ({
     filterUsers(debouncedFilterText)
   }, [debouncedFilterText])
 
+  // hide role
+  const [hideRoles, setHideRoles] = useState(false)
+  const changeHideRoles = useCallback(() => setHideRoles(!hideRoles), [
+    hideRoles,
+    setHideRoles,
+  ])
   return (
     <AdminInfluxDBTabbedPage activeTab="users" source={source}>
       <div className="panel panel-solid influxdb-admin">
         <div className="panel-heading">
-          <div className="heading-filters">
-            <div className="search-widget">
-              <input
-                type="text"
-                className="form-control input-sm"
-                placeholder={`Filter Users...`}
-                value={filterText}
-                onChange={changeFilterText}
-              />
-              <span className="icon search" />
-            </div>
-            <div className="db-selector">
-              <MultiSelectDropdown
-                onChange={changeSelectedDBs}
-                selectedIDs={selectedDBs}
-                emptyText="<no database>"
-              >
-                {databases.reduce(
-                  (acc, db) => {
-                    acc.push(
-                      <MultiSelectDropdown.Item
-                        key={db.name}
-                        id={db.name}
-                        value={{id: db.name}}
-                      >
-                        {db.name}
-                      </MultiSelectDropdown.Item>
-                    )
-                    return acc
-                  },
-                  [
-                    <MultiSelectDropdown.Item id="*" key="*" value={{id: '*'}}>
-                      All Databases
-                    </MultiSelectDropdown.Item>,
-                    <MultiSelectDropdown.Divider id="" key="" />,
-                  ]
-                )}
-              </MultiSelectDropdown>
-            </div>
+          <div className="search-widget">
+            <input
+              type="text"
+              className="form-control input-sm"
+              placeholder={`Filter Users...`}
+              value={filterText}
+              onChange={changeFilterText}
+            />
+            <span className="icon search" />
+          </div>
+          <div className="db-selector">
+            <MultiSelectDropdown
+              onChange={changeSelectedDBs}
+              selectedIDs={selectedDBs}
+              emptyText="<no database>"
+            >
+              {databases.reduce(
+                (acc, db) => {
+                  acc.push(
+                    <MultiSelectDropdown.Item
+                      key={db.name}
+                      id={db.name}
+                      value={{id: db.name}}
+                    >
+                      {db.name}
+                    </MultiSelectDropdown.Item>
+                  )
+                  return acc
+                },
+                [
+                  <MultiSelectDropdown.Item id="*" key="*" value={{id: '*'}}>
+                    All Databases
+                  </MultiSelectDropdown.Item>,
+                  <MultiSelectDropdown.Divider id="" key="" />,
+                ]
+              )}
+            </MultiSelectDropdown>
+          </div>
+          {isEnterprise && (
+            <div className="hide-roles-toggle">
+              <SlideToggle
+                active={hideRoles}
+                onChange={changeHideRoles}
+                size={ComponentSize.ExtraSmall}
+              />
+              Hide Roles
+            </div>
+          )}
+          <div className="panel-heading--right">
+            <button
+              className="btn btn-sm btn-primary"
+              disabled={users.some(u => u.isEditing)}
+              onClick={addUser}
+            >
+              <span className="icon plus" /> Create User
+            </button>
           </div>
-          <button
-            className="btn btn-sm btn-primary"
-            disabled={users.some(u => u.isEditing)}
-            onClick={addUser}
-          >
-            <span className="icon plus" /> Create User
-          </button>
         </div>
         <div className="panel-body">
           <FancyScrollbar>
@@ -229,9 +246,11 @@ const UsersPage = ({
               <thead>
                 <tr>
                   <th>User</th>
-                  <th className="admin-table--left-offset">
-                    {isEnterprise ? 'Roles' : 'Admin'}
-                  </th>
+                  {!hideRoles && (
+                    <th className="admin-table--left-offset">
+                      {isEnterprise ? 'Roles' : 'Admin'}
+                    </th>
+                  )}
                   {visibleUsers.length && visibleDBNames.length
                     ? visibleDBNames.map(name => (
                         <th
@@ -256,6 +275,7 @@ const UsersPage = ({
                       )}`}
                       userDBPermissions={userDBPermissions[userIndex]}
                       allRoles={roles}
+                      hideRoles={hideRoles}
                       hasRoles={isEnterprise}
                       onEdit={editUser}
                       onSave={handleSaveUser}
@@ -268,7 +288,7 @@ const UsersPage = ({
                 ) : (
                   <EmptyRow
                     tableName={'Users'}
-                    colSpan={2}
+                    colSpan={1 + +!hideRoles}
                     filtered={!!filterText}
                   />
                 )}
diff --git a/ui/src/style/pages/admin.scss b/ui/src/style/pages/admin.scss
index 49417a8d7..ccf97dc10 100644
--- a/ui/src/style/pages/admin.scss
+++ b/ui/src/style/pages/admin.scss
@@ -202,29 +202,30 @@ pre.admin-table--query {
     min-height: 60px;
     padding: 0 30px;
     flex-wrap: wrap;
-    justify-content: end;
-    *:first-child {
-      flex: 1 0 auto;
-    }
-    .heading-filters {
-      display: flex;
-      justify-content: flex-start;
-      column-gap: 5px;
-    }
+    justify-content: flex-start;
+    column-gap: 5px;
     .search-widget {
-      flex-grow: 0;
       width: 250px;
     }
     .db-selector {
-      flex-grow: 0;
       width: 150px;
     }
-    .btn {
-      margin-left: 5px;
-      &:first-child {
-        margin-left: 0px;
+    .hide-roles-toggle {
+      display: flex;
+      align-items: center;
+      font-size: 13px;
+      color: $g13-mist;
+      font-weight: 600;
+      @include no-user-select();
+      .slide-toggle {
+        margin-right: 3px;
       }
     }
+    .panel-heading--right {
+      flex-grow: 1;
+      display: flex;
+      justify-content: flex-end;
+    }
   }
   .panel-body {
     border-radius: 0px;