Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(ui): allow to hide roles on Users page

pull/5921/head
Pavel Zavora 2022-05-25 14:40:27 +02:00
parent d5a1dcef0c
commit dba6fe4420
4 changed files with 102 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/src/admin/components/FilterBar.js
View File

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

9
ui/src/admin/components/UserRow.tsx
View File

@ -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>

120
ui/src/admin/containers/influxdb/UsersPage.tsx
View File

@ -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}
/>
)}

31
ui/src/style/pages/admin.scss
View File

@ -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;