<commit_before>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import update from 'immutability-helper'

import Popup from 'components/ConfigForm/General/Popup.js'
import {SaveButton, CancelButton, CreateButton, DangerButton} from 'components/ConfigForm/General/Buttons'

class DependencyList extends Component {
    constructor(props) {
        super(props)

        this.state = {
            formPopupIsOpen: false,
            formEditMode: false,
            formEditNumber: 0,
            dependency: this.emptyForm()
        }

        this.handleFormInput = this.handleFormInput.bind(this)

        this.handleCreate = this.handleCreate.bind(this)
        this.handleEdit = this.handleEdit.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
        this.handleDelete = this.handleDelete.bind(this)
    }

    openForm() {
        this.setState({formPopupIsOpen: true})
    }

    closeForm() {
        this.setState({formPopupIsOpen: false})
        this.setState({formEditMode: false})
    }

    handleFormInput(event) {
        if (event.target.name == 'source') {
            this.setState({
                dependency: update(
                    this.state.dependency, 
                    {
                        [event.target.name]: {$set: event.target.value},
                        ['source_output']: {$set: ''}
                    }
                )
            })
        }
        else if (event.target.name == 'sink') {
            this.setState({
                dependency: update(
                    this.state.dependency, 
                    {
                        [event.target.name]: {$set: event.target.value},
                        ['sink_input']: {$set: ''}
                    }
                )
            })
        }
        else {
            this.setState({
                dependency: update(
                    this.state.dependency, 
                    {[event.target.name]: {$set: event.target.value}}
                )
            })
        }
    }
    
    handleSubmit(event) {
        event.preventDefault()

        if (this.state.formEditMode) {
            this.props.dependencies[this.state.formEditNumber] = this.state.dependency
        }
        else {
            this.props.dependencies.push(this.state.dependency)
        }
        this.closeForm()
    }

    emptyForm() {
        return {
            source: '',
            source_output: '',
            sink: '',
            sink_input: ''
        }
    }

    handleCreate() {
        this.setState({dependency: this.emptyForm()})
        this.openForm()
    }

    handleEdit(event) {
        const target = event.currentTarget
        const name = target.dataset.name

        let dependency = Object.assign({}, this.props.dependencies[name])

        // reset invalid dependencies to force user make a new selection
        if (!this.props.source.map(source => source.name).includes(dependency.source)) {
            dependency.source = ''
            dependency.source_output = ''
        }

        if (dependency.source in this.props.source_output) {
            if (!this.props.source_output[dependency.source].map(source_output => source_output.name).includes(dependency.source_output)) {
                dependency.source_output = ''
            }
        }<commit_msg>Prevent user from adding existing dependency<commit_after>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import update from 'immutability-helper'

import Popup from 'components/ConfigForm/General/Popup.js'
import {SaveButton, CancelButton, CreateButton, DangerButton} from 'components/ConfigForm/General/Buttons'

class DependencyList extends Component {
    constructor(props) {
        super(props)

        this.state = {
            formPopupIsOpen: false,
            formEditMode: false,
            formEditNumber: -1,
            dependency: this.emptyForm()
        }

        this.handleFormInput = this.handleFormInput.bind(this)

        this.handleCreate = this.handleCreate.bind(this)
        this.handleEdit = this.handleEdit.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
        this.handleDelete = this.handleDelete.bind(this)
    }

    openForm() {
        this.setState({formPopupIsOpen: true})
    }

    closeForm() {
        this.setState({formPopupIsOpen: false})
        this.setState({formEditMode: false})
    }

    handleFormInput(event) {
        if (event.target.name == 'source') {
            this.setState({
                dependency: update(
                    this.state.dependency, 
                    {
                        [event.target.name]: {$set: event.target.value},
                        ['source_output']: {$set: ''}
                    }
                )
            })
        }
        else if (event.target.name == 'sink') {
            this.setState({
                dependency: update(
                    this.state.dependency, 
                    {
                        [event.target.name]: {$set: event.target.value},
                        ['sink_input']: {$set: ''}
                    }
                )
            })
        }
        else {
            this.setState({
                dependency: update(
                    this.state.dependency, 
                    {[event.target.name]: {$set: event.target.value}}
                )
            })
        }
    }
    
    handleSubmit(event) {
        event.preventDefault()

        // Prevent user from adding existing dependencies
        if (this.props.dependencies.filter((dependency, idx) => {
            return (
                dependency.source == this.state.dependency.source &&
                dependency.source_output == this.state.dependency.source_output &&
                dependency.sink == this.state.dependency.sink &&
                dependency.sink_input == this.state.dependency.sink_input &&
                idx != parseInt(this.state.formEditNumber)
            )
        }).length > 0) {
            alert('Cannot save dependency because it is already existing')
        }
        // Add dependency
        else {
            if (this.state.formEditMode) {
                this.props.dependencies[this.state.formEditNumber] = this.state.dependency
            }
            else {
                this.props.dependencies.push(this.state.dependency)
            }
            this.closeForm()
        }
    }

    emptyForm() {
        return {
            source: '',
            source_output: '',
            sink: '',
            sink_input: ''
        }
    }

    handleCreate() {
        this.setState({dependency: this.emptyForm()})
        this.setState({formEditNumber: -1})
        this.openForm()
    }

    handleEdit(event) {
        const target = event.currentTarget
        const name = target.dataset.name

        let dependency = Object.assign({}, this.props.dependencies[name])

        // reset invalid dependencies to force user make a new selection
        if (!this.props.source.map(source => source.name).includes(dependency.source)) {
            dependency.source = ''
            dependency.source_output = ''
        }

        if (dependency.source in this.props.source_output) {
            if (!this.props.source_output[dependency.source].map(source_output => source_output.name).includes(dependency.source_output)) {
                dependency.source_output = ''
            }
        }
{'fraction_non_alphanumeric': 0.11100708840444028, 'fraction_numerical': 0.0005349739200213989, 'mean_word_length': 1.6019485038274182, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2561017', 'n_tokens_mistral': 1979, 'n_tokens_neox': 1893, 'n_words': 328}