Merge pull request #2143 from ProjectMirador/2126-add-resource-ux

Improve UX for the new resources panel

__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(

__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');
 

__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');
   });

__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('');
   });
 });

__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 });

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: () => {},
 };

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>

src/containers/WorkspaceAddButton.js

@@ -13,7 +13,6 @@ import { WorkspaceAddButton } from '../components/WorkspaceAddButton';
  */
 const mapStateToProps = state => (
   {
-    manifests: state.manifests,
     isWorkspaceAddVisible: state.workspace.isWorkspaceAddVisible,
   }
 );

src/state/reducers/manifests.js

 import manifesto from 'manifesto.js';
+import omit from 'lodash/omit';
 import ActionTypes from '../actions/action-types';
 
 /**
@@ -8,12 +9,12 @@ export const manifestsReducer = (state = {}, action) => {
   switch (action.type) {
     case ActionTypes.REQUEST_MANIFEST:
       return {
-        ...state,
         [action.manifestId]: {
           ...state[action.manifestId],
           ...action.properties,
           id: action.manifestId,
         },
+        ...omit(state, action.manifestId),
       };
     case ActionTypes.RECEIVE_MANIFEST:
       return {