openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.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
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React, { Component } from 'react';
  17 import PropTypes from 'prop-types';
  18 import accept from 'attr-accept';
  19 import { SVGIcon, Tab, Tabs } from 'sdc-ui/lib/react';
  20 import { tabsMapping } from './SoftwareProductAttachmentsConstants.js';
  21 import i18n from 'nfvo-utils/i18n/i18n.js';
  22 import HeatValidation from './validation/HeatValidation.js';
  23 import { onboardingOriginTypes } from 'sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js';
  24 import Button from 'sdc-ui/lib/react/Button.js';
  25
  26 class HeatScreenView extends Component {
  27     static propTypes = {
  28         isValidationAvailable: PropTypes.bool,
  29         goToOverview: PropTypes.bool,
  30         setActiveTab: PropTypes.func
  31     };
  32
  33     componentDidMount() {
  34         if (!this.props.goToOverview && this.props.candidateInProcess) {
  35             this.props.setActiveTab({ activeTab: tabsMapping.VALIDATION });
  36         }
  37     }
  38
  39     render() {
  40         let {
  41             isValidationAvailable,
  42             isReadOnlyMode,
  43             heatDataExist,
  44             onDownload,
  45             softwareProductId,
  46             onProcessAndValidate,
  47             onUploadAbort,
  48             candidateInProcess,
  49             heatSetup,
  50             HeatSetupComponent,
  51             onGoToOverview,
  52             version,
  53             onboardingOrigin,
  54             activeTab,
  55             setActiveTab,
  56             ...other
  57         } = this.props;
  58
  59         return (
  60             <div className="vsp-attachments-view">
  61                 <div className="attachments-view-controllers">
  62                     {activeTab === tabsMapping.SETUP &&
  63                         candidateInProcess && (
  64                             <Button
  65                                 data-test-id="proceed-to-validation-btn"
  66                                 disabled={!isValidationAvailable}
  67                                 className="proceed-to-validation-btn"
  68                                 onClick={() => this.validate()}>
  69                                 {i18n('PROCEED TO VALIDATION')}
  70                             </Button>
  71                         )}
  72                     {candidateInProcess && (
  73                         <SVGIcon
  74                             onClick={onUploadAbort}
  75                             name="close"
  76                             className="icon-component abort-btn"
  77                             label={i18n('ABORT')}
  78                             labelPosition="right"
  79                             color="secondary"
  80                             data-test-id="abort-btn"
  81                         />
  82                     )}
  83                     {activeTab === tabsMapping.VALIDATION &&
  84                         softwareProductId && (
  85                             <Button
  86                                 btnType="outline"
  87                                 data-test-id="go-to-overview"
  88                                 disabled={this.props.goToOverview !== true}
  89                                 className="go-to-overview-btn"
  90                                 onClick={
  91                                     this.props.goToOverview
  92                                         ? () => onGoToOverview({ version })
  93                                         : undefined
  94                                 }>
  95                                 {i18n('GO TO OVERVIEW')}
  96                             </Button>
  97                         )}
  98                     <div className="separator" />
  99                     <SVGIcon
 100                         disabled={heatDataExist ? false : true}
 101                         name="download"
 102                         className="icon-component"
 103                         color="dark-gray"
 104                         onClick={
 105                             heatDataExist
 106                                 ? () =>
 107                                       onDownload({
 108                                           heatCandidate: heatSetup,
 109                                           isReadOnlyMode:
 110                                               isReadOnlyMode ||
 111                                               !candidateInProcess,
 112                                           version
 113                                       })
 114                                 : undefined
 115                         }
 116                         data-test-id="download-heat"
 117                     />
 118                     <SVGIcon
 119                         name="upload"
 120                         className="icon-component"
 121                         color="dark-gray"
 122                         disabled={isReadOnlyMode || candidateInProcess}
 123                         onClick={
 124                             isReadOnlyMode
 125                                 ? undefined
 126                                 : evt =>
 127                                       this.refs.hiddenImportFileInput.click(evt)
 128                         }
 129                         data-test-id="upload-heat"
 130                     />
 131                     <input
 132                         ref="hiddenImportFileInput"
 133                         type="file"
 134                         name="fileInput"
 135                         accept=".zip, .csar"
 136                         onChange={evt => this.handleImport(evt)}
 137                     />
 138                 </div>
 139                 <Tabs
 140                     className="attachments-tabs"
 141                     type="header"
 142                     activeTab={activeTab}
 143                     onTabClick={key => this.handleTabPress(key)}>
 144                     <Tab
 145                         tabId={tabsMapping.SETUP}
 146                         title="Setup"
 147                         disabled={
 148                             onboardingOrigin === onboardingOriginTypes.CSAR
 149                         }>
 150                         <HeatSetupComponent
 151                             heatDataExist={heatDataExist}
 152                             changeAttachmentsTab={tab =>
 153                                 setActiveTab({ activeTab: tab })
 154                             }
 155                             onProcessAndValidate={onProcessAndValidate}
 156                             softwareProductId={softwareProductId}
 157                             isReadOnlyMode={isReadOnlyMode}
 158                             version={version}
 159                         />
 160                     </Tab>
 161                     <Tab
 162                         tabId={tabsMapping.VALIDATION}
 163                         title="Validation"
 164                         disabled={!isValidationAvailable || candidateInProcess}>
 165                         <HeatValidation {...other} />
 166                     </Tab>
 167                 </Tabs>
 168             </div>
 169         );
 170     }
 171
 172     handleTabPress(key) {
 173         let { setActiveTab } = this.props;
 174         switch (key) {
 175             case tabsMapping.VALIDATION:
 176                 setActiveTab({ activeTab: tabsMapping.VALIDATION });
 177                 return;
 178             case tabsMapping.SETUP:
 179                 setActiveTab({ activeTab: tabsMapping.SETUP });
 180                 return;
 181         }
 182     }
 183
 184     handleImport(evt) {
 185         evt.preventDefault();
 186         let file = this.refs.hiddenImportFileInput.files[0];
 187         if (!(file && file.size && accept(file, ['.zip', '.csar']))) {
 188             this.props.onInvalidFileUpload();
 189             return;
 190         }
 191         let { version } = this.props;
 192         let formData = new FormData();
 193         formData.append('upload', file);
 194         this.refs.hiddenImportFileInput.value = '';
 195         this.props.onUpload(formData, version);
 196     }
 197     validate() {
 198         let {
 199             heatSetup,
 200             heatSetupCache,
 201             onProcessAndValidate,
 202             isReadOnlyMode,
 203             version,
 204             setActiveTab
 205         } = this.props;
 206         onProcessAndValidate({
 207             heatData: heatSetup,
 208             heatDataCache: heatSetupCache,
 209             isReadOnlyMode,
 210             version
 211         }).then(() => setActiveTab({ activeTab: tabsMapping.VALIDATION }));
 212     }
 213     save() {
 214         return this.props.onboardingOrigin === onboardingOriginTypes.ZIP
 215             ? this.props.onSave(this.props.heatSetup, this.props.version)
 216             : Promise.resolve();
 217     }
 218 }
 219
 220 export default HeatScreenView;