DEV-489: Refactor contributor dashboard to use react-query, hide deleted contribs locally

.pre-commit-config.yaml

@@ -32,7 +32,7 @@ repos:
     rev: 5.10.1
     hooks:
       - id: isort
-        args: ['--profile', 'black', '--filter-files']
+        args: ["--profile", "black", "--filter-files"]
         exclude: ^.*\b(migrations)\b.*$
   # Pythonic checks.
   - repo: https://github.com/PyCQA/flake8
@@ -41,7 +41,7 @@ repos:
       - id: flake8
         exclude: docs|migrations|node_modules|revengine/settings
         additional_dependencies:
-          - 'flake8-logging-format'
+          - "flake8-logging-format"
   # # Pylint code checks.
   # # "local" because pylint needs all packages to dynamically import.
   # - repo: local

spa/.storybook/preview-body.html

@@ -0,0 +1,3 @@
+<!-- needed for elements/modal/Modal -->
+
+<div id="modal-root"></div>

spa/cypress/e2e/08-contributor.cy.js

@@ -63,7 +63,7 @@ describe('Contributor portal', () => {
     it('should display a list of contributions', () => {
       cy.getByTestId('donations-table');
       // DonationsTable is well tested elsewhere...
-      cy.get('td > p > span').should('have.length', 20);
+      cy.get('tbody tr').should('have.length', 10);
       cy.get('li > button[aria-label="page 1"]').should('exist');
       cy.get('li > button[aria-label="Go to page 2"]').should('exist');
       // ... though here we should see different column headers

spa/cypress/fixtures/donations/18-results.json

@@ -8,6 +8,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "one_time",
+    "is_cancelable": false,
+    "is_modifiable": false,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -34,6 +36,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "one_time",
+    "is_cancelable": false,
+    "is_modifiable": false,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -60,6 +64,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "one_time",
+    "is_cancelable": false,
+    "is_modifiable": false,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -86,6 +92,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "month",
+    "is_cancelable": true,
+    "is_modifiable": true,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -113,6 +121,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "month",
+    "is_cancelable": true,
+    "is_modifiable": true,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -140,6 +150,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "month",
+    "is_cancelable": true,
+    "is_modifiable": true,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -167,6 +179,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "month",
+    "is_cancelable": true,
+    "is_modifiable": true,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -194,6 +208,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "one_time",
+    "is_cancelable": true,
+    "is_modifiable": true,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -220,6 +236,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "one_time",
+    "is_cancelable": false,
+    "is_modifiable": false,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -246,6 +264,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "one_time",
+    "is_cancelable": false,
+    "is_modifiable": false,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -272,6 +292,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "one_time",
+    "is_cancelable": false,
+    "is_modifiable": false,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -298,6 +320,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "one_time",
+    "is_cancelable": false,
+    "is_modifiable": false,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -324,6 +348,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "year",
+    "is_cancelable": true,
+    "is_modifiable": true,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -351,6 +377,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "year",
+    "is_cancelable": true,
+    "is_modifiable": true,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -378,6 +406,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "year",
+    "is_cancelable": true,
+    "is_modifiable": true,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -405,6 +435,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "one_time",
+    "is_cancelable": false,
+    "is_modifiable": false,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -431,6 +463,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "one_time",
+    "is_cancelable": false,
+    "is_modifiable": false,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,
@@ -457,6 +491,8 @@
     "currency": "usd",
     "reason": "",
     "interval": "year",
+    "is_cancelable": true,
+    "is_modifiable": true,
     "payment_provider_used": "Stripe",
     "payment_provider_data": null,
     "provider_payment_id": null,

spa/package.json

@@ -87,7 +87,7 @@
     "collectCoverageFrom": [
       "**/*.[jt]s?(x)",
       "!**/node_modules/**",
-      "!**/*.stories.js",
+      "!**/*.stories.[jt]sx",
       "!**/*.styled.js"
     ],
     "transformIgnorePatterns": [

spa/src/components/base/Pagination/Pagination.stories.tsx

@@ -0,0 +1,14 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import Pagination from './Pagination';
+export default {
+  argTypes: {
+    count: { control: 'number', defaultValue: 5 },
+    page: { control: 'number', defaultValue: 2 }
+  },
+  component: Pagination,
+  title: 'Base/Pagination'
+} as ComponentMeta<typeof Pagination>;
+
+const Template: ComponentStory<typeof Pagination> = (props) => <Pagination {...props} />;
+
+export const Default = Template.bind({});

spa/src/components/base/Pagination/Pagination.test.tsx

@@ -0,0 +1,20 @@
+import { axe } from 'jest-axe';
+import { render, screen } from 'test-utils';
+import Pagination, { PaginationProps } from './Pagination';
+
+function tree(props?: PaginationProps) {
+  return render(<Pagination count={2} page={1} {...props} />);
+}
+
+describe('Pagination', () => {
+  it('renders a navigation', () => {
+    tree();
+    expect(screen.getByRole('navigation')).toBeVisible();
+  });
+
+  it('is accessible', async () => {
+    const { container } = tree();
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

spa/src/components/base/Pagination/Pagination.tsx

@@ -0,0 +1,19 @@
+import { Pagination as MuiPagination, PaginationProps as MuiPaginationProps } from '@material-ui/lab';
+import styled from 'styled-components';
+
+export const Pagination = styled(MuiPagination)`
+  && {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    button.Mui-selected {
+      background-color: #6fd1ec;
+      border-radius: 4px;
+      font-weight: 700;
+    }
+  }
+`;
+
+export type PaginationProps = MuiPaginationProps;
+export default Pagination;

spa/src/components/base/Table/Table.stories.tsx

@@ -0,0 +1,41 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import Table from './Table';
+import TableBody from './TableBody';
+import TableCell from './TableCell';
+import TableHead from './TableHead';
+import TableRow from './TableRow';
+export default {
+  component: Table,
+  title: 'Base/Table'
+} as ComponentMeta<typeof Table>;
+
+const Template: ComponentStory<typeof Table> = (props) => (
+  <Table {...props}>
+    <TableHead>
+      <TableRow>
+        <TableCell>ID</TableCell>
+        <TableCell>Color</TableCell>
+        <TableCell>Cost</TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell>1</TableCell>
+        <TableCell>Red</TableCell>
+        <TableCell>$1.99</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>2</TableCell>
+        <TableCell>Green</TableCell>
+        <TableCell>$4.99</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>3</TableCell>
+        <TableCell>Blue</TableCell>
+        <TableCell>$0.99</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+);
+
+export const Unsortable = Template.bind({});

spa/src/components/base/Table/Table.test.tsx

@@ -0,0 +1,66 @@
+import { axe } from 'jest-axe';
+import { render, screen } from 'test-utils';
+import Table from './Table';
+import TableBody from './TableBody';
+import TableCell from './TableCell';
+import TableHead from './TableHead';
+import TableRow from './TableRow';
+
+// This tests all components in this directory since they should be used
+// together.
+
+function tree() {
+  return render(
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell>ID</TableCell>
+          <TableCell>Color</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>1</TableCell>
+          <TableCell>Red</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>2</TableCell>
+          <TableCell>Green</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>3</TableCell>
+          <TableCell>Blue</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+
+describe('Table', () => {
+  it('renders a table', () => {
+    tree();
+    expect(screen.getByRole('table')).toBeVisible();
+  });
+
+  it('renders headers', () => {
+    tree();
+    expect(screen.getByRole('columnheader', { name: 'ID' })).toBeVisible();
+    expect(screen.getByRole('columnheader', { name: 'Color' })).toBeVisible();
+  });
+
+  it('renders cells', () => {
+    tree();
+    expect(screen.getByRole('cell', { name: '1' })).toBeVisible();
+    expect(screen.getByRole('cell', { name: '2' })).toBeVisible();
+    expect(screen.getByRole('cell', { name: '3' })).toBeVisible();
+    expect(screen.getByRole('cell', { name: 'Red' })).toBeVisible();
+    expect(screen.getByRole('cell', { name: 'Green' })).toBeVisible();
+    expect(screen.getByRole('cell', { name: 'Blue' })).toBeVisible();
+  });
+
+  it('is accessible', async () => {
+    const { container } = tree();
+
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

spa/src/components/base/Table/Table.tsx

@@ -0,0 +1,5 @@
+import { Table as MuiTable, TableProps as MuiTableProps } from '@material-ui/core';
+
+export const Table = MuiTable;
+export type TableProps = MuiTableProps;
+export default Table;

spa/src/components/base/Table/TableBody.tsx

@@ -0,0 +1,5 @@
+import { TableBody as MuiTableBody, TableBodyProps as MuiTableBodyProps } from '@material-ui/core';
+
+export const TableBody = MuiTableBody;
+export type TableBodyProps = MuiTableBodyProps;
+export default TableBody;

spa/src/components/base/Table/TableCell.tsx

@@ -0,0 +1,12 @@
+import { TableCell as MuiTableCell, TableCellProps as MuiTableCellProps } from '@material-ui/core';
+import styled from 'styled-components';
+
+export const TableCell = styled(MuiTableCell)`
+  && {
+    border: none;
+    font: 16px Roboto, sans-serif;
+  }
+`;
+
+export type TableCellProps = MuiTableCellProps;
+export default TableCell;

spa/src/components/base/Table/TableContainer.tsx

@@ -0,0 +1,5 @@
+import { TableContainer as MuiTableContainer, TableContainerProps as MuiTableContainerProps } from '@material-ui/core';
+
+export const TableContainer = MuiTableContainer;
+export type TableContainerProps = MuiTableContainerProps;
+export default TableContainer;