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

   1 /*
   2  * Copyright © 2016-2018 European Support Limited
   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 or implied.
  13  * See the License for the specific language governing permissions and
  14  * 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-modal">
  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                     btnClassName="sdc-modal__footer">
  46                     <ListEditorView
  47                         title={i18n('Select a Commit')}
  48                         isReadOnlyMode={false}>
  49                         {revisions.map(revision => {
  50                             return (
  51                                 <div
  52                                     key={revision.id}
  53                                     data-test-id="revision-list-item"
  54                                     className={`revision-list-item ${
  55                                         this.state.revertId === revision.id
  56                                             ? 'selected'
  57                                             : ''
  58                                     }`}>
  59                                     <ListEditorItemView
  60                                         isReadOnlyMode={false}
  61                                         onSelect={() =>
  62                                             this.setState({
  63                                                 revertId: revision.id
  64                                             })
  65                                         }>
  66                                         <ListEditorItemViewField>
  67                                             <div className="revision-list-item-fields">
  68                                                 <div
  69                                                     data-test-id="revision-user"
  70                                                     className="revision-user">
  71                                                     <SVGIcon
  72                                                         name="user"
  73                                                         label={
  74                                                             users.find(
  75                                                                 userObject =>
  76                                                                     userObject.userId ===
  77                                                                     revision.user
  78                                                             ).fullName
  79                                                         }
  80                                                         labelPosition="right"
  81                                                     />
  82                                                 </div>
  83                                                 <div
  84                                                     className="revision-date"
  85                                                     data-test-id="revision-date">
  86                                                     <span className="revision-date">
  87                                                         {i18n.dateNormal(
  88                                                             revision.time,
  89                                                             {
  90                                                                 year: 'numeric',
  91                                                                 month:
  92                                                                     'numeric',
  93                                                                 day: 'numeric'
  94                                                             }
  95                                                         )}
  96                                                     </span>
  97                                                     <span className="revision-time">
  98                                                         {i18n.dateNormal(
  99                                                             revision.time,
 100                                                             {
 101                                                                 hour: 'numeric',
 102                                                                 minute:
 103                                                                     'numeric',
 104                                                                 hour12: true
 105                                                             }
 106                                                         )}
 107                                                     </span>
 108                                                 </div>
 109                                                 <div
 110                                                     className="revision-message"
 111                                                     data-test-id="revision-message">
 112                                                     {revision.message && (
 113                                                         <ShowMore
 114                                                             anchorClass="more-less"
 115                                                             lines={2}
 116                                                             more={i18n('More')}
 117                                                             less={i18n('Less')}>
 118                                                             {revision.message}
 119                                                         </ShowMore>
 120                                                     )}
 121                                                 </div>
 122                                             </div>
 123                                         </ListEditorItemViewField>
 124                                     </ListEditorItemView>
 125                                 </div>
 126                             );
 127                         })}
 128                     </ListEditorView>
 129                 </Form>
 130             </div>
 131         );
 132     }
 133 }
 134
 135 export default RevisionsView;