openecomp-ui/src/nfvo-components/panel/versionController/components/ActionButtons.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, { Component } from 'react';
import PropTypes from 'prop-types';
import enhanceWithClickOutside from 'react-click-outside';
import i18n from 'nfvo-utils/i18n/i18n.js';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import Overlay from 'nfvo-components/overlay/Overlay.jsx';
import Permissions from './Permissions.jsx';

class ClickOutsideWrapper extends Component {
    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" />;

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

export default ActionButtons;