[Prod] Post launch tweaks to training/session report

frontend/src/components/ControlledDatePicker.js

@@ -21,6 +21,7 @@ export default function ControlledDatePicker({
  isStartDate,
  inputId,
  endDate,
+ customValidationMessages,
  required,
 }) {
  /**
@@ -54,20 +55,25 @@ export default function ControlledDatePicker({
 
  const formattedValue = value ? moment(value, DATE_DISPLAY_FORMAT).format(DATEPICKER_VALUE_FORMAT) : '';
 
+ const {
+ beforeMessage,
+ afterMessage,
+ invalidMessage,
+ } = customValidationMessages;
+
  // this is our custom validation function we pass to the hook form controller
  function validate(v) {
  const newValue = moment(v, DATE_DISPLAY_FORMAT);
-
  if (!newValue.isValid()) {
- return 'Enter valid date';
+ return invalidMessage || 'Enter valid date';
  }
 
  if (newValue.isBefore(min.moment)) {
- return `Please enter a date after ${min.display}`;
+ return afterMessage || `Please enter a date after ${min.display}`;
  }
 
  if (newValue.isAfter(max.moment)) {
- return `Please enter a date before ${max.display}`;
+ return beforeMessage || `Please enter a date before ${max.display}`;
  }
 
  return true;
@@ -135,6 +141,11 @@ ControlledDatePicker.propTypes = {
  inputId: PropTypes.string.isRequired,
  endDate: PropTypes.string,
  required: PropTypes.bool,
+ customValidationMessages: PropTypes.shape({
+ beforeMessage: PropTypes.string,
+ afterMessage: PropTypes.string,
+ invalidMessage: PropTypes.string,
+ }),
 };
 
 ControlledDatePicker.defaultProps = {
@@ -145,4 +156,9 @@ ControlledDatePicker.defaultProps = {
  setEndDate: () => {},
  required: true,
  value: '',
+ customValidationMessages: {
+ beforeMessage: '',
+ afterMessage: '',
+ invalidMessage: '',
+ },
 };

frontend/src/components/__tests__/ControlledDatePicker.js

@@ -2,17 +2,24 @@
 import '@testing-library/jest-dom';
 import React from 'react';
 import moment from 'moment';
-import { render, screen, act } from '@testing-library/react';
+import {
+ render, screen, act, fireEvent,
+} from '@testing-library/react';
 import { useForm } from 'react-hook-form';
 import userEvent from '@testing-library/user-event';
 import { Grid } from '@trussworks/react-uswds';
 import { DATE_DISPLAY_FORMAT } from '../../Constants';
-
 import ControlledDatePicker from '../ControlledDatePicker';
 
+const defaultValidation = {
+ beforeMessage: '',
+ afterMessage: '',
+ invalidMessage: '',
+};
+
 describe('Controlled Date Picker', () => {
  // eslint-disable-next-line react/prop-types
- const TestDatePicker = ({ setEndDate }) => {
+ const TestDatePicker = ({ setEndDate, customValidationMessages = defaultValidation }) => {
  const {
  control, errors, handleSubmit, watch,
  } = useForm({
@@ -34,9 +41,11 @@ describe('Controlled Date Picker', () => {
  Start date
  </label>
  <ControlledDatePicker
+ customValidationMessages={customValidationMessages}
  control={control}
  name="startDate"
  value={startDate}
+ minDate="09/01/2020"
  setEndDate={setEndDate}
  maxDate={endDate}
  isStartDate
@@ -56,6 +65,7 @@ describe('Controlled Date Picker', () => {
  minDate={startDate}
  key="endDateKey"
  inputId="endDate"
+ customValidationMessages={customValidationMessages}
  />
  </Grid>
  </Grid>
@@ -89,6 +99,47 @@ describe('Controlled Date Picker', () => {
  expect(setEndDate).toHaveBeenCalled();
  });
 
+ it('displays custom validation messages', async () => {
+ const setEndDate = jest.fn();
+ render(<TestDatePicker
+ setEndDate={setEndDate}
+ customValidationMessages={{
+ beforeMessage: 'Before message',
+ afterMessage: 'After message',
+ invalidMessage: 'Invalid message',
+ }}
+ />);
+
+ const ed = await screen.findByRole('textbox', { name: /end date/i });
+ const sd = await screen.findByRole('textbox', { name: /start date/i });
+
+ act(() => {
+ userEvent.type(ed, '12/31/2020');
+ userEvent.type(sd, '01/03/2021');
+ });
+ expect(await screen.findByText('Invalid message')).toBeVisible();
+ act(() => {
+ userEvent.clear(sd);
+ userEvent.clear(ed);
+ });
+ userEvent.type(ed, '12/31/2020');
+ userEvent.type(sd, '08/31/2020');
+
+ fireEvent.blur(sd);
+
+ expect(await screen.findByText('After message')).toBeVisible();
+
+ act(() => {
+ userEvent.clear(sd);
+ userEvent.clear(ed);
+ });
+ userEvent.type(ed, '12/31/2020');
+ userEvent.type(sd, '01/01/2021');
+
+ fireEvent.blur(ed);
+ expect(await screen.findByText('Before message')).toBeVisible();
+ });
+
  it('can set future start date and adjust end date', async () => {
  const setEndDate = jest.fn();
  render(<TestDatePicker setEndDate={setEndDate} />);

frontend/src/pages/Admin/FeedPreview.js

@@ -0,0 +1,158 @@
+import React, { useState, useRef } from 'react';
+import {
+ ButtonGroup,
+ Button,
+ Form,
+ FormGroup,
+ Label,
+ TextInput,
+} from '@trussworks/react-uswds';
+import ContentFromFeedByTag from '../../components/ContentFromFeedByTag';
+import Container from '../../components/Container';
+import DrawerTriggerButton from '../../components/DrawerTriggerButton';
+import Drawer from '../../components/Drawer';
+
+export default function FeedPreview() {
+ const [title, setTitle] = useState('');
+ const [tag, setTag] = useState('');
+ const [contentSelector, setContentSelector] = useState('');
+ const [cssClass, setCssClass] = useState('');
+ const drawerTriggerRef = useRef(null);
+
+ const onSubmit = (e) => {
+ e.preventDefault();
+ const data = new FormData(e.target);
+ setTitle(data.get('title'));
+ setTag(data.get('tag'));
+ setContentSelector(data.get('contentSelector'));
+ setCssClass(data.get('cssClass'));
+ };
+
+ const onReset = () => {
+ setTitle('');
+ setTag('');
+ setContentSelector('');
+ setCssClass('');
+ };
+
+ return (
+ <Container>
+ <h1>Preview confluence RSS feed</h1>
+ {' '}
+ {tag && (
+ <>
+ <DrawerTriggerButton
+ drawerTriggerRef={drawerTriggerRef}
+ >
+ Preview drawer
+ </DrawerTriggerButton>
+ <Drawer
+ triggerRef={drawerTriggerRef}
+ stickyHeader
+ stickyFooter
+ title={title}
+ >
+
+ <ContentFromFeedByTag
+ className={cssClass}
+ tagName={tag}
+ contentSelector={contentSelector}
+ />
+ </Drawer>
+ </>
+ )}
+ <Form onSubmit={onSubmit} className="margin-bottom-2">
+ <details>
+ <summary> More info</summary>
+ <p className="usa-prose">
+ The CSS class is used to style the feed preview by the engineers.
+ The option to add it here is so that you can preview changes to existing feeds.
+ (It won&apos;t do anything unless an engineer has already
+ added corresponding styles.)
+ </p>
+ </details>
+ <FormGroup>
+ <Label htmlFor="title" required>Title</Label>
+ <TextInput
+ id="title"
+ name="title"
+ type="text"
+ required
+ />
+ </FormGroup>
+ <FormGroup>
+ <Label htmlFor="tag" required>Tag</Label>
+ <TextInput
+ id="tag"
+ name="tag"
+ type="text"
+ required
+ />
+ </FormGroup>
+ <FormGroup>
+ <Label htmlFor="contentSelector">Content selector</Label>
+ <TextInput
+ id="contentSelector"
+ name="contentSelector"
+ type="text"
+ />
+ </FormGroup>
+ <FormGroup>
+ <Label htmlFor="cssClass">CSS class</Label>
+ <TextInput
+ id="cssClass"
+ name="cssClass"
+ type="text"
+ />
+
+ </FormGroup>
+ <ButtonGroup>
+ <Button type="submit">Save changes</Button>
+ <Button type="reset" onClick={onReset} outline>Reset</Button>
+ </ButtonGroup>
+ </Form>
+
+ <hr />
+ <table className="usa-table">
+ <caption>
+ Existing drawer configuration
+ </caption>
+ <thead>
+ <tr>
+ <th>Drawer title</th>
+ <th>Tag</th>
+ <th>Content selector</th>
+ <th>CSS class</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Support type</td>
+ <td>ttahub-tta-support-type</td>
+ <td>table</td>
+ <td>ttahub-drawer--objective-support-type-guidance</td>
+ </tr>
+ <tr>
+ <td>Objective topics</td>
+ <td>ttahub-topic</td>
+ <td>table</td>
+ <td>ttahub-drawer--objective-topics-guidance</td>
+ </tr>
+ <tr>
+ <td>Class review first section</td>
+ <td>ttahub-class-thresholds</td>
+ <td>div:nth-child(3)</td>
+ <td>ttahub-class-feed-article</td>
+ </tr>
+ <tr>
+ <td>Class review second section</td>
+ <td>ttahub-class-thresholds</td>
+ <td>div:nth-child(4)</td>
+ <td>ttahub-class-feed-article</td>
+ </tr>
+ </tbody>
+ </table>
+
+ </Container>
+ );
+}

frontend/src/pages/Admin/__tests__/FeedPreview.js

@@ -0,0 +1,51 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import {
+ render, screen, act,
+ waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import fetchMock from 'fetch-mock';
+import join from 'url-join';
+import FeedPreview from '../FeedPreview';
+import { mockRSSData } from '../../../testHelpers';
+
+const tagUrl = join('/', 'api', 'feeds', 'item', '?tag=tag');
+
+describe('FeedPreview', () => {
+ const renderTest = () => {
+ render(<FeedPreview />);
+ };
+
+ afterEach(() => fetchMock.restore());
+
+ it('renders page and submits form', async () => {
+ fetchMock.get(tagUrl, mockRSSData());
+ act(() => {
+ renderTest();
+ });
+
+ userEvent.type(await screen.findByLabelText('Tag'), 'tag');
+ userEvent.type(await screen.findByLabelText('Title'), 'title');
+ userEvent.type(await screen.findByLabelText('Content selector'), 'contentSelector');
+ userEvent.type(await screen.findByLabelText('CSS class'), 'cssClass');
+
+ userEvent.click(await screen.findByRole('button', { name: 'Reset' }));
+
+ expect(await screen.findByLabelText('Tag')).toHaveValue('');
+ expect(await screen.findByLabelText('Title')).toHaveValue('');
+ expect(await screen.findByLabelText('Content selector')).toHaveValue('');
+ expect(await screen.findByLabelText('CSS class')).toHaveValue('');
+
+ userEvent.type(await screen.findByLabelText('Tag'), 'tag');
+ userEvent.type(await screen.findByLabelText('Title'), 'title');
+ userEvent.type(await screen.findByLabelText('Content selector'), 'contentSelector');
+ userEvent.type(await screen.findByLabelText('CSS class'), 'cssClass');
+
+ act(() => {
+ userEvent.click(screen.getByRole('button', { name: 'Save changes' }));
+ });
+
+ await waitFor(() => expect(fetchMock.called(tagUrl)).toBe(true));
+ });
+});

frontend/src/pages/Admin/__tests__/index.js

@@ -97,4 +97,16 @@ describe('Admin landing page', () => {
  const heading = await screen.findByRole('heading', { name: /national centers/i });
  expect(heading).toBeVisible();
  });
+
+ it('displays the feed preview page', async () => {
+ history.push('/admin/feed-preview');
+ render(
+ <Router history={history}>
+ <Admin />
+ </Router>,
+ );
+
+ const heading = await screen.findByRole('heading', { name: /Preview confluence RSS feed/i });
+ expect(heading).toBeVisible();
+ });
 });