openecomp-ui/src/nfvo-components/panel/versionController/VersionController.jsx

/*!
 * Copyright © 2016-2018 European Support Limited
 *
 * 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. See the License for the specific language governing
 * permissions and limitations under the License.
 */
import React from 'react';
import PropTypes from 'prop-types';
import i18n from 'nfvo-utils/i18n/i18n.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 (
            <div className="version-controller-bar">
                <div className="vc-container">
                    <div
                        className={`version-status-container ${
                            candidateInProcess ? 'disabled' : ''
                        }`}>
                        <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>
        );
    }

    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 (
        <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;