Skip to content

N
nexpie-grafana-theme
Commit f05607d4 by Eric Leijonmarck Committed by Sofia Papagiannaki
Options

UserTableView: Show user name in table view (#18108) 

* refactor to multiple rows

* added name for org user struct

* added name getorgusers

* added user name to tableview

* made test pass

* updated userMocks to user name field

* added missing UsersTable snapshot

* added name on teammembers page, be able to search query for name, login and email

* added the updated snapshots

* conform to same sorting as output form

* conform to previous way of using it

* sort first by login and after by email, as it was before
parent e33cf32b
Showing with 91 additions and 13 deletions
pkg/models/org_user.go
......@@ -111,6 +111,7 @@ type OrgUserDTO struct {
OrgId int64 `json:"orgId"`
UserId int64 `json:"userId"`
Email string `json:"email"`
Name string `json:"name"`
AvatarUrl string `json:"avatarUrl"`
Login string `json:"login"`
Role string `json:"role"`
......
pkg/models/team_member.go
......@@ -70,6 +70,7 @@ type TeamMemberDTO struct {
External bool `json:"-"`
AuthModule string `json:"auth_module"`
Email string `json:"email"`
Name string `json:"name"`
Login string `json:"login"`
AvatarUrl string `json:"avatarUrl"`
Labels []string `json:"labels"`
......
pkg/services/sqlstore/org_users.go
......@@ -120,7 +120,15 @@ func GetOrgUsers(query *m.GetOrgUsersQuery) error {
sess.Limit(query.Limit, 0)
}
sess.Cols("org_user.org_id", "org_user.user_id", "user.email", "user.login", "org_user.role", "user.last_seen_at")
sess.Cols(
"org_user.org_id",
"org_user.user_id",
"user.email",
"user.name",
"user.login",
"org_user.role",
"user.last_seen_at",
)
sess.Asc("user.email", "user.login")
if err := sess.Find(&query.Result); err != nil {
......
pkg/services/sqlstore/team.go
......@@ -387,7 +387,17 @@ func GetTeamMembers(query *models.GetTeamMembersQuery) error {
if query.External {
sess.Where("team_member.external=?", dialect.BooleanStr(true))
}
sess.Cols("team_member.org_id", "team_member.team_id", "team_member.user_id", "user.email", "user.login", "team_member.external", "team_member.permission", "user_auth.auth_module")
sess.Cols(
"team_member.org_id",
"team_member.team_id",
"team_member.user_id",
"user.email",
"user.name",
"user.login",
"team_member.external",
"team_member.permission",
"user_auth.auth_module",
)
sess.Asc("user.login", "user.email")
err := sess.Find(&query.Result)
......
public/app/features/teams/TeamMemberRow.test.tsx
......@@ -74,8 +74,9 @@ describe('Functions', () => {
teamId: 2,
avatarUrl: '',
email: 'user@user.org',
labels: [],
login: 'member',
name: 'member',
labels: [],
permission: TeamPermissionLevel.Member,
};
const { instance } = setup({ member });
......
public/app/features/teams/TeamMemberRow.tsx
......@@ -82,6 +82,7 @@ export class TeamMemberRow extends PureComponent<Props> {
</td>
<td>{member.login}</td>
<td>{member.email}</td>
<td>{member.name}</td>
{this.renderPermissions(member)}
{syncEnabled && this.renderLabels(member.labels)}
<td className="text-right">
......
public/app/features/teams/TeamMembers.tsx
......@@ -115,8 +115,9 @@ export class TeamMembers extends PureComponent<Props, State> {
<thead>
<tr>
<th />
<th>Name</th>
<th>Login</th>
<th>Email</th>
<th>Name</th>
<WithFeatureToggle featureToggle={editorsCanAdmin}>
<th>Permission</th>
</WithFeatureToggle>
......
public/app/features/teams/__mocks__/teamMocks.ts
......@@ -36,6 +36,7 @@ export const getMockTeamMembers = (amount: number, teamAdminId: number): TeamMem
teamId: 1,
avatarUrl: 'some/url/',
email: 'test@test.com',
name: 'testName',
login: `testUser-${i}`,
labels: ['label 1', 'label 2'],
permission: i === teamAdminId ? TeamPermissionLevel.Admin : TeamPermissionLevel.Member,
......@@ -51,6 +52,7 @@ export const getMockTeamMember = (): TeamMember => {
teamId: 1,
avatarUrl: 'some/url/',
email: 'test@test.com',
name: 'testName',
login: 'testUser',
labels: [],
permission: TeamPermissionLevel.Member,
......
public/app/features/teams/__snapshots__/TeamMemberRow.test.tsx.snap
......@@ -18,6 +18,9 @@ exports[`Render should render team members when sync enabled 1`] = `
<td>
test@test.com
</td>
<td>
testName
</td>
<Component
featureToggle={false}
>
......@@ -71,6 +74,9 @@ exports[`Render when feature toggle editorsCanAdmin is turned off should not ren
<td>
test@test.com
</td>
<td>
testName
</td>
<Component
featureToggle={false}
>
......@@ -157,6 +163,9 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render p
<td>
test@test.com
</td>
<td>
testName
</td>
<Component
featureToggle={true}
>
......@@ -243,6 +252,9 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render s
<td>
test@test.com
</td>
<td>
testName
</td>
<Component
featureToggle={true}
>
......
public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
......@@ -64,11 +64,14 @@ exports[`Render should render component 1`] = `
<tr>
<th />
<th>
Name
Login
</th>
<th>
Email
</th>
<th>
Name
</th>
<Component
featureToggle={false}
>
......@@ -155,11 +158,14 @@ exports[`Render should render team members 1`] = `
<tr>
<th />
<th>
Name
Login
</th>
<th>
Email
</th>
<th>
Name
</th>
<Component
featureToggle={false}
>
......@@ -189,6 +195,7 @@ exports[`Render should render team members 1`] = `
"label 2",
],
"login": "testUser-1",
"name": "testName",
"permission": 0,
"teamId": 1,
"userId": 1,
......@@ -209,6 +216,7 @@ exports[`Render should render team members 1`] = `
"label 2",
],
"login": "testUser-2",
"name": "testName",
"permission": 0,
"teamId": 1,
"userId": 2,
......@@ -229,6 +237,7 @@ exports[`Render should render team members 1`] = `
"label 2",
],
"login": "testUser-3",
"name": "testName",
"permission": 0,
"teamId": 1,
"userId": 3,
......@@ -249,6 +258,7 @@ exports[`Render should render team members 1`] = `
"label 2",
],
"login": "testUser-4",
"name": "testName",
"permission": 0,
"teamId": 1,
"userId": 4,
......@@ -269,6 +279,7 @@ exports[`Render should render team members 1`] = `
"label 2",
],
"login": "testUser-5",
"name": "testName",
"permission": 4,
"teamId": 1,
"userId": 5,
......
public/app/features/teams/state/selectors.ts
......@@ -26,7 +26,7 @@ export const getTeamMembers = (state: TeamState) => {
const regex = RegExp(state.searchMemberQuery, 'i');
return state.members.filter(member => {
return regex.test(member.login) || regex.test(member.email);
return regex.test(member.login) || regex.test(member.email) || regex.test(member.name);
});
};
......
public/app/features/users/UsersActionBar.tsx
......@@ -49,7 +49,7 @@ export class UsersActionBar extends PureComponent<Props> {
inputClassName="gf-form-input width-20"
value={searchQuery}
onChange={setUsersSearchQuery}
placeholder="Filter by name or type"
placeholder="Filter by email, login or name"
/>
{pendingInvitesCount > 0 && (
<div style={{ marginLeft: '1rem' }}>
......
public/app/features/users/UsersTable.tsx
......@@ -17,6 +17,7 @@ const UsersTable: FC<Props> = props => {
<th />
<th>Login</th>
<th>Email</th>
<th>Name</th>
<th>Seen</th>
<th>Role</th>
<th style={{ width: '34px' }} />
......@@ -33,6 +34,7 @@ const UsersTable: FC<Props> = props => {
<td>
<span className="ellipsis">{user.email}</span>
</td>
<td>{user.name}</td>
<td>{user.lastSeenAtAge}</td>
<td>
<div className="gf-form-select-wrapper width-12">
......
public/app/features/users/__mocks__/userMocks.ts
......@@ -5,6 +5,7 @@ export const getMockUsers = (amount: number) => {
users.push({
avatarUrl: 'url/to/avatar',
email: `user-${i}@test.com`,
name: `user-${i} test`,
lastSeenAt: '2018-10-01',
lastSeenAtAge: '',
login: `user-${i}`,
......@@ -21,6 +22,7 @@ export const getMockUser = () => {
return {
avatarUrl: 'url/to/avatar',
email: `user@test.com`,
name: 'user test',
lastSeenAt: '2018-10-01',
lastSeenAtAge: '',
login: `user`,
......
public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap
......@@ -11,7 +11,7 @@ exports[`Render should render component 1`] = `
inputClassName="gf-form-input width-20"
labelClassName="gf-form--has-input-icon"
onChange={[MockFunction]}
placeholder="Filter by name or type"
placeholder="Filter by email, login or name"
value=""
/>
<div
......@@ -32,7 +32,7 @@ exports[`Render should render pending invites button 1`] = `
inputClassName="gf-form-input width-20"
labelClassName="gf-form--has-input-icon"
onChange={[MockFunction]}
placeholder="Filter by name or type"
placeholder="Filter by email, login or name"
value=""
/>
<div
......@@ -77,7 +77,7 @@ exports[`Render should show external user management button 1`] = `
inputClassName="gf-form-input width-20"
labelClassName="gf-form--has-input-icon"
onChange={[MockFunction]}
placeholder="Filter by name or type"
placeholder="Filter by email, login or name"
value=""
/>
<div
......@@ -104,7 +104,7 @@ exports[`Render should show invite button 1`] = `
inputClassName="gf-form-input width-20"
labelClassName="gf-form--has-input-icon"
onChange={[MockFunction]}
placeholder="Filter by name or type"
placeholder="Filter by email, login or name"
value=""
/>
<div
......
public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
......@@ -14,6 +14,9 @@ exports[`Render should render component 1`] = `
Email
</th>
<th>
Name
</th>
<th>
Seen
</th>
<th>
......@@ -46,6 +49,9 @@ exports[`Render should render users table 1`] = `
Email
</th>
<th>
Name
</th>
<th>
Seen
</th>
<th>
......@@ -82,6 +88,9 @@ exports[`Render should render users table 1`] = `
user-0@test.com
</span>
</td>
<td>
user-0 test
</td>
<td />
<td>
<div
......@@ -145,6 +154,9 @@ exports[`Render should render users table 1`] = `
user-1@test.com
</span>
</td>
<td>
user-1 test
</td>
<td />
<td>
<div
......@@ -208,6 +220,9 @@ exports[`Render should render users table 1`] = `
user-2@test.com
</span>
</td>
<td>
user-2 test
</td>
<td />
<td>
<div
......@@ -271,6 +286,9 @@ exports[`Render should render users table 1`] = `
user-3@test.com
</span>
</td>
<td>
user-3 test
</td>
<td />
<td>
<div
......@@ -334,6 +352,9 @@ exports[`Render should render users table 1`] = `
user-4@test.com
</span>
</td>
<td>
user-4 test
</td>
<td />
<td>
<div
......@@ -397,6 +418,9 @@ exports[`Render should render users table 1`] = `
user-5@test.com
</span>
</td>
<td>
user-5 test
</td>
<td />
<td>
<div
......
public/app/features/users/state/selectors.ts
......@@ -4,7 +4,7 @@ export const getUsers = (state: UsersState) => {
const regex = new RegExp(state.searchQuery, 'i');
return state.users.filter(user => {
return regex.test(user.login) || regex.test(user.email);
return regex.test(user.login) || regex.test(user.email) || regex.test(user.name);
});
};
......
public/app/types/teams.ts
......@@ -14,6 +14,7 @@ export interface TeamMember {
teamId: number;
avatarUrl: string;
email: string;
name: string;
login: string;
labels: string[];
permission: number;
......
public/app/types/user.ts
......@@ -6,6 +6,7 @@ export interface OrgUser {
lastSeenAt: string;
lastSeenAtAge: string;
login: string;
name: string;
orgId: number;
role: string;
userId: number;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment