feat: add description to tag modal

graasp · Dec 18, 2024 · c2d942b · c2d942b
1 parent d9aa2b2
commit c2d942b
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 4 deletions.
diff --git a/src/components/input/MultiSelectTagChipInput.tsx b/src/components/input/MultiSelectTagChipInput.tsx
@@ -25,11 +25,13 @@ import useTagsManager from '../item/publish/customizedTags/useTagsManager';
 type Props = {
   itemId: DiscriminatedItem['id'];
   tagCategory: TagCategory;
+  helpertext?: string;
 };
 
 export const MultiSelectTagChipInput = ({
   itemId,
   tagCategory,
+  helpertext,
 }: Props): JSX.Element | null => {
   const { t } = useBuilderTranslation();
   const { t: translateEnums } = useEnumsTranslation();
@@ -89,6 +91,7 @@ export const MultiSelectTagChipInput = ({
           value: currentValue,
         },
       }}
+      helperText={helpertext}
       sx={{
         // Avoid to resize the textfield on hover when next tag will be on new line.
         '& .MuiAutocomplete-input': {

diff --git a/src/components/item/publish/customizedTags/CustomizedTags.tsx b/src/components/item/publish/customizedTags/CustomizedTags.tsx
@@ -1,5 +1,7 @@
+import { Trans } from 'react-i18next';
+
 import EditIcon from '@mui/icons-material/Edit';
-import { Chip, Stack } from '@mui/material';
+import { Chip, Stack, Typography } from '@mui/material';
 
 import { DiscriminatedItem, TagCategory } from '@graasp/sdk';
 
@@ -44,16 +46,26 @@ export const CustomizedTags = ({ item }: Props): JSX.Element => {
         isOpen={isOpen}
         modalContent={
           <Stack gap={2}>
+            <Typography variant="body1">
+              <Trans
+                i18nKey={BUILDER.TAGS_DESCRITPION}
+                t={t}
+                components={{ 1: <a href="graasp.org" aria-label="wef" /> }}
+              />
+            </Typography>
             <MultiSelectTagChipInput
               itemId={item.id}
               tagCategory={TagCategory.Discipline}
+              helpertext={BUILDER.TAGS_DISCIPLINE_PLACEHOLDER}
             />
             <MultiSelectTagChipInput
               itemId={item.id}
+              helpertext={BUILDER.TAGS_LEVEL_PLACEHOLDER}
               tagCategory={TagCategory.Level}
             />
             <MultiSelectTagChipInput
               itemId={item.id}
+              helpertext={t(BUILDER.TAGS_RESOURCE_TYPE_PLACEHOLDER)}
               tagCategory={TagCategory.ResourceType}
             />
           </Stack>

diff --git a/src/components/item/publish/customizedTags/useTagsManager.tsx b/src/components/item/publish/customizedTags/useTagsManager.tsx
@@ -77,7 +77,7 @@ export const useTagsManager = ({ itemId }: Props): UseMultiSelectChipInput => {
   };
 
   const addValue = (tag: Pick<Tag, 'category' | 'name'>) => {
-    if (valueIsValid(currentValue) && !valueExist(tag)) {
+    if (valueIsValid(tag.name) && !valueExist(tag)) {
       addTag({ itemId, tag });
 
       resetCurrentValue();

diff --git a/src/langs/constants.ts b/src/langs/constants.ts
@@ -614,4 +614,8 @@ export const BUILDER = {
   DELETE_GUESTS_MODAL_CONTENT: 'DELETE_GUESTS_MODAL_CONTENT',
   DELETE_ITEM_LOGIN_SCHEMA_ALERT_TEXT: 'DELETE_ITEM_LOGIN_SCHEMA_ALERT_TEXT',
   CREATE_FOLDER_BUTTON_TEXT: 'CREATE_FOLDER_BUTTON_TEXT',
+  TAGS_DESCRITPION: 'TAGS_DESCRITPION',
+  TAGS_DISCIPLINE_PLACEHOLDER: 'TAGS_DISCIPLINE_PLACEHOLDER',
+  TAGS_LEVEL_PLACEHOLDER: 'TAGS_LEVEL_PLACEHOLDER',
+  TAGS_RESOURCE_TYPE_PLACEHOLDER: 'TAGS_RESOURCE_TYPE_PLACEHOLDER',
 };
diff --git a/src/langs/en.json b/src/langs/en.json
@@ -511,5 +511,9 @@
   "DELETE_GUESTS_MODAL_CONTENT": "I confirm deleting <1>permanently</1> the following readers and their data:",
   "DELETE_GUESTS_MODAL_DELETE_BUTTON": "Delete permanently",
   "ADD_TAG_OPTION_BUTTON_TEXT": "Add {{value}}",
-  "CREATE_FOLDER_BUTTON_TEXT": "Create Folder"
+  "CREATE_FOLDER_BUTTON_TEXT": "Create Folder",
+  "TAGS_DESCRITPION": "Tags are pieces of data that you can attach to your items. They describe the subject, context, project, or intended audience of your items. They help other users to find your content when they search in the library. You can find out more about tags in <1>the documentation</1>.",
+  "TAGS_DISCIPLINE_PLACEHOLDER": "Example: mathematics, history, biology",
+  "TAGS_LEVEL_PLACEHOLDER": "Example: elementary, high school, undergraduate",
+  "TAGS_RESOURCE_TYPE_PLACEHOLDER": "Example: article, video, quiz"
 }
diff --git a/src/langs/fr.json b/src/langs/fr.json
@@ -511,5 +511,9 @@
   "DELETE_GUESTS_MODAL_CONTENT": "Je confirme la suppression <1>définitive</1> des lecteurs suivants et de leurs données :",
   "DELETE_GUESTS_MODAL_DELETE_BUTTON": "Supprimer définitivement",
   "ADD_TAG_OPTION_BUTTON_TEXT": "Ajouter {{value}}",
-  "CREATE_FOLDER_BUTTON_TEXT": "Nouveau Dossier"
+  "CREATE_FOLDER_BUTTON_TEXT": "Nouveau Dossier",
+  "TAGS_DESCRITPION": "Les tags sont des bouts d'informations qui peuvent être attachés aux éléments. Ils permettent de décrire le sujet, contexte, projet, ou l'audience attendue pour leurs éléments. Ils aident les autres utilisateurs à trouver votre contenu quand ils cherchent dans la librarie. Vous pouvez en apprendre plus sur les tags dans <1>la documentation</1>.",
+  "TAGS_DISCIPLINE_PLACEHOLDER": "Exemple: mathematics, history, biology",
+  "TAGS_LEVEL_PLACEHOLDER": "Exemple: elementary, high school, undergraduate",
+  "TAGS_RESOURCE_TYPE_PLACEHOLDER": "Exemple: article, video, quiz"
 }