openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/components/ModuleFile.js

   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 SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  18 import NameEditInput from './NameEditInput.js';
  19 import SelectWithFileType from './SelectWithFileType';
  20 import { fileTypes } from '../HeatSetupConstants.js';
  21 import AddOrDeleteVolumeFiles from './AddOrDeleteVolumeFiles';
  22
  23 class ModuleFile extends React.Component {
  24     constructor(props) {
  25         super(props);
  26         this.state = {
  27             isInNameEdit: false
  28         };
  29     }
  30
  31     handleSubmit(event, name) {
  32         if (event.keyCode === 13) {
  33             this.handleModuleRename(event, name);
  34         }
  35     }
  36
  37     handleModuleRename(event, name) {
  38         this.setState({ isInNameEdit: false });
  39         this.props.onModuleRename(name, event.target.value);
  40     }
  41
  42     deleteVolumeFiles() {
  43         const { onModuleFileTypeChange, onToggleVolFilesDisplay } = this.props;
  44         onModuleFileTypeChange(null, fileTypes.VOL.label);
  45         onModuleFileTypeChange(null, fileTypes.VOL_ENV.label);
  46         onToggleVolFilesDisplay(false);
  47     }
  48
  49     renderNameAccordingToEditState() {
  50         const { module: { name } } = this.props;
  51         if (this.state.isInNameEdit) {
  52             return (
  53                 <NameEditInput
  54                     defaultValue={name}
  55                     onBlur={evt => this.handleModuleRename(evt, name)}
  56                     onKeyDown={evt => this.handleSubmit(evt, name)}
  57                 />
  58             );
  59         }
  60         return <span className="filename-text">{name}</span>;
  61     }
  62
  63     render() {
  64         const {
  65             module: { name, isBase, yaml, env, vol, volEnv },
  66             onModuleDelete,
  67             files,
  68             onModuleFileTypeChange,
  69             onToggleVolFilesDisplay,
  70             isReadOnlyMode,
  71             displayVolumes
  72         } = this.props;
  73
  74         //const { displayVolumes } = this.state;
  75
  76         const moduleType = isBase ? 'BASE' : 'MODULE';
  77         return (
  78             <div className="modules-list-item" data-test-id="module-item">
  79                 <div className="modules-list-item-controllers">
  80                     <div className="modules-list-item-filename">
  81                         <SVGIcon
  82                             name={isBase ? 'base' : 'module'}
  83                             color="primary"
  84                             iconClassName="heat-setup-module-icon"
  85                         />
  86                         <span className="module-title-by-type">{`${moduleType}: `}</span>
  87                         <div
  88                             className={`text-and-icon ${
  89                                 this.state.isInNameEdit ? 'in-edit' : ''
  90                             }`}>
  91                             {this.renderNameAccordingToEditState()}
  92                             {!this.state.isInNameEdit && (
  93                                 <SVGIcon
  94                                     name="pencil"
  95                                     onClick={() =>
  96                                         this.setState({ isInNameEdit: true })
  97                                     }
  98                                     data-test-id={
  99                                         isBase ? 'base-name' : 'module-name'
 100                                     }
 101                                 />
 102                             )}
 103                         </div>
 104                     </div>
 105                     <SVGIcon
 106                         name="trashO"
 107                         onClick={() => onModuleDelete(name)}
 108                         data-test-id="module-delete"
 109                     />
 110                 </div>
 111                 <div className="modules-list-item-selectors">
 112                     <SelectWithFileType
 113                         type={fileTypes.YAML}
 114                         files={files}
 115                         selected={yaml}
 116                         onChange={onModuleFileTypeChange}
 117                     />
 118                     <SelectWithFileType
 119                         type={fileTypes.ENV}
 120                         files={files}
 121                         selected={env}
 122                         onChange={onModuleFileTypeChange}
 123                     />
 124                     {displayVolumes && (
 125                         <SelectWithFileType
 126                             type={fileTypes.VOL}
 127                             files={files}
 128                             selected={vol}
 129                             onChange={onModuleFileTypeChange}
 130                         />
 131                     )}
 132                     {displayVolumes && (
 133                         <SelectWithFileType
 134                             type={fileTypes.VOL_ENV}
 135                             files={files}
 136                             selected={volEnv}
 137                             onChange={onModuleFileTypeChange}
 138                         />
 139                     )}
 140                     <AddOrDeleteVolumeFiles
 141                         isReadOnlyMode={isReadOnlyMode}
 142                         onAdd={() => onToggleVolFilesDisplay(true)}
 143                         onDelete={() => this.deleteVolumeFiles()}
 144                         add={!displayVolumes}
 145                     />
 146                 </div>
 147             </div>
 148         );
 149     }
 150 }
 151
 152 export default ModuleFile;