openecomp-ui/src/sdc-app/onboarding/revisions/RevisionsView.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * revisions and limitations under the License.
  15  */
  16 import React from 'react';
  17 import Form from 'nfvo-components/input/validation/Form.jsx';
  18 import i18n from 'nfvo-utils/i18n/i18n.js';
  19 import ShowMore from 'react-show-more-text';
  20 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  21
  22 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
  23 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
  24 import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
  25
  26 class RevisionsView extends React.Component {
  27     constructor(props) {
  28         super(props);
  29         this.state = {
  30             revertId: null
  31         };
  32     }
  33
  34     render() {
  35         let { onCancel, onRevert, revisions, users } = this.props;
  36         return (
  37             <div className="manage-revisions-page">
  38                 <Form
  39                     hasButtons={true}
  40                     isValid={this.state.revertId}
  41                     onSubmit={() => onRevert(this.state.revertId)}
  42                     onReset={() => onCancel()}
  43                     submitButtonText={i18n('Revert')}
  44                     labledButtons={true}>
  45                     <ListEditorView
  46                         title={i18n('Select a Commit')}
  47                         isReadOnlyMode={false}>
  48                         {revisions.map(revision => {
  49                             return (
  50                                 <div
  51                                     key={revision.id}
  52                                     data-test-id="revision-list-item"
  53                                     className={`revision-list-item ${
  54                                         this.state.revertId === revision.id
  55                                             ? 'selected'
  56                                             : ''
  57                                     }`}>
  58                                     <ListEditorItemView
  59                                         isReadOnlyMode={false}
  60                                         onSelect={() =>
  61                                             this.setState({
  62                                                 revertId: revision.id
  63                                             })
  64                                         }>
  65                                         <ListEditorItemViewField>
  66                                             <div className="revision-list-item-fields">
  67                                                 <div
  68                                                     data-test-id="revision-user"
  69                                                     className="revision-user">
  70                                                     <SVGIcon
  71                                                         name="user"
  72                                                         label={
  73                                                             users.find(
  74                                                                 userObject =>
  75                                                                     userObject.userId ===
  76                                                                     revision.user
  77                                                             ).fullName
  78                                                         }
  79                                                         labelPosition="right"
  80                                                     />
  81                                                 </div>
  82                                                 <div
  83                                                     className="revision-date"
  84                                                     data-test-id="revision-date">
  85                                                     <span className="revision-date">
  86                                                         {i18n.dateNormal(
  87                                                             revision.time,
  88                                                             {
  89                                                                 year: 'numeric',
  90                                                                 month:
  91                                                                     'numeric',
  92                                                                 day: 'numeric'
  93                                                             }
  94                                                         )}
  95                                                     </span>
  96                                                     <span className="revision-time">
  97                                                         {i18n.dateNormal(
  98                                                             revision.time,
  99                                                             {
 100                                                                 hour: 'numeric',
 101                                                                 minute:
 102                                                                     'numeric',
 103                                                                 hour12: true
 104                                                             }
 105                                                         )}
 106                                                     </span>
 107                                                 </div>
 108                                                 <div
 109                                                     className="revision-message"
 110                                                     data-test-id="revision-message">
 111                                                     {revision.message && (
 112                                                         <ShowMore
 113                                                             anchorClass="more-less"
 114                                                             lines={2}
 115                                                             more={i18n('More')}
 116                                                             less={i18n('Less')}>
 117                                                             {revision.message}
 118                                                         </ShowMore>
 119                                                     )}
 120                                                 </div>
 121                                             </div>
 122                                         </ListEditorItemViewField>
 123                                     </ListEditorItemView>
 124                                 </div>
 125                             );
 126                         })}
 127                     </ListEditorView>
 128                 </Form>
 129             </div>
 130         );
 131     }
 132 }
 133
 134 export default RevisionsView;