KPMP-1919: Finished success page

src/actions/Validation/validationActions.js

@@ -0,0 +1,31 @@
+import actionNames from '../actionNames';
+import Api from '../../helpers/Api';
+import { sendMessageToBackend } from '../Error/errorActions';
+
+const api = Api.getInstance();
+
+export const setValidationResult = (result) => {
+	return {
+		type: actionNames.SET_VALIDATION_RESULT,
+		payload: result
+	}
+}
+
+export const validateFilenames = (formData) => {
+	return (dispatch) => {
+		api.post('/api//v1/package/files/validation', formData)
+			.then(res => {
+				dispatch(setValidationResult(res.data));
+			})
+			.catch(error => {
+				console.log(error);
+				dispatch(sendMessageToBackend(error));
+			});
+	}
+}
+
+export const clearValidationResult = () => {
+	return {
+		type: actionNames.CLEAR_VALIDATION_RESULT
+	}
+}

src/actions/Validation/validationActions.test.js

@@ -0,0 +1,26 @@
+import actionNames from '../actionNames';
+import { setValidationResult, clearValidationResult } from './validationActions';
+
+describe('setValidationResult', () => {
+	it('should return the result in the correct structure', () => {
+		let expectedResult = {
+			type: actionNames.SET_VALIDATION_RESULT,
+			payload: { 'key': 'value' }
+		};
+
+		let result = setValidationResult({ 'key': 'value' });
+
+		expect(result).toEqual(expectedResult);
+	});
+});
+describe('clearValidationResult', () => {
+	it('should return the result in the correct structure', () => {
+		let expectedResult = {
+			type: actionNames.CLEAR_VALIDATION_RESULT
+		};
+
+		let result = clearValidationResult();
+
+		expect(result).toEqual(expectedResult);
+	});
+});

src/actions/actionNames.js

@@ -1,7 +1,9 @@
 const actionNames = {
-  RESET_STATE: 'RESET_STATE',
-  SET_PACKAGES: 'SET_PACKAGES',
-  GET_PACKAGES: 'GET_PACKAGES'
+	CLEAR_VALIDATION_RESULT: 'CLEAR_VALIDATION_RESULT',
+	GET_PACKAGES: 'GET_PACKAGES',
+	RESET_STATE: 'RESET_STATE',
+	SET_PACKAGES: 'SET_PACKAGES',
+	SET_VALIDATION_RESULT: 'SET_VALIDATION_RESULT'
 };
 
 export default actionNames;

src/components/Validation/FilenameValidationPage.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 import { Container, Row, Col, Button } from 'reactstrap';
+import ValidationSuccess from './ValidationSuccess';
+import ValidationFailure from './ValidationFailure';
 
 class FilenameValidationPage extends Component {
 
@@ -9,6 +11,7 @@ class FilenameValidationPage extends Component {
 			packageId: '',
 			filenames: ''
 		};
+		this.props.clearValidationResult();
 		this.handleSubmit = this.handleSubmit.bind(this);
 	}
 
@@ -22,41 +25,57 @@ class FilenameValidationPage extends Component {
 
 	handleSubmit(e) {
 		e.preventDefault();
+		this.props.validateFilenames(this.state);
 	}
 
 
 	render() {
 		const { packageId, filenames } = this.state;
 		const isEnabled = packageId.length > 0 && filenames.length > 0;
-		return (
-			<Container>
-				<form onSubmit={this.handleSubmit}>
-					<Row className='mt-3'>
-						<Col sm={3}>
-							<label>Package Id:</label>
-						</Col>
-						<Col sm={9}>
-							<input type='text' size={40} ref={(input) => this.packageId = input} onChange={this.handlePackageIdChange}/>
-						</Col>
-					</Row>
-					<Row className='mt-3'>
-						<Col sm={3}>
-							<label>Files in metadata spreadsheet:</label>
-						</Col>
-						<Col sm={9}>
-							<textarea name='filenames' id='filenames' rows='10' cols='100' onChange={this.handleFilenamesChange} ref={(input) => this.filenames = input}/>
-						</Col>
-					</Row>
-					<Row className='mt-3'>
-						<Col sm={3} >
-						</Col>
-						<Col sm={9}>
-							<Button color='primary' type="submit" disabled={!isEnabled}>Validate</Button>
-						</Col>
-					</Row>
-				</form>
-			</Container>
-		);
+		if (Object.keys(this.props.validationResult).length !== 0 && this.props.validationResult.constructor === Object) {
+			let filesNotInGlobus = this.props.validationResult.metadataFilesNotFoundInGlobus;
+			let filesNotInMetadata = this.props.validationResult.globusFilesNotFoundInMetadata;
+			if (!filesNotInGlobus && !filesNotInMetadata) {
+				return (
+					<ValidationSuccess result={this.props.validationResult}/>
+				);
+			} else {
+				return (
+					<ValidationFailure result={this.props.validationResult}/>
+				);
+			}
+		} else {
+			return (
+				<Container>
+					<form onSubmit={this.handleSubmit}>
+						<Row className='mt-3'>
+							<Col sm={3}>
+								<label>Package Id:</label>
+							</Col>
+							<Col sm={9}>
+								<input type='text' size={40} ref={(input) => this.packageId = input} onChange={this.handlePackageIdChange}/>
+							</Col>
+						</Row>
+						<Row className='mt-3'>
+							<Col sm={3}>
+								<label>Files in metadata spreadsheet:</label>
+								(Separated by either newlines or commas)
+							</Col>
+							<Col sm={9}>
+								<textarea name='filenames' id='filenames' rows='10' cols='100' onChange={this.handleFilenamesChange} ref={(input) => this.filenames = input}/>
+							</Col>
+						</Row>
+						<Row className='mt-3'>
+							<Col sm={3} >
+							</Col>
+							<Col sm={9}>
+								<Button color='primary' type="submit" disabled={!isEnabled}>Validate</Button>
+							</Col>
+						</Row>
+					</form>
+				</Container>
+			);
+		}
 	}
 
 }

src/components/Validation/FilenameValidationPageContainer.js

@@ -1,10 +1,18 @@
 import { connect } from 'react-redux';
 import FilenameValidationPage from './FilenameValidationPage';
+import { validateFilenames, clearValidationResult } from '../../actions/Validation/validationActions';
 
 const mapStateToProps = (state, props) => ({
+	validationResult: state.filenameValidation
 });
 
 const mapDispatchToProps = (dispatch, props) => ({
+	validateFilenames(formData) {
+		dispatch(validateFilenames(formData));
+	},
+	clearValidationResult() {
+		dispatch(clearValidationResult());
+	}
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(FilenameValidationPage);

src/components/Validation/ValidationFailure.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { Container, Row, Col, Button } from 'reactstrap';
+
+class ValidationFailure extends Component {
+	render() {
+		return(
+			<Container>
+				<Row className='mt-3'>
+					<Col sm={12}>
+						<img
+			              src="img/fail-kidneys.jpg"
+			              alt="Filename mismatch"
+			              id="fail-kidneys"
+			            />
+					</Col>
+				</Row>
+			</Container>
+
+		)
+	}
+}
+
+export default ValidationFailure;

src/components/Validation/ValidationSuccess.js

@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+import { Container, Row, Col, Button } from 'reactstrap';
+import { Link } from 'react-router-dom';
+
+class ValidationSuccess extends Component {
+
+	generateTableRows(filesProvided, filesFound) {
+		let rows = [];
+		for (let i=0; i< filesProvided.length; i++) {
+			let fileProvided = filesProvided[i];
+			let fileFound = filesFound[i];
+			rows.push( 
+				<Row className='mt-3'>
+					<Col sm={6}>
+						{fileProvided}
+					</Col>
+					<Col sm={6}>
+						{fileFound}
+					</Col>
+				</Row>
+			);
+		}
+		return rows;
+	}
+
+	render() {
+		let metadataFileName = '';
+		let filesProvided = this.props.result.filesFromMetadata.sort();
+		let filesFound = this.props.result.filesInGlobus.sort();
+		let metadataFileIndex = filesFound.findIndex((file) => file.startsWith('METADATA'));
+		if (metadataFileIndex > -1) {
+			metadataFileName = filesFound[metadataFileIndex];
+			filesFound.splice(metadataFileIndex, 1);
+		}
+		let rows = this.generateTableRows(filesProvided, filesFound);
+
+		return (
+			<Container>
+				<Row className='mt-3'>
+					<Col sm={2} >
+						<img
+							src="img/happy-kidneys.jpg"
+							alt="Filename match"
+							id="happy-kidneys"
+							className='validationImage'
+			            />
+					</Col>
+					<Col sm={10}>
+						<h3 className='validationMessage'>Validation Success!</h3>
+					</Col>
+				</Row>
+				<Row className='mt-3'>
+					<Col sm={12}>
+						<span className='heavierText'>Package Id:</span> {this.props.result.packageId}
+					</Col>
+				</Row>
+
+				<Row className='mt-3'>
+					<Col sm={6} className='resultHeader'>
+						Files Provided
+					</Col>
+					<Col sm={6} className='resultHeader'>
+						Files Found
+					</Col>
+				</Row>
+				{rows}
+				{metadataFileName !== '' &&
+					<Row className='mt-3'>
+						<Col sm={6}>
+
+						</Col>
+						<Col sm={6}>
+							{metadataFileName}
+						</Col>
+					</Row>
+
+				}
+				<Row className='mt-6'>
+					<Col sm={6}>
+						<Link to='/filenameValidation'>
+							<Button color="primary">Let's do it again!</Button>
+						</Link>
+					</Col>
+					<Col sm={6}>
+						<Link to='/'>
+							<Button color="primary">Done for now</Button>
+						</Link>
+					</Col>
+				</Row>
+			</Container>	
+		);
+	}
+}
+
+export default ValidationSuccess;

src/components/Validation/filenameValidationReducer.js

@@ -0,0 +1,15 @@
+import actionNames from '../../actions/actionNames';
+
+export const filenameValidation = (state = {}, action) => {
+	let newState = {};
+
+    switch (action.type) {
+        case actionNames.SET_VALIDATION_RESULT:
+            newState = action.payload;
+            return newState;
+        case actionNames.CLEAR_VALIDATION_RESULT:	
+        	return newState;
+        default:
+            return state;
+    }
+}

src/components/Validation/filenameValidationReducer.test.js

@@ -0,0 +1,25 @@
+import { filenameValidation } from './filenameValidationReducer';
+import actionNames from '../../actions/actionNames';
+
+describe('filenameValidation', () => {
+	it('should return the given state if not known action', () => {
+		let action = {
+			type: 'UNKNOWN'
+		};
+		expect(filenameValidation({}, action)).toEqual({});
+	});
+
+	it('should return the new state if SET_VALIDATION_RESULT', () => {
+		let action = {
+				type: actionNames.SET_VALIDATION_RESULT,
+				payload: 'new stuff'
+		};
+		expect(filenameValidation({}, action)).toEqual('new stuff');
+	});
+	it('should clear the state if CLEAR_VALIDATION_RESULT', () => {
+		let action = {
+				type: actionNames.CLEAR_VALIDATION_RESULT
+		};
+		expect(filenameValidation({'key': 'value'}, action)).toEqual({});
+	});
+});

src/index.css

@@ -52,3 +52,18 @@ body {
   @media only screen and (max-width: 767px) {
     #title-text {
       display: none; } }
+
+.validationImage {
+  height: 150px; }
+
+.validationMessage {
+  vertical-align: bottom;
+  height: 150px;
+  display: table-cell; }
+
+.resultHeader {
+  background-color: lightgray;
+  font-weight: 700; }
+
+.heavierText {
+  font-weight: 700; }