openecomp-ui/src/sdc-app/onboarding/permissions/PermissionsManager.jsx

/*!
 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
 *
 * 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 Form from 'nfvo-components/input/validation/Form.jsx';
import Select from 'nfvo-components/input/SelectInput.jsx';
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';
import i18n from 'nfvo-utils/i18n/i18n.js';

import { permissionTypes, changeOwnerMessage } from './PermissionsConstants.js';

export const askForRightsMsg = () => {
    return (
        <div>
            <p>{i18n('Send a Contributor rights reguest to Owner')}</p>
        </div>
    );
};

class Permissions extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            itemUsers: props.itemUsers,
            newOwnerId: '',
            showChangeOwner: false
        };
    }

    buildUserOptions() {
        let { users, owner } = this.props;
        return users.filter(user => user.userId !== owner.userId).map(item => {
            return { label: item.fullName, value: item.userId };
        });
    }

    render() {
        let { onCancel, owner } = this.props;
        let { newOwnerId } = this.state;
        return (
            <div className="manage-permissions-page">
                <Form
                    hasButtons={true}
                    onSubmit={() => this.onsaveItemUsers()}
                    onReset={() => onCancel()}
                    labledButtons={true}>
                    <div className="manage-permissions-title">
                        {i18n('Owner')}
                    </div>
                    <div className="owner-details">
                        <span>{owner.fullName}</span>
                        <span
                            className="change-owner"
                            onClick={() =>
                                this.setState({
                                    showChangeOwner: !this.state.showChangeOwner
                                })
                            }>
                            {i18n('Change Owner')}
                        </span>
                    </div>
                    {this.state.showChangeOwner && (
                        <div className="change-owner-wrapper">
                            <div className="change-owner-title">
                                <span
                                    className="manage-permissions-title"
                                    data-test-id="change-owner">
                                    {i18n('Change Owner')}
                                </span>
                                <OverlayTrigger
                                    placement="right"
                                    trigger="click"
                                    overlay={
                                        <Tooltip
                                            id="manage-permissions-owner-tooltip"
                                            className="manage-permissions-owner-tooltip">
                                            {i18n(changeOwnerMessage)}
                                        </Tooltip>
                                    }>
                                    <SVGIcon name="questionMark" />
                                </OverlayTrigger>
                            </div>
                            <Select
                                data-test-id="selected-owner"
                                value={newOwnerId}
                                onChange={item =>
                                    this.setState({
                                        newOwnerId: item ? item.value : ''
                                    })
                                }
                                options={this.buildUserOptions()}
                            />
                        </div>
                    )}
                    <div className="manage-permissions-title">
                        {i18n('Contributors')}
                    </div>
                    <Select
                        data-test-id="selected-contributors"
                        value={this.state.itemUsers.map(item => item.userId)}
                        className="options-input contributors-select"
                        clearable={false}
                        onMultiSelectChanged={value => {
                            this.onChangeItemUsers({ itemUsers: value });
                        }}
                        options={this.buildUserOptions()}
                        multi
                    />
                </Form>
            </div>
        );
    }

    onChangeItemUsers({ itemUsers }) {
        this.setState({
            itemUsers: itemUsers.map(contributor => {
                let contributorFromProps = this.props.itemUsers.find(
                    user => user.userId === contributor.userId
                );
                return {
                    userId: contributor.value,
                    fullName: contributor.label,
                    permission: contributorFromProps
                        ? contributorFromProps.permission
                        : permissionTypes.CONTRIBUTOR
                };
            })
        });
    }

    onsaveItemUsers() {
        let { itemUsers: newUsers, newOwnerId } = this.state;
        let { itemUsers: oldUsers, onSubmit, itemId, users } = this.props;
        let addedUsersIds = newUsers
            .filter(
                newUser =>
                    !oldUsers
                        .map(oldUser => oldUser.userId)
                        .includes(newUser.userId)
            )
            .map(user => user.userId);
        let removedUsersIds = oldUsers
            .filter(
                oldUser =>
                    !newUsers
                        .map(newUser => newUser.userId)
                        .includes(oldUser.userId)
            )
            .map(user => user.userId);
        onSubmit({
            itemId,
            addedUsersIds,
            removedUsersIds,
            allUsers: users,
            newOwnerId
        });
    }
}

export default Permissions;