<commit_before>import "./NewTeam.scss";
import {Page} from "../components/Page";
import {SubHeader} from "../components/SubHeader";
import {BreadCrumb} from "../components/BreadCrumb";
import {useNavigate, useParams} from "react-router-dom";
import React, {useEffect, useState} from "react";
import I18n from "i18n-js";
import "./TeamDetails.scss";
import {getTeamDetail, saveTeam, teamExistsByName} from "../api";
import TooltipIcon from "../components/Tooltip";
import InputField from "../components/InputField";
import ErrorIndicator from "../components/ErrorIndicator";
import {isEmpty, stopEvent} from "../utils/utils";
import {ReactComponent as privateTeam} from "../icons/allowances-no-talking.svg";
import {ReactComponent as publicTeam} from "../icons/human-resources-offer-employee-1.svg";
import {ButtonContainer} from "../components/ButtonContainer";
import {Button} from "../components/Button";
import {EmailField} from "../components/EmailField";
import {setFlash} from "../flash/events";
import {ROLES} from "../utils/roles";
import {SpinnerField} from "../components/SpinnerField";
import {MarkDown} from "../components/MarkDown";
import {CheckBox} from "../components/CheckBox";

const visibilities = [
    {name: "public", icon: publicTeam},
    {name: "private", icon: privateTeam}
];

const NewTeam = ({user}) => {
    const params = useParams();
    const navigate = useNavigate();
    const [team, setTeam] = useState({viewable: true, publicLinkDisabled: true});
    const [loaded, setLoaded] = useState(false);
    const [backupEmails, setBackupEmails] = useState([]);
    const [errors, setErrors] = useState({});
    const [nameExist, setNameExists] = useState(false);
    const [initial, setInitial] = useState(true);

    useEffect(() => {
        if (user.person.guest) {
            navigate("/404");
        }
        const {teamId} = params;
        if (teamId) {
            getTeamDetail(teamId).then(res => {
                setTeam(res);
                setLoaded(true);
            })
        } else {
            setLoaded(true);
        }
    }, [params, user, navigate])

    const viewableActive = name => (name === "public" && team.viewable) || (name === "private" && !team.viewable)

    const isValid = () => {
        const hasErrors = Object.keys(errors).some(attr => errors[attr]);
        return !hasErrors && !nameExist && !isEmpty(team.name);
    }

    const submit = () => {
        setInitial(false);
        setErrors([]);
        if (isValid()) {
            const emailMap = backupEmails.reduce((acc, val) => {
                acc[val] = ROLES.ADMIN;
                return acc;
            }, {});
            saveTeam({...team, emails: emailMap}).then(res => {
                setFlash(I18n.t(`newTeam.flash.${team.id ? "updated" : "created"}`, {name: team.name}));
                navigate(`/team-details/${res.id}${team.id ? "" : "/members?initial=true"}`);
            })
        }
    }

    const addEmail = emails => {
        setBackupEmails(backupEmails.concat(emails));
        setTimeout(() => document.getElementById("invitation-messsage").focus(), 75);
    }

    const removeMail = email => e => {
        stopEvent(e);
        const newBackupEmails = backupEmails.filter(mail => mail !== email);
        setBackupEmails(newBackupEmails);
    };

    if (!loaded) {
        return <SpinnerField/>;
    }
    const breadCrumbs = [{name: I18n.t("breadcrumbs.myTeams"), to: "/my-teams"}];
    if (team.id) {
        breadCrumbs.push({name: team.name, to: `/team-details/${team.id}`});
    }
    breadCrumbs.push({name: I18n.t(`breadcrumbs.${team.id ? "editTeam" : "newTeam"}`, {name: ""})});

    return (
        <>
            <SubHeader>
                <BreadCrumb paths={breadCrumbs}/>
            </SubHeader>
            <SubHeader child={true}>
                <h1>{I18n.t(`breadcrumbs.${team.id ? "editTeam" : "newTeam"}`, {name: team.name})}</h1>
            </SubHeader>
            <Page>
                <div className="new-team">
                    <InputField value={team.name || ""}
                                onChange={e => {
                                    setTeam({...team, name: e.target.value.replace(/[^\w\s-]/gi, "")});
                                    setNameExists(false)
                                }}
                                toolTip={team.id ? I18n.t("newTeam.tooltips.immutableName") : ""}
                                disabled={team.id}
                                placeholder={I18n.t("newTeam.placeholders.name")}
                                onBlur={e => team.id && teamExistsByName(e.target.value).then(exists => setNameExists(exists))}
                                error={nameExist || (!initial && isEmpty(team.name))}
                                name={I18n.t("newTeam.name")}/>
                    {(!initial && isEmpty(team.name)) &&
                    <ErrorIndicator msg={I18n.t("forms.required", {
                        attribute: I18n.t("newTeam.name")
                    })}/>}

                    {nameExist &&
                    <ErrorIndicator msg={I18n.t("forms.alreadyExists", {
                        object: I18n.t("newTeam.object").toLowerCase(),
                        attribute: I18n.t("newTeam.name").toLowerCase(),
                        value: team.name
                    })}/>}

                    <div className="input-field">
                        <TooltipIcon tooltip={I18n.t("newTeam.tooltips.description")} name="description"
                                     label={I18n.t("newTeam.description")}/>
                        <MarkDown markdown={team.description || ""}
                                  onChange={val => setTeam({...team, description: val})}/>
                    </div>

                    <InputField value={team.personalNote || ""}
                                onChange={e => {
                                    setTeam({...team, personalNote: e.target.value});
                                }}
                                placeholder={I18n.t("teamDetails.personalNotesPlaceholder")}
                                multiline={true}<commit_msg>Bugfix for team name exists<commit_after>import "./NewTeam.scss";
import {Page} from "../components/Page";
import {SubHeader} from "../components/SubHeader";
import {BreadCrumb} from "../components/BreadCrumb";
import {useNavigate, useParams} from "react-router-dom";
import React, {useEffect, useState} from "react";
import I18n from "i18n-js";
import "./TeamDetails.scss";
import {getTeamDetail, saveTeam, teamExistsByName} from "../api";
import TooltipIcon from "../components/Tooltip";
import InputField from "../components/InputField";
import ErrorIndicator from "../components/ErrorIndicator";
import {isEmpty, stopEvent} from "../utils/utils";
import {ReactComponent as privateTeam} from "../icons/allowances-no-talking.svg";
import {ReactComponent as publicTeam} from "../icons/human-resources-offer-employee-1.svg";
import {ButtonContainer} from "../components/ButtonContainer";
import {Button} from "../components/Button";
import {EmailField} from "../components/EmailField";
import {setFlash} from "../flash/events";
import {ROLES} from "../utils/roles";
import {SpinnerField} from "../components/SpinnerField";
import {MarkDown} from "../components/MarkDown";
import {CheckBox} from "../components/CheckBox";

const visibilities = [
    {name: "public", icon: publicTeam},
    {name: "private", icon: privateTeam}
];

const NewTeam = ({user}) => {
    const params = useParams();
    const navigate = useNavigate();
    const [team, setTeam] = useState({viewable: true, publicLinkDisabled: true});
    const [loaded, setLoaded] = useState(false);
    const [backupEmails, setBackupEmails] = useState([]);
    const [errors, setErrors] = useState({});
    const [nameExist, setNameExists] = useState(false);
    const [initial, setInitial] = useState(true);

    useEffect(() => {
        if (user.person.guest) {
            navigate("/404");
        }
        const {teamId} = params;
        if (teamId) {
            getTeamDetail(teamId).then(res => {
                setTeam(res);
                setLoaded(true);
            })
        } else {
            setLoaded(true);
        }
    }, [params, user, navigate])

    const viewableActive = name => (name === "public" && team.viewable) || (name === "private" && !team.viewable)

    const isValid = () => {
        const hasErrors = Object.keys(errors).some(attr => errors[attr]);
        return !hasErrors && !nameExist && !isEmpty(team.name);
    }

    const submit = () => {
        setInitial(false);
        setErrors([]);
        if (isValid()) {
            const emailMap = backupEmails.reduce((acc, val) => {
                acc[val] = ROLES.ADMIN;
                return acc;
            }, {});
            saveTeam({...team, emails: emailMap}).then(res => {
                setFlash(I18n.t(`newTeam.flash.${team.id ? "updated" : "created"}`, {name: team.name}));
                navigate(`/team-details/${res.id}${team.id ? "" : "/members?initial=true"}`);
            })
        }
    }

    const addEmail = emails => {
        setBackupEmails(backupEmails.concat(emails));
        setTimeout(() => document.getElementById("invitation-messsage").focus(), 75);
    }

    const removeMail = email => e => {
        stopEvent(e);
        const newBackupEmails = backupEmails.filter(mail => mail !== email);
        setBackupEmails(newBackupEmails);
    };

    if (!loaded) {
        return <SpinnerField/>;
    }
    const breadCrumbs = [{name: I18n.t("breadcrumbs.myTeams"), to: "/my-teams"}];
    if (team.id) {
        breadCrumbs.push({name: team.name, to: `/team-details/${team.id}`});
    }
    breadCrumbs.push({name: I18n.t(`breadcrumbs.${team.id ? "editTeam" : "newTeam"}`, {name: ""})});

    return (
        <>
            <SubHeader>
                <BreadCrumb paths={breadCrumbs}/>
            </SubHeader>
            <SubHeader child={true}>
                <h1>{I18n.t(`breadcrumbs.${team.id ? "editTeam" : "newTeam"}`, {name: team.name})}</h1>
            </SubHeader>
            <Page>
                <div className="new-team">
                    <InputField value={team.name || ""}
                                onChange={e => {
                                    setTeam({...team, name: e.target.value.replace(/[^\w\s-]/gi, "")});
                                    setNameExists(false)
                                }}
                                toolTip={team.id ? I18n.t("newTeam.tooltips.immutableName") : ""}
                                disabled={team.id}
                                placeholder={I18n.t("newTeam.placeholders.name")}
                                onBlur={e => teamExistsByName(e.target.value).then(exists => setNameExists(exists))}
                                error={nameExist || (!initial && isEmpty(team.name))}
                                name={I18n.t("newTeam.name")}/>
                    {(!initial && isEmpty(team.name)) &&
                    <ErrorIndicator msg={I18n.t("forms.required", {
                        attribute: I18n.t("newTeam.name")
                    })}/>}

                    {nameExist &&
                    <ErrorIndicator msg={I18n.t("forms.alreadyExists", {
                        object: I18n.t("newTeam.object").toLowerCase(),
                        attribute: I18n.t("newTeam.name").toLowerCase(),
                        value: team.name
                    })}/>}

                    <div className="input-field">
                        <TooltipIcon tooltip={I18n.t("newTeam.tooltips.description")} name="description"
                                     label={I18n.t("newTeam.description")}/>
                        <MarkDown markdown={team.description || ""}
                                  onChange={val => setTeam({...team, description: val})}/>
                    </div>

                    <InputField value={team.personalNote || ""}
                                onChange={e => {
                                    setTeam({...team, personalNote: e.target.value});
                                }}
                                placeholder={I18n.t("teamDetails.personalNotesPlaceholder")}
                                multiline={true}
{'fraction_non_alphanumeric': 0.1598344021430311, 'fraction_numerical': 0.00681873528695511, 'mean_word_length': 1.887951242381622, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 77, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 10, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5875984', 'n_tokens_mistral': 3501, 'n_tokens_neox': 3410, 'n_words': 630}