Adding Prettier and fixing up eslint version
Issue-ID: SDC-1094
Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd
Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>
diff --git a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
index 2eda7e6..61121df 100644
--- a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
@@ -19,116 +19,159 @@
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 (
- <div className={`navigation-side-content ${disabled ? 'disabled' : ''}`}>
- {groups.map(group => (
- <NavigationMenu menu={group} activeItemId={activeItemId} onNavigationItemClick={this.handleItemClicked} key={'menu_' + group.id} />
- ))}
- </div>
- );
- }
+ return (
+ <div
+ className={`navigation-side-content ${
+ disabled ? 'disabled' : ''
+ }`}>
+ {groups.map(group => (
+ <NavigationMenu
+ menu={group}
+ activeItemId={activeItemId}
+ onNavigationItemClick={this.handleItemClicked}
+ key={'menu_' + group.id}
+ />
+ ))}
+ </div>
+ );
+ }
- 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 (
- <div className='navigation-group' key={menu.id}>
- <NavigationMenuHeader title={menu.name} />
- <NavigationMenuItems items={menu.items} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} />
- </div>);
- }
+ render() {
+ const { menu, activeItemId, onNavigationItemClick } = this.props;
+ return (
+ <div className="navigation-group" key={menu.id}>
+ <NavigationMenuHeader title={menu.name} />
+ <NavigationMenuItems
+ items={menu.items}
+ activeItemId={activeItemId}
+ onNavigationItemClick={onNavigationItemClick}
+ />
+ </div>
+ );
+ }
}
function NavigationMenuHeader(props) {
- return <div className='group-name' data-test-id='navbar-group-name'>{props.title}</div>;
+ return (
+ <div className="group-name" data-test-id="navbar-group-name">
+ {props.title}
+ </div>
+ );
}
function getItemDataTestId(itemId) {
- return itemId.split('|')[0];
+ return itemId.split('|')[0];
}
function NavigationMenuItems(props) {
- const {items, activeItemId, onNavigationItemClick} = props;
- return (
- <div className='navigation-group-items'>
- {
- items && items.map(item => (<NavigationMenuItem key={'menuItem_' + item.id} item={item} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} />))
- }
- </div>
- );
+ const { items, activeItemId, onNavigationItemClick } = props;
+ return (
+ <div className="navigation-group-items">
+ {items &&
+ items.map(item => (
+ <NavigationMenuItem
+ key={'menuItem_' + item.id}
+ item={item}
+ activeItemId={activeItemId}
+ onNavigationItemClick={onNavigationItemClick}
+ />
+ ))}
+ </div>
+ );
}
function NavigationMenuItem(props) {
- const {onNavigationItemClick, item, activeItemId} = props;
- const isGroup = item.items && item.items.length > 0;
- return (
- <div className={classnames('navigation-group-item', {'selected-item': item.id === activeItemId})} key={'item_' + item.id}>
- <NavigationLink item={item} activeItemId={activeItemId} onClick={onNavigationItemClick} />
- {isGroup && <Collapse in={item.expanded} data-test-id={'navigation-group-' + getItemDataTestId(item.id)}>
- <div>
- {item.items.map(subItem => (<NavigationMenuItem key={'menuItem_' + subItem.id} item={subItem} onNavigationItemClick={onNavigationItemClick} activeItemId={activeItemId} />)) }
- </div>
- </Collapse>
- }
- </div>
- );
+ const { onNavigationItemClick, item, activeItemId } = props;
+ const isGroup = item.items && item.items.length > 0;
+ return (
+ <div
+ className={classnames('navigation-group-item', {
+ 'selected-item': item.id === activeItemId
+ })}
+ key={'item_' + item.id}>
+ <NavigationLink
+ item={item}
+ activeItemId={activeItemId}
+ onClick={onNavigationItemClick}
+ />
+ {isGroup && (
+ <Collapse
+ in={item.expanded}
+ data-test-id={
+ 'navigation-group-' + getItemDataTestId(item.id)
+ }>
+ <div>
+ {item.items.map(subItem => (
+ <NavigationMenuItem
+ key={'menuItem_' + subItem.id}
+ item={subItem}
+ onNavigationItemClick={onNavigationItemClick}
+ activeItemId={activeItemId}
+ />
+ ))}
+ </div>
+ </Collapse>
+ )}
+ </div>
+ );
}
function NavigationLink(props) {
- const {item, activeItemId, onClick} = props;
- // todo should this be button
- return (
- <div
- key={'navAction_' + item.id}
- className={classnames('navigation-group-item-name', {
- 'selected': item.id === activeItemId,
- 'disabled': item.disabled,
- 'bold-name': item.expanded,
- 'hidden': item.hidden
- })}
- onClick={(event) => onClick(event, item)}
- data-test-id={'navbar-group-item-' + getItemDataTestId(item.id)}>
- {item.name}
- </div>
- );
+ const { item, activeItemId, onClick } = props;
+ // todo should this be button
+ return (
+ <div
+ key={'navAction_' + item.id}
+ className={classnames('navigation-group-item-name', {
+ selected: item.id === activeItemId,
+ disabled: item.disabled,
+ 'bold-name': item.expanded,
+ hidden: item.hidden
+ })}
+ onClick={event => onClick(event, item)}
+ data-test-id={'navbar-group-item-' + getItemDataTestId(item.id)}>
+ {item.name}
+ </div>
+ );
}
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 57fa86f..c9c5789 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 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
+ };
- 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
+ };
- 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 (
+ <div className="version-controller-bar">
+ <div
+ className={`vc-container ${
+ candidateInProcess ? 'disabled' : ''
+ }`}>
+ <div className="version-status-container">
+ <VersionSelector
+ viewableVersions={viewableVersions}
+ version={version}
+ onVersionSwitching={onVersionSwitching}
+ onMoreVersionsClick={() =>
+ onMoreVersionsClick({
+ itemName,
+ users: usersList
+ })
+ }
+ />
+ {isArchived && (
+ <div className="depricated-item-status">
+ {i18n('Archived')}
+ </div>
+ )}
+ </div>
+ <div className="save-submit-cancel-container">
+ <ActionButtons
+ onSubmit={
+ callVCAction
+ ? () => 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}
+ />
+ <div className="vc-separator" />
+ <NotificationsView />
+ {onClose && (
+ <div
+ className="vc-nav-item-close"
+ onClick={() => onClose()}
+ data-test-id="vc-cancel-btn">
+ {' '}
+ X
+ </div>
+ )}
+ </div>
+ </div>
+ </div>
+ );
+ }
- 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 (
- <div className='version-controller-bar'>
- <div className={`vc-container ${candidateInProcess ? 'disabled' : ''}`}>
- <div className='version-status-container'>
- <VersionSelector
- viewableVersions={viewableVersions}
- version={version}
- onVersionSwitching={onVersionSwitching}
- onMoreVersionsClick={() => onMoreVersionsClick({itemName, users: usersList})}/>
- {isArchived && <div className='depricated-item-status'>{i18n('Archived')}</div>}
- </div>
- <div className='save-submit-cancel-container'>
- <ActionButtons onSubmit={callVCAction ? () => 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} />
- <div className='vc-separator'></div>
- <NotificationsView />
- {onClose && <div className='vc-nav-item-close' onClick={() => onClose()} data-test-id='vc-cancel-btn'> X</div>}
- </div>
- </div>
- </div>
- );
- }
+ onClickPermissions() {
+ let { onOpenPermissions, usersList } = this.props;
+ let { showPermissions } = this.state;
+ let promise = showPermissions
+ ? Promise.resolve()
+ : onOpenPermissions({ users: usersList });
+ promise.then(() =>
+ this.setState({ showPermissions: !showPermissions })
+ );
+ }
- 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);
+ }
- submit(callVCAction, version) {
- const action = actionsEnum.SUBMIT;
- callVCAction(action, version);
- }
+ sync(callVCAction, version) {
+ const action = actionsEnum.SYNC;
+ callVCAction(action, version);
+ }
- revert(callVCAction, version) {
- const action = actionsEnum.REVERT;
- callVCAction(action, version);
- }
+ commit(callVCAction, version, comment) {
+ const action = actionsEnum.COMMIT;
+ callVCAction(action, version, comment);
+ }
- sync(callVCAction, version) {
- const action = actionsEnum.SYNC;
- callVCAction(action, version);
- }
-
- commit(callVCAction, version, comment) {
- const action = actionsEnum.COMMIT;
- callVCAction(action, version, comment);
- }
-
- permissions() {
-
- }
+ permissions() {}
}
function VersionSelector(props) {
- let {version = {}, onMoreVersionsClick, viewableVersions = [], onVersionSwitching} = props;
- const includedVersions = viewableVersions.filter(ver => {return ver.id === version.id;});
- return (<div className='version-section-wrapper'>
- <select className='version-selector'
- onChange={ev => onVersionSwitching && onVersionSwitching(viewableVersions.find(version => version.id === ev.target.value))}
- value={version.id}
- data-test-id='vc-versions-select-box'>
- {viewableVersions && viewableVersions.map(viewVersion => {
- return (
- <option key={viewVersion.id} value={viewVersion.id} data-test-id='vc-version-option'>{`V ${viewVersion.name} ${viewVersion.status}`}</option>
- );
- })
- }
- {!includedVersions.length &&
- <option key={version.id} value={version.id} data-test-id='vc-selected-version-option'>{`V ${version.name} ${version.status}`}</option>}
- </select>
- <span onClick={onMoreVersionsClick} className='version-selector-more-versions' data-test-id='vc-versions-page-link'>{i18n('Versions Page')}</span>
- </div>);
+ let {
+ version = {},
+ onMoreVersionsClick,
+ viewableVersions = [],
+ onVersionSwitching
+ } = props;
+ const includedVersions = viewableVersions.filter(ver => {
+ return ver.id === version.id;
+ });
+ return (
+ <div className="version-section-wrapper">
+ <select
+ className="version-selector"
+ onChange={ev =>
+ onVersionSwitching &&
+ onVersionSwitching(
+ viewableVersions.find(
+ version => version.id === ev.target.value
+ )
+ )
+ }
+ value={version.id}
+ data-test-id="vc-versions-select-box">
+ {viewableVersions &&
+ viewableVersions.map(viewVersion => {
+ return (
+ <option
+ key={viewVersion.id}
+ value={viewVersion.id}
+ data-test-id="vc-version-option">{`V ${
+ viewVersion.name
+ } ${viewVersion.status}`}</option>
+ );
+ })}
+ {!includedVersions.length && (
+ <option
+ key={version.id}
+ value={version.id}
+ data-test-id="vc-selected-version-option">{`V ${
+ version.name
+ } ${version.status}`}</option>
+ )}
+ </select>
+ <span
+ onClick={onMoreVersionsClick}
+ className="version-selector-more-versions"
+ data-test-id="vc-versions-page-link">
+ {i18n('Versions Page')}
+ </span>
+ </div>
+ );
}
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 ddb428a..54f10c1 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 b575081..4dfa117 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 Permissions from './Permissions.jsx';
class ClickOutsideWrapper extends Component {
- handleClickOutside() {
- this.props.onClose();
- }
- render() {
- return <div>{this.props.children}</div>;
- }
+ handleClickOutside() {
+ this.props.onClose();
+ }
+ render() {
+ return <div>{this.props.children}</div>;
+ }
}
-const EnhancedClickOutsideWrapper = enhanceWithClickOutside(ClickOutsideWrapper);
-
-const VCButton = ({name, tooltipText, disabled, onClick, dataTestId}) => {
- let onClickAction = disabled ? ()=>{} : onClick;
- return (
- <div className={`action-button-wrapper ${disabled ? 'disabled' : 'clickable'}`} onClick={onClickAction}>
- <div className='action-buttons-svg'>
- <SVGIcon label={tooltipText} labelPosition='bottom' labelClassName='action-button-label'
- data-test-id={dataTestId} name={name} disabled={disabled}/>
- </div>
- </div>
- );
-};
-
-const Separator = () => (<div className='vc-separator'></div>);
-
-const SubmitButton = ({onClick, disabled}) => (
- <div onClick={()=>onClick()} data-test-id='vc-submit-btn' className={`vc-submit-button ${disabled ? 'disabled' : ''}`}>
- <SVGIcon name='check' iconClassName='vc-v-submit' disabled={disabled} />
- {i18n('Submit')}
- </div>
+const EnhancedClickOutsideWrapper = enhanceWithClickOutside(
+ ClickOutsideWrapper
);
+const VCButton = ({ name, tooltipText, disabled, onClick, dataTestId }) => {
+ let onClickAction = disabled ? () => {} : onClick;
+ return (
+ <div
+ className={`action-button-wrapper ${
+ disabled ? 'disabled' : 'clickable'
+ }`}
+ onClick={onClickAction}>
+ <div className="action-buttons-svg">
+ <SVGIcon
+ label={tooltipText}
+ labelPosition="bottom"
+ labelClassName="action-button-label"
+ data-test-id={dataTestId}
+ name={name}
+ disabled={disabled}
+ />
+ </div>
+ </div>
+ );
+};
-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}}) => (
- <div className='action-buttons'>
- <EnhancedClickOutsideWrapper onClose={onClosePermissions}>
- <VCButton disabled={isManual} dataTestId='vc-permission-btn' onClick={onClickPermissions}
- name='version-controller-permissions' tooltipText={i18n('Permissons')} />
- {showPermissions &&
- <Overlay>
- <Permissions userInfo={userInfo} onManagePermissions={onManagePermissions} permissions={permissions} onClosePermissions={onClosePermissions}/>
- </Overlay>
- }
- </EnhancedClickOutsideWrapper>
- {isCollaborator && !isArchived && <div className='collaborator-action-buttons'>
- <Separator />
- {onSave && <div className='vc-save-section'>
- <VCButton dataTestId='vc-save-btn' onClick={() => onSave()}
- name='version-controller-save' tooltipText={i18n('Save')} disabled={isReadOnlyMode || !isFormDataValid} />
- <Separator />
- </div>
- }
- <VCButton dataTestId='vc-sync-btn' onClick={onSync}
- name='version-controller-sync' tooltipText={i18n('Sync')} disabled={!isCollaborator || isUpToDate || isCertified} />
- <VCButton dataTestId='vc-commit-btn' onClick={() => onOpenCommentCommitModal({onCommit, title: i18n('Commit')})}
- name='version-controller-commit' tooltipText={i18n('Share')} disabled={isReadOnlyMode || !isDirty || isOutOfSync} />
- {onRevert &&
- <VCButton dataTestId='vc-revert-btn' onClick={onOpenRevisionsModal}
- name='version-controller-revert' tooltipText={i18n('Revert')} disabled={isReadOnlyMode || isOutOfSync} />
- }
- {onSubmit &&
- <div className='vc-submit-section'>
- <Separator />
- <SubmitButton onClick={onSubmit}
- disabled={isReadOnlyMode || isOutOfSync || !isUpToDate || isCertified} />
- </div>
- }
- </div>}
- </div>
+const Separator = () => <div className="vc-separator" />;
+
+const SubmitButton = ({ onClick, disabled }) => (
+ <div
+ onClick={() => onClick()}
+ data-test-id="vc-submit-btn"
+ className={`vc-submit-button ${disabled ? 'disabled' : ''}`}>
+ <SVGIcon name="check" iconClassName="vc-v-submit" disabled={disabled} />
+ {i18n('Submit')}
+ </div>
+);
+
+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
+ }
+}) => (
+ <div className="action-buttons">
+ <EnhancedClickOutsideWrapper onClose={onClosePermissions}>
+ <VCButton
+ disabled={isManual}
+ dataTestId="vc-permission-btn"
+ onClick={onClickPermissions}
+ name="version-controller-permissions"
+ tooltipText={i18n('Permissons')}
+ />
+ {showPermissions && (
+ <Overlay>
+ <Permissions
+ userInfo={userInfo}
+ onManagePermissions={onManagePermissions}
+ permissions={permissions}
+ onClosePermissions={onClosePermissions}
+ />
+ </Overlay>
+ )}
+ </EnhancedClickOutsideWrapper>
+ {isCollaborator &&
+ !isArchived && (
+ <div className="collaborator-action-buttons">
+ <Separator />
+ {onSave && (
+ <div className="vc-save-section">
+ <VCButton
+ dataTestId="vc-save-btn"
+ onClick={() => onSave()}
+ name="version-controller-save"
+ tooltipText={i18n('Save')}
+ disabled={isReadOnlyMode || !isFormDataValid}
+ />
+ <Separator />
+ </div>
+ )}
+ <VCButton
+ dataTestId="vc-sync-btn"
+ onClick={onSync}
+ name="version-controller-sync"
+ tooltipText={i18n('Sync')}
+ disabled={!isCollaborator || isUpToDate || isCertified}
+ />
+ <VCButton
+ dataTestId="vc-commit-btn"
+ onClick={() =>
+ onOpenCommentCommitModal({
+ onCommit,
+ title: i18n('Commit')
+ })
+ }
+ name="version-controller-commit"
+ tooltipText={i18n('Share')}
+ disabled={isReadOnlyMode || !isDirty || isOutOfSync}
+ />
+ {onRevert && (
+ <VCButton
+ dataTestId="vc-revert-btn"
+ onClick={onOpenRevisionsModal}
+ name="version-controller-revert"
+ tooltipText={i18n('Revert')}
+ disabled={isReadOnlyMode || isOutOfSync}
+ />
+ )}
+ {onSubmit && (
+ <div className="vc-submit-section">
+ <Separator />
+ <SubmitButton
+ onClick={onSubmit}
+ disabled={
+ isReadOnlyMode ||
+ isOutOfSync ||
+ !isUpToDate ||
+ isCertified
+ }
+ />
+ </div>
+ )}
+ </div>
+ )}
+ </div>
);
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 600eaee..ae0913f 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 (
- <Form
- ref='validationForm'
- hasButtons={true}
- onSubmit={ () => {onCommit(this.state.comment); onClose();} }
- onReset={onClose}
- submitButtonText={commitButtonText}
- labledButtons={true}
- isValid={true}
- className='comment-commit-form'>
- <div className='commit-modal-text'>{descriptionText}</div>
- <Input
- data-test-id='commit-comment-text'
- onChange={comment => this.setState({comment: comment})}
- label={i18n('Enter Commit Comment:')}
- value={this.state.comment}
- type='textarea'/>
- </Form>
- );
- }
+ return (
+ <Form
+ ref="validationForm"
+ hasButtons={true}
+ onSubmit={() => {
+ onCommit(this.state.comment);
+ onClose();
+ }}
+ onReset={onClose}
+ submitButtonText={commitButtonText}
+ labledButtons={true}
+ isValid={true}
+ className="comment-commit-form">
+ <div className="commit-modal-text">{descriptionText}</div>
+ <Input
+ data-test-id="commit-comment-text"
+ onChange={comment => this.setState({ comment: comment })}
+ label={i18n('Enter Commit Comment:')}
+ value={this.state.comment}
+ type="textarea"
+ />
+ </Form>
+ );
+ }
}
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 952bd4f..6e0ae81 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 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(
- <div className='contributor'>
- <div className='contributor-content'>
- <div className={`contributor-icon-circle ${selected}`}>
- <div className={`contributer-icon ${selected}`}>
- <SVGIcon name='user'/>
- </div>
- </div>
- <div className='contributer-info'>
- <div className='contributer-name'>{name}</div>
- <div className='contributer-role'><p>{role}</p></div>
- </div>
- </div>
- </div>
- );
+ return (
+ <div className="contributor">
+ <div className="contributor-content">
+ <div className={`contributor-icon-circle ${selected}`}>
+ <div className={`contributer-icon ${selected}`}>
+ <SVGIcon name="user" />
+ </div>
+ </div>
+ <div className="contributer-info">
+ <div className="contributer-name">{name}</div>
+ <div className="contributer-role">
+ <p>{role}</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
};
-const Permissions = ({permissions: {owner, contributors}, onManagePermissions, userInfo, onClosePermissions}) => {
-
- return (
- <div className='permissions-overlay'>
- <div className='permissions-overlay-header'>
- <h4 className='permissions-overlay-header-title'>{i18n('PERMISSIONS')}</h4>
- </div>
- <div className='permissions-overlay-content'>
- <Contributor userInfo={userInfo} id={owner.userId} key={owner.fullName} name={owner.fullName} role={owner.role}/>
- {contributors.map(item => item.userId !== owner.userId && <Contributor userInfo={userInfo} id={item.userId} key={item.fullName} name={item.fullName} role={item.role}/>)}
- </div>
- <div className='permissions-overlay-footer'>
- {
- owner.userId === userInfo.userId &&
- <div onClick={() => { onClosePermissions(); onManagePermissions(); }} className='manage-permissions-btn'>
- {i18n('Manage Permissions')}
- </div>
- }
- </div>
- </div>
- );
+const Permissions = ({
+ permissions: { owner, contributors },
+ onManagePermissions,
+ userInfo,
+ onClosePermissions
+}) => {
+ return (
+ <div className="permissions-overlay">
+ <div className="permissions-overlay-header">
+ <h4 className="permissions-overlay-header-title">
+ {i18n('PERMISSIONS')}
+ </h4>
+ </div>
+ <div className="permissions-overlay-content">
+ <Contributor
+ userInfo={userInfo}
+ id={owner.userId}
+ key={owner.fullName}
+ name={owner.fullName}
+ role={owner.role}
+ />
+ {contributors.map(
+ item =>
+ item.userId !== owner.userId && (
+ <Contributor
+ userInfo={userInfo}
+ id={item.userId}
+ key={item.fullName}
+ name={item.fullName}
+ role={item.role}
+ />
+ )
+ )}
+ </div>
+ <div className="permissions-overlay-footer">
+ {owner.userId === userInfo.userId && (
+ <div
+ onClick={() => {
+ onClosePermissions();
+ onManagePermissions();
+ }}
+ className="manage-permissions-btn">
+ {i18n('Manage Permissions')}
+ </div>
+ )}
+ </div>
+ </div>
+ );
};
export default Permissions;