From 072a681385f43b93644de42739fea6f0401e30c2 Mon Sep 17 00:00:00 2001
From: "pierluigi.dicianni" <pierluigi.dicianni@translated.net>
Date: Thu, 28 Nov 2024 13:15:52 +0100
Subject: [PATCH] Sentry MATECAT-3XX

---
 .../createProject/SourceLanguageSelect.js     | 13 ++++++----
 .../createProject/TargetLanguagesSelect.js    | 24 +++++++++++++++----
 public/js/cat_source/es6/pages/NewProject.js  | 15 ++++++------
 3 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/public/js/cat_source/es6/components/createProject/SourceLanguageSelect.js b/public/js/cat_source/es6/components/createProject/SourceLanguageSelect.js
index 015da4454b..2a96c178bb 100644
--- a/public/js/cat_source/es6/components/createProject/SourceLanguageSelect.js
+++ b/public/js/cat_source/es6/components/createProject/SourceLanguageSelect.js
@@ -8,8 +8,13 @@ export const SourceLanguageSelect = ({
   isRenderedInsideTab = false,
   dropdownClassName,
 }) => {
-  const {SELECT_HEIGHT, languages, sourceLang, changeSourceLanguage} =
-    useContext(CreateProjectContext)
+  const {
+    SELECT_HEIGHT,
+    languages,
+    sourceLang,
+    changeSourceLanguage,
+    projectTemplates,
+  } = useContext(CreateProjectContext)
   const {isUserLogged} = useContext(ApplicationWrapperContext)
 
   return (
@@ -22,10 +27,10 @@ export const SourceLanguageSelect = ({
       maxHeightDroplist={SELECT_HEIGHT}
       showSearchBar={true}
       options={languages}
-      activeOption={sourceLang}
+      activeOption={Object.keys(sourceLang).length ? sourceLang : undefined}
       checkSpaceToReverse={isRenderedInsideTab}
       onSelect={(option) => changeSourceLanguage(option)}
-      isDisabled={!isUserLogged}
+      isDisabled={!isUserLogged || !projectTemplates.length}
     >
       {({name, code}) => ({
         row: (
diff --git a/public/js/cat_source/es6/components/createProject/TargetLanguagesSelect.js b/public/js/cat_source/es6/components/createProject/TargetLanguagesSelect.js
index dcb6206a62..6976c5bdbb 100644
--- a/public/js/cat_source/es6/components/createProject/TargetLanguagesSelect.js
+++ b/public/js/cat_source/es6/components/createProject/TargetLanguagesSelect.js
@@ -4,22 +4,29 @@ import ChevronDown from '../../../../../img/icons/ChevronDown'
 import {useRef} from 'react'
 
 export const TargetLanguagesSelect = () => {
-  const {targetLangs, setIsOpenMultiselectLanguages, languages} =
-    useContext(CreateProjectContext)
+  const {
+    targetLangs,
+    setIsOpenMultiselectLanguages,
+    languages,
+    projectTemplates,
+  } = useContext(CreateProjectContext)
   const selectedItemRef = useRef()
 
   const getActiveLabel = () => targetLangs.map(({name}) => name).join(',')
   const openModal = () =>
     languages?.length > 0 && setIsOpenMultiselectLanguages(true)
 
-  return (
+  return projectTemplates.length > 0 ? (
     <div
       className="select-with-label__wrapper "
       id="target-lang"
       onClick={openModal}
     >
       <label>To</label>
-      <div className="select-with-icon__wrapper" aria-label={getActiveLabel()}>
+      <div
+        className="select-with-icon__wrapper"
+        {...(targetLangs.length > 1 && {'aria-label': getActiveLabel()})}
+      >
         <span ref={selectedItemRef} className="select select--is-multiple">
           {targetLangs.length > 1
             ? `${targetLangs.length} languages`
@@ -34,5 +41,14 @@ export const TargetLanguagesSelect = () => {
         <ChevronDown />
       </div>
     </div>
+  ) : (
+    <div className="select-with-label__wrapper">
+      <label>To</label>
+      <div className="select-with-icon__wrapper">
+        <span className="select select--is-disabled"></span>
+        <input readOnly={true} type="text" className="input--invisible" />
+        <ChevronDown />
+      </div>
+    </div>
   )
 }
diff --git a/public/js/cat_source/es6/pages/NewProject.js b/public/js/cat_source/es6/pages/NewProject.js
index d1d5a66ef0..4d82c01959 100644
--- a/public/js/cat_source/es6/pages/NewProject.js
+++ b/public/js/cat_source/es6/pages/NewProject.js
@@ -305,11 +305,11 @@ const NewProject = () => {
   const closeSettings = useCallback(() => setOpenSettings({isOpen: false}), [])
 
   const selectedTeam = useMemo(() => {
-    const team =
-      userInfo?.teams?.find(({id}) => id === currentProjectTemplate?.idTeam) ??
-      {}
+    const team = userInfo?.teams?.find(
+      ({id}) => id === currentProjectTemplate?.idTeam,
+    )
 
-    return {...team, id: team.id?.toString()}
+    return team && {...team, id: team.id?.toString()}
   }, [userInfo?.teams, currentProjectTemplate?.idTeam])
   const setSelectedTeam = useCallback(
     ({id}) =>
@@ -823,7 +823,7 @@ const NewProject = () => {
                 isDisabled={
                   !isUserLogged ||
                   userInfo?.teams.length === 1 ||
-                  !projectTemplates.length
+                  isLoadingTemplates
                 }
                 onSelect={(option) => setSelectedTeam(option)}
               />
@@ -835,7 +835,8 @@ const NewProject = () => {
             <a
               id="swaplang"
               title="Swap languages"
-              {...(isUserLogged && {onClick: swapLanguages})}
+              {...(isUserLogged &&
+                !isLoadingTemplates && {onClick: swapLanguages})}
             >
               <span>Swap languages</span>
             </a>
@@ -855,7 +856,7 @@ const NewProject = () => {
                 activeOption={subject}
                 checkSpaceToReverse={false}
                 onSelect={(option) => setSubject(option)}
-                isDisabled={!isUserLogged}
+                isDisabled={!isUserLogged || isLoadingTemplates}
               />
             </div>
             {/*TM and glossary*/}