<commit_before>import React, {Component} from "react";
import {observer} from "mobx-react";
import {observable, toJS} from "mobx";
import {Spin, Row, Col, Form, Button, Icon, Input, message, Popconfirm, Select, Radio} from "antd";
import axios from "axios";
import RichTextEditor from "shared/RichTextEditor";
import guid from "shared/guid";
import clipboard from "shared/clipboard";
import "./TestCaseEditorPanel.css";

@observer
class TestCaseEditorPanel extends Component {
    @observable testCase = {tags: [], testSteps: []};
    @observable loading = false;
    @observable saving = false;
    @observable possibleTags = [];

    componentDidMount = () => {
        this.loading = true;
        axios.get("/api/case/" + this.props.testCaseId).then((response) => {
            this.testCase = response.data;
            this.testCase.testSteps.map((testStep) => testStep.guid = guid());
            this.testCase.executionType = this.testCase.executionType.toString();
            this.testCase.importance = this.testCase.importance.toString();
            this.loading = false;
        })
    };

    render = () => {
        return (
            <Spin spinning={this.loading}>
                <div className="test-case-editor">
                    <Form layout="vertical">
                        <Form.Item label="Name" validateStatus="error">
                            <Input key={this.loading} size="default" style={{width: "45%"}}
                                   defaultValue={this.testCase.name}
                                   onChange={(e) => this.testCase.name = e.target.value}/>
                        </Form.Item>
                        <Form.Item label="Summary">
                            <RichTextEditor key={this.loading} defaultValue={this.testCase.summary}
                                            onChange={(value) => this.testCase.summary = value}/>
                        </Form.Item>
                        <Form.Item label="Precondition">
                            <RichTextEditor key={this.loading} defaultValue={this.testCase.precondition}
                                            onChange={(value) => this.testCase.precondition = value}/>
                        </Form.Item>
                        <Form.Item label="Test Steps">
                            {this.testCase.testSteps.map((testStep, index) =>
                                <div key={toJS(testStep.guid)}>
                                    <div className="spliter-wrapper">
                                        <div className="spliter">
                                            <Button icon="plus" size="small"
                                                    onClick={this.addTestStep.bind(this, index)}
                                                    className="add action-button">Add Test Step</Button>
                                            <Button icon="paste" size="small"
                                                    onClick={this.pasteTestStep.bind(this, index)}
                                                    className="paste action-button">Paste Test Step</Button>
                                        </div>
                                    </div>
                                    <div className="test-step">
                                        <RichTextEditor key={"action" + this.loading} className="action"
                                                        defaultValue={testStep.action}
                                                        onChange={(value) => testStep.action = value}/>
                                        <RichTextEditor key={"result" + this.loading} className="expected-result"
                                                        defaultValue={testStep.expectedResult}
                                                        onChange={(value) => testStep.expectedResult = value}/>
                                        <Button
                                            className="copy action-icon"
                                            icon="copy"
                                            shape="circle"
                                            onClick={this.copyTestStep.bind(this, [testStep])}
                                        />
                                        <Popconfirm placement="topRight" title="Are you sure?" okText="Yes"
                                                    cancelText="No" onConfirm={this.removeTestStep.bind(this, index)}>
                                            <Button
                                                className="delete action-icon"
                                                icon="close-circle-o"
                                                shape="circle"
                                            />
                                        </Popconfirm>
                                    </div>
                                </div>
                            )}
                            <div className="spliter" style={{marginTop: "10px"}}>
                                <Button icon="plus" size="small" onClick={this.addTestStep.bind(this, -1)}
                                        className="add action-button">Add Test Step</Button>
                                <Button icon="paste" size="small" onClick={this.pasteTestStep.bind(this, -1)}
                                        className="paste action-button">Paste Test Step</Button>
                            </div>
                        </Form.Item>
                    </Form>
                    <Form layout="inline" style={{display: "flex", alignItems: "center"}}>
                        <Form.Item label="Execution Type">
                            <Radio.Group key={this.loading} size="default"
                                         defaultValue={this.testCase.executionType || "0"}
                                         onChange={(e) => this.testCase.executionType = e.target.value}>
                                <Radio.Button value="0">Manual</Radio.Button>
                                <Radio.Button value="1">Automated</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item label="Importance">
                            <Select key={this.loading} size="default" defaultValue={this.testCase.importance || "1" }
                                    style={{width: "100px"}} onChange={(value) => this.testCase.importance = value}>
                                <Select.Option value="0">High</Select.Option>
                                <Select.Option value="1">Medium</Select.Option>
                                <Select.Option value="2">Low</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="Tags">
                            <Select key={this.loading} size="default" mode="tags" notFoundContent=""
                                    defaultValue={this.testCase.tags.map((tag) => tag.value)} style={{width: "400px"}}
                                    onChange={(values) => this.testCase.tags = values.map((value) => {return {value}})}
                                    onSearch={this.searchTag}
                                    onFocus={this.searchTag.bind(this, "")}>
                                {
                                    this.possibleTags.map((tag) =>
                                        <Select.Option key={tag} value={tag}>{tag}</Select.Option>)
                                }
                            </Select>
                        </Form.Item>
                    </Form>
                    <div style={{borderTop: "1px #d9d9d9 solid", padding: "20px 0"}}>
                        <Button type="primary" loading={this.saving} onClick={this.save}>Save</Button>
                        <Button style={{marginLeft: "20px"}}>Cancel</Button>
                    </div>
                </div>
            </Spin>
        );
    };
<commit_msg>Fix react key warning.<commit_after>import React, {Component} from "react";
import {observer} from "mobx-react";
import {observable, toJS} from "mobx";
import {Spin, Row, Col, Form, Button, Icon, Input, message, Popconfirm, Select, Radio} from "antd";
import axios from "axios";
import RichTextEditor from "shared/RichTextEditor";
import guid from "shared/guid";
import clipboard from "shared/clipboard";
import "./TestCaseEditorPanel.css";

@observer
class TestCaseEditorPanel extends Component {
    @observable testCase = {executionType: "0", importance: "1", testSteps: [], tags: []};
    @observable loading = false;
    @observable saving = false;
    @observable possibleTags = [];

    componentDidMount = () => {
        this.loading = true;
        axios.get("/api/case/" + this.props.testCaseId).then((response) => {
            let testCase = response.data;
            testCase.testSteps.map((testStep) => testStep.guid = guid());
            testCase.executionType = testCase.executionType.toString();
            testCase.importance = testCase.importance.toString();
            this.testCase = testCase;
            this.loading = false;
        })
    };

    render = () => {
        return (
            <Spin spinning={this.loading}>
                <div className="test-case-editor">
                    <Form layout="vertical">
                        <Form.Item label="Name" validateStatus="error">
                            <Input key={this.loading} size="default" style={{width: "45%"}}
                                   defaultValue={this.testCase.name}
                                   onChange={(e) => this.testCase.name = e.target.value}/>
                        </Form.Item>
                        <Form.Item label="Summary">
                            <RichTextEditor key={this.loading} defaultValue={this.testCase.summary}
                                            onChange={(value) => this.testCase.summary = value}/>
                        </Form.Item>
                        <Form.Item label="Precondition">
                            <RichTextEditor key={this.loading} defaultValue={this.testCase.precondition}
                                            onChange={(value) => this.testCase.precondition = value}/>
                        </Form.Item>
                        <Form.Item label="Test Steps">
                            {this.testCase.testSteps.map((testStep, index) =>
                                <div key={testStep.guid}>
                                    <div className="spliter-wrapper">
                                        <div className="spliter">
                                            <Button icon="plus" size="small"
                                                    onClick={this.addTestStep.bind(this, index)}
                                                    className="add action-button">Add Test Step</Button>
                                            <Button icon="paste" size="small"
                                                    onClick={this.pasteTestStep.bind(this, index)}
                                                    className="paste action-button">Paste Test Step</Button>
                                        </div>
                                    </div>
                                    <div className="test-step">
                                        <RichTextEditor key={"action" + this.loading} className="action"
                                                        defaultValue={testStep.action}
                                                        onChange={(value) => testStep.action = value}/>
                                        <RichTextEditor key={"result" + this.loading} className="expected-result"
                                                        defaultValue={testStep.expectedResult}
                                                        onChange={(value) => testStep.expectedResult = value}/>
                                        <Button
                                            className="copy action-icon"
                                            icon="copy"
                                            shape="circle"
                                            onClick={this.copyTestStep.bind(this, [testStep])}
                                        />
                                        <Popconfirm placement="topRight" title="Are you sure?" okText="Yes"
                                                    cancelText="No" onConfirm={this.removeTestStep.bind(this, index)}>
                                            <Button
                                                className="delete action-icon"
                                                icon="close-circle-o"
                                                shape="circle"
                                            />
                                        </Popconfirm>
                                    </div>
                                </div>
                            )}
                            <div className="spliter" style={{marginTop: "10px"}}>
                                <Button icon="plus" size="small" onClick={this.addTestStep.bind(this, -1)}
                                        className="add action-button">Add Test Step</Button>
                                <Button icon="paste" size="small" onClick={this.pasteTestStep.bind(this, -1)}
                                        className="paste action-button">Paste Test Step</Button>
                            </div>
                        </Form.Item>
                    </Form>
                    <Form layout="inline" style={{display: "flex", alignItems: "center"}}>
                        <Form.Item label="Execution Type">
                            <Radio.Group key={this.loading} size="default"
                                         defaultValue={this.testCase.executionType}
                                         onChange={(e) => this.testCase.executionType = e.target.value}>
                                <Radio.Button value="0">Manual</Radio.Button>
                                <Radio.Button value="1">Automated</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item label="Importance">
                            <Select key={this.loading} size="default" defaultValue={this.testCase.importance}
                                    style={{width: "100px"}} onChange={(value) => this.testCase.importance = value}>
                                <Select.Option value="0">High</Select.Option>
                                <Select.Option value="1">Medium</Select.Option>
                                <Select.Option value="2">Low</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="Tags">
                            <Select key={this.loading} size="default" mode="tags" notFoundContent=""
                                    defaultValue={this.testCase.tags.map((tag) => tag.value)} style={{width: "400px"}}
                                    onChange={(values) => this.testCase.tags = values.map((value) => {return {value}})}
                                    onSearch={this.searchTag}
                                    onFocus={this.searchTag.bind(this, "")}>
                                {
                                    this.possibleTags.map((tag) =>
                                        <Select.Option key={tag} value={tag}>{tag}</Select.Option>)
                                }
                            </Select>
                        </Form.Item>
                    </Form>
                    <div style={{borderTop: "1px #d9d9d9 solid", padding: "20px 0"}}>
                        <Button type="primary" loading={this.saving} onClick={this.save}>Save</Button>
                        <Button style={{marginLeft: "20px"}}>Cancel</Button>
                    </div>
                </div>
            </Spin>
        );
    };

{'fraction_non_alphanumeric': 0.11228721757969669, 'fraction_numerical': 0.0034664190653048593, 'mean_word_length': 1.0273560045175054, 'pattern_counts': {'":': 0, '<': 149, '<?xml version=': 0, '>': 181, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 148, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4253105', 'n_tokens_mistral': 3392, 'n_tokens_neox': 3264, 'n_words': 612}