Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ws 119/admin listing page #6179

Merged
merged 44 commits into from
Apr 1, 2021
Merged

Ws 119/admin listing page #6179

Changes from 1 commit
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
f1a1e6d
Create mocked search API endpoint
robmarch2 Mar 4, 2021
8676776
Add react router dependency
robmarch2 Mar 4, 2021
ad11160
Create middleware API caller with typed response
robmarch2 Mar 4, 2021
a6e2dd1
Create utils for building search URLs
robmarch2 Mar 4, 2021
7bdbd19
Create search components
robmarch2 Mar 4, 2021
9506630
Add search component to homepage
robmarch2 Mar 4, 2021
dcdbe74
Add stylesheets
robmarch2 Mar 4, 2021
bafdfaf
Expand pagination component
robmarch2 Mar 4, 2021
8f79bfc
Remove magic numbers from pagination
robmarch2 Mar 4, 2021
f0a096c
Remove intermediate state on search forms
robmarch2 Mar 4, 2021
2b3c3a2
Hide placeholder text on status dropdown
robmarch2 Mar 4, 2021
a0df4a4
Fix linting issue
robmarch2 Mar 4, 2021
35679e7
Remove unnecessary dependency
robmarch2 Mar 4, 2021
e7a82cd
Provide default value for page in mock API
robmarch2 Mar 4, 2021
b730b8b
Use query string to build search URLs
robmarch2 Mar 4, 2021
d7e892c
Make page number cast in mock API more explicit
robmarch2 Mar 4, 2021
48069ee
Merge branches 'master' and 'WS-119/admin-listing-page' of https://gi…
robmarch2 Mar 9, 2021
2d80d91
Remove app CSS
robmarch2 Mar 9, 2021
ab83f28
Use standardised pretty date module
robmarch2 Mar 9, 2021
36d0853
Remove unnecessary dependency
robmarch2 Mar 9, 2021
1a59d01
Use correct query string library to build URLs
robmarch2 Mar 9, 2021
aac2a27
Simplify last login date field
robmarch2 Mar 10, 2021
f6bfa4c
Remove redundant sort field check
robmarch2 Mar 10, 2021
115a802
Add pagination tests
robmarch2 Mar 10, 2021
a876b05
Add sorter tests
robmarch2 Mar 10, 2021
1683380
Add status dropdown tests
robmarch2 Mar 10, 2021
1eb0f09
UI and UX changes to make the user listing page
robmarch2 Mar 17, 2021
1e26551
Improve styling of status dropdown
robmarch2 Mar 23, 2021
26ceba6
Merge branch 'master' of https://github.com/wellcomecollection/wellco…
robmarch2 Mar 23, 2021
d2cc332
Ensure correct query param is used to build search URL
robmarch2 Mar 23, 2021
c5079d8
Style user list item to appear clickable
robmarch2 Mar 24, 2021
7053bbc
Integrate user listing page with real API
robmarch2 Mar 24, 2021
366645b
Remove unusable sort field
robmarch2 Mar 24, 2021
e0dcbc1
Improve pagingation tests
robmarch2 Mar 31, 2021
1a8859a
Improve sorter tests
robmarch2 Mar 31, 2021
c3167b8
Improve status dropdown tests
robmarch2 Mar 31, 2021
f34c2a0
Remove unnecessary logging from test
robmarch2 Mar 31, 2021
2506f92
Wrap user list entry in link
robmarch2 Mar 31, 2021
f208633
Update yarn.lock
robmarch2 Mar 31, 2021
c635a6f
Merge branches 'master' and 'WS-119/admin-listing-page' of https://gi…
robmarch2 Mar 31, 2021
bb5d259
Update yarn.lock
robmarch2 Mar 31, 2021
d5b81fc
Improve selctors for tests
robmarch2 Apr 1, 2021
f123a89
Improved semantics for table header
robmarch2 Apr 1, 2021
7c9156d
Increase contrast of disabled pagination links
robmarch2 Apr 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 5 additions & 25 deletions identity-admin/webapp/utils/search-util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,18 @@
import { SortField } from '../interfaces';
import * as queryString from 'querystring';
import * as queryString from 'query-string';

export function buildSearchParams(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is really cool, but I'd just use the query-string package to do this job: https://www.npmjs.com/package/query-string

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've pushed up a version using query-string but I don't think it's really giving us all that much. The typescript module is missing the property we really need to be able to get it to minimise the logic here (i.e. https://www.npmjs.com/package/query-string#skipnull ). If you've got any suggestions on how we could improve on it, I'm all ears!

Copy link
Contributor

@ajrussellaudio ajrussellaudio Mar 5, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The pushed code imports from the wrong library:

- import * as queryString from 'querystring';
+ import * as queryString from 'query-string';

Such an easy mistake to make!

Once we're importing from that library, we don't need its skipNull option. From that link:

Note that keys with undefined as the value are always skipped.

So we can actually make buildSearchParams a one-liner:

export function buildSearchParams(
  page: string | string[],
  status: string | string[],
  name: string | string[],
  email: string | string[],
  sortField?: SortField | SortField[],
  sortDir?: string | string[],
): string {
  return queryString.stringify({ page, status, name, email, sort: sortField, sortDir });
}
buildSearchParams('1', 'active', 'batman', '[email protected]')
// -> 'email=bats%40batcave.com&name=batman&page=1&status=active'

...or even remove it altogether.

page: string | string[],
status: string | string[],
name: string | string[],
email: string | string[],
sortField?: string | string[],
sortDir?: string | string[]
sortDir?: string | string[],
): string {
let params = {};
if (page) {
params = { ...params, page: page };
}
if (status) {
params = { ...params, status: status };
}
if (name) {
params = { ...params, name: name };
}
if (email) {
params = { ...params, email: email };
}
if (
sortField &&
const sort = sortField &&
typeof sortField === 'string' &&
Object.values(SortField).includes(sortField as SortField)
) {
params = { ...params, sort: sortField };
}
if (sortDir && (sortDir === '1' || sortDir === '-1')) {
params = { ...params, sortDir: sortDir };
}
return queryString.stringify(params);
Object.values(SortField).includes(sortField as SortField) ? sortField : undefined;
ajrussellaudio marked this conversation as resolved.
Show resolved Hide resolved
return queryString.stringify({ page, status, name, email, sort, sortDir });
}

export function buildSearchUrl(
Expand Down