feat: ANT-2579 - Create project v2

src/components/common/modal/ProjectCreationModal.tsx

@@ -75,7 +75,7 @@ export const ProjectCreationModal = ({ onClose }: ProjectCreationModalProps) =>
     <RdsModal size="small">
       <RdsModal.Title onClose={onClose}>{t('home.@new_project')}</RdsModal.Title>
       <RdsModal.Content>
-        <div className="flex w-7/12 flex-col items-start gap-4">
+        <div className="flex w-8/12 flex-col items-start gap-2">
           <RdsInputText
             label="Name"
             value={name}
@@ -88,22 +88,23 @@ export const ProjectCreationModal = ({ onClose }: ProjectCreationModalProps) =>
             maxLength={40}
             autoFocus={true}
           />
-          <RdsInputTextArea
-            label="Description"
-            value={description}
-            onChange={(t) => {
-              if (t.length <= 500) setDescription(t || '');
-            }}
-            maxLength={500}
-            placeHolder="Add a few lines to describe your project..."
-          />
+          <div className="flex w-full [&_textarea]:min-h-[300px] [&_textarea]:resize-none">
+            <RdsInputTextArea
+              label="Description"
+              value={description}
+              onChange={(t) => {
+                if (t.length <= 500) setDescription(t || '');
+              }}
+              maxLength={500}
+              placeHolder="Add a few lines to describe your project..."
+            />
+          </div>
           <KeywordsInput
             keywords={keywords}
             setKeywords={setKeywords}
             maxNbKeywords={6}
             maxNbCharacters={15}
             minNbCharacters={3}
-            width={'w-3/4'}
           />
         </div>
       </RdsModal.Content>

src/pages/pegase/studies/KeywordsInput.tsx

@@ -33,6 +33,9 @@ const KeywordsInput: React.FC<KeywordsInputProps> = ({
   const [suggestedKeywords, setSuggestedKeywords] = useState<string[]>([]);
 
   const handleKeywordChange = async (value: string) => {
+    if (value.length > maxNbCharacters) {
+      return;
+    }
     setKeywordInput(value);
     setErrorMessage(''); // Clear error message when input changes
     try {
@@ -69,24 +72,41 @@ const KeywordsInput: React.FC<KeywordsInputProps> = ({
 
   const clearAllKeywords = () => {
     setKeywords([]);
+    setErrorMessage('');
+    setKeywordInput('');
   };
 
   const handleRemoveKeyword = (index: number) => {
     setKeywords((prevKeywords) => prevKeywords.filter((_, i) => i !== index));
   };
 
+  const shouldAddKeywordButton = (input: string): boolean => {
+    if (!input) {
+      return false;
+    } else {
+      if (minNbCharacters) {
+        return input.length >= minNbCharacters;
+      } else if (minNbCharacters && maxNbCharacters) {
+        return input.length >= minNbCharacters && input.length <= maxNbCharacters;
+      }
+    }
+  };
+
   return (
     <div className={clsx(width ?? 'w-full', 'flex min-h-18 flex-col items-start justify-start')}>
       <div className="relative flex w-full">
-        <div className="flex w-full items-center gap-4">
-          <RdsInputText
-            label="Keywords"
-            value={keywordInput}
-            onChange={handleKeywordChange}
-            placeHolder="Add a keyword"
-            variant="outlined"
-          />
-          {keywordInput && (minNbCharacters ? keywordInput.length >= minNbCharacters : true) && (
+        <div className="flex w-full items-center gap-2">
+          <div className="max-w-3/4 flex">
+            <RdsInputText
+              label="Keywords"
+              value={keywordInput}
+              onChange={handleKeywordChange}
+              placeHolder="Add a keyword"
+              variant="outlined"
+              maxLength={maxNbCharacters ?? null}
+            />
+          </div>
+          {shouldAddKeywordButton(keywordInput) && (
             <RdsButton
               onClick={() => handleAddKeyword()}
               icon={RdsIconId.Add}

src/shared/i18n/en.json

@@ -59,11 +59,6 @@
     "@keyword_length_error": "Keyword must be between {{min}} and {{max}} characters",
     "@keyword_minimum_error": "Keyword must be at least {{min}} characters",
     "@keyword_maximum_error": "Keyword must not exceed {{max}} characters",
-    "@keyword_max_keys_errors": "Cannot add more than ${maxNbKey} keywords`"
-  },
-  "study": {
-    "@open": "Open",
-    "@duplicate": "Duplicate",
-    "@delete": "Delete"
+    "@keyword_max_keys_errors": "Cannot add more than {{maxNbKey}} keywords"
   }
 }

src/shared/i18n/fr.json

@@ -55,13 +55,8 @@
   "projectModal": {
     "@keyword_already_exists": "Le mot-clé existe déjà",
     "@keyword_length_error": "Le mot-clé doit avoir entre {{min}} et {{max}} lettres",
-    "@keyword_minimum_error": "Le mot-clé doit avoir à minumum {{min}} lettres",
+    "@keyword_minimum_error": "Le mot-clé doit avoir à minimum {{min}} lettres",
     "@keyword_maximum_error": "Le mot-clé ne doit pas dépasser {{max}} lettres",
-    "@keyword_max_keys_errors": "Il n'est pas possible d'ajouter plus que ${maxNbKey} mot-clés`"
-  },
-  "study": {
-    "@open": "Ouvrir",
-    "@duplicate": "Dupliquer",
-    "@delete": "Effacer"
+    "@keyword_max_keys_errors": "Il n'est pas possible d'ajouter plus que {{maxNbKey}} mot-clés"
   }
 }