From 75c1a98bc4301f02e21d1de554632bf238a54dc9 Mon Sep 17 00:00:00 2001
From: Chris Beer <cabeer@stanford.edu>
Date: Mon, 11 Mar 2019 15:52:11 -0700
Subject: [PATCH] Improve UX for the new resources panel
---
__tests__/integration/mirador/basic.test.js | 1 -
.../mirador/window_actions.test.js | 1 -
.../mirador/window_sidebar.test.js | 1 -
__tests__/src/components/ManifestForm.test.js | 8 +++++++-
__tests__/src/components/WorkspaceAdd.test.js | 9 +++++++++
src/components/ManifestForm.js | 19 +++++++++++++++++--
src/components/WorkspaceAdd.js | 5 ++++-
7 files changed, 37 insertions(+), 7 deletions(-)
diff --git a/__tests__/integration/mirador/basic.test.js b/__tests__/integration/mirador/basic.test.js
index e56289732..f15f5d5ec 100644
--- a/__tests__/integration/mirador/basic.test.js
+++ b/__tests__/integration/mirador/basic.test.js
@@ -11,7 +11,6 @@ describe('Basic end to end Mirador', () => {
await expect(page).toClick('.mirador-add-resource-button');
await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/sn904cj3439');
await expect(page).toClick('#fetchBtn');
- await expect(page).toClick('button[aria-label="Close add resource panel"]'); // Close menu so new item is visible
await expect(page).toMatchElement('[data-manifestid="http://localhost:5000/api/sn904cj3439"] button');
await expect(page).toClick('[data-manifestid="http://localhost:5000/api/sn904cj3439"] button');
await expect(page).toMatchElement(
diff --git a/__tests__/integration/mirador/window_actions.test.js b/__tests__/integration/mirador/window_actions.test.js
index 359b67ea3..d7c892b22 100644
--- a/__tests__/integration/mirador/window_actions.test.js
+++ b/__tests__/integration/mirador/window_actions.test.js
@@ -8,7 +8,6 @@ describe('Window actions', () => {
await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/sn904cj3439');
await expect(page).toClick('#fetchBtn');
- await expect(page).toClick('button[aria-label="Close add resource panel"]'); // Close menu so new item is visible
await expect(page).toMatchElement('[data-manifestid="http://localhost:5000/api/sn904cj3439"] button');
await expect(page).toClick('[data-manifestid="http://localhost:5000/api/sn904cj3439"] button');
diff --git a/__tests__/integration/mirador/window_sidebar.test.js b/__tests__/integration/mirador/window_sidebar.test.js
index b48ffd864..45a9ffd91 100644
--- a/__tests__/integration/mirador/window_sidebar.test.js
+++ b/__tests__/integration/mirador/window_sidebar.test.js
@@ -9,7 +9,6 @@ describe('Window Sidebars', () => {
await expect(page).toFill('#manifestURL', 'http://localhost:5000/api/001');
await expect(page).toClick('#fetchBtn');
- await expect(page).toClick('button[aria-label="Close add resource panel"]'); // Close menu so new item is visible
await expect(page).toMatchElement('[data-manifestid="http://localhost:5000/api/001"] button');
await expect(page).toClick('[data-manifestid="http://localhost:5000/api/001"] button');
});
diff --git a/__tests__/src/components/ManifestForm.test.js b/__tests__/src/components/ManifestForm.test.js
index 9808c4ebf..68811a920 100644
--- a/__tests__/src/components/ManifestForm.test.js
+++ b/__tests__/src/components/ManifestForm.test.js
@@ -23,21 +23,27 @@ describe('ManifestForm', () => {
it('has a cancel button when a cancel action is provided', () => {
const onCancel = jest.fn();
const wrapper = createWrapper({ onCancel });
+ wrapper.setState({ formValue: 'asdf' });
expect(wrapper.find('WithStyles(Button)[onClick]').length).toBe(1);
wrapper.find('WithStyles(Button)[onClick]').simulate('click');
expect(onCancel).toHaveBeenCalled();
+ expect(wrapper.state().formValue).toBe('');
});
it('triggers an action when the form is submitted', () => {
const fetchManifest = jest.fn();
- const wrapper = createWrapper({ fetchManifest });
+ const onSubmit = jest.fn();
+ const wrapper = createWrapper({ fetchManifest, onSubmit });
+ wrapper.setState({ formValue: 'asdf' });
wrapper.setState({ formValue: 'http://example.com/iiif' });
wrapper.find('form').simulate('submit', { preventDefault: () => {} });
expect(fetchManifest).toHaveBeenCalledWith('http://example.com/iiif');
+ expect(onSubmit).toHaveBeenCalled();
+ expect(wrapper.state().formValue).toBe('');
});
});
diff --git a/__tests__/src/components/WorkspaceAdd.test.js b/__tests__/src/components/WorkspaceAdd.test.js
index 12e873a13..925a0bbb0 100644
--- a/__tests__/src/components/WorkspaceAdd.test.js
+++ b/__tests__/src/components/WorkspaceAdd.test.js
@@ -52,6 +52,15 @@ describe('WorkspaceAdd', () => {
expect(wrapper.find('WithStyles(Drawer)').props().open).toBe(false);
});
+ it('passes a submit action through to the form', () => {
+ const wrapper = createWrapper();
+ wrapper.setState({ addResourcesOpen: true });
+
+ expect(wrapper.find('WithStyles(Drawer)').find(ManifestForm).length).toBe(1);
+ wrapper.find('WithStyles(Drawer)').find(ManifestForm).props().onSubmit();
+ expect(wrapper.find('WithStyles(Drawer)').props().open).toBe(false);
+ });
+
it('passes a cancel action through to the form', () => {
const wrapper = createWrapper();
wrapper.setState({ addResourcesOpen: true });
diff --git a/src/components/ManifestForm.js b/src/components/ManifestForm.js
index 4eb2c0eb3..7955b73bb 100644
--- a/src/components/ManifestForm.js
+++ b/src/components/ManifestForm.js
@@ -19,6 +19,7 @@ export class ManifestForm extends Component {
};
this.formSubmit = this.formSubmit.bind(this);
+ this.handleCancel = this.handleCancel.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
}
@@ -28,10 +29,22 @@ export class ManifestForm extends Component {
* @private
*/
formSubmit(event) {
- const { fetchManifest } = this.props;
+ const { fetchManifest, onSubmit } = this.props;
const { formValue } = this.state;
event.preventDefault();
+ onSubmit();
fetchManifest(formValue);
+ this.setState({ formValue: '' });
+ }
+
+ /**
+ * Reset the form state
+ */
+ handleCancel() {
+ const { onCancel } = this.props;
+
+ onCancel();
+ this.setState({ formValue: '' });
}
/**
@@ -71,7 +84,7 @@ export class ManifestForm extends Component {
</Grid>
<Grid item sm={3}>
{ onCancel && (
- <Button onClick={onCancel}>
+ <Button onClick={this.handleCancel}>
{t('cancel')}
</Button>
)}
@@ -88,10 +101,12 @@ export class ManifestForm extends Component {
ManifestForm.propTypes = {
fetchManifest: PropTypes.func.isRequired,
onCancel: PropTypes.func,
+ onSubmit: PropTypes.func,
t: PropTypes.func,
};
ManifestForm.defaultProps = {
t: key => key,
onCancel: null,
+ onSubmit: () => {},
};
diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js
index 69e132233..f2c8634e3 100644
--- a/src/components/WorkspaceAdd.js
+++ b/src/components/WorkspaceAdd.js
@@ -99,7 +99,10 @@ export class WorkspaceAdd extends React.Component {
</Typography>
</Toolbar>
</AppBar>
- <ManifestForm onCancel={() => (this.setAddResourcesVisibility(false))} />
+ <ManifestForm
+ onSubmit={() => (this.setAddResourcesVisibility(false))}
+ onCancel={() => (this.setAddResourcesVisibility(false))}
+ />
</Paper>
</Drawer>
</div>
--
GitLab