1 files changed, 87 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.jsx b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.jsx
new file mode 100644
index 0000000000..d6ef604a22
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.jsx
@@ -0,0 +1,87 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * revisions and limitations under the License.
+ */
+import React from 'react';
+import Form from 'nfvo-components/input/validation/Form.jsx';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import ShowMore from 'react-show-more';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
+
+import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
+import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
+import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
+
+
+class RevisionsView extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			revertId : null
+		};
+	}
+
+	render() {
+		let {onCancel, onRevert, revisions, users} = this.props;
+		return (
+			<div className='manage-revisions-page'>
+				<Form
+					hasButtons={true}
+					onSubmit={() => onRevert(this.state.revertId)}
+					onReset={() => onCancel() }
+					submitButtonText={i18n('Revert')}
+					labledButtons={true}>
+					<ListEditorView
+						title={i18n('Select a Commit')}
+						isReadOnlyMode={false}>
+						{revisions.map((revision) => {
+							return (
+								<div key={revision.id} data-test-id='revision-list-item' className={`revision-list-item ${this.state.revertId === revision.id ? 'selected' : ''}`}>
+									<ListEditorItemView
+										isReadOnlyMode={false}
+										onSelect={() => this.setState({revertId : revision.id})}>
+											<ListEditorItemViewField>
+												<div className='revision-list-item-fields'>
+												    <div data-test-id='revision-user' className='revision-user'>
+													    <SVGIcon name='user' label={users.find(userObject => userObject.userId === revision.user).fullName} labelPosition='right'/>
+												    </div>
+													<div className='revision-date' data-test-id='revision-date'>
+														<span className='revision-date'>{i18n.dateNormal(revision.time, {
+															year: 'numeric', month: 'numeric', day: 'numeric'
+														})}</span>
+														<span className='revision-time'>{i18n.dateNormal(revision.time, {
+															hour: 'numeric', minute: 'numeric',
+															hour12: true
+														})}</span>
+													</div>
+													<div className='revision-message'data-test-id='revision-message'>
+														{revision.message && <ShowMore anchorClass='more-less' lines={2} more={i18n('More')} less={i18n('Less')}>
+														{revision.message}
+													</ShowMore>}</div>
+												</div>
+											</ListEditorItemViewField>
+									</ListEditorItemView>
+								</div>
+
+							);
+						})}
+					</ListEditorView>
+				</Form>
+			</div>
+		);
+	}
+
+}
+
+export default RevisionsView;