diff --git a/i18n/en.json b/i18n/en.json index 3fac79742..9b081605a 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -23,6 +23,7 @@ "Press key to create the team": "Press to create the team.", "Team with title already exists": "Team with title already exists. Please, try to use another title.", "Team with key already exists": "Team with key already exists. Please, try to use another key.", + "Key must be 3 or longer characters": "Key must be 3 or longer characters", "Perfect! Issues in your team will look like": "Perfect! Issues in your team will look like: #-42, #-911.", "Flow": "Flow", "Flow or state title": "Flow or state title" @@ -73,6 +74,7 @@ "Press key to create the project": "Press to create the project.", "Project with key already exists": "Project with key already exists. Please, try to use another key.", "Perfect! Issues in your project will look like": "Perfect! Issues in your project will look like: #-42, #-911.", + "Key must be 3 or longer characters": "Key must be 3 or longer characters", "Assign": "Assign", "Enter name or email": "Enter name or email", "Flow": "Flow", diff --git a/i18n/ru.json b/i18n/ru.json index 5c38827c0..a967544d4 100644 --- a/i18n/ru.json +++ b/i18n/ru.json @@ -23,6 +23,7 @@ "Press key to create the team": "Нажми чтобы создать команду.", "Project with title already exists": "Команда с названием уже существует. Попробуй другое.", "Team with key already exists": "Команда с ключом уже существует. Попробуй другой.", + "Key must be 3 or longer characters": "Ключ не может быть короче 3 символов", "Perfect! Issues in your team will look like": "Супер! Задачи в твоей команде будут выглядеть примерно так: #-42, #-911.", "Flow": "Флоу", "Flow or state title": "Модель или статус" @@ -72,6 +73,7 @@ "Press key to create the project": "Нажми чтобы создать проект.", "Project with key already exists": "Проект с ключом уже существует. Попробуйте любой другой.", "Perfect! Issues in your project will look like": "Супер! Задачи в вашем проекте будут выглядеть примерно так: #-42, #-911.", + "Key must be 3 or longer characters": "Ключ не может быть короче 3 символов", "Assign": "Ответственный", "Enter name or email": "Имя или почта", "Flow": "Флоу", diff --git a/src/components/ProjectCreateForm.tsx b/src/components/ProjectCreateForm.tsx index 7a7e9f0bb..c6610b924 100644 --- a/src/components/ProjectCreateForm.tsx +++ b/src/components/ProjectCreateForm.tsx @@ -88,6 +88,7 @@ const ProjectCreateForm: React.FC = () => { const [focusedInput, setFocusedInput] = useState(false); const [hoveredInput, setHoveredInput] = useState(false); const [busy, setBusy] = useState(false); + const [dirtyKey, setDirtyKey] = useState(false); const schema = createProjectSchemaProvider(t); type ProjectFormType = z.infer; @@ -117,14 +118,18 @@ const ProjectCreateForm: React.FC = () => { useDebouncedEffect( () => { - setValue('key', titleWatcher && titleWatcher !== '' ? keyPredictor(titleWatcher) : ''); + if (!dirtyKey && titleWatcher && titleWatcher !== '') { + setValue('key', keyPredictor(titleWatcher)); + } }, 300, [setValue, titleWatcher], ); + const isKeyEnoughLength = Boolean(keyWatcher?.length >= 3); const { data: flowData } = useSWR('flow', () => flowFetcher(user)); - const { data: projectData } = useSWR(keyWatcher && keyWatcher !== '' ? [user, keyWatcher] : null, projectFetcher); + const { data: projectData } = useSWR(isKeyEnoughLength ? [user, keyWatcher] : null, projectFetcher); + const isKeyUnique = Boolean(projectData?.project === null || !projectData); useEffect(() => { if (flowData?.flowRecommended) { @@ -145,7 +150,10 @@ const ProjectCreateForm: React.FC = () => { [router, createProject, t], ); - const isProjectKeyAvailable = Boolean(projectData?.project === null || !projectData); + const onKeyDirty = useCallback(() => { + setDirtyKey(true); + }, []); + const richProps = { b: (c: React.ReactNode) => ( @@ -155,6 +163,13 @@ const ProjectCreateForm: React.FC = () => { key: () => keyWatcher, }; + // eslint-disable-next-line no-nested-ternary + const tooltip = isKeyEnoughLength + ? isKeyUnique + ? t.rich('create.Perfect! Issues in your project will look like', richProps) + : t.rich('create.Project with key already exists', richProps) + : t('create.Key must be 3 or longer characters'); + return ( <> @@ -162,7 +177,7 @@ const ProjectCreateForm: React.FC = () => { -
+ { > @@ -236,7 +246,7 @@ const ProjectCreateForm: React.FC = () => {