From 7fdf733a64670fceefc3ded35cfa581e1c458179 Mon Sep 17 00:00:00 2001 From: Einav Weiss Keidar Date: Tue, 20 Mar 2018 14:45:40 +0200 Subject: Adding Prettier and fixing up eslint version Issue-ID: SDC-1094 Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd Signed-off-by: Einav Weiss Keidar --- .../src/nfvo-components/SubmitErrorResponse.jsx | 228 +++++---- .../src/nfvo-components/accordion/Accordion.jsx | 63 +-- .../src/nfvo-components/datepicker/Datepicker.jsx | 151 +++--- .../src/nfvo-components/editor/TabulatedEditor.jsx | 165 ++++--- .../fileupload/DraggableUploadFileBox.jsx | 35 +- openecomp-ui/src/nfvo-components/grid/GridItem.jsx | 21 +- .../src/nfvo-components/grid/GridSection.jsx | 35 +- .../src/nfvo-components/input/ExpandableInput.jsx | 177 ++++--- .../src/nfvo-components/input/SelectInput.jsx | 68 +-- .../src/nfvo-components/input/ToggleInput.jsx | 93 ++-- .../input/dualListbox/DualListboxView.jsx | 348 ++++++++----- .../src/nfvo-components/input/validation/Form.jsx | 272 +++++----- .../src/nfvo-components/input/validation/Input.jsx | 404 ++++++++------- .../input/validation/InputOptions.jsx | 545 ++++++++++++--------- .../input/validation/InputWrapper.jsx | 255 +++++----- .../src/nfvo-components/input/validation/Tabs.jsx | 116 +++-- .../input/validation/ValidationButtons.jsx | 81 ++- .../listEditor/ListEditorItemView.jsx | 108 ++-- .../listEditor/ListEditorItemViewField.jsx | 6 +- .../nfvo-components/listEditor/ListEditorView.jsx | 148 +++--- .../listEditor/listEditor.stories.js | 77 +-- openecomp-ui/src/nfvo-components/loader/Loader.jsx | 61 ++- .../src/nfvo-components/loader/LoaderConstants.js | 8 +- .../src/nfvo-components/loader/LoaderReducer.js | 85 ++-- .../src/nfvo-components/modal/GlobalModal.js | 280 ++++++----- .../nfvo-components/modal/GlobalModalConstants.js | 26 +- .../nfvo-components/modal/GlobalModalReducer.js | 58 +-- openecomp-ui/src/nfvo-components/modal/Modal.jsx | 102 ++-- .../src/nfvo-components/overlay/Overlay.jsx | 32 +- .../nfvo-components/panel/NavigationSideBar.jsx | 219 +++++---- .../panel/versionController/VersionController.jsx | 323 +++++++----- .../VersionControllerConstants.js | 10 +- .../versionController/components/ActionButtons.jsx | 227 ++++++--- .../components/CommitCommentModal.jsx | 87 ++-- .../versionController/components/Permissions.jsx | 106 ++-- .../nfvo-components/progressBar/ProgressBar.jsx | 33 +- .../nfvo-components/table/SelectActionTable.jsx | 75 ++- .../table/SelectActionTableCell.jsx | 36 +- .../nfvo-components/table/SelectActionTableRow.jsx | 77 ++- openecomp-ui/src/nfvo-components/tree/Tree.jsx | 406 ++++++++------- .../src/nfvo-components/tree/Tree.stories.js | 242 ++++----- 41 files changed, 3470 insertions(+), 2419 deletions(-) (limited to 'openecomp-ui/src/nfvo-components') diff --git a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx index c15cd1d0e8..56382d6325 100644 --- a/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx +++ b/openecomp-ui/src/nfvo-components/SubmitErrorResponse.jsx @@ -13,11 +13,11 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import ListGroupItem from 'react-bootstrap/lib/ListGroupItem.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; -import {Collapse} from 'react-bootstrap'; +import { Collapse } from 'react-bootstrap'; /** * parsing and showing the following Java Response object * @@ -42,121 +42,151 @@ import {Collapse} from 'react-bootstrap'; } */ class SubmitErrorResponse extends Component { + render() { + let { + validationResponse: { + vspErrors, + licensingDataErrors, + questionnaireValidationResult, + uploadDataErrors + } + } = this.props; + return ( +
+ {vspErrors && this.renderVspErrors(vspErrors)} + {licensingDataErrors && + this.renderVspErrors(licensingDataErrors)} + {questionnaireValidationResult && + this.renderComponentsErrors(questionnaireValidationResult)} + {uploadDataErrors && + this.renderUploadDataErrors(uploadDataErrors)} +
+ ); + } + renderVspErrors(errors) { + return ( + +
+ {errors.length && + errors.map((error, i) => { + return ( + + ); + })} +
+ + ); + } - render() { - let {validationResponse : {vspErrors, licensingDataErrors, questionnaireValidationResult, uploadDataErrors}} = this.props; - return ( -
- {vspErrors && this.renderVspErrors(vspErrors)} - {licensingDataErrors && this.renderVspErrors(licensingDataErrors)} - {questionnaireValidationResult && this.renderComponentsErrors(questionnaireValidationResult)} - {uploadDataErrors && this.renderUploadDataErrors(uploadDataErrors)} -
- ); - } - - renderVspErrors(errors) { - return ( - -
- {errors.length && errors.map((error, i) => {return ();})} -
- - ); - } - - - renderComponentsErrors(errors) { - return ( - -
- {errors.validationData.length && errors.validationData.map((item, i) =>{ return ();})} -
- - ); - } + renderComponentsErrors(errors) { + return ( + +
+ {errors.validationData.length && + errors.validationData.map((item, i) => { + return ; + })} +
+ + ); + } - renderUploadDataErrors(uploadDataErrors) { - return ( - -
- -
- - ); - } + renderUploadDataErrors(uploadDataErrors) { + return ( + +
+ +
+ + ); + } } - -const ComponentError = ({item}) => { - return ( -
-
{item.entityName}
- {item.errors.map((error, i) => {return();})} -
- ); +const ComponentError = ({ item }) => { + return ( +
+
{item.entityName}
+ {item.errors.map((error, i) => { + return ; + })} +
+ ); }; function* entries(obj) { - for (let key of Object.keys(obj)) { - yield {header: key, list: obj[key]}; - } + for (let key of Object.keys(obj)) { + yield { header: key, list: obj[key] }; + } } -const UploadErrorList = ({items}) => { - let generator = entries(items); - - let errors = []; - for (let item of generator) {errors.push( -
-
{item.header}
- {item.list.map((error, i) => )} -
- );} +const UploadErrorList = ({ items }) => { + let generator = entries(items); + + let errors = []; + for (let item of generator) { + errors.push( +
+
{item.header}
+ {item.list.map((error, i) => ( + + ))} +
+ ); + } - return ( -
- {errors} -
- ); + return
{errors}
; }; class ErrorBlock extends React.Component { - state = { - collapsed: false - }; - - render() { - let {errorType, children} = this.props; - return ( -
- {this.setState({collapsed: !this.state.collapsed});}} errorType={errorType}/> - - {children} - -
- ); - } + state = { + collapsed: false + }; + + render() { + let { errorType, children } = this.props; + return ( +
+ { + this.setState({ collapsed: !this.state.collapsed }); + }} + errorType={errorType} + /> + {children} +
+ ); + } } -const ErrorHeader = ({errorType, collapsed, onClick}) => { - return( -
- -
- ); +const ErrorHeader = ({ errorType, collapsed, onClick }) => { + return ( +
+ +
+ ); }; -const ErrorMessage = ({error, warning}) => { - return ( - - - {error} - - ); +const ErrorMessage = ({ error, warning }) => { + return ( + + + {error} + + ); }; export default SubmitErrorResponse; diff --git a/openecomp-ui/src/nfvo-components/accordion/Accordion.jsx b/openecomp-ui/src/nfvo-components/accordion/Accordion.jsx index ac19072307..72f8de0d23 100644 --- a/openecomp-ui/src/nfvo-components/accordion/Accordion.jsx +++ b/openecomp-ui/src/nfvo-components/accordion/Accordion.jsx @@ -4,9 +4,9 @@ * 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. @@ -18,35 +18,38 @@ import React from 'react'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import PropTypes from 'prop-types'; - class Accordion extends React.Component { + static propTypes = { + title: PropTypes.string, + children: PropTypes.node + }; - static propTypes = { - title: PropTypes.string, - children: PropTypes.node - } - - constructor(props) { - super(props); - this.state = { - open: false - }; - } - render() { - const {children, title} = this.props; - const {open} = this.state; - return ( -
-
this.setState({open: !open})} className='accordion-header'> - -
{title}
-
-
- {children} -
-
- ); - } + constructor(props) { + super(props); + this.state = { + open: false + }; + } + render() { + const { children, title } = this.props; + const { open } = this.state; + return ( +
+
this.setState({ open: !open })} + className="accordion-header"> + +
{title}
+
+
+ {children} +
+
+ ); + } } -export default Accordion; \ No newline at end of file +export default Accordion; diff --git a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx index 25e7e7e02d..b4bc8be9ec 100644 --- a/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx +++ b/openecomp-ui/src/nfvo-components/datepicker/Datepicker.jsx @@ -5,72 +5,105 @@ import moment from 'moment'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; class CustomInput extends React.Component { + static propTypes = { + placeHolderText: PropTypes.string, + onChange: PropTypes.func, + onClick: PropTypes.func, + value: PropTypes.string + }; - static propTypes = { - placeHolderText: PropTypes.string, - onChange: PropTypes.func, - onClick: PropTypes.func, - value: PropTypes.string - }; - - render() { - const {placeholderText, onClick, onClear, inputRef, value: date} = this.props; - const text = date ? date : placeholderText; - const textStyle = date ? '' : 'placeholder'; - return ( -
-
{text}
- {date && {e.stopPropagation(); onClear();}} name='close' className='clear-input'/>} - -
- ); - } -}; + render() { + const { + placeholderText, + onClick, + onClear, + inputRef, + value: date + } = this.props; + const text = date ? date : placeholderText; + const textStyle = date ? '' : 'placeholder'; + return ( +
+
{text}
+ {date && ( + { + e.stopPropagation(); + onClear(); + }} + name="close" + className="clear-input" + /> + )} + +
+ ); + } +} const parseDate = (date, format) => { - return typeof date === 'number' ? moment.unix(date) : moment(date, format); + return typeof date === 'number' ? moment.unix(date) : moment(date, format); }; class Datepicker extends React.Component { - static propTypes = { - date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - format: PropTypes.string, - onChange: PropTypes.func, - selectsStart: PropTypes.bool, - selectsEnd: PropTypes.bool, - startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - disabled: PropTypes.bool, - label: PropTypes.string, - isRequired: PropTypes.bool - } - render() { - let {date, format, onChange, selectsStart = false, startDate = null, endDate = null, selectsEnd = false, - disabled = false, inputRef} = this.props; - const placeholderText = 'Enter a date'; - const props = { - format, - onChange, - disabled, - selected: date ? parseDate(date, format) : date, - selectsStart, - selectsEnd, - placeholderText, - startDate: startDate ? parseDate(startDate, format) : startDate, - endDate: endDate ? parseDate(endDate, format) : endDate - }; + static propTypes = { + date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + format: PropTypes.string, + onChange: PropTypes.func, + selectsStart: PropTypes.bool, + selectsEnd: PropTypes.bool, + startDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + disabled: PropTypes.bool, + label: PropTypes.string, + isRequired: PropTypes.bool + }; + render() { + let { + date, + format, + onChange, + selectsStart = false, + startDate = null, + endDate = null, + selectsEnd = false, + disabled = false, + inputRef + } = this.props; + const placeholderText = 'Enter a date'; + const props = { + format, + onChange, + disabled, + selected: date ? parseDate(date, format) : date, + selectsStart, + selectsEnd, + placeholderText, + startDate: startDate ? parseDate(startDate, format) : startDate, + endDate: endDate ? parseDate(endDate, format) : endDate + }; - return ( -
- onChange(undefined)} placeholderText={placeholderText}/>} - minDate={selectsEnd && props.startDate} - maxDate={selectsStart && props.endDate} - {...props}/> -
- ); - } + return ( +
+ onChange(undefined)} + placeholderText={placeholderText} + /> + } + minDate={selectsEnd && props.startDate} + maxDate={selectsStart && props.endDate} + {...props} + /> +
+ ); + } } export default Datepicker; diff --git a/openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx b/openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx index 3c9ceed0d8..9fcd7042bc 100644 --- a/openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx +++ b/openecomp-ui/src/nfvo-components/editor/TabulatedEditor.jsx @@ -20,79 +20,106 @@ import VersionController from 'nfvo-components/panel/versionController/VersionCo import NavigationSideBar from 'nfvo-components/panel/NavigationSideBar.jsx'; export default class TabulatedEditor extends React.Component { + render() { + const { + navigationBarProps, + onToggle, + onVersionSwitching, + onMoreVersionsClick, + onCreate, + onSave, + onClose, + onVersionControllerAction, + onNavigate, + children, + meta, + onManagePermissions, + onOpenCommentCommitModal, + onOpenPermissions, + onOpenRevisionsModal + } = this.props; + let { versionControllerProps } = this.props; + const { className = '' } = React.Children.only(children).props; + const child = this.prepareChild(); - render() { - const {navigationBarProps, onToggle, onVersionSwitching, onMoreVersionsClick, onCreate, onSave, onClose, - onVersionControllerAction, onNavigate, children, meta, onManagePermissions, onOpenCommentCommitModal, onOpenPermissions, onOpenRevisionsModal} = this.props; - let {versionControllerProps} = this.props; - const {className = ''} = React.Children.only(children).props; - const child = this.prepareChild(); + if (onClose) { + versionControllerProps = { + ...versionControllerProps, + onClose: () => onClose(versionControllerProps) + }; + } + return ( +
+
+ +
+
+ + onVersionSwitching(version, meta) + } + onMoreVersionsClick={onMoreVersionsClick} + onManagePermissions={onManagePermissions} + onOpenCommentCommitModal={onOpenCommentCommitModal} + onOpenPermissions={onOpenPermissions} + onOpenRevisionsModal={onOpenRevisionsModal} + callVCAction={(action, version, comment) => + onVersionControllerAction( + action, + version, + comment, + meta + ) + } + onCreate={onCreate && this.handleCreate} + onSave={onSave && this.handleSave} + /> +
+ {child} +
+
+
+ ); + } - if(onClose) { - versionControllerProps = { - ...versionControllerProps, - onClose: () => onClose(versionControllerProps) - }; - } - return ( -
-
- -
-
- onVersionSwitching(version, meta)} - onMoreVersionsClick={onMoreVersionsClick} - onManagePermissions={onManagePermissions} - onOpenCommentCommitModal={onOpenCommentCommitModal} - onOpenPermissions={onOpenPermissions} - onOpenRevisionsModal={onOpenRevisionsModal} - callVCAction={(action, version, comment) => onVersionControllerAction(action, version, comment, meta)} - onCreate={onCreate && this.handleCreate} - onSave={onSave && this.handleSave}/> -
- { - child - } -
-
-
- ); - } + prepareChild() { + const { onSave, onCreate, children } = this.props; - prepareChild() { - const {onSave, onCreate, children} = this.props; + const additionalChildProps = { ref: 'editor' }; + if (onSave) { + additionalChildProps.onSave = onSave; + } + if (onCreate) { + additionalChildProps.onCreate = onCreate; + } - const additionalChildProps = {ref: 'editor'}; - if (onSave) { - additionalChildProps.onSave = onSave; - } - if (onCreate) { - additionalChildProps.onCreate = onCreate; - } + const child = React.cloneElement( + React.Children.only(children), + additionalChildProps + ); + return child; + } - const child = React.cloneElement(React.Children.only(children), additionalChildProps); - return child; - } + handleSave = () => { + const childInstance = this.refs.editor.getWrappedInstance(); + if (childInstance.save) { + return childInstance.save(); + } else { + return this.props.onSave(); + } + }; - - - handleSave = () => { - const childInstance = this.refs.editor.getWrappedInstance(); - if (childInstance.save) { - return childInstance.save(); - } else { - return this.props.onSave(); - } - }; - - handleCreate = () => { - const childInstance = this.refs.editor.getWrappedInstance(); - if (childInstance.create) { - childInstance.create(); - } else { - this.props.onCreate(); - } - } + handleCreate = () => { + const childInstance = this.refs.editor.getWrappedInstance(); + if (childInstance.create) { + childInstance.create(); + } else { + this.props.onCreate(); + } + }; } diff --git a/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx b/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx index 5b4e0a8bee..0d47d859d9 100644 --- a/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx +++ b/openecomp-ui/src/nfvo-components/fileupload/DraggableUploadFileBox.jsx @@ -26,20 +26,33 @@ * or * https://github.com/JedWatson/react-select */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Button from 'sdc-ui/lib/react/Button.js'; class DraggableUploadFileBox extends Component { - render() { - let {className, onClick, dataTestId, isReadOnlyMode} = this.props; - return ( -
-
{i18n('Drag & drop for upload')}
-
{i18n('or')}
- -
- ); - } + render() { + let { className, onClick, dataTestId, isReadOnlyMode } = this.props; + return ( +
+
+ {i18n('Drag & drop for upload')} +
+
{i18n('or')}
+ +
+ ); + } } export default DraggableUploadFileBox; diff --git a/openecomp-ui/src/nfvo-components/grid/GridItem.jsx b/openecomp-ui/src/nfvo-components/grid/GridItem.jsx index c62e042bf4..9723cde2c0 100644 --- a/openecomp-ui/src/nfvo-components/grid/GridItem.jsx +++ b/openecomp-ui/src/nfvo-components/grid/GridItem.jsx @@ -15,12 +15,21 @@ */ import React from 'react'; -const GridItem = ({colSpan = 1, children, lastColInRow = false, stretch = false, className = ''}) => ( -
-
- {children} -
-
+const GridItem = ({ + colSpan = 1, + children, + lastColInRow = false, + stretch = false, + className = '' +}) => ( +
+
+ {children} +
+
); export default GridItem; diff --git a/openecomp-ui/src/nfvo-components/grid/GridSection.jsx b/openecomp-ui/src/nfvo-components/grid/GridSection.jsx index 8f4a024fdb..f2e3588d9e 100644 --- a/openecomp-ui/src/nfvo-components/grid/GridSection.jsx +++ b/openecomp-ui/src/nfvo-components/grid/GridSection.jsx @@ -17,21 +17,32 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -const GridSection = ({title, children, className = '', titleClassName, hasLastColSet = false}) => { - return ( -
- {title &&
{title}
} -
- {children} -
-
- ); +const GridSection = ({ + title, + children, + className = '', + titleClassName, + hasLastColSet = false +}) => { + return ( +
+ {title && ( +
+ {title} +
+ )} +
{children}
+
+ ); }; GridSection.propTypes = { - title: PropTypes.string, - titleClassName: PropTypes.string, - hasLastColSet: PropTypes.bool + title: PropTypes.string, + titleClassName: PropTypes.string, + hasLastColSet: PropTypes.bool }; export default GridSection; diff --git a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx index 82fbe1deed..3973ae8c5d 100644 --- a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx +++ b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx @@ -19,99 +19,118 @@ import ReactDOM from 'react-dom'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import Input from 'nfvo-components/input/validation/InputWrapper.jsx'; -const ExpandableInputClosed = ({iconType, onClick}) => ( - +const ExpandableInputClosed = ({ iconType, onClick }) => ( + ); class ExpandableInputOpened extends React.Component { - componentDidMount(){ - this.rawDomNode = ReactDOM.findDOMNode(this.searchInputNode.inputWrapper); - this.rawDomNode.focus(); - } + componentDidMount() { + this.rawDomNode = ReactDOM.findDOMNode( + this.searchInputNode.inputWrapper + ); + this.rawDomNode.focus(); + } - componentWillReceiveProps(newProps){ - if (!newProps.value){ - if (!(document.activeElement === this.rawDomNode)){ - this.props.handleBlur(); - } - } - } + componentWillReceiveProps(newProps) { + if (!newProps.value) { + if (!(document.activeElement === this.rawDomNode)) { + this.props.handleBlur(); + } + } + } - handleClose(){ - this.props.onChange(''); - this.rawDomNode.focus(); - } + handleClose() { + this.props.onChange(''); + this.rawDomNode.focus(); + } - handleKeyDown(e){ - if (e.key === 'Escape'){ - e.preventDefault(); - if (this.props.value) { - this.handleClose(); - } else { - this.rawDomNode.blur(); - } - }; - } + handleKeyDown(e) { + if (e.key === 'Escape') { + e.preventDefault(); + if (this.props.value) { + this.handleClose(); + } else { + this.rawDomNode.blur(); + } + } + } - render() { - let {iconType, value, onChange, handleBlur} = this.props; - return ( -
- this.searchInputNode = input} - className='expandable-active' - groupClassName='expandable-input-control' - onChange={e => onChange(e)} - onKeyDown={e => this.handleKeyDown(e)} - onBlur={handleBlur}/> - {value && this.handleClose()} name='close' />} - {!value && } -
- ); - } + render() { + let { iconType, value, onChange, handleBlur } = this.props; + return ( +
+ (this.searchInputNode = input)} + className="expandable-active" + groupClassName="expandable-input-control" + onChange={e => onChange(e)} + onKeyDown={e => this.handleKeyDown(e)} + onBlur={handleBlur} + /> + {value && ( + this.handleClose()} + name="close" + /> + )} + {!value && } +
+ ); + } } class ExpandableInput extends React.Component { + static propTypes = { + iconType: PropTypes.string, + onChange: PropTypes.func, + value: PropTypes.string + }; - static propTypes = { - iconType: PropTypes.string, - onChange: PropTypes.func, - value: PropTypes.string - }; + state = { showInput: false }; - state = {showInput: false}; + closeInput() { + if (!this.props.value) { + this.setState({ showInput: false }); + } + } - closeInput(){ - if (!this.props.value) { - this.setState({showInput: false}); - } - } + getValue() { + return this.props.value; + } - getValue(){ - return this.props.value; - } - - render(){ - let {iconType, value, onChange = false} = this.props; - return ( -
- {this.state.showInput && - this.handleKeyDown(e)} - handleBlur={() => this.closeInput()}/> - } - {!this.state.showInput && this.setState({showInput: true})} />} -
- ); - } + render() { + let { iconType, value, onChange = false } = this.props; + return ( +
+ {this.state.showInput && ( + this.handleKeyDown(e)} + handleBlur={() => this.closeInput()} + /> + )} + {!this.state.showInput && ( + this.setState({ showInput: true })} + /> + )} +
+ ); + } } - export default ExpandableInput; diff --git a/openecomp-ui/src/nfvo-components/input/SelectInput.jsx b/openecomp-ui/src/nfvo-components/input/SelectInput.jsx index 03c727379e..b0e0d87d7c 100644 --- a/openecomp-ui/src/nfvo-components/input/SelectInput.jsx +++ b/openecomp-ui/src/nfvo-components/input/SelectInput.jsx @@ -26,43 +26,51 @@ * or * https://github.com/JedWatson/react-select */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import Select from 'react-select'; class SelectInput extends Component { + inputValue = []; - inputValue = []; + render() { + let { label, value, ...other } = this.props; + const dataTestId = this.props['data-test-id'] + ? { 'data-test-id': this.props['data-test-id'] } + : {}; + return ( +
+
+ {label && } + this.onSelectChanged(value)} {...other} value={value} /> -
-
- ); - } + getValue() { + return this.inputValue && this.inputValue.length ? this.inputValue : ''; + } - getValue() { - return this.inputValue && this.inputValue.length ? this.inputValue : ''; - } + onSelectChanged(value) { + this.props.onMultiSelectChanged(value); + } - onSelectChanged(value) { - this.props.onMultiSelectChanged(value); - } - - componentDidMount() { - let {value} = this.props; - this.inputValue = value ? value : []; - } - componentDidUpdate() { - if (this.inputValue !== this.props.value) { - this.inputValue = this.props.value; - } - } + componentDidMount() { + let { value } = this.props; + this.inputValue = value ? value : []; + } + componentDidUpdate() { + if (this.inputValue !== this.props.value) { + this.inputValue = this.props.value; + } + } } export default SelectInput; diff --git a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx index 31a8a66d86..947570fa29 100644 --- a/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx +++ b/openecomp-ui/src/nfvo-components/input/ToggleInput.jsx @@ -16,55 +16,60 @@ import React from 'react'; import PropTypes from 'prop-types'; -export default -class ToggleInput extends React.Component { +export default class ToggleInput extends React.Component { + static propTypes = { + label: PropTypes.node, + value: PropTypes.bool, + onChange: PropTypes.func, + disabled: PropTypes.bool + }; - static propTypes = { - label: PropTypes.node, - value: PropTypes.bool, - onChange: PropTypes.func, - disabled: PropTypes.bool - } + static defaultProps = { + value: false, + label: '' + }; - static defaultProps = { - value: false, - label: '' - } + state = { + value: this.props.value + }; - state = { - value: this.props.value - } + status() { + return this.state.value ? 'on' : 'off'; + } - status() { - return this.state.value ? 'on' : 'off'; - } + render() { + let { label, disabled } = this.props; + let checked = this.status() === 'on'; + //TODO check onclick + return ( +
+
{label}
+
+ +
+
+ ); + } - render() { - let {label, disabled} = this.props; - let checked = this.status() === 'on'; - //TODO check onclick - return ( -
-
{label}
-
- - -
-
- ); - } + click = () => { + let value = !this.state.value; + this.setState({ value }); - click = () => { - let value = !this.state.value; - this.setState({value}); + let onChange = this.props.onChange; + if (onChange) { + onChange(value); + } + }; - let onChange = this.props.onChange; - if (onChange) { - onChange(value); - } - } - - getValue() { - return this.state.value; - } + getValue() { + return this.state.value; + } } diff --git a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx index a689c50778..7ab4c8242c 100644 --- a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx +++ b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx @@ -19,136 +19,224 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import Input from 'nfvo-components/input/validation/InputWrapper.jsx'; class DualListboxView extends React.Component { - - static propTypes = { - - availableList: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired, - name: PropTypes.string.isRequired - })), - filterTitle: PropTypes.shape({ - left: PropTypes.string, - right: PropTypes.string - }), - selectedValuesList: PropTypes.arrayOf(PropTypes.string), - - onChange: PropTypes.func.isRequired - }; - - static defaultProps = { - selectedValuesList: [], - availableList: [], - filterTitle: { - left: '', - right: '' - } - }; - - state = { - availableListFilter: '', - selectedValuesListFilter: '', - selectedValues: [] - }; - - render() { - let {availableList, selectedValuesList, filterTitle, isReadOnlyMode} = this.props; - let {availableListFilter, selectedValuesListFilter} = this.state; - - let unselectedList = availableList.filter(availableItem => !selectedValuesList.find(value => value === availableItem.id)); - let selectedList = availableList.filter(availableItem => selectedValuesList.find(value => value === availableItem.id)); - selectedList = selectedList.sort((a, b) => selectedValuesList.indexOf(a.id) - selectedValuesList.indexOf(b.id)); - return ( -
- {this.renderListbox(filterTitle.left, unselectedList, { - value: availableListFilter, - ref: 'availableListFilter', - disabled: isReadOnlyMode, - onChange: (value) => this.setState({availableListFilter: value}) - }, {ref: 'availableValues', disabled: isReadOnlyMode, testId: 'available',})} - {this.renderOperationsBar(isReadOnlyMode)} - {this.renderListbox(filterTitle.right, selectedList, { - value: selectedValuesListFilter, - ref: 'selectedValuesListFilter', - disabled: isReadOnlyMode, - onChange: (value) => this.setState({selectedValuesListFilter: value}) - }, {ref: 'selectedValues', disabled: isReadOnlyMode, testId: 'selected'})} -
- ); - } - - renderListbox(filterTitle, list, filterProps, props) { - let regExFilter = new RegExp(escape(filterProps.value), 'i'); - let matchedItems = list.filter(item => item.name.match(regExFilter)); - let unMatchedItems = list.filter(item => !item.name.match(regExFilter)); - return ( -
-

{filterTitle}

-
- - -
- this.onSelectItems(event.target.selectedOptions)} - groupClassName='dual-list-box-multi-select' - type='select' - name='dual-list-box-multi-select' - data-test-id={`${props.testId}-select-input`} - disabled={props.disabled} - ref={props.ref}> - {matchedItems.map(item => this.renderOption(item.id, item.name))} - {matchedItems.length && unMatchedItems.length && } - {unMatchedItems.map(item => this.renderOption(item.id, item.name))} - -
- ); - } - - onSelectItems(selectedOptions) { - let selectedValues = Object.keys(selectedOptions).map((k) => selectedOptions[k].value); - this.setState({selectedValues}); - } - - renderOption(value, name) { - return (); - } - - renderOperationsBar(isReadOnlyMode) { - return ( -
- {this.renderOperationBarButton(() => this.addToSelectedList(), 'angleRight')} - {this.renderOperationBarButton(() => this.removeFromSelectedList(), 'angleLeft')} - {this.renderOperationBarButton(() => this.addAllToSelectedList(), 'angleDoubleRight')} - {this.renderOperationBarButton(() => this.removeAllFromSelectedList(), 'angleDoubleLeft')} -
- ); - } - - renderOperationBarButton(onClick, iconName){ - return (
); - } - - addToSelectedList() { - this.props.onChange(this.props.selectedValuesList.concat(this.state.selectedValues)); - this.setState({selectedValues: []}); - } - - removeFromSelectedList() { - const selectedValues = this.state.selectedValues; - this.props.onChange(this.props.selectedValuesList.filter(value => !selectedValues.find(selectedValue => selectedValue === value))); - this.setState({selectedValues: []}); - } - - addAllToSelectedList() { - this.props.onChange(this.props.availableList.map(item => item.id)); - } - - removeAllFromSelectedList() { - this.props.onChange([]); - } + static propTypes = { + availableList: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.string.isRequired, + name: PropTypes.string.isRequired + }) + ), + filterTitle: PropTypes.shape({ + left: PropTypes.string, + right: PropTypes.string + }), + selectedValuesList: PropTypes.arrayOf(PropTypes.string), + + onChange: PropTypes.func.isRequired + }; + + static defaultProps = { + selectedValuesList: [], + availableList: [], + filterTitle: { + left: '', + right: '' + } + }; + + state = { + availableListFilter: '', + selectedValuesListFilter: '', + selectedValues: [] + }; + + render() { + let { + availableList, + selectedValuesList, + filterTitle, + isReadOnlyMode + } = this.props; + let { availableListFilter, selectedValuesListFilter } = this.state; + + let unselectedList = availableList.filter( + availableItem => + !selectedValuesList.find(value => value === availableItem.id) + ); + let selectedList = availableList.filter(availableItem => + selectedValuesList.find(value => value === availableItem.id) + ); + selectedList = selectedList.sort( + (a, b) => + selectedValuesList.indexOf(a.id) - + selectedValuesList.indexOf(b.id) + ); + return ( +
+ {this.renderListbox( + filterTitle.left, + unselectedList, + { + value: availableListFilter, + ref: 'availableListFilter', + disabled: isReadOnlyMode, + onChange: value => + this.setState({ availableListFilter: value }) + }, + { + ref: 'availableValues', + disabled: isReadOnlyMode, + testId: 'available' + } + )} + {this.renderOperationsBar(isReadOnlyMode)} + {this.renderListbox( + filterTitle.right, + selectedList, + { + value: selectedValuesListFilter, + ref: 'selectedValuesListFilter', + disabled: isReadOnlyMode, + onChange: value => + this.setState({ selectedValuesListFilter: value }) + }, + { + ref: 'selectedValues', + disabled: isReadOnlyMode, + testId: 'selected' + } + )} +
+ ); + } + + renderListbox(filterTitle, list, filterProps, props) { + let regExFilter = new RegExp(escape(filterProps.value), 'i'); + let matchedItems = list.filter(item => item.name.match(regExFilter)); + let unMatchedItems = list.filter(item => !item.name.match(regExFilter)); + return ( +
+

{filterTitle}

+
+ + +
+ + this.onSelectItems(event.target.selectedOptions) + } + groupClassName="dual-list-box-multi-select" + type="select" + name="dual-list-box-multi-select" + data-test-id={`${props.testId}-select-input`} + disabled={props.disabled} + ref={props.ref}> + {matchedItems.map(item => + this.renderOption(item.id, item.name) + )} + {matchedItems.length && + unMatchedItems.length && ( + + )} + {unMatchedItems.map(item => + this.renderOption(item.id, item.name) + )} + +
+ ); + } + + onSelectItems(selectedOptions) { + let selectedValues = Object.keys(selectedOptions).map( + k => selectedOptions[k].value + ); + this.setState({ selectedValues }); + } + + renderOption(value, name) { + return ( + + ); + } + + renderOperationsBar(isReadOnlyMode) { + return ( +
+ {this.renderOperationBarButton( + () => this.addToSelectedList(), + 'angleRight' + )} + {this.renderOperationBarButton( + () => this.removeFromSelectedList(), + 'angleLeft' + )} + {this.renderOperationBarButton( + () => this.addAllToSelectedList(), + 'angleDoubleRight' + )} + {this.renderOperationBarButton( + () => this.removeAllFromSelectedList(), + 'angleDoubleLeft' + )} +
+ ); + } + + renderOperationBarButton(onClick, iconName) { + return ( +
+ +
+ ); + } + + addToSelectedList() { + this.props.onChange( + this.props.selectedValuesList.concat(this.state.selectedValues) + ); + this.setState({ selectedValues: [] }); + } + + removeFromSelectedList() { + const selectedValues = this.state.selectedValues; + this.props.onChange( + this.props.selectedValuesList.filter( + value => + !selectedValues.find( + selectedValue => selectedValue === value + ) + ) + ); + this.setState({ selectedValues: [] }); + } + + addAllToSelectedList() { + this.props.onChange(this.props.availableList.map(item => item.id)); + } + + removeAllFromSelectedList() { + this.props.onChange([]); + } } export default DualListboxView; diff --git a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx index 6df0bf9009..62fc29a55c 100644 --- a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx +++ b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx @@ -19,130 +19,160 @@ import PropTypes from 'prop-types'; import ValidationButtons from './ValidationButtons.jsx'; class Form extends React.Component { - - static defaultProps = { - hasButtons : true, - onSubmit : null, - onReset : null, - labledButtons: true, - onValidChange : null, - isValid: true, - submitButtonText: null, - cancelButtonText: null - }; - - static propTypes = { - isValid : PropTypes.bool, - formReady : PropTypes.bool, - isReadOnlyMode : PropTypes.bool, - hasButtons : PropTypes.bool, - onSubmit : PropTypes.func, - onReset : PropTypes.func, - labledButtons: PropTypes.bool, - submitButtonText: PropTypes.string, - cancelButtonText: PropTypes.string, - onValidChange : PropTypes.func, - onValidityChanged: PropTypes.func, - onValidateForm: PropTypes.func - }; - - constructor(props) { - super(props); - } - - - render() { - // eslint-disable-next-line no-unused-vars - let {isValid, onValidChange, onValidityChanged, onDataChanged, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, submitButtonText, - cancelButtonText, children, ...formProps} = this.props; - return ( -
this.form = form} onSubmit={event => this.handleFormValidation(event)}> -
-
- {children} -
-
- {hasButtons && - this.buttons = buttons} - isReadOnlyMode={isReadOnlyMode}/>} - - ); - } - - handleFormValidation(event) { - event.preventDefault(); - if (this.props.onValidateForm && !this.props.formReady){ - return this.props.onValidateForm(); - } else { - return this.handleFormSubmit(event); - } - } - handleFormSubmit(event) { - if (event) { - event.preventDefault(); - } - if(this.props.onSubmit) { - return this.props.onSubmit(event); - } - } - - componentDidMount() { - if (this.props.hasButtons) { - this.buttons.setState({isValid: this.props.isValid}); - } - } - - - - componentDidUpdate(prevProps) { - // only handling this programatically if the validation of the form is done outside of the view - // (example with a form that is dependent on the state of other forms) - if (prevProps.isValid !== this.props.isValid) { - if (this.props.hasButtons) { - this.buttons.setState({isValid: this.props.isValid}); - } - // callback in case form is part of bigger picture in view - if (this.props.onValidChange) { - this.props.onValidChange(this.props.isValid); - } - - // TODO - maybe this has to be part of componentWillUpdate - if(this.props.onValidityChanged) { - this.props.onValidityChanged(this.props.isValid); - } - } - if (this.props.formReady) { // if form validation succeeded -> continue with submit - this.handleFormSubmit(); - } - } - + static defaultProps = { + hasButtons: true, + onSubmit: null, + onReset: null, + labledButtons: true, + onValidChange: null, + isValid: true, + submitButtonText: null, + cancelButtonText: null + }; + + static propTypes = { + isValid: PropTypes.bool, + formReady: PropTypes.bool, + isReadOnlyMode: PropTypes.bool, + hasButtons: PropTypes.bool, + onSubmit: PropTypes.func, + onReset: PropTypes.func, + labledButtons: PropTypes.bool, + submitButtonText: PropTypes.string, + cancelButtonText: PropTypes.string, + onValidChange: PropTypes.func, + onValidityChanged: PropTypes.func, + onValidateForm: PropTypes.func + }; + + constructor(props) { + super(props); + } + render() { + /* eslint-disable no-unused-vars */ + let { + isValid, + onValidChange, + onValidityChanged, + onDataChanged, + formReady, + onValidateForm, + isReadOnlyMode, + hasButtons, + onSubmit, + labledButtons, + submitButtonText, + cancelButtonText, + children, + ...formProps + } = this.props; + /* eslint-enable no-unused-vars */ + return ( +
(this.form = form)} + onSubmit={event => this.handleFormValidation(event)}> +
+
{children}
+
+ {hasButtons && ( + (this.buttons = buttons)} + isReadOnlyMode={isReadOnlyMode} + /> + )} + + ); + } + + handleFormValidation(event) { + event.preventDefault(); + if (this.props.onValidateForm && !this.props.formReady) { + return this.props.onValidateForm(); + } else { + return this.handleFormSubmit(event); + } + } + handleFormSubmit(event) { + if (event) { + event.preventDefault(); + } + if (this.props.onSubmit) { + return this.props.onSubmit(event); + } + } + + componentDidMount() { + if (this.props.hasButtons) { + this.buttons.setState({ isValid: this.props.isValid }); + } + } + + componentDidUpdate(prevProps) { + // only handling this programatically if the validation of the form is done outside of the view + // (example with a form that is dependent on the state of other forms) + if (prevProps.isValid !== this.props.isValid) { + if (this.props.hasButtons) { + this.buttons.setState({ isValid: this.props.isValid }); + } + // callback in case form is part of bigger picture in view + if (this.props.onValidChange) { + this.props.onValidChange(this.props.isValid); + } + + // TODO - maybe this has to be part of componentWillUpdate + if (this.props.onValidityChanged) { + this.props.onValidityChanged(this.props.isValid); + } + } + if (this.props.formReady) { + // if form validation succeeded -> continue with submit + this.handleFormSubmit(); + } + } } export class TabsForm extends Form { - render() { - // eslint-disable-next-line no-unused-vars - let {submitButtonText, cancelButtonText, isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children, - ...formProps} = this.props; - return ( -
this.form = form} onSubmit={event => this.handleFormValidation(event)}> -
- {children} -
- {hasButtons && - this.buttons = buttons} - isReadOnlyMode={isReadOnlyMode}/> - } - - ); - } + render() { + /* eslint-disable no-unused-vars */ + let { + submitButtonText, + cancelButtonText, + isValid, + formReady, + onValidateForm, + isReadOnlyMode, + hasButtons, + onSubmit, + labledButtons, + onValidChange, + onValidityChanged, + onDataChanged, + children, + ...formProps + } = this.props; + /* eslint-enable no-unused-vars */ + return ( +
(this.form = form)} + onSubmit={event => this.handleFormValidation(event)}> +
{children}
+ {hasButtons && ( + (this.buttons = buttons)} + isReadOnlyMode={isReadOnlyMode} + /> + )} + + ); + } } export default Form; diff --git a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx index 33cea933b5..a5d6f4fd7a 100644 --- a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx +++ b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx @@ -25,191 +25,249 @@ import Tooltip from 'react-bootstrap/lib/Tooltip.js'; import Datepicker from 'nfvo-components/datepicker/Datepicker.jsx'; class Input extends React.Component { + state = { + value: this.props.value, + checked: this.props.checked, + selectedValues: [] + }; - state = { - value: this.props.value, - checked: this.props.checked, - selectedValues: [] - }; + render() { + /* eslint-disable no-unused-vars */ + const { + label, + isReadOnlyMode, + value, + onBlur, + onKeyDown, + type, + disabled, + checked, + name + } = this.props; + const { + groupClassName, + isValid = true, + errorText, + isRequired, + overlayPos, + ...inputProps + } = this.props; + const { + dateFormat, + startDate, + endDate, + selectsStart, + selectsEnd + } = this.props; // Date Props + /* eslint-enable no-unused-vars */ + let wrapperClassName = + type !== 'radio' + ? 'validation-input-wrapper' + : 'validation-radio-wrapper'; + if (disabled) { + wrapperClassName += ' disabled'; + } + return ( +
+ + {label && + (type !== 'checkbox' && type !== 'radio') && ( + + )} + {type === 'text' && ( + this.onChange(e)} + disabled={isReadOnlyMode || Boolean(disabled)} + onBlur={onBlur} + onKeyDown={onKeyDown} + value={value || ''} + inputRef={input => (this.input = input)} + type={type} + data-test-id={this.props['data-test-id']} + /> + )} + {type === 'number' && ( + this.onChange(e)} + disabled={isReadOnlyMode || Boolean(disabled)} + onBlur={onBlur} + onKeyDown={onKeyDown} + value={value !== undefined ? value : ''} + inputRef={input => (this.input = input)} + type={type} + data-test-id={this.props['data-test-id']} + /> + )} - render() { - const {label, isReadOnlyMode, value, onBlur, onKeyDown, type, disabled, checked, name} = this.props; - // eslint-disable-next-line no-unused-vars - const {groupClassName, isValid = true, errorText, isRequired, overlayPos, ...inputProps} = this.props; - const {dateFormat, startDate, endDate, selectsStart, selectsEnd} = this.props; // Date Props - let wrapperClassName = (type !== 'radio') ? 'validation-input-wrapper' : 'validation-radio-wrapper'; - if (disabled) { - wrapperClassName += ' disabled'; - } - return( -
- - {(label && (type !== 'checkbox' && type !== 'radio')) && } - {type === 'text' && - this.onChange(e)} - disabled={isReadOnlyMode || Boolean(disabled)} - onBlur={onBlur} - onKeyDown={onKeyDown} - value={value || ''} - inputRef={(input) => this.input = input} - type={type} - data-test-id={this.props['data-test-id']}/>} - {type === 'number' && - this.onChange(e)} - disabled={isReadOnlyMode || Boolean(disabled)} - onBlur={onBlur} - onKeyDown={onKeyDown} - value={(value !== undefined) ? value : ''} - inputRef={(input) => this.input = input} - type={type} - data-test-id={this.props['data-test-id']}/>} + {type === 'textarea' && ( + this.onChange(e)} + inputRef={input => (this.input = input)} + data-test-id={this.props['data-test-id']} + /> + )} - {type === 'textarea' && - this.onChange(e)} - inputRef={(input) => this.input = input} - data-test-id={this.props['data-test-id']}/>} + {type === 'checkbox' && ( + this.onChangeCheckBox(e)} + disabled={isReadOnlyMode || Boolean(disabled)} + checked={checked} + data-test-id={this.props['data-test-id']}> + {label} + + )} - {type === 'checkbox' && - this.onChangeCheckBox(e)} - disabled={isReadOnlyMode || Boolean(disabled)} - checked={checked} - data-test-id={this.props['data-test-id']}>{label}} + {type === 'radio' && ( + + this.onChangeRadio(isChecked) + } + inputRef={input => (this.input = input)} + label={label} + data-test-id={this.props['data-test-id']} + /> + )} + {type === 'select' && ( + this.optionSelect(e)} + className="custom-select" + componentClass={type} + inputRef={input => (this.input = input)} + name={name} + {...inputProps} + data-test-id={this.props['data-test-id']} + /> + )} + {type === 'date' && ( + (this.input = input)} + onChange={this.props.onChange} + disabled={isReadOnlyMode || Boolean(disabled)} + data-test-id={this.props['data-test-id']} + selectsStart={selectsStart} + selectsEnd={selectsEnd} + /> + )} + + {this.renderErrorOverlay()} +
+ ); + } - {type === 'radio' && - this.onChangeRadio(isChecked)} - inputRef={(input) => this.input = input} - label={label} - data-test-id={this.props['data-test-id']} />} - {type === 'select' && - this.optionSelect(e) } - className='custom-select' - componentClass={type} - inputRef={(input) => this.input = input} - name={name} {...inputProps} - data-test-id={this.props['data-test-id']}/>} - {type === 'date' && - this.input = input} - onChange={this.props.onChange} - disabled={isReadOnlyMode || Boolean(disabled)} - data-test-id={this.props['data-test-id']} - selectsStart={selectsStart} - selectsEnd={selectsEnd} />} - - { this.renderErrorOverlay() } -
- ); - } + getValue() { + return this.props.type !== 'select' + ? this.state.value + : this.state.selectedValues; + } - getValue() { - return this.props.type !== 'select' ? this.state.value : this.state.selectedValues; - } + getChecked() { + return this.state.checked; + } - getChecked() { - return this.state.checked; - } + optionSelect(e) { + let selectedValues = []; + if (e.target.value) { + selectedValues.push(e.target.value); + } + this.setState({ + selectedValues + }); + } - optionSelect(e) { - let selectedValues = []; - if (e.target.value) { - selectedValues.push(e.target.value); - } - this.setState({ - selectedValues - }); - } + onChange(e) { + const { onChange, type } = this.props; + let value = e.target.value; + if (type === 'number') { + if (value === '') { + value = undefined; + } else { + value = Number(value); + } + } + this.setState({ + value + }); + onChange(value); + } - onChange(e) { - const {onChange, type} = this.props; - let value = e.target.value; - if (type === 'number') { - if (value === '') { - value = undefined; - } else { - value = Number(value); - } - } - this.setState({ - value - }); - onChange(value); - } + onChangeCheckBox(e) { + let { onChange } = this.props; + let checked = e.target.checked; + this.setState({ + checked + }); + onChange(checked); + } - onChangeCheckBox(e) { - let {onChange} = this.props; - let checked = e.target.checked; - this.setState({ - checked - }); - onChange(checked); - } + onChangeRadio(isChecked) { + let { onChange } = this.props; + this.setState({ + checked: isChecked + }); + onChange(this.state.value); + } - onChangeRadio(isChecked) { - let {onChange} = this.props; - this.setState({ - checked: isChecked - }); - onChange(this.state.value); - } + focus() { + ReactDOM.findDOMNode(this.input).focus(); + } - focus() { - ReactDOM.findDOMNode(this.input).focus(); - } + renderErrorOverlay() { + let position = 'right'; + const { errorText = '', isValid = true, type, overlayPos } = this.props; - renderErrorOverlay() { - let position = 'right'; - const {errorText = '', isValid = true, type, overlayPos} = this.props; - - if (overlayPos) { - position = overlayPos; - } - else if (type === 'text' - || type === 'email' - || type === 'number' - || type === 'radio' - || type === 'password' - || type === 'date') { - position = 'bottom'; - } - - return ( - { - let target = ReactDOM.findDOMNode(this.input); - return target.offsetParent ? target : undefined; - }} - container={this}> - - {errorText} - - - ); - } + if (overlayPos) { + position = overlayPos; + } else if ( + type === 'text' || + type === 'email' || + type === 'number' || + type === 'radio' || + type === 'password' || + type === 'date' + ) { + position = 'bottom'; + } + return ( + { + let target = ReactDOM.findDOMNode(this.input); + return target.offsetParent ? target : undefined; + }} + container={this}> + + {errorText} + + + ); + } } -export default Input; +export default Input; diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx index 11b07ba9da..019b6a5c70 100644 --- a/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx +++ b/openecomp-ui/src/nfvo-components/input/validation/InputOptions.jsx @@ -22,260 +22,341 @@ import Select from 'nfvo-components/input/SelectInput.jsx'; import Overlay from 'react-bootstrap/lib/Overlay.js'; import Tooltip from 'react-bootstrap/lib/Tooltip.js'; -export const other = {OTHER: 'Other'}; +export const other = { OTHER: 'Other' }; class InputOptions extends React.Component { + static propTypes = { + values: PropTypes.arrayOf( + PropTypes.shape({ + enum: PropTypes.string, + title: PropTypes.string + }) + ), + isEnabledOther: PropTypes.bool, + label: PropTypes.string, + selectedValue: PropTypes.string, + multiSelectedEnum: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.array + ]), + selectedEnum: PropTypes.string, + otherValue: PropTypes.string, + overlayPos: PropTypes.string, + onEnumChange: PropTypes.func, + onOtherChange: PropTypes.func, + onBlur: PropTypes.func, + isRequired: PropTypes.bool, + isMultiSelect: PropTypes.bool, + isValid: PropTypes.bool, + disabled: PropTypes.bool + }; - static propTypes = { - values: PropTypes.arrayOf(PropTypes.shape({ - enum: PropTypes.string, - title: PropTypes.string - })), - isEnabledOther: PropTypes.bool, - label: PropTypes.string, - selectedValue: PropTypes.string, - multiSelectedEnum: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.array - ]), - selectedEnum: PropTypes.string, - otherValue: PropTypes.string, - overlayPos: PropTypes.string, - onEnumChange: PropTypes.func, - onOtherChange: PropTypes.func, - onBlur: PropTypes.func, - isRequired: PropTypes.bool, - isMultiSelect: PropTypes.bool, - isValid: PropTypes.bool, - disabled: PropTypes.bool - }; + state = { + otherInputDisabled: !this.props.otherValue + }; - state = { - otherInputDisabled: !this.props.otherValue - }; + oldProps = { + selectedEnum: '', + otherValue: '', + multiSelectedEnum: [] + }; - oldProps = { - selectedEnum: '', - otherValue: '', - multiSelectedEnum: [] - }; + render() { + let { + label, + isRequired, + values, + otherValue, + onOtherChange, + isMultiSelect, + onBlur, + multiSelectedEnum, + selectedEnum, + isValid, + children, + isReadOnlyMode + } = this.props; + const dataTestId = this.props['data-test-id'] + ? { 'data-test-id': this.props['data-test-id'] } + : {}; + let currentMultiSelectedEnum = []; + let currentSelectedEnum = ''; + let otherInputDisabled = + (isMultiSelect && + (multiSelectedEnum === undefined || + multiSelectedEnum.length === 0 || + multiSelectedEnum[0] !== other.OTHER)) || + (!isMultiSelect && + (selectedEnum === undefined || selectedEnum !== other.OTHER)); + if (isMultiSelect) { + currentMultiSelectedEnum = multiSelectedEnum; + if (!otherInputDisabled) { + currentSelectedEnum = multiSelectedEnum + ? multiSelectedEnum.toString() + : undefined; + } + } else if (selectedEnum) { + currentSelectedEnum = selectedEnum; + } + if (!onBlur) { + onBlur = () => {}; + } - render() { - let {label, isRequired, values, otherValue, onOtherChange, isMultiSelect, onBlur, multiSelectedEnum, selectedEnum, isValid, children, isReadOnlyMode} = this.props; - const dataTestId = this.props['data-test-id'] ? {'data-test-id': this.props['data-test-id']} : {}; - let currentMultiSelectedEnum = []; - let currentSelectedEnum = ''; - let otherInputDisabled = (isMultiSelect && (multiSelectedEnum === undefined || multiSelectedEnum.length === 0 || multiSelectedEnum[0] !== other.OTHER)) - || (!isMultiSelect && (selectedEnum === undefined || selectedEnum !== other.OTHER)); - if (isMultiSelect) { - currentMultiSelectedEnum = multiSelectedEnum; - if(!otherInputDisabled) { - currentSelectedEnum = multiSelectedEnum ? multiSelectedEnum.toString() : undefined; - } - } - else if(selectedEnum){ - currentSelectedEnum = selectedEnum; - } - if (!onBlur) { - onBlur = () => {}; - } + return ( +
+
+ {label && } + {isMultiSelect && otherInputDisabled ? ( + (this.input = input)} + label={label} + className="form-control input-options-select" + value={currentSelectedEnum} + style={{ + width: otherInputDisabled ? '100%' : '100px' + }} + onBlur={() => onBlur()} + disabled={ + isReadOnlyMode || + Boolean(this.props.disabled) + } + onChange={value => this.enumChanged(value)} + type="select"> + {children || + (values && + values.length && + values.map((val, index) => + this.renderOptions(val, index) + ))} + {onOtherChange && ( + + )} + - return( -
-
- {label && } - {isMultiSelect && otherInputDisabled ? - this.input = input} - label={label} - className='form-control input-options-select' - value={currentSelectedEnum} - style={{'width' : otherInputDisabled ? '100%' : '100px'}} - onBlur={() => onBlur()} - disabled={isReadOnlyMode || Boolean(this.props.disabled)} - onChange={ value => this.enumChanged(value)} - type='select'> - {children || (values && values.length && values.map((val, index) => this.renderOptions(val, index)))} - {onOtherChange && } - + {!otherInputDisabled && ( +
+ )} + + (this.otherValue = otherValue) + } + style={{ + display: otherInputDisabled + ? 'none' + : 'block' + }} + disabled={ + isReadOnlyMode || + Boolean(this.props.disabled) + } + value={otherValue || ''} + onBlur={() => onBlur()} + onChange={() => this.changedOtherInput()} + /> +
+ )} +
+ {this.renderErrorOverlay()} +
+ ); + } - {!otherInputDisabled &&
} - this.otherValue = otherValue} - style={{'display' : otherInputDisabled ? 'none' : 'block'}} - disabled={isReadOnlyMode || Boolean(this.props.disabled)} - value={otherValue || ''} - onBlur={() => onBlur()} - onChange={() => this.changedOtherInput()}/> -
- } -
- { this.renderErrorOverlay() } -
- ); - } + renderOptions(val, index) { + return ( + + ); + } - renderOptions(val, index){ - return ( - - ); - } + renderMultiSelectOptions(values) { + let { onOtherChange } = this.props; + let optionsList = []; + if (onOtherChange) { + optionsList = values + .map(option => { + return { + label: option.title, + value: option.enum + }; + }) + .concat([ + { + label: i18n(other.OTHER), + value: i18n(other.OTHER) + } + ]); + } else { + optionsList = values.map(option => { + return { + label: option.title, + value: option.enum + }; + }); + } + if (optionsList.length > 0 && optionsList[0].value === '') { + optionsList.shift(); + } + return optionsList; + } + renderErrorOverlay() { + let position = 'right'; + const { errorText = '', isValid = true, type, overlayPos } = this.props; - renderMultiSelectOptions(values) { - let {onOtherChange} = this.props; - let optionsList = []; - if (onOtherChange) { - optionsList = values.map(option => { - return { - label: option.title, - value: option.enum, - }; - }).concat([{ - label: i18n(other.OTHER), - value: i18n(other.OTHER), - }]); - } - else { - optionsList = values.map(option => { - return { - label: option.title, - value: option.enum, - }; - }); - } - if (optionsList.length > 0 && optionsList[0].value === '') { - optionsList.shift(); - } - return optionsList; - } + if (overlayPos) { + position = overlayPos; + } else if ( + type === 'text' || + type === 'email' || + type === 'number' || + type === 'password' + ) { + position = 'bottom'; + } - renderErrorOverlay() { - let position = 'right'; - const {errorText = '', isValid = true, type, overlayPos} = this.props; + return ( + { + let { otherInputDisabled } = this.state; + let target = otherInputDisabled + ? ReactDOM.findDOMNode(this.input) + : ReactDOM.findDOMNode(this.otherValue); + return target.offsetParent ? target : undefined; + }} + container={this}> + + {errorText} + + + ); + } - if (overlayPos) { - position = overlayPos; - } - else if (type === 'text' - || type === 'email' - || type === 'number' - || type === 'password') { - position = 'bottom'; - } + getValue() { + let res = ''; + let { isMultiSelect } = this.props; + let { otherInputDisabled } = this.state; - return ( - { - let {otherInputDisabled} = this.state; - let target = otherInputDisabled ? ReactDOM.findDOMNode(this.input) : ReactDOM.findDOMNode(this.otherValue); - return target.offsetParent ? target : undefined; - }} - container={this}> - - {errorText} - - - ); - } + if (otherInputDisabled) { + res = isMultiSelect ? this.input.getValue() : this.input.value; + } else { + res = this.otherValue.value; + } + return res; + } - getValue() { - let res = ''; - let {isMultiSelect} = this.props; - let {otherInputDisabled} = this.state; + enumChanged() { + let enumValue = this.input.value; + let { + onEnumChange, + onOtherChange, + isMultiSelect, + onChange + } = this.props; + this.setState({ + otherInputDisabled: + !Boolean(onOtherChange) || enumValue !== other.OTHER + }); - if (otherInputDisabled) { - res = isMultiSelect ? this.input.getValue() : this.input.value; - } else { - res = this.otherValue.value; - } - return res; - } + let value = isMultiSelect ? [enumValue] : enumValue; + if (onEnumChange) { + onEnumChange(value); + } + if (onChange) { + onChange(value); + } + } - enumChanged() { - let enumValue = this.input.value; - let {onEnumChange, onOtherChange, isMultiSelect, onChange} = this.props; - this.setState({ - otherInputDisabled: !Boolean(onOtherChange) || enumValue !== other.OTHER - }); + multiSelectEnumChanged(enumValue) { + let { onEnumChange, onOtherChange } = this.props; + let selectedValues = enumValue.map(enumVal => { + return enumVal.value; + }); - let value = isMultiSelect ? [enumValue] : enumValue; - if (onEnumChange) { - onEnumChange(value); - } - if (onChange) { - onChange(value); - } - } + if (this.state.otherInputDisabled === false) { + selectedValues.shift(); + } else if (selectedValues.includes(i18n(other.OTHER))) { + selectedValues = [i18n(other.OTHER)]; + } - multiSelectEnumChanged(enumValue) { - let {onEnumChange, onOtherChange} = this.props; - let selectedValues = enumValue.map(enumVal => { - return enumVal.value; - }); + this.setState({ + otherInputDisabled: + !Boolean(onOtherChange) || + !selectedValues.includes(i18n(other.OTHER)) + }); + onEnumChange(selectedValues); + } - if (this.state.otherInputDisabled === false) { - selectedValues.shift(); - } - else if (selectedValues.includes(i18n(other.OTHER))) { - selectedValues = [i18n(other.OTHER)]; - } + changedOtherInput() { + let { onOtherChange } = this.props; + onOtherChange(this.otherValue.value); + } - this.setState({ - otherInputDisabled: !Boolean(onOtherChange) || !selectedValues.includes(i18n(other.OTHER)) - }); - onEnumChange(selectedValues); - } - - changedOtherInput() { - let {onOtherChange} = this.props; - onOtherChange(this.otherValue.value); - } - - componentDidUpdate() { - let {otherValue, selectedEnum, onInputChange, multiSelectedEnum} = this.props; - if (this.oldProps.otherValue !== otherValue - || this.oldProps.selectedEnum !== selectedEnum - || this.oldProps.multiSelectedEnum !== multiSelectedEnum) { - this.oldProps = { - otherValue, - selectedEnum, - multiSelectedEnum - }; - onInputChange(); - } - } - - static getTitleByName(values, name) { - for (let key of Object.keys(values)) { - let option = values[key].find(option => option.enum === name); - if (option) { - return option.title; - } - } - return name; - } + componentDidUpdate() { + let { + otherValue, + selectedEnum, + onInputChange, + multiSelectedEnum + } = this.props; + if ( + this.oldProps.otherValue !== otherValue || + this.oldProps.selectedEnum !== selectedEnum || + this.oldProps.multiSelectedEnum !== multiSelectedEnum + ) { + this.oldProps = { + otherValue, + selectedEnum, + multiSelectedEnum + }; + onInputChange(); + } + } + static getTitleByName(values, name) { + for (let key of Object.keys(values)) { + let option = values[key].find(option => option.enum === name); + if (option) { + return option.title; + } + } + return name; + } } export default InputOptions; diff --git a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx index e440fcda69..3e0bb32ca9 100644 --- a/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx +++ b/openecomp-ui/src/nfvo-components/input/validation/InputWrapper.jsx @@ -22,114 +22,149 @@ import FormGroup from 'react-bootstrap/lib/FormGroup.js'; import FormControl from 'react-bootstrap/lib/FormControl.js'; class InputWrapper extends React.Component { - - state = { - value: this.props.value, - checked: this.props.checked, - selectedValues: [] - } - - render() { - const {label, hasError, validations = {}, isReadOnlyMode, value, onBlur, onKeyDown, type, disabled, checked, name} = this.props; - const {groupClassName, ...inputProps} = this.props; - return( - - {(label && (type !== 'checkbox' && type !== 'radio')) && } - {(type === 'text' || type === 'number') && - this.onChange(e)} - disabled={isReadOnlyMode || Boolean(disabled)} - onBlur={onBlur} - onKeyDown={onKeyDown} - value={value || ''} - ref={(input) => this.inputWrapper = input} - type={type} - data-test-id={this.props['data-test-id']}/>} - - {type === 'textarea' && - this.onChange(e)} - data-test-id={this.props['data-test-id']}/>} - - {type === 'checkbox' && - this.onChangeCheckBox(e)} - disabled={isReadOnlyMode || Boolean(disabled)} - checked={value} - data-test-id={this.props['data-test-id']}>{label}} - - {type === 'radio' && - this.inputWrapper = input} - onChange={(isChecked)=>this.onChangeRadio(isChecked)} label={label} - data-test-id={this.props['data-test-id']} />} - {type === 'select' && - this.optionSelect(e) } - componentClass={type} - name={name} {...inputProps} - data-test-id={this.props['data-test-id']}/>} - - - - ); - } - - getValue() { - return this.props.type !== 'select' ? this.state.value : this.state.selectedValues; - } - - getChecked() { - return this.state.checked; - } - - optionSelect(e) { - let selectedValues = []; - if (e.target.value) { - selectedValues.push(e.target.value); - } - this.setState({ - selectedValues - }); - } - - onChange(e) { - let {onChange} = this.props; - this.setState({ - value: e.target.value - }); - onChange(e.target.value); - } - - onChangeCheckBox(e) { - let {onChange} = this.props; - this.setState({ - checked: e.target.checked - }); - onChange(e.target.checked); - } - - onChangeRadio(isChecked) { - let {onChange} = this.props; - this.setState({ - checked: isChecked - }); - onChange(this.state.value); - } - - focus() { - ReactDOM.findDOMNode(this.inputWrapper).focus(); - } - + state = { + value: this.props.value, + checked: this.props.checked, + selectedValues: [] + }; + + render() { + const { + label, + hasError, + validations = {}, + isReadOnlyMode, + value, + onBlur, + onKeyDown, + type, + disabled, + checked, + name + } = this.props; + const { groupClassName, ...inputProps } = this.props; + return ( + + {label && + (type !== 'checkbox' && type !== 'radio') && ( + + )} + {(type === 'text' || type === 'number') && ( + this.onChange(e)} + disabled={isReadOnlyMode || Boolean(disabled)} + onBlur={onBlur} + onKeyDown={onKeyDown} + value={value || ''} + ref={input => (this.inputWrapper = input)} + type={type} + data-test-id={this.props['data-test-id']} + /> + )} + + {type === 'textarea' && ( + this.onChange(e)} + data-test-id={this.props['data-test-id']} + /> + )} + + {type === 'checkbox' && ( + this.onChangeCheckBox(e)} + disabled={isReadOnlyMode || Boolean(disabled)} + checked={value} + data-test-id={this.props['data-test-id']}> + {label} + + )} + + {type === 'radio' && ( + (this.inputWrapper = input)} + onChange={isChecked => this.onChangeRadio(isChecked)} + label={label} + data-test-id={this.props['data-test-id']} + /> + )} + {type === 'select' && ( + this.optionSelect(e)} + componentClass={type} + name={name} + {...inputProps} + data-test-id={this.props['data-test-id']} + /> + )} + + ); + } + + getValue() { + return this.props.type !== 'select' + ? this.state.value + : this.state.selectedValues; + } + + getChecked() { + return this.state.checked; + } + + optionSelect(e) { + let selectedValues = []; + if (e.target.value) { + selectedValues.push(e.target.value); + } + this.setState({ + selectedValues + }); + } + + onChange(e) { + let { onChange } = this.props; + this.setState({ + value: e.target.value + }); + onChange(e.target.value); + } + + onChangeCheckBox(e) { + let { onChange } = this.props; + this.setState({ + checked: e.target.checked + }); + onChange(e.target.checked); + } + + onChangeRadio(isChecked) { + let { onChange } = this.props; + this.setState({ + checked: isChecked + }); + onChange(this.state.value); + } + + focus() { + ReactDOM.findDOMNode(this.inputWrapper).focus(); + } } -export default InputWrapper; +export default InputWrapper; diff --git a/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx b/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx index 0982c133e6..429985a902 100644 --- a/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx +++ b/openecomp-ui/src/nfvo-components/input/validation/Tabs.jsx @@ -16,64 +16,76 @@ import React from 'react'; import PropTypes from 'prop-types'; import ReactDOM from 'react-dom'; -import {default as SDCTabs} from 'sdc-ui/lib/react/Tabs.js'; +import { default as SDCTabs } from 'sdc-ui/lib/react/Tabs.js'; import Overlay from 'react-bootstrap/lib/Overlay.js'; import Tooltip from 'react-bootstrap/lib/Tooltip.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; -export default -class Tabs extends React.Component { +export default class Tabs extends React.Component { + static propTypes = { + children: PropTypes.node + }; - static propTypes = { - children: PropTypes.node - }; + cloneTab(element) { + const { invalidTabs } = this.props; + return React.cloneElement(element, { + key: element.props.tabId, + className: + invalidTabs.indexOf(element.props.tabId) > -1 + ? 'invalid-tab' + : 'valid-tab' + }); + } - cloneTab(element) { - const {invalidTabs} = this.props; - return React.cloneElement( - element, - { - key: element.props.tabId, - className: invalidTabs.indexOf(element.props.tabId) > -1 ? 'invalid-tab' : 'valid-tab' - } - ); - } + showTabsError() { + const { invalidTabs } = this.props; + const showError = + (invalidTabs.length === 1 && + invalidTabs[0] !== this.props.activeTab) || + invalidTabs.length > 1; + return showError; + } - showTabsError() { - const {invalidTabs} = this.props; - const showError = ((invalidTabs.length === 1 && invalidTabs[0] !== this.props.activeTab) || (invalidTabs.length > 1)); - return showError; - } - - render() { - // eslint-disable-next-line no-unused-vars - let {invalidTabs, ...tabProps} = this.props; - return ( -
- - {this.props.children.map(element => this.cloneTab(element))} - - { - let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)'); - return target && target.offsetParent ? target : undefined; - } - } - container={() => { - let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)'); - return target && target.offsetParent ? target.offsetParent : this; - }}> - - {i18n('One or more tabs are invalid')} - - -
- ); - } + render() { + // eslint-disable-next-line no-unused-vars + let { invalidTabs, ...tabProps } = this.props; + return ( +
+ + {this.props.children.map(element => this.cloneTab(element))} + + { + let target = ReactDOM.findDOMNode( + this.refs.tabsList + ).querySelector( + 'ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)' + ); + return target && target.offsetParent + ? target + : undefined; + }} + container={() => { + let target = ReactDOM.findDOMNode( + this.refs.tabsList + ).querySelector( + 'ul > li.invalid-tab:not(.sdc-tab-active):nth-of-type(n)' + ); + return target && target.offsetParent + ? target.offsetParent + : this; + }}> + + {i18n('One or more tabs are invalid')} + + +
+ ); + } } diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx index 151d3fe859..e460f68a98 100644 --- a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx +++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx @@ -27,32 +27,63 @@ import Button from 'sdc-ui/lib/react/Button.js'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; class ValidationButtons extends React.Component { + static propTypes = { + labledButtons: PropTypes.bool.isRequired, + isReadOnlyMode: PropTypes.bool, + submitButtonText: PropTypes.string, + cancelButtonText: PropTypes.string + }; - static propTypes = { - labledButtons: PropTypes.bool.isRequired, - isReadOnlyMode: PropTypes.bool, - submitButtonText: PropTypes.string, - cancelButtonText: PropTypes.string - }; + state = { + isValid: this.props.formValid + }; - state = { - isValid: this.props.formValid - }; - - render() { - let submitBtn = this.props.labledButtons ? this.props.submitButtonText ? this.props.submitButtonText : i18n('Save') : ; - let closeBtn = this.props.labledButtons ? this.props.cancelButtonText ? this.props.cancelButtonText : i18n('Cancel') : ; - return ( -
- {!this.props.isReadOnlyMode ? -
- - -
- : - } -
- ); - } + render() { + let submitBtn = this.props.labledButtons ? ( + this.props.submitButtonText ? ( + this.props.submitButtonText + ) : ( + i18n('Save') + ) + ) : ( + + ); + let closeBtn = this.props.labledButtons ? ( + this.props.cancelButtonText ? ( + this.props.cancelButtonText + ) : ( + i18n('Cancel') + ) + ) : ( + + ); + return ( +
+ {!this.props.isReadOnlyMode ? ( +
+ + +
+ ) : ( + + )} +
+ ); + } } export default ValidationButtons; diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx index 60c559a3d1..359af9d3b8 100644 --- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx +++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemView.jsx @@ -19,50 +19,78 @@ import classnames from 'classnames'; import i18n from 'nfvo-utils/i18n/i18n.js'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import store from 'sdc-app/AppStore.js'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; class ListEditorItem extends React.Component { - static propTypes = { - onSelect: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), - onDelete: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), - onEdit: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), - children: PropTypes.node, - isReadOnlyMode: PropTypes.bool - }; + static propTypes = { + onSelect: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), + onDelete: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), + onEdit: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), + children: PropTypes.node, + isReadOnlyMode: PropTypes.bool + }; - render() { - let {onDelete, onSelect, onEdit, children, isReadOnlyMode} = this.props; - let isAbilityToDelete = isReadOnlyMode === undefined ? true : !isReadOnlyMode; - return ( -
-
- {children} -
- {(onEdit || onDelete) &&
- {onEdit && this.onClickedItem(onEdit)}/>} - {onDelete && isAbilityToDelete && this.onClickedItem(onDelete)}/>} -
} -
- ); - } + render() { + let { + onDelete, + onSelect, + onEdit, + children, + isReadOnlyMode + } = this.props; + let isAbilityToDelete = + isReadOnlyMode === undefined ? true : !isReadOnlyMode; + return ( +
+
+ {children} +
+ {(onEdit || onDelete) && ( +
+ {onEdit && ( + this.onClickedItem(onEdit)} + /> + )} + {onDelete && + isAbilityToDelete && ( + this.onClickedItem(onDelete)} + /> + )} +
+ )} +
+ ); + } - onClickedItem(callBackFunc) { - if(typeof callBackFunc === 'function') { - let {isCheckedOut} = this.props; - if (isCheckedOut === false) { - store.dispatch({ - type: modalActionTypes.GLOBAL_MODAL_WARNING, - data: { - title: i18n('Error'), - msg: i18n('This item is checkedin/submitted, Click Check Out to continue') - } - }); - } - else { - callBackFunc(); - } - } - } + onClickedItem(callBackFunc) { + if (typeof callBackFunc === 'function') { + let { isCheckedOut } = this.props; + if (isCheckedOut === false) { + store.dispatch({ + type: modalActionTypes.GLOBAL_MODAL_WARNING, + data: { + title: i18n('Error'), + msg: i18n( + 'This item is checkedin/submitted, Click Check Out to continue' + ) + } + }); + } else { + callBackFunc(); + } + } + } } export default ListEditorItem; diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx index 839f9a504a..509ea176a5 100644 --- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx +++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorItemViewField.jsx @@ -15,10 +15,8 @@ */ import React from 'react'; -export const ListEditorItemViewField = ({children}) => ( -
- {children} -
+export const ListEditorItemViewField = ({ children }) => ( +
{children}
); export default ListEditorItemViewField; diff --git a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx index 16823b7dc5..f71372ce1a 100644 --- a/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx +++ b/openecomp-ui/src/nfvo-components/listEditor/ListEditorView.jsx @@ -19,69 +19,107 @@ import Button from 'sdc-ui/lib/react/Button.js'; import classnames from 'classnames'; import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx'; -const ListEditorHeader = ({onAdd, isReadOnlyMode, title, plusButtonTitle}) => { - return ( -
- {title &&
{title}
} -
- { onAdd && - - } -
-
- ); +const ListEditorHeader = ({ + onAdd, + isReadOnlyMode, + title, + plusButtonTitle +}) => { + return ( +
+ {title &&
{title}
} +
+ {onAdd && ( + + )} +
+
+ ); }; -const ListEditorScroller = ({children, twoColumns}) => { - return ( -
-
- {children} -
-
- ); +const ListEditorScroller = ({ children, twoColumns }) => { + return ( +
+
+ {children} +
+
+ ); }; -const FilterWrapper = ({onFilter, filterValue}) => { - return ( -
- -
- ); +const FilterWrapper = ({ onFilter, filterValue }) => { + return ( +
+ +
+ ); }; class ListEditorView extends React.Component { + static defaultProps = { + className: '', + twoColumns: false + }; - static defaultProps = { - className: '', - twoColumns: false - }; - - static propTypes = { - title: PropTypes.string, - plusButtonTitle: PropTypes.string, - children: PropTypes.node, - filterValue: PropTypes.string, - onFilter: PropTypes.func, - className: PropTypes.string, - isReadOnlyMode: PropTypes.bool, - placeholder: PropTypes.string, - twoColumns: PropTypes.bool - }; - - render() { - let {title, plusButtonTitle, onAdd, children, onFilter, className, isReadOnlyMode, twoColumns, filterValue} = this.props; - return ( -
- - {onFilter && (children.length || filterValue) && } - -
- ); - } + static propTypes = { + title: PropTypes.string, + plusButtonTitle: PropTypes.string, + children: PropTypes.node, + filterValue: PropTypes.string, + onFilter: PropTypes.func, + className: PropTypes.string, + isReadOnlyMode: PropTypes.bool, + placeholder: PropTypes.string, + twoColumns: PropTypes.bool + }; + render() { + let { + title, + plusButtonTitle, + onAdd, + children, + onFilter, + className, + isReadOnlyMode, + twoColumns, + filterValue + } = this.props; + return ( +
+ + {onFilter && + (children.length || filterValue) && ( + + )} + +
+ ); + } } export default ListEditorView; diff --git a/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js b/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js index 81125c84ba..67258c956d 100644 --- a/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js +++ b/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js @@ -1,27 +1,25 @@ import React from 'react'; -import {storiesOf, action} from '@kadira/storybook'; +import { storiesOf, action } from '@kadira/storybook'; import ListEditorView from './ListEditorView.jsx'; import ListEditorItemView from './ListEditorItemView.jsx'; import ListEditorItemField from './ListEditorItemViewField.jsx'; -import {text, number} from '@kadira/storybook-addon-knobs'; -import {withKnobs} from '@kadira/storybook-addon-knobs'; +import { text, number } from '@kadira/storybook-addon-knobs'; +import { withKnobs } from '@kadira/storybook-addon-knobs'; -function makeChildren({onEdit = false, onDelete = false} = {}) { - return ( - [...Array(number('Items', 2)).keys()].map(index => ( - - -
{text('field 1', 'Lorum Ipsum')}
- - -
{text('field 2', 'Lorum Ipsum')}
- - ) - ) - ); +function makeChildren({ onEdit = false, onDelete = false } = {}) { + return [...Array(number('Items', 2)).keys()].map(index => ( + + +
{text('field 1', 'Lorum Ipsum')}
+ + +
{text('field 2', 'Lorum Ipsum')}
+ + + )); } const stories = storiesOf('ListEditor', module); @@ -29,32 +27,49 @@ stories.addDecorator(withKnobs); stories .add('regular', () => ( - - {makeChildren()} - + {makeChildren()} )) .add('two columns', () => ( - + {makeChildren()} )) .add('with add', () => ( - - {makeChildren()} + + {makeChildren()} )) .add('with delete', () => ( - - {makeChildren({onDelete: action('onDelete')})} + + {makeChildren({ onDelete: action('onDelete') })} )) .add('with edit', () => ( - - {makeChildren({onEdit: action('onEdit')})} + + {makeChildren({ onEdit: action('onEdit') })} )) .add('with edit and delete', () => ( - - {makeChildren({onDelete: action('onDelete'), onEdit: action('onEdit')})} + + {makeChildren({ + onDelete: action('onDelete'), + onEdit: action('onEdit') + })} )); diff --git a/openecomp-ui/src/nfvo-components/loader/Loader.jsx b/openecomp-ui/src/nfvo-components/loader/Loader.jsx index 9ebe52dcfc..076351bf7a 100644 --- a/openecomp-ui/src/nfvo-components/loader/Loader.jsx +++ b/openecomp-ui/src/nfvo-components/loader/Loader.jsx @@ -16,40 +16,39 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; -const mapStateToProps = ({loader}) => { - return { - isLoading: loader.isLoading - }; +const mapStateToProps = ({ loader }) => { + return { + isLoading: loader.isLoading + }; }; class Loader extends React.Component { - - static propTypes = { - isLoading: PropTypes.bool.isRequired - }; - - static defaultProps = { - isLoading: false - }; - - shouldComponentUpdate(nextProps) { - return (nextProps.isLoading !== this.props.isLoading); - } - - render() { - let {isLoading} = this.props; - return ( -
- { - isLoading &&
-
-
- } -
- ); - } + static propTypes = { + isLoading: PropTypes.bool.isRequired + }; + + static defaultProps = { + isLoading: false + }; + + shouldComponentUpdate(nextProps) { + return nextProps.isLoading !== this.props.isLoading; + } + + render() { + let { isLoading } = this.props; + return ( +
+ {isLoading && ( +
+
+
+ )} +
+ ); + } } -export default connect(mapStateToProps) (Loader); +export default connect(mapStateToProps)(Loader); diff --git a/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js b/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js index 2b531b08fa..e367a74352 100644 --- a/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js +++ b/openecomp-ui/src/nfvo-components/loader/LoaderConstants.js @@ -16,9 +16,9 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ - SHOW: null, - HIDE: null, + SHOW: null, + HIDE: null, - SEND_REQUEST: null, - RECEIVE_RESPONSE: null + SEND_REQUEST: null, + RECEIVE_RESPONSE: null }); diff --git a/openecomp-ui/src/nfvo-components/loader/LoaderReducer.js b/openecomp-ui/src/nfvo-components/loader/LoaderReducer.js index 3afdad0573..1d0f6790e1 100644 --- a/openecomp-ui/src/nfvo-components/loader/LoaderReducer.js +++ b/openecomp-ui/src/nfvo-components/loader/LoaderReducer.js @@ -13,43 +13,54 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import {actionTypes} from './LoaderConstants.js'; +import { actionTypes } from './LoaderConstants.js'; -export default (state = {fetchingRequests : 0, currentlyFetching : [], isLoading : false}, action) => { - let fetchingRequests = state.fetchingRequests; - let newArray; - switch (action.type) { - case actionTypes.SEND_REQUEST: - fetchingRequests++; - newArray = state.currentlyFetching.slice(); - newArray.splice(0, 0, action.url); - if (DEBUG) { - console.log('Loader SEND REQUEST url: ' + action.url); - console.log('Loader SEND REQUEST number of fetching requests: ' + fetchingRequests); - } - return { - fetchingRequests: fetchingRequests, - currentlyFetching : newArray, - isLoading: true - }; - case actionTypes.RECEIVE_RESPONSE: - fetchingRequests--; +export default ( + state = { fetchingRequests: 0, currentlyFetching: [], isLoading: false }, + action +) => { + let fetchingRequests = state.fetchingRequests; + let newArray; + switch (action.type) { + case actionTypes.SEND_REQUEST: + fetchingRequests++; + newArray = state.currentlyFetching.slice(); + newArray.splice(0, 0, action.url); + if (DEBUG) { + console.log('Loader SEND REQUEST url: ' + action.url); + console.log( + 'Loader SEND REQUEST number of fetching requests: ' + + fetchingRequests + ); + } + return { + fetchingRequests: fetchingRequests, + currentlyFetching: newArray, + isLoading: true + }; + case actionTypes.RECEIVE_RESPONSE: + fetchingRequests--; - newArray = state.currentlyFetching.filter((item) => {return item !== action.url;}); - if (DEBUG) { - console.log('Loader RECEIVE_RESPONSE url: ' + action.url); - console.log('Loader RECEIVE_RESPONSE: number of fetching requests: ' + fetchingRequests); - } - return { - currentlyFetching : newArray, - fetchingRequests: fetchingRequests, - isLoading: (fetchingRequests !== 0) - }; - case actionTypes.SHOW: - return {isLoading: true}; - case actionTypes.HIDE: - return {isLoading: false}; - default: - return state; - } + newArray = state.currentlyFetching.filter(item => { + return item !== action.url; + }); + if (DEBUG) { + console.log('Loader RECEIVE_RESPONSE url: ' + action.url); + console.log( + 'Loader RECEIVE_RESPONSE: number of fetching requests: ' + + fetchingRequests + ); + } + return { + currentlyFetching: newArray, + fetchingRequests: fetchingRequests, + isLoading: fetchingRequests !== 0 + }; + case actionTypes.SHOW: + return { isLoading: true }; + case actionTypes.HIDE: + return { isLoading: false }; + default: + return state; + } }; diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js index 75b7983ac3..3f19bd76a3 100644 --- a/openecomp-ui/src/nfvo-components/modal/GlobalModal.js +++ b/openecomp-ui/src/nfvo-components/modal/GlobalModal.js @@ -16,145 +16,195 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import Modal from 'nfvo-components/modal/Modal.jsx'; import Button from 'sdc-ui/lib/react/Button.js'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {modalContentComponents} from 'sdc-app/common/modal/ModalContentMapper.js'; -import {actionTypes, typeEnum} from './GlobalModalConstants.js'; - +import { modalContentComponents } from 'sdc-app/common/modal/ModalContentMapper.js'; +import { actionTypes, typeEnum } from './GlobalModalConstants.js'; const typeClass = { - 'default': 'primary', - error: 'negative', - warning: 'warning', - success: 'positive' + default: 'primary', + error: 'negative', + warning: 'warning', + success: 'positive' }; const type2HeaderColor = { - 'default': 'primary', - error: 'danger', - warning: 'warning', - success: 'success' + default: 'primary', + error: 'danger', + warning: 'warning', + success: 'success' }; - -const ModalFooter = ({type, onConfirmed, onDeclined, onClose, confirmationButtonText, cancelButtonText}) => { - let myPropsForNoConfirmed = {}; - if (onConfirmed) { - myPropsForNoConfirmed.btnType = 'outline'; - } - return ( - -
- {onConfirmed && } - -
- - ); +const ModalFooter = ({ + type, + onConfirmed, + onDeclined, + onClose, + confirmationButtonText, + cancelButtonText +}) => { + let myPropsForNoConfirmed = {}; + if (onConfirmed) { + myPropsForNoConfirmed.btnType = 'outline'; + } + return ( + +
+ {onConfirmed && ( + + )} + +
+ + ); }; ModalFooter.defaultProps = { - type: 'default', - confirmationButtonText: i18n('OK'), - cancelButtonText: i18n('Cancel') + type: 'default', + confirmationButtonText: i18n('OK'), + cancelButtonText: i18n('Cancel') }; ModalFooter.PropTypes = { - type: PropTypes.string, - confirmationButtonText: PropTypes.string, - cancelButtonText: PropTypes.string + type: PropTypes.string, + confirmationButtonText: PropTypes.string, + cancelButtonText: PropTypes.string }; -export const mapStateToProps = ({modal}) => { - const show = !!modal; - return { - show, - ...modal - }; +export const mapStateToProps = ({ modal }) => { + const show = !!modal; + return { + show, + ...modal + }; }; -export const mapActionToProps = (dispatch) => { - return { - onClose: () => dispatch({type: actionTypes.GLOBAL_MODAL_CLOSE}) - }; +export const mapActionToProps = dispatch => { + return { + onClose: () => dispatch({ type: actionTypes.GLOBAL_MODAL_CLOSE }) + }; }; - -export class GlobalModalView extends React.Component { - - static propTypes = { - show: PropTypes.bool, - type: PropTypes.oneOf(['default', 'error', 'warning', 'success']), - title: PropTypes.string, - modalComponentProps: PropTypes.object, - modalComponentName: PropTypes.string, - onConfirmed: PropTypes.func, - onDeclined: PropTypes.func, - confirmationButtonText: PropTypes.string, - cancelButtonText: PropTypes.string - }; - - static defaultProps = { - show: false, - type: 'default', - title: '' - }; - - render() { - let {title, type, show, modalComponentName, modalComponentProps, - modalClassName, msg, onConfirmed, onDeclined, confirmationButtonText, cancelButtonText, onClose} = this.props; - const ComponentToRender = modalContentComponents[modalComponentName]; - return ( - - - {title} - - - {ComponentToRender ? - : - msg && typeof msg === 'string' ? -
{msg.split('\n').map((txt, i) => {txt}
)}
: - msg - } - - {(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) && - } - - ); - } - - componentDidUpdate() { - if (this.props.timeout) { - setTimeout(this.props.onClose, this.props.timeout); - } - } -}; +export class GlobalModalView extends React.Component { + static propTypes = { + show: PropTypes.bool, + type: PropTypes.oneOf(['default', 'error', 'warning', 'success']), + title: PropTypes.string, + modalComponentProps: PropTypes.object, + modalComponentName: PropTypes.string, + onConfirmed: PropTypes.func, + onDeclined: PropTypes.func, + confirmationButtonText: PropTypes.string, + cancelButtonText: PropTypes.string + }; + + static defaultProps = { + show: false, + type: 'default', + title: '' + }; + + render() { + let { + title, + type, + show, + modalComponentName, + modalComponentProps, + modalClassName, + msg, + onConfirmed, + onDeclined, + confirmationButtonText, + cancelButtonText, + onClose + } = this.props; + const ComponentToRender = modalContentComponents[modalComponentName]; + return ( + + + {title} + + + {ComponentToRender ? ( + + ) : msg && typeof msg === 'string' ? ( +
+ {' '} + {msg.split('\n').map((txt, i) => ( + + {' '} + {txt}
{' '} + + ))}{' '} +
+ ) : ( + msg + )} + + {(onConfirmed || onDeclined || type !== typeEnum.DEFAULT) && ( + + )} + + ); + } + + componentDidUpdate() { + if (this.props.timeout) { + setTimeout(this.props.onClose, this.props.timeout); + } + } +} GlobalModalView.propTypes = { - show: PropTypes.bool, - type: PropTypes.oneOf(['default', 'error', 'warning', 'success']), - title: PropTypes.string, - modalComponentProps: PropTypes.object, - modalComponentName: PropTypes.string, - onConfirmed: PropTypes.func, - onDeclined: PropTypes.func, - confirmationButtonText: PropTypes.string, - cancelButtonText: PropTypes.string + show: PropTypes.bool, + type: PropTypes.oneOf(['default', 'error', 'warning', 'success']), + title: PropTypes.string, + modalComponentProps: PropTypes.object, + modalComponentName: PropTypes.string, + onConfirmed: PropTypes.func, + onDeclined: PropTypes.func, + confirmationButtonText: PropTypes.string, + cancelButtonText: PropTypes.string }; -export default connect(mapStateToProps, mapActionToProps, null, {withRef: true})(GlobalModalView); +export default connect(mapStateToProps, mapActionToProps, null, { + withRef: true +})(GlobalModalView); diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js b/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js index 3e5545371a..e9c1853c97 100644 --- a/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js +++ b/openecomp-ui/src/nfvo-components/modal/GlobalModalConstants.js @@ -16,23 +16,21 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionTypes = keyMirror({ - GLOBAL_MODAL_SHOW: null, - GLOBAL_MODAL_CLOSE: null, - GLOBAL_MODAL_ERROR: null, - GLOBAL_MODAL_WARNING: null, - GLOBAL_MODAL_SUCCESS: null, - + GLOBAL_MODAL_SHOW: null, + GLOBAL_MODAL_CLOSE: null, + GLOBAL_MODAL_ERROR: null, + GLOBAL_MODAL_WARNING: null, + GLOBAL_MODAL_SUCCESS: null }); - export const typeEnum = { - DEFAULT: 'default', - ERROR: 'error', - WARNING: 'warning', - SUCCESS: 'success' + DEFAULT: 'default', + ERROR: 'error', + WARNING: 'warning', + SUCCESS: 'success' }; -export const modalSizes = { - LARGE: 'large', - SMALL: 'small' +export const modalSizes = { + LARGE: 'large', + SMALL: 'small' }; diff --git a/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js b/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js index 28674ea569..b2273fa7a7 100644 --- a/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js +++ b/openecomp-ui/src/nfvo-components/modal/GlobalModalReducer.js @@ -14,37 +14,37 @@ * permissions and limitations under the License. */ -import {actionTypes, typeEnum} from './GlobalModalConstants.js'; +import { actionTypes, typeEnum } from './GlobalModalConstants.js'; export default (state = null, action) => { - switch (action.type) { - case actionTypes.GLOBAL_MODAL_SHOW: - return { - ...action.data - }; - case actionTypes.GLOBAL_MODAL_ERROR: - return { - type: typeEnum.ERROR, - modalClassName: 'notification-modal', - ...action.data - }; - case actionTypes.GLOBAL_MODAL_WARNING: - return { - type: typeEnum.WARNING, - modalClassName: 'notification-modal', - ...action.data - }; + switch (action.type) { + case actionTypes.GLOBAL_MODAL_SHOW: + return { + ...action.data + }; + case actionTypes.GLOBAL_MODAL_ERROR: + return { + type: typeEnum.ERROR, + modalClassName: 'notification-modal', + ...action.data + }; + case actionTypes.GLOBAL_MODAL_WARNING: + return { + type: typeEnum.WARNING, + modalClassName: 'notification-modal', + ...action.data + }; - case actionTypes.GLOBAL_MODAL_SUCCESS: - return { - type: typeEnum.SUCCESS, - modalClassName: 'notification-modal', - ...action.data - }; + case actionTypes.GLOBAL_MODAL_SUCCESS: + return { + type: typeEnum.SUCCESS, + modalClassName: 'notification-modal', + ...action.data + }; - case actionTypes.GLOBAL_MODAL_CLOSE: - return null; - default: - return state; - } + case actionTypes.GLOBAL_MODAL_CLOSE: + return null; + default: + return state; + } }; diff --git a/openecomp-ui/src/nfvo-components/modal/Modal.jsx b/openecomp-ui/src/nfvo-components/modal/Modal.jsx index b0f704dba9..cfd757501f 100644 --- a/openecomp-ui/src/nfvo-components/modal/Modal.jsx +++ b/openecomp-ui/src/nfvo-components/modal/Modal.jsx @@ -20,65 +20,63 @@ import BootstrapModal from 'react-bootstrap/lib/Modal.js'; let nextModalId = 0; export default class Modal extends React.Component { + static Header = BootstrapModal.Header; - static Header = BootstrapModal.Header; + static Title = BootstrapModal.Title; - static Title = BootstrapModal.Title; + static Footer = BootstrapModal.Footer; - static Footer = BootstrapModal.Footer; + static Body = class ModalBody extends React.Component { + render() { + let { children, ...props } = this.props; + return ( + {children} + ); + } - static Body = class ModalBody extends React.Component { + componentDidMount() { + let element = ReactDOM.findDOMNode(this); + element.addEventListener('click', event => { + if (event.target.tagName === 'A') { + event.preventDefault(); + } + }); + ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType => + element.addEventListener(eventType, event => + event.stopPropagation() + ) + ); + } + }; - render() { - let {children, ...props} = this.props; - return ( - - {children} - - ); - } + componentWillMount() { + this.modalId = `dox-ui-modal-${nextModalId++}`; + } - componentDidMount() { - let element = ReactDOM.findDOMNode(this); - element.addEventListener('click', event => { - if (event.target.tagName === 'A') { - event.preventDefault(); - } - }); - ['wheel', 'mousewheel', 'DOMMouseScroll'].forEach(eventType => - element.addEventListener(eventType, event => event.stopPropagation()) - ); - } - }; + componentDidMount() { + this.ensureRootClass(); + } - componentWillMount() { - this.modalId = `dox-ui-modal-${nextModalId++}`; - } + componentDidUpdate() { + this.ensureRootClass(); + } - componentDidMount() { - this.ensureRootClass(); - } + ensureRootClass() { + let element = document.getElementById(this.modalId); + while (element && !element.hasAttribute('data-reactroot')) { + element = element.parentElement; + } + if (element && !element.classList.contains('dox-ui')) { + element.classList.add('dox-ui'); + } + } - componentDidUpdate() { - this.ensureRootClass(); - } - - ensureRootClass() { - let element = document.getElementById(this.modalId); - while(element && !element.hasAttribute('data-reactroot')) { - element = element.parentElement; - } - if (element && !element.classList.contains('dox-ui')) { - element.classList.add('dox-ui'); - } - } - - render() { - let {children, ...props} = this.props; - return ( - - {children} - - ); - } + render() { + let { children, ...props } = this.props; + return ( + + {children} + + ); + } } diff --git a/openecomp-ui/src/nfvo-components/overlay/Overlay.jsx b/openecomp-ui/src/nfvo-components/overlay/Overlay.jsx index 054c1e2852..7ed898e593 100644 --- a/openecomp-ui/src/nfvo-components/overlay/Overlay.jsx +++ b/openecomp-ui/src/nfvo-components/overlay/Overlay.jsx @@ -18,23 +18,21 @@ import React from 'react'; import enhanceWithClickOutside from 'react-click-outside'; class Overlay extends React.Component { + handleClickOutside() { + if (this.props.onClose) { + this.props.onClose(); + } + } - handleClickOutside() { - if (this.props.onClose) { - this.props.onClose(); - } - } - - render() { - return ( -
-
-
- {this.props.children} -
- ); - } - -}; + render() { + return ( +
+
+
+ {this.props.children} +
+ ); + } +} export default enhanceWithClickOutside(Overlay); diff --git a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx index 2eda7e69bf..61121df335 100644 --- a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx +++ b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx @@ -19,116 +19,159 @@ import classnames from 'classnames'; import Collapse from 'react-bootstrap/lib/Collapse.js'; class NavigationSideBar extends React.Component { - static PropTypes = { - activeItemId: PropTypes.string.isRequired, - onSelect: PropTypes.func, - onToggle: PropTypes.func, - groups: PropTypes.array, - disabled: PropTypes.bool - }; + static PropTypes = { + activeItemId: PropTypes.string.isRequired, + onSelect: PropTypes.func, + onToggle: PropTypes.func, + groups: PropTypes.array, + disabled: PropTypes.bool + }; - constructor(props) { - super(props); - this.state = { - activeItemId: null - }; - this.handleItemClicked = this.handleItemClicked.bind(this); - } + constructor(props) { + super(props); + this.state = { + activeItemId: null + }; + this.handleItemClicked = this.handleItemClicked.bind(this); + } - render() { - let {groups, activeItemId, disabled = false} = this.props; + render() { + let { groups, activeItemId, disabled = false } = this.props; - return ( -
- {groups.map(group => ( - - ))} -
- ); - } + return ( +
+ {groups.map(group => ( + + ))} +
+ ); + } - handleItemClicked(event, item) { - event.stopPropagation(); - if(this.props.onToggle) { - this.props.onToggle(this.props.groups, item.id); - } - if(item.onSelect) { - item.onSelect(); - } - if(this.props.onSelect) { - this.props.onSelect(item); - } - } + handleItemClicked(event, item) { + event.stopPropagation(); + if (this.props.onToggle) { + this.props.onToggle(this.props.groups, item.id); + } + if (item.onSelect) { + item.onSelect(); + } + if (this.props.onSelect) { + this.props.onSelect(item); + } + } } class NavigationMenu extends React.Component { - static PropTypes = { - activeItemId: PropTypes.string.isRequired, - onNavigationItemClick: PropTypes.func, - menu: PropTypes.array - }; + static PropTypes = { + activeItemId: PropTypes.string.isRequired, + onNavigationItemClick: PropTypes.func, + menu: PropTypes.array + }; - render() { - const {menu, activeItemId, onNavigationItemClick} = this.props; - return ( -
- - -
); - } + render() { + const { menu, activeItemId, onNavigationItemClick } = this.props; + return ( +
+ + +
+ ); + } } function NavigationMenuHeader(props) { - return
{props.title}
; + return ( +
+ {props.title} +
+ ); } function getItemDataTestId(itemId) { - return itemId.split('|')[0]; + return itemId.split('|')[0]; } function NavigationMenuItems(props) { - const {items, activeItemId, onNavigationItemClick} = props; - return ( -
- { - items && items.map(item => ()) - } -
- ); + const { items, activeItemId, onNavigationItemClick } = props; + return ( +
+ {items && + items.map(item => ( + + ))} +
+ ); } function NavigationMenuItem(props) { - const {onNavigationItemClick, item, activeItemId} = props; - const isGroup = item.items && item.items.length > 0; - return ( -
- - {isGroup && -
- {item.items.map(subItem => ()) } -
- - } -
- ); + const { onNavigationItemClick, item, activeItemId } = props; + const isGroup = item.items && item.items.length > 0; + return ( +
+ + {isGroup && ( + +
+ {item.items.map(subItem => ( + + ))} +
+ + )} +
+ ); } function NavigationLink(props) { - const {item, activeItemId, onClick} = props; - // todo should this be button - return ( -
onClick(event, item)} - data-test-id={'navbar-group-item-' + getItemDataTestId(item.id)}> - {item.name} -
- ); + const { item, activeItemId, onClick } = props; + // todo should this be button + return ( +
onClick(event, item)} + data-test-id={'navbar-group-item-' + getItemDataTestId(item.id)}> + {item.name} +
+ ); } export default NavigationSideBar; diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx index 57fa86f561..c9c5789622 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx +++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx @@ -17,125 +17,224 @@ import React from 'react'; import PropTypes from 'prop-types'; import i18n from 'nfvo-utils/i18n/i18n.js'; -import {actionsEnum} from './VersionControllerConstants.js'; +import { actionsEnum } from './VersionControllerConstants.js'; import ActionButtons from './components/ActionButtons.jsx'; import NotificationsView from 'sdc-app/onboarding/userNotifications/NotificationsView.jsx'; - class VersionController extends React.Component { - - static propTypes = { - version: PropTypes.object, - viewableVersions: PropTypes.array, - onVersionSwitching: PropTypes.func, - callVCAction: PropTypes.func, - onSave: PropTypes.func, - onClose: PropTypes.func, - isFormDataValid: PropTypes.bool, - onOpenCommentCommitModal: PropTypes.func, - isReadOnlyMode: PropTypes.bool - }; - - state = { - showPermissions: false, - showRevisions: false - }; - - render() { - let {version = {}, viewableVersions = [], onVersionSwitching, onMoreVersionsClick, callVCAction, onSave, isReadOnlyMode, itemPermission, - isFormDataValid, onClose, onManagePermissions, permissions = {}, userInfo, usersList, itemName, - onOpenCommentCommitModal, onOpenRevisionsModal, isManual, candidateInProcess, isArchived} = this.props; - return ( -
-
-
- onMoreVersionsClick({itemName, users: usersList})}/> - {isArchived &&
{i18n('Archived')}
} -
-
- this.submit(callVCAction, version) : undefined} - onRevert={callVCAction ? () => this.revert(callVCAction, version) : undefined} - onOpenRevisionsModal={onOpenRevisionsModal} - onSave={onSave ? () => onSave() : undefined} - permissions={permissions} - userInfo={userInfo} - onManagePermissions={onManagePermissions} - showPermissions={this.state.showPermissions} - onClosePermissions={()=>this.setState({showPermissions: false})} - onClickPermissions={() => this.onClickPermissions()} - onSync={callVCAction ? () => this.sync(callVCAction, version) : undefined} - onOpenCommentCommitModal={onOpenCommentCommitModal} - onCommit={callVCAction ? (comment) => this.commit(callVCAction, version, comment) : undefined} - isFormDataValid={isFormDataValid} - itemPermissions={itemPermission} - isArchived={isArchived} - isReadOnlyMode={isReadOnlyMode || candidateInProcess} - isManual={isManual} /> -
- - {onClose &&
onClose()} data-test-id='vc-cancel-btn'> X
} -
-
-
- ); - } - - onClickPermissions() { - let {onOpenPermissions, usersList} = this.props; - let {showPermissions} = this.state; - let promise = showPermissions ? Promise.resolve() : onOpenPermissions({users: usersList}); - promise.then(() => this.setState({showPermissions: !showPermissions})); - } - - - submit(callVCAction, version) { - const action = actionsEnum.SUBMIT; - callVCAction(action, version); - } - - revert(callVCAction, version) { - const action = actionsEnum.REVERT; - callVCAction(action, version); - } - - sync(callVCAction, version) { - const action = actionsEnum.SYNC; - callVCAction(action, version); - } - - commit(callVCAction, version, comment) { - const action = actionsEnum.COMMIT; - callVCAction(action, version, comment); - } - - permissions() { - - } + static propTypes = { + version: PropTypes.object, + viewableVersions: PropTypes.array, + onVersionSwitching: PropTypes.func, + callVCAction: PropTypes.func, + onSave: PropTypes.func, + onClose: PropTypes.func, + isFormDataValid: PropTypes.bool, + onOpenCommentCommitModal: PropTypes.func, + isReadOnlyMode: PropTypes.bool + }; + + state = { + showPermissions: false, + showRevisions: false + }; + + render() { + let { + version = {}, + viewableVersions = [], + onVersionSwitching, + onMoreVersionsClick, + callVCAction, + onSave, + isReadOnlyMode, + itemPermission, + isFormDataValid, + onClose, + onManagePermissions, + permissions = {}, + userInfo, + usersList, + itemName, + onOpenCommentCommitModal, + onOpenRevisionsModal, + isManual, + candidateInProcess, + isArchived + } = this.props; + return ( +
+
+
+ + onMoreVersionsClick({ + itemName, + users: usersList + }) + } + /> + {isArchived && ( +
+ {i18n('Archived')} +
+ )} +
+
+ this.submit(callVCAction, version) + : undefined + } + onRevert={ + callVCAction + ? () => this.revert(callVCAction, version) + : undefined + } + onOpenRevisionsModal={onOpenRevisionsModal} + onSave={onSave ? () => onSave() : undefined} + permissions={permissions} + userInfo={userInfo} + onManagePermissions={onManagePermissions} + showPermissions={this.state.showPermissions} + onClosePermissions={() => + this.setState({ showPermissions: false }) + } + onClickPermissions={() => this.onClickPermissions()} + onSync={ + callVCAction + ? () => this.sync(callVCAction, version) + : undefined + } + onOpenCommentCommitModal={onOpenCommentCommitModal} + onCommit={ + callVCAction + ? comment => + this.commit( + callVCAction, + version, + comment + ) + : undefined + } + isFormDataValid={isFormDataValid} + itemPermissions={itemPermission} + isArchived={isArchived} + isReadOnlyMode={ + isReadOnlyMode || candidateInProcess + } + isManual={isManual} + /> +
+ + {onClose && ( +
onClose()} + data-test-id="vc-cancel-btn"> + {' '} + X +
+ )} +
+
+
+ ); + } + + onClickPermissions() { + let { onOpenPermissions, usersList } = this.props; + let { showPermissions } = this.state; + let promise = showPermissions + ? Promise.resolve() + : onOpenPermissions({ users: usersList }); + promise.then(() => + this.setState({ showPermissions: !showPermissions }) + ); + } + + submit(callVCAction, version) { + const action = actionsEnum.SUBMIT; + callVCAction(action, version); + } + + revert(callVCAction, version) { + const action = actionsEnum.REVERT; + callVCAction(action, version); + } + + sync(callVCAction, version) { + const action = actionsEnum.SYNC; + callVCAction(action, version); + } + + commit(callVCAction, version, comment) { + const action = actionsEnum.COMMIT; + callVCAction(action, version, comment); + } + + permissions() {} } function VersionSelector(props) { - let {version = {}, onMoreVersionsClick, viewableVersions = [], onVersionSwitching} = props; - const includedVersions = viewableVersions.filter(ver => {return ver.id === version.id;}); - return (
- - {i18n('Versions Page')} -
); + let { + version = {}, + onMoreVersionsClick, + viewableVersions = [], + onVersionSwitching + } = props; + const includedVersions = viewableVersions.filter(ver => { + return ver.id === version.id; + }); + return ( +
+ + + {i18n('Versions Page')} + +
+ ); } export default VersionController; diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js index ddb428a1e9..54f10c1acf 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js +++ b/openecomp-ui/src/nfvo-components/panel/versionController/VersionControllerConstants.js @@ -16,9 +16,9 @@ import keyMirror from 'nfvo-utils/KeyMirror.js'; export const actionsEnum = keyMirror({ - REVERT: 'Revert', - SYNC: 'Sync', - SUBMIT: 'Submit', - COMMIT: 'Commit', - CREATE_PACKAGE: 'Create_Package' + REVERT: 'Revert', + SYNC: 'Sync', + SUBMIT: 'Submit', + COMMIT: 'Commit', + CREATE_PACKAGE: 'Create_Package' }); diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx index b5750817ba..4dfa117803 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx +++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.jsx @@ -13,7 +13,7 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import enhanceWithClickOutside from 'react-click-outside'; import i18n from 'nfvo-utils/i18n/i18n.js'; @@ -22,88 +22,171 @@ import Overlay from 'nfvo-components/overlay/Overlay.jsx'; import Permissions from './Permissions.jsx'; class ClickOutsideWrapper extends Component { - handleClickOutside() { - this.props.onClose(); - } - render() { - return
{this.props.children}
; - } + handleClickOutside() { + this.props.onClose(); + } + render() { + return
{this.props.children}
; + } } -const EnhancedClickOutsideWrapper = enhanceWithClickOutside(ClickOutsideWrapper); +const EnhancedClickOutsideWrapper = enhanceWithClickOutside( + ClickOutsideWrapper +); -const VCButton = ({name, tooltipText, disabled, onClick, dataTestId}) => { - let onClickAction = disabled ? ()=>{} : onClick; - return ( -
-
- -
-
- ); +const VCButton = ({ name, tooltipText, disabled, onClick, dataTestId }) => { + let onClickAction = disabled ? () => {} : onClick; + return ( +
+
+ +
+
+ ); }; -const Separator = () => (
); +const Separator = () =>
; -const SubmitButton = ({onClick, disabled}) => ( -
onClick()} data-test-id='vc-submit-btn' className={`vc-submit-button ${disabled ? 'disabled' : ''}`}> - - {i18n('Submit')} -
+const SubmitButton = ({ onClick, disabled }) => ( +
onClick()} + data-test-id="vc-submit-btn" + className={`vc-submit-button ${disabled ? 'disabled' : ''}`}> + + {i18n('Submit')} +
); - -const ActionButtons = ({isReadOnlyMode, onSubmit, onRevert, onSave, isFormDataValid, onClickPermissions, onSync, onCommit, isArchived, - onOpenCommentCommitModal, showPermissions, onClosePermissions, permissions, onManagePermissions, userInfo, onOpenRevisionsModal, isManual, - itemPermissions: {isCertified, isCollaborator, isDirty, isOutOfSync, isUpToDate}}) => ( -
- - - {showPermissions && - - - - } - - {isCollaborator && !isArchived &&
- - {onSave &&
- onSave()} - name='version-controller-save' tooltipText={i18n('Save')} disabled={isReadOnlyMode || !isFormDataValid} /> - -
- } - - onOpenCommentCommitModal({onCommit, title: i18n('Commit')})} - name='version-controller-commit' tooltipText={i18n('Share')} disabled={isReadOnlyMode || !isDirty || isOutOfSync} /> - {onRevert && - - } - {onSubmit && -
- - -
- } -
} -
+const ActionButtons = ({ + isReadOnlyMode, + onSubmit, + onRevert, + onSave, + isFormDataValid, + onClickPermissions, + onSync, + onCommit, + isArchived, + onOpenCommentCommitModal, + showPermissions, + onClosePermissions, + permissions, + onManagePermissions, + userInfo, + onOpenRevisionsModal, + isManual, + itemPermissions: { + isCertified, + isCollaborator, + isDirty, + isOutOfSync, + isUpToDate + } +}) => ( +
+ + + {showPermissions && ( + + + + )} + + {isCollaborator && + !isArchived && ( +
+ + {onSave && ( +
+ onSave()} + name="version-controller-save" + tooltipText={i18n('Save')} + disabled={isReadOnlyMode || !isFormDataValid} + /> + +
+ )} + + + onOpenCommentCommitModal({ + onCommit, + title: i18n('Commit') + }) + } + name="version-controller-commit" + tooltipText={i18n('Share')} + disabled={isReadOnlyMode || !isDirty || isOutOfSync} + /> + {onRevert && ( + + )} + {onSubmit && ( +
+ + +
+ )} +
+ )} +
); ActionButtons.propTypes = { - version: PropTypes.object, - onSubmit: PropTypes.func, - onRevert: PropTypes.func, - onSave: PropTypes.func, - isLatestVersion: PropTypes.bool, - isCheckedIn: PropTypes.bool, - isCheckedOut: PropTypes.bool, - isFormDataValid: PropTypes.bool, - isReadOnlyMode: PropTypes.bool + version: PropTypes.object, + onSubmit: PropTypes.func, + onRevert: PropTypes.func, + onSave: PropTypes.func, + isLatestVersion: PropTypes.bool, + isCheckedIn: PropTypes.bool, + isCheckedOut: PropTypes.bool, + isFormDataValid: PropTypes.bool, + isReadOnlyMode: PropTypes.bool }; export default ActionButtons; diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx index 600eaeefaa..ae0913f3a9 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx +++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/CommitCommentModal.jsx @@ -15,59 +15,66 @@ */ import React from 'react'; -import {connect} from 'react-redux'; +import { connect } from 'react-redux'; import i18n from 'nfvo-utils/i18n/i18n.js'; import Form from 'nfvo-components/input/validation/Form.jsx'; import Input from 'nfvo-components/input/validation/Input.jsx'; -import {actionTypes as modalActionTypes} from 'nfvo-components/modal/GlobalModalConstants.js'; +import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js'; import keyMirror from 'nfvo-utils/KeyMirror.js'; export const CommitModalType = keyMirror({ - COMMIT: null, - COMMIT_SUBMIT: null - + COMMIT: null, + COMMIT_SUBMIT: null }); -export const mapActionToProps = (dispatch) => { - return { - onClose: () => dispatch({ - type: modalActionTypes.GLOBAL_MODAL_CLOSE - }) - }; +export const mapActionToProps = dispatch => { + return { + onClose: () => + dispatch({ + type: modalActionTypes.GLOBAL_MODAL_CLOSE + }) + }; }; class CommitCommentModal extends React.Component { + state = { + comment: '' + }; - state = { - comment: '' - }; - - render() { - const {onCommit, onClose, type} = this.props; - const [commitButtonText, descriptionText] = type === CommitModalType.COMMIT ? - [i18n('Commit'), i18n('You are about to commit your version')] : - [i18n('Commit & Submit'), i18n('You must commit your changes before the submit')]; + render() { + const { onCommit, onClose, type } = this.props; + const [commitButtonText, descriptionText] = + type === CommitModalType.COMMIT + ? [i18n('Commit'), i18n('You are about to commit your version')] + : [ + i18n('Commit & Submit'), + i18n('You must commit your changes before the submit') + ]; - return ( -
{onCommit(this.state.comment); onClose();} } - onReset={onClose} - submitButtonText={commitButtonText} - labledButtons={true} - isValid={true} - className='comment-commit-form'> -
{descriptionText}
- this.setState({comment: comment})} - label={i18n('Enter Commit Comment:')} - value={this.state.comment} - type='textarea'/> -
- ); - } + return ( +
{ + onCommit(this.state.comment); + onClose(); + }} + onReset={onClose} + submitButtonText={commitButtonText} + labledButtons={true} + isValid={true} + className="comment-commit-form"> +
{descriptionText}
+ this.setState({ comment: comment })} + label={i18n('Enter Commit Comment:')} + value={this.state.comment} + type="textarea" + /> +
+ ); + } } export default connect(null, mapActionToProps)(CommitCommentModal); diff --git a/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx b/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx index 952bd4fb58..6e0ae8187b 100644 --- a/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx +++ b/openecomp-ui/src/nfvo-components/panel/versionController/components/Permissions.jsx @@ -18,48 +18,76 @@ import React from 'react'; import i18n from 'nfvo-utils/i18n/i18n.js'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; -const Contributor = ({name, role, id, userInfo}) => { +const Contributor = ({ name, role, id, userInfo }) => { + const selected = id === userInfo.userId ? 'selected' : ''; - const selected = id === userInfo.userId ? 'selected' : ''; - - return( -
-
-
-
- -
-
-
-
{name}
-

{role}

-
-
-
- ); + return ( +
+
+
+
+ +
+
+
+
{name}
+
+

{role}

+
+
+
+
+ ); }; -const Permissions = ({permissions: {owner, contributors}, onManagePermissions, userInfo, onClosePermissions}) => { - - return ( -
-
-

{i18n('PERMISSIONS')}

-
-
- - {contributors.map(item => item.userId !== owner.userId && )} -
-
- { - owner.userId === userInfo.userId && -
{ onClosePermissions(); onManagePermissions(); }} className='manage-permissions-btn'> - {i18n('Manage Permissions')} -
- } -
-
- ); +const Permissions = ({ + permissions: { owner, contributors }, + onManagePermissions, + userInfo, + onClosePermissions +}) => { + return ( +
+
+

+ {i18n('PERMISSIONS')} +

+
+
+ + {contributors.map( + item => + item.userId !== owner.userId && ( + + ) + )} +
+
+ {owner.userId === userInfo.userId && ( +
{ + onClosePermissions(); + onManagePermissions(); + }} + className="manage-permissions-btn"> + {i18n('Manage Permissions')} +
+ )} +
+
+ ); }; export default Permissions; diff --git a/openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx b/openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx index ca5cb3d765..cb10bb565e 100644 --- a/openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx +++ b/openecomp-ui/src/nfvo-components/progressBar/ProgressBar.jsx @@ -17,22 +17,25 @@ import React from 'react'; import PropTypes from 'prop-types'; class ProgressBar extends React.Component { - static propTypes = { - label: PropTypes.string, - now: PropTypes.string.isRequired - } - render() { - let {label, now} = this.props; + static propTypes = { + label: PropTypes.string, + now: PropTypes.string.isRequired + }; + render() { + let { label, now } = this.props; - return( -
-
-
-
-
{label}
-
- ); - } + return ( +
+
+
+
+
{label}
+
+ ); + } } export default ProgressBar; diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx index 3f8dbba53a..ee8a9dca45 100644 --- a/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx +++ b/openecomp-ui/src/nfvo-components/table/SelectActionTable.jsx @@ -5,26 +5,57 @@ import Button from 'sdc-ui/lib/react/Button.js'; import uuid from 'uuid-js'; export default class SelectActionTable extends React.Component { - - render() { - let {columns, onAdd, isReadOnlyMode, children, onAddItem, numOfIcons} = this.props; - return ( -
-
- {onAdd && onAddItem && - } - -
-
-
- {columns.map(column =>
{i18n(column)}
)} - {Array(numOfIcons).fill().map((e, i) => )} -
-
- {children} -
-
-
- ); - } + render() { + let { + columns, + onAdd, + isReadOnlyMode, + children, + onAddItem, + numOfIcons + } = this.props; + return ( +
+
+ {onAdd && + onAddItem && ( + + )} + +
+
+
+ {columns.map(column => ( +
+ {i18n(column)} +
+ ))} + {Array(numOfIcons) + .fill() + .map((e, i) => ( + + ))} +
+
{children}
+
+
+ ); + } } diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx index 2664c8e944..20e4f2413c 100644 --- a/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx +++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableCell.jsx @@ -1,20 +1,28 @@ import React from 'react'; import SelectInput from 'nfvo-components/input/SelectInput.jsx'; -const SelectActionTableCell = ({options, selected, disabled, onChange, clearable = true, placeholder}) => { - return ( -
- onChange(option ? option.value : null)} - clearable={clearable} - options={options} /> -
- ); +const SelectActionTableCell = ({ + options, + selected, + disabled, + onChange, + clearable = true, + placeholder +}) => { + return ( +
+ onChange(option ? option.value : null)} + clearable={clearable} + options={options} + /> +
+ ); }; export default SelectActionTableCell; diff --git a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx index 260d39d31c..1c2c1529f2 100644 --- a/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx +++ b/openecomp-ui/src/nfvo-components/table/SelectActionTableRow.jsx @@ -3,38 +3,65 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; import Tooltip from 'react-bootstrap/lib/Tooltip.js'; -function tooltip (msg) { - return ( - {msg} - ); -}; +function tooltip(msg) { + return ( + + {msg} + + ); +} -const IconWithOverlay = ({overlayMsg}) => ( - - - +const IconWithOverlay = ({ overlayMsg }) => ( + + + ); -function renderErrorOrCheck({hasError, overlayMsg}) { - if (hasError === undefined) { - return ; - } +function renderErrorOrCheck({ hasError, overlayMsg }) { + if (hasError === undefined) { + return ; + } - if (hasError) { - return overlayMsg ? : ; - } + if (hasError) { + return overlayMsg ? ( + + ) : ( + + ); + } - return ; + return ; } -const SelectActionTableRow = ({children, actionIcon, onAction, showAction, hasError, hasErrorIndication, overlayMsg}) => ( -
-
- {children} -
- {onAction && } - {hasErrorIndication && renderErrorOrCheck({hasError, overlayMsg})} -
+const SelectActionTableRow = ({ + children, + actionIcon, + onAction, + showAction, + hasError, + hasErrorIndication, + overlayMsg +}) => ( +
+
+ {children} +
+ {onAction && ( + + )} + {hasErrorIndication && renderErrorOrCheck({ hasError, overlayMsg })} +
); export default SelectActionTableRow; diff --git a/openecomp-ui/src/nfvo-components/tree/Tree.jsx b/openecomp-ui/src/nfvo-components/tree/Tree.jsx index 682f3b6d50..39434fcdf1 100644 --- a/openecomp-ui/src/nfvo-components/tree/Tree.jsx +++ b/openecomp-ui/src/nfvo-components/tree/Tree.jsx @@ -1,16 +1,28 @@ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import {select} from 'd3-selection'; -import {tree, stratify} from 'd3-hierarchy'; - +import { select } from 'd3-selection'; +import { tree, stratify } from 'd3-hierarchy'; function diagonal(d) { - - const offset = 50; - return 'M' + d.y + ',' + d.x - + 'C' + (d.parent.y + offset) + ',' + d.x - + ' ' + (d.parent.y + offset) + ',' + d.parent.x - + ' ' + d.parent.y + ',' + d.parent.x; + const offset = 50; + return ( + 'M' + + d.y + + ',' + + d.x + + 'C' + + (d.parent.y + offset) + + ',' + + d.x + + ' ' + + (d.parent.y + offset) + + ',' + + d.parent.x + + ' ' + + d.parent.y + + ',' + + d.parent.x + ); } const nodeRadius = 8; @@ -18,164 +30,226 @@ const verticalSpaceBetweenNodes = 70; const NARROW_HORIZONTAL_SPACES = 47; const WIDE_HORIZONTAL_SPACES = 65; -const stratifyFn = stratify().id(d => d.id).parentId(d => d.parent); +const stratifyFn = stratify() + .id(d => d.id) + .parentId(d => d.parent); class Tree extends Component { - - // state = { - // startingCoordinates: null, - // isDown: false - // } - - static propTypes = { - name: PropTypes.string, - width: PropTypes.number, - allowScaleWidth: PropTypes.bool, - nodes: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - parent: PropTypes.string - })), - selectedNodeId: PropTypes.string, - onNodeClick: PropTypes.func, - onRenderedBeyondWidth: PropTypes.func - }; - - static defaultProps = { - width: 500, - allowScaleWidth : true, - name: 'default-name' - }; - - render() { - let {width, name, scrollable = false} = this.props; - return ( -
- -
- ); - } - - componentDidMount() { - this.renderTree(); - } - - // handleMouseMove(e) { - // if (!this.state.isDown) { - // return; - // } - // const container = select(`.tree-view.${this.props.name}-container`); - // let coordinates = this.getCoordinates(e); - // container.property('scrollLeft' , container.property('scrollLeft') + coordinates.x - this.state.startingCoordinates.x); - // container.property('scrollTop' , container.property('scrollTop') + coordinates.y - this.state.startingCoordinates.y); - // } - - // handleMouseDown(e) { - // let startingCoordinates = this.getCoordinates(e); - // this.setState({ - // startingCoordinates, - // isDown: true - // }); - // } - - // handleMouseUp() { - // this.setState({ - // startingCorrdinates: null, - // isDown: false - // }); - // } - - // getCoordinates(e) { - // var bounds = e.target.getBoundingClientRect(); - // var x = e.clientX - bounds.left; - // var y = e.clientY - bounds.top; - // return {x, y}; - // } - - componentDidUpdate(prevProps) { - if (this.props.nodes.length !== prevProps.nodes.length || - this.props.selectedNodeId !== prevProps.selectedNodeId) { - console.log('update'); - this.renderTree(); - } - } - - renderTree() { - let {width, nodes, name, allowScaleWidth, selectedNodeId, onRenderedBeyondWidth, toWiden} = this.props; - if (nodes.length > 0) { - - let horizontalSpaceBetweenLeaves = toWiden ? WIDE_HORIZONTAL_SPACES : NARROW_HORIZONTAL_SPACES; - const treeFn = tree().nodeSize([horizontalSpaceBetweenLeaves, verticalSpaceBetweenNodes]);//.size([width - 50, height - 50]) - let root = stratifyFn(nodes).sort((a, b) => a.data.name.localeCompare(b.data.name)); - let svgHeight = verticalSpaceBetweenNodes * root.height + nodeRadius * 6; - - treeFn(root); - - let nodesXValue = root.descendants().map(node => node.x); - let maxX = Math.max(...nodesXValue); - let minX = Math.min(...nodesXValue); - - let svgTempWidth = (maxX - minX) / 30 * (horizontalSpaceBetweenLeaves); - let svgWidth = svgTempWidth < width ? (width - 5) : svgTempWidth; - const svgEL = select(`svg.${name}`); - const container = select(`.tree-view.${name}-container`); - svgEL.html(''); - svgEL.attr('height', svgHeight); - let canvasWidth = width; - if (svgTempWidth > width) { - if (allowScaleWidth) { - canvasWidth = svgTempWidth; - } - // we seems to have a margin of 25px that we can still see with text - if (((svgTempWidth - 25) > width) && onRenderedBeyondWidth !== undefined) { - onRenderedBeyondWidth(); - } - }; - svgEL.attr('width', canvasWidth); - let rootGroup = svgEL.append('g').attr('transform', `translate(${svgWidth / 2 + nodeRadius},${nodeRadius * 4}) rotate(90)`); - - // handle link - rootGroup.selectAll('.link') - .data(root.descendants().slice(1)) - .enter().append('path') - .attr('class', 'link') - .attr('d', diagonal); - - let node = rootGroup.selectAll('.node') - .data(root.descendants()) - .enter().append('g') - .attr('class', node => `node ${node.children ? ' has-children' : ' leaf'} ${node.id === selectedNodeId ? 'selectedNode' : ''} ${this.props.onNodeClick ? 'clickable' : ''}`) - .attr('transform', node => 'translate(' + node.y + ',' + node.x + ')') - .on('click', node => this.onNodeClick(node)); - - node.append('circle').attr('r', nodeRadius).attr('class', 'outer-circle'); - node.append('circle').attr('r', nodeRadius - 3).attr('class', 'inner-circle'); - - node.append('text') - .attr('y', nodeRadius / 4 + 1) - .attr('x', - nodeRadius * 1.8) - .text(node => node.data.name) - .attr('transform', 'rotate(-90)'); - - let selectedNode = selectedNodeId ? root.descendants().find(node => node.id === selectedNodeId) : null; - if (selectedNode) { - - container.property('scrollLeft', (svgWidth / 4) + (svgWidth / 4 - 100) - (selectedNode.x / 30 * horizontalSpaceBetweenLeaves)); - container.property('scrollTop', (selectedNode.y / 100 * verticalSpaceBetweenNodes)); - - } else { - container.property('scrollLeft', (svgWidth / 4) + (svgWidth / 4 - 100)); - } - } - } - - onNodeClick(node) { - if (this.props.onNodeClick) { - this.props.onNodeClick(node.data); - } - } - + // state = { + // startingCoordinates: null, + // isDown: false + // } + + static propTypes = { + name: PropTypes.string, + width: PropTypes.number, + allowScaleWidth: PropTypes.bool, + nodes: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + parent: PropTypes.string + }) + ), + selectedNodeId: PropTypes.string, + onNodeClick: PropTypes.func, + onRenderedBeyondWidth: PropTypes.func + }; + + static defaultProps = { + width: 500, + allowScaleWidth: true, + name: 'default-name' + }; + + render() { + let { width, name, scrollable = false } = this.props; + return ( +
+ +
+ ); + } + + componentDidMount() { + this.renderTree(); + } + + // handleMouseMove(e) { + // if (!this.state.isDown) { + // return; + // } + // const container = select(`.tree-view.${this.props.name}-container`); + // let coordinates = this.getCoordinates(e); + // container.property('scrollLeft' , container.property('scrollLeft') + coordinates.x - this.state.startingCoordinates.x); + // container.property('scrollTop' , container.property('scrollTop') + coordinates.y - this.state.startingCoordinates.y); + // } + + // handleMouseDown(e) { + // let startingCoordinates = this.getCoordinates(e); + // this.setState({ + // startingCoordinates, + // isDown: true + // }); + // } + + // handleMouseUp() { + // this.setState({ + // startingCorrdinates: null, + // isDown: false + // }); + // } + + // getCoordinates(e) { + // var bounds = e.target.getBoundingClientRect(); + // var x = e.clientX - bounds.left; + // var y = e.clientY - bounds.top; + // return {x, y}; + // } + + componentDidUpdate(prevProps) { + if ( + this.props.nodes.length !== prevProps.nodes.length || + this.props.selectedNodeId !== prevProps.selectedNodeId + ) { + console.log('update'); + this.renderTree(); + } + } + + renderTree() { + let { + width, + nodes, + name, + allowScaleWidth, + selectedNodeId, + onRenderedBeyondWidth, + toWiden + } = this.props; + if (nodes.length > 0) { + let horizontalSpaceBetweenLeaves = toWiden + ? WIDE_HORIZONTAL_SPACES + : NARROW_HORIZONTAL_SPACES; + const treeFn = tree().nodeSize([ + horizontalSpaceBetweenLeaves, + verticalSpaceBetweenNodes + ]); //.size([width - 50, height - 50]) + let root = stratifyFn(nodes).sort((a, b) => + a.data.name.localeCompare(b.data.name) + ); + let svgHeight = + verticalSpaceBetweenNodes * root.height + nodeRadius * 6; + + treeFn(root); + + let nodesXValue = root.descendants().map(node => node.x); + let maxX = Math.max(...nodesXValue); + let minX = Math.min(...nodesXValue); + + let svgTempWidth = + (maxX - minX) / 30 * horizontalSpaceBetweenLeaves; + let svgWidth = svgTempWidth < width ? width - 5 : svgTempWidth; + const svgEL = select(`svg.${name}`); + const container = select(`.tree-view.${name}-container`); + svgEL.html(''); + svgEL.attr('height', svgHeight); + let canvasWidth = width; + if (svgTempWidth > width) { + if (allowScaleWidth) { + canvasWidth = svgTempWidth; + } + // we seems to have a margin of 25px that we can still see with text + if ( + svgTempWidth - 25 > width && + onRenderedBeyondWidth !== undefined + ) { + onRenderedBeyondWidth(); + } + } + svgEL.attr('width', canvasWidth); + let rootGroup = svgEL + .append('g') + .attr( + 'transform', + `translate(${svgWidth / 2 + nodeRadius},${nodeRadius * + 4}) rotate(90)` + ); + + // handle link + rootGroup + .selectAll('.link') + .data(root.descendants().slice(1)) + .enter() + .append('path') + .attr('class', 'link') + .attr('d', diagonal); + + let node = rootGroup + .selectAll('.node') + .data(root.descendants()) + .enter() + .append('g') + .attr( + 'class', + node => + `node ${node.children ? ' has-children' : ' leaf'} ${ + node.id === selectedNodeId ? 'selectedNode' : '' + } ${this.props.onNodeClick ? 'clickable' : ''}` + ) + .attr( + 'transform', + node => 'translate(' + node.y + ',' + node.x + ')' + ) + .on('click', node => this.onNodeClick(node)); + + node + .append('circle') + .attr('r', nodeRadius) + .attr('class', 'outer-circle'); + node + .append('circle') + .attr('r', nodeRadius - 3) + .attr('class', 'inner-circle'); + + node + .append('text') + .attr('y', nodeRadius / 4 + 1) + .attr('x', -nodeRadius * 1.8) + .text(node => node.data.name) + .attr('transform', 'rotate(-90)'); + + let selectedNode = selectedNodeId + ? root.descendants().find(node => node.id === selectedNodeId) + : null; + if (selectedNode) { + container.property( + 'scrollLeft', + svgWidth / 4 + + (svgWidth / 4 - 100) - + selectedNode.x / 30 * horizontalSpaceBetweenLeaves + ); + container.property( + 'scrollTop', + selectedNode.y / 100 * verticalSpaceBetweenNodes + ); + } else { + container.property( + 'scrollLeft', + svgWidth / 4 + (svgWidth / 4 - 100) + ); + } + } + } + + onNodeClick(node) { + if (this.props.onNodeClick) { + this.props.onNodeClick(node.data); + } + } } export default Tree; diff --git a/openecomp-ui/src/nfvo-components/tree/Tree.stories.js b/openecomp-ui/src/nfvo-components/tree/Tree.stories.js index b29920b3ec..aca1a13402 100644 --- a/openecomp-ui/src/nfvo-components/tree/Tree.stories.js +++ b/openecomp-ui/src/nfvo-components/tree/Tree.stories.js @@ -1,119 +1,141 @@ import React from 'react'; -import {storiesOf} from '@kadira/storybook'; -import {withKnobs} from '@kadira/storybook-addon-knobs'; +import { storiesOf } from '@kadira/storybook'; +import { withKnobs } from '@kadira/storybook-addon-knobs'; import Tree from './Tree.jsx'; -import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; const stories = storiesOf('Version Tree', module); stories.addDecorator(withKnobs); const response = { - listCount: 6, - results: [ - { - 'id': '123', - 'name': '1.0', - 'description': 'string', - 'baseId': '', - 'status': 'Draft', - 'creationTime': '2017-06-08T08:55:37.831Z', - 'modificationTime': '2017-06-08T08:55:37.831Z' - }, - { - 'id': '1234', - 'name': '1.1', - 'description': 'string', - 'baseId': '123', - 'status': 'Draft', - 'creationTime': '2017-06-08T08:55:37.831Z', - 'modificationTime': '2017-06-08T08:55:37.831Z' - }, - { - 'id': '12345', - 'name': '2.0', - 'description': 'string', - 'baseId': '123', - 'status': 'Draft', - 'creationTime': '2017-06-08T08:55:37.831Z', - 'modificationTime': '2017-06-08T08:55:37.831Z' - }, - { - 'id': '123456', - 'name': '3.0', - 'description': 'string', - 'baseId': '12345', - 'status': 'Draft', - 'creationTime': '2017-06-08T08:55:37.831Z', - 'modificationTime': '2017-06-08T08:55:37.831Z' - }, - { - 'id': '1234567', - 'name': '1.2', - 'description': 'string', - 'baseId': '1234', - 'status': 'Draft', - 'creationTime': '2017-06-08T08:55:37.831Z', - 'modificationTime': '2017-06-08T08:55:37.831Z' - }, - { - 'id': '12345678', - 'name': '2.1', - 'description': 'string', - 'baseId': '12345', - 'status': 'Draft', - 'creationTime': '2017-06-08T08:55:37.831Z', - 'modificationTime': '2017-06-08T08:55:37.831Z' - }, - { - 'id': '123456789', - 'name': '4.0', - 'description': 'string', - 'baseId': '123456', - 'status': 'Draft', - 'creationTime': '2017-06-08T08:55:37.831Z', - 'modificationTime': '2017-06-08T08:55:37.831Z' - }, - { - 'id': '12345678910', - 'name': '3.1', - 'description': 'string', - 'baseId': '123456', - 'status': 'Draft', - 'creationTime': '2017-06-08T08:55:37.831Z', - 'modificationTime': '2017-06-08T08:55:37.831Z' - } - ] + listCount: 6, + results: [ + { + id: '123', + name: '1.0', + description: 'string', + baseId: '', + status: 'Draft', + creationTime: '2017-06-08T08:55:37.831Z', + modificationTime: '2017-06-08T08:55:37.831Z' + }, + { + id: '1234', + name: '1.1', + description: 'string', + baseId: '123', + status: 'Draft', + creationTime: '2017-06-08T08:55:37.831Z', + modificationTime: '2017-06-08T08:55:37.831Z' + }, + { + id: '12345', + name: '2.0', + description: 'string', + baseId: '123', + status: 'Draft', + creationTime: '2017-06-08T08:55:37.831Z', + modificationTime: '2017-06-08T08:55:37.831Z' + }, + { + id: '123456', + name: '3.0', + description: 'string', + baseId: '12345', + status: 'Draft', + creationTime: '2017-06-08T08:55:37.831Z', + modificationTime: '2017-06-08T08:55:37.831Z' + }, + { + id: '1234567', + name: '1.2', + description: 'string', + baseId: '1234', + status: 'Draft', + creationTime: '2017-06-08T08:55:37.831Z', + modificationTime: '2017-06-08T08:55:37.831Z' + }, + { + id: '12345678', + name: '2.1', + description: 'string', + baseId: '12345', + status: 'Draft', + creationTime: '2017-06-08T08:55:37.831Z', + modificationTime: '2017-06-08T08:55:37.831Z' + }, + { + id: '123456789', + name: '4.0', + description: 'string', + baseId: '123456', + status: 'Draft', + creationTime: '2017-06-08T08:55:37.831Z', + modificationTime: '2017-06-08T08:55:37.831Z' + }, + { + id: '12345678910', + name: '3.1', + description: 'string', + baseId: '123456', + status: 'Draft', + creationTime: '2017-06-08T08:55:37.831Z', + modificationTime: '2017-06-08T08:55:37.831Z' + } + ] }; -const divStyle = { width: '200px', borderStyle: 'solid', borderColor: 'black', border: '1px solid black'}; -const tree = response.results.map(item => ({id: item.id, name: item.name, parent: item.baseId})); -const nodeClickHandler = function (node) { - window.alert(node.name); +const divStyle = { + width: '200px', + borderStyle: 'solid', + borderColor: 'black', + border: '1px solid black' }; -stories.add('Classic Version Tree', () => ( -
- -
-)).add('Single Version Tree', () => ( -
- -
-)).add('Single Path Version Tree', () => ( -
- -
-)).add('Empty Tree', () => ( -
- -
-)).add('Add Tree in Version Page Frame', () => ( -
- Tree wider than frame


- {console.log('rendered beyond width')}} - allowScaleWidth={false} - onNodeClick={nodeClickHandler}/> -
-)); +const tree = response.results.map(item => ({ + id: item.id, + name: item.name, + parent: item.baseId +})); +const nodeClickHandler = function(node) { + window.alert(node.name); +}; +stories + .add('Classic Version Tree', () => ( +
+ +
+ )) + .add('Single Version Tree', () => ( +
+ +
+ )) + .add('Single Path Version Tree', () => ( +
+ +
+ )) + .add('Empty Tree', () => ( +
+ +
+ )) + .add('Add Tree in Version Page Frame', () => ( +
+ Tree wider than frame
+
+
+ { + console.log('rendered beyond width'); + }} + allowScaleWidth={false} + onNodeClick={nodeClickHandler} + /> +
+ )); -- cgit 1.2.3-korg