Ws 119/admin listing page

identity-admin/webapp/components/search/Pagination.test.tsx

@@ -0,0 +1,112 @@
+import Pagination from './Pagination';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+const renderComponent = (currentPage: number, pageCount: number) =>
+  render(<Pagination currentPage={currentPage} pageCount={pageCount} />);
+const getAllLinks = () => screen.getAllByRole('link');
+const expectedLinkUrl = (expectedPage: string) =>
+  '/?email=bob%40email.com&name=Bob&page=' +
+  expectedPage +
+  '&sort=email&sortDir=1&status=active';
+
+jest.mock('next/router', () => ({
+  useRouter: () => {
+    return {
+      query: {
+        status: 'active',
+        name: 'Bob',
+        email: '[email protected]',
+        sort: 'email',
+        sortDir: '1',
+      },
+    };
+  },
+}));
+
+describe('Pagination', () => {
+  it('disables previous link on first page', () => {
+    renderComponent(1, 3);
+    const previous = screen.getByText('Previous');
+    expect(previous).toHaveClass('user-pagination__item--disabled');
+    expect(previous).not.toHaveAttribute('href');
+  });
+
+  it('disables next link on last page', () => {
+    renderComponent(3, 3);
+    const next = screen.getByText('Next');
+    expect(next).toHaveClass('user-pagination__item--disabled');
+    expect(next).not.toHaveAttribute('href');
+  });
+
+  it('shows one numbered previous page link on second page', () => {
+    renderComponent(2, 3);
+    const previous = getAllLinks()[1];
+    expect(previous).not.toHaveClass('user-pagination__item--disabled');
+    expect(previous).toHaveAttribute('href', expectedLinkUrl('1'));
+  });
+
+  it('shows two numbered previous page links on third page', () => {
+    renderComponent(3, 3);
+    const nMinus1 = getAllLinks()[1];
+    const nMinus2 = getAllLinks()[2];
+    expect(nMinus1).not.toHaveClass('user-pagination__item--disabled');
+    expect(nMinus1).toHaveAttribute('href', expectedLinkUrl('1'));
+    expect(nMinus2).not.toHaveClass('user-pagination__item--disabled');
+    expect(nMinus2).toHaveAttribute('href', expectedLinkUrl('2'));
+  });
+
+  it('shows numbered link to first page on fourth page', () => {
+    renderComponent(4, 4);
+    const first = getAllLinks()[1];
+    expect(first).not.toHaveClass('user-pagination__item--disabled');
+    expect(first).toHaveAttribute('href', expectedLinkUrl('1'));
+  });
+
+  it('shows ellipses between first page link and link n-2 on fifth page', () => {
+    renderComponent(5, 10);
+    const prefixEllipses = screen.getAllByRole('label')[0];
+    expect(prefixEllipses).not.toHaveAttribute('href');
+    expect(prefixEllipses).toHaveTextContent('...');
+    expect(prefixEllipses).toHaveClass(
+      'user-pagination__item--prefix-ellipses'
+    );
+  });
+
+  it('shows one numbered next page link on page T-1', () => {
+    renderComponent(4, 5);
+    const allLinks = getAllLinks();
+    const next = allLinks[allLinks.length - 2];
+    expect(next).not.toHaveClass('user-pagination__item--disabled');
+    expect(next).toHaveAttribute('href', expectedLinkUrl('5'));
+  });
+
+  it('shows two numbered next page links on page T-2', () => {
+    renderComponent(3, 5);
+    const allLinks = getAllLinks();
+    const nPlus1 = allLinks[allLinks.length - 3];
+    const nPlus2 = allLinks[allLinks.length - 2];
+    expect(nPlus1).not.toHaveClass('user-pagination__item--disabled');
+    expect(nPlus1).toHaveAttribute('href', expectedLinkUrl('4'));
+    expect(nPlus2).not.toHaveClass('user-pagination__item--disabled');
+    expect(nPlus2).toHaveAttribute('href', expectedLinkUrl('5'));
+  });
+
+  it('shows last page link on page T-3', () => {
+    renderComponent(2, 5);
+    const allLinks = getAllLinks();
+    const last = allLinks[allLinks.length - 2];
+    expect(last).not.toHaveClass('user-pagination__item--disabled');
+    expect(last).toHaveAttribute('href', expectedLinkUrl('5'));
+  });
+
+  it('shows ellipses between last page link and link n+2 on page T-4', () => {
+    renderComponent(5, 10);
+    const postfixEllipses = screen.getAllByRole('label')[2];
+    expect(postfixEllipses).not.toHaveAttribute('href');
+    expect(postfixEllipses).toHaveTextContent('...');
+    expect(postfixEllipses).toHaveClass(
+      'user-pagination__item--suffix-ellipses'
+    );
+  });
+});

identity-admin/webapp/components/search/Pagination.tsx

@@ -0,0 +1,104 @@
+import { useRouter } from 'next/router';
+import { buildSearchUrl } from '../../utils/search-util';
+
+type Props = {
+  currentPage: number;
+  pageCount: number;
+};
+
+const firstLinkClassName = 'user-pagination__item user-pagination__item--first';
+const linkClassName = 'user-pagination__item';
+const lastLinkClassName = 'user-pagination__item user-pagination__item--last';
+const disabled = 'user-pagination__item--disabled';
+const ellipses = 'user-pagination__item user-pagination__item--ellipses';
+const maxPageLinks = 4;
+
+const Pagination = ({ currentPage, pageCount }: Props): JSX.Element => {
+  const router = useRouter();
+  const { status, name, email, sort, sortDir } = router.query;
+
+  const pageUrl = (page: number): string => {
+    return buildSearchUrl(String(page), status, name, email, sort, sortDir);
+  };
+
+  const hasPrevious: boolean = currentPage > 1;
+  const hasNext: boolean = currentPage < pageCount;
+  const hasFirstPageLink: boolean = currentPage >= maxPageLinks;
+  const hasLastPageLink: boolean = currentPage < pageCount - maxPageLinks / 2;
+  const hasPrefixEllipses: boolean = currentPage > maxPageLinks;
+  const hasSuffixEllipses: boolean = currentPage <= pageCount - maxPageLinks;
+
+  return (
+    <div className="user-pagination">
+      {hasPrevious ? (
+        <a href={pageUrl(currentPage - 1)} className={firstLinkClassName}>
+          Previous
+        </a>
+      ) : (
+        <span role="label" className={firstLinkClassName + ' ' + disabled}>
+          Previous
+        </span>
+      )}
+      {hasFirstPageLink && (
+        <a href={pageUrl(1)} className={linkClassName}>
+          1
+        </a>
+      )}
+      {hasPrefixEllipses && (
+        <span
+          role="label"
+          className={ellipses + ' user-pagination__item--prefix-ellipses'}
+        >
+          ...
+        </span>
+      )}
+      {currentPage > 2 && (
+        <a href={pageUrl(currentPage - 2)} className={linkClassName}>
+          {currentPage - 2}
+        </a>
+      )}
+      {currentPage > 1 && (
+        <a href={pageUrl(currentPage - 1)} className={linkClassName}>
+          {currentPage - 1}
+        </a>
+      )}
+      <span role="label" className={linkClassName + ' ' + disabled}>
+        {currentPage}
+      </span>
+      {currentPage < pageCount && (
+        <a href={pageUrl(currentPage + 1)} className={linkClassName}>
+          {currentPage + 1}
+        </a>
+      )}
+      {currentPage + 1 < pageCount && (
+        <a href={pageUrl(currentPage + 2)} className={linkClassName}>
+          {currentPage + 2}
+        </a>
+      )}
+      {hasSuffixEllipses && (
+        <span
+          role="label"
+          className={ellipses + ' user-pagination__item--suffix-ellipses'}
+        >
+          ...
+        </span>
+      )}
+      {hasLastPageLink && (
+        <a href={pageUrl(pageCount)} className={linkClassName}>
+          {pageCount}
+        </a>
+      )}
+      {hasNext ? (
+        <a href={pageUrl(currentPage + 1)} className={lastLinkClassName}>
+          Next
+        </a>
+      ) : (
+        <span role="label" className={lastLinkClassName + ' ' + disabled}>
+          Next
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Pagination;

identity-admin/webapp/components/search/SearchInput.tsx

@@ -0,0 +1,56 @@
+import { useRouter } from 'next/router';
+import { buildSearchUrl } from '../../utils/search-util';
+
+const SearchInput = (): JSX.Element => {
+  const router = useRouter();
+  const { status, name, email } = router.query;
+
+  const onChangeName = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    window.location.href = buildSearchUrl(
+      '1',
+      status,
+      event.currentTarget.nameField.value,
+      email
+    );
+  };
+
+  const onChangeEmail = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    window.location.href = buildSearchUrl(
+      '1',
+      status,
+      name,
+      event.currentTarget.emailField.value
+    );
+  };
+
+  return (
+    <>
+      <td className="user-list__filter-header user-list__first">
+        <form onSubmit={onChangeName} className="user-list__search-form">
+          <input
+            type="text"
+            name="nameField"
+            placeholder="Enter name"
+            defaultValue={name}
+          />
+          <button type="submit">Search</button>
+        </form>
+      </td>
+      <td className="user-list__filter-header">
+        <form onSubmit={onChangeEmail} className="user-list__search-form">
+          <input
+            type="text"
+            name="emailField"
+            placeholder="Enter email"
+            defaultValue={email}
+          />
+          <button type="submit">Search</button>
+        </form>
+      </td>
+    </>
+  );
+};
+
+export default SearchInput;

identity-admin/webapp/components/search/Sorter.test.tsx

@@ -0,0 +1,61 @@
+import Sorter from './Sorter';
+import { SortField } from '../../interfaces';
+import { render, screen } from '@testing-library/react';
+import { useRouter } from 'next/router';
+
+const mockedRouter = useRouter as jest.Mock;
+
+jest.mock('next/router');
+
+const renderComponent = (sort: SortField) => {
+  return render(<Sorter fieldName={sort} />);
+};
+
+const mockQueryParams = (params: { sortDir?: string; sort: SortField }) => {
+  mockedRouter.mockImplementation(() => {
+    return {
+      query: {
+        status: 'active',
+        name: 'Bob',
+        email: '[email protected]',
+        ...params,
+      },
+    };
+  });
+};
+
+const expectedUrl = (sort: SortField, sortDir: string) =>
+  '/?email=bob%40email.com&name=Bob&page=1&sort=' +
+  sort +
+  '&sortDir=' +
+  sortDir +
+  '&status=active';
+
+describe('Sorter', () => {
+  it('shows down arrow if sort is applied to a different field', async () => {
+    mockQueryParams({ sortDir: '1', sort: SortField.Email });
+    renderComponent(SortField.Name);
+    expect(screen.getByText('▾')).toHaveAttribute(
+      'href',
+      expectedUrl(SortField.Name, '1')
+    );
+  });
+
+  it('shows down arrow if sort direction is asc', async () => {
+    mockQueryParams({ sortDir: '1', sort: SortField.Name });
+    renderComponent(SortField.Name);
+    expect(screen.getByText('▾')).toHaveAttribute(
+      'href',
+      expectedUrl(SortField.Name, '-1')
+    );
+  });
+
+  it('shows up arrow if sort dir is desc', async () => {
+    mockQueryParams({ sortDir: '-1', sort: SortField.Name });
+    renderComponent(SortField.Name);
+    expect(screen.getByText('▴')).toHaveAttribute(
+      'href',
+      expectedUrl(SortField.Name, '1')
+    );
+  });
+});

identity-admin/webapp/components/search/Sorter.tsx

@@ -0,0 +1,45 @@
+import { useRouter } from 'next/router';
+import { buildSearchUrl } from '../../utils/search-util';
+import { SortField } from '../../interfaces';
+
+type Props = {
+  fieldName: SortField;
+};
+
+const Sorter = ({ fieldName }: Props): JSX.Element => {
+  const router = useRouter();
+  const { status, name, email, sort, sortDir } = router.query;
+
+  const isCurrentlySortedField = () => {
+    return fieldName === sort;
+  };
+
+  const buildSortUrl = (): string => {
+    if (isCurrentlySortedField()) {
+      return buildSearchUrl(
+        '1',
+        status,
+        name,
+        email,
+        sort,
+        sortDir === '1' ? '-1' : '1'
+      );
+    }
+    return buildSearchUrl('1', status, name, email, fieldName, '1');
+  };
+
+  const sortSymbol = (): string => {
+    if (isCurrentlySortedField()) {
+      return sortDir === '1' ? '▾' : '▴';
+    }
+    return '▾';
+  };
+
+  return (
+    <a className="user-list__sorter" href={buildSortUrl()}>
+      {sortSymbol()}
+    </a>
+  );
+};
+
+export default Sorter;