feat: add description to tag modal (#1599)

* feat: add description to tag modal

* refactor: apply PR requested changes

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': {

src/components/item/publish/customizedTags/CustomizedTags.tsx

@@ -1,9 +1,12 @@
+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';
 
 import { MultiSelectTagChipInput } from '@/components/input/MultiSelectTagChipInput';
+import { TAGS_DOCUMENTATION } from '@/config/constants';
 import { useBuilderTranslation } from '@/config/i18n';
 import {
   ITEM_TAGS_OPEN_MODAL_BUTTON_CY,
@@ -44,16 +47,33 @@ export const CustomizedTags = ({ item }: Props): JSX.Element => {
         isOpen={isOpen}
         modalContent={
           <Stack gap={2}>
+            <Typography>
+              <Trans
+                i18nKey={BUILDER.TAGS_DESCRITPION}
+                t={t}
+                components={{
+                  1: (
+                    <a
+                      href={TAGS_DOCUMENTATION}
+                      aria-label="tags documentation"
+                    />
+                  ),
+                }}
+              />
+            </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>

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();

src/config/constants.ts

@@ -148,6 +148,8 @@ export const EXPORT_CSV_HEADERS = [
 // TODO: refer from specific endpoint /tutorials?
 export const TUTORIALS_LINK =
   'https://player.graasp.org/9d80d81f-ec9d-4bfb-836a-1c6b125aef2f';
+export const TAGS_DOCUMENTATION =
+  'https://graasp.github.io/docs/user/library/tags/';
 
 export const SHORT_LINK_ID_MAX_LENGTH = 10;
 export const SHORT_LINK_API_CALL_DEBOUNCE_MS = 500;

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',
 };

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 keywords or terms 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 if your collection is published. 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"
 }

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 mots-clés ou des termes qui peuvent être attachés aux éléments. Ils permettent de décrire le sujet, contexte, projet, ou l'audience de votre collection. Ils aident les autres utilisateurs à trouver votre contenu quand ils cherchent dans la librairie, si votre collection est publiée. Vous pouvez en apprendre plus sur les tags dans <1>la documentation</1>.",
+  "TAGS_DISCIPLINE_PLACEHOLDER": "Exemple: mathématiques, histoire, biologie",
+  "TAGS_LEVEL_PLACEHOLDER": "Exemple: école primaire, université, école préparatoire",
+  "TAGS_RESOURCE_TYPE_PLACEHOLDER": "Exemple: article, vidéo, quiz"
 }