From 1d396c0659f9ecf2e8436da9b13ca68394506ab0 Mon Sep 17 00:00:00 2001 From: Kim Lan Phan Hoang Date: Thu, 19 Dec 2024 11:59:36 +0100 Subject: [PATCH] feat: add description to tag modal (#1599) * feat: add description to tag modal * refactor: apply PR requested changes --- .../input/MultiSelectTagChipInput.tsx | 3 +++ .../publish/customizedTags/CustomizedTags.tsx | 22 ++++++++++++++++++- .../publish/customizedTags/useTagsManager.tsx | 2 +- src/config/constants.ts | 2 ++ src/langs/constants.ts | 4 ++++ src/langs/en.json | 6 ++++- src/langs/fr.json | 6 ++++- 7 files changed, 41 insertions(+), 4 deletions(-) diff --git a/src/components/input/MultiSelectTagChipInput.tsx b/src/components/input/MultiSelectTagChipInput.tsx index 6a846fd34..4b03f7f84 100644 --- 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 index 77b43467e..cc4bf6bb3 100644 --- a/src/components/item/publish/customizedTags/CustomizedTags.tsx +++ b/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={ + + + ), + }} + /> + diff --git a/src/components/item/publish/customizedTags/useTagsManager.tsx b/src/components/item/publish/customizedTags/useTagsManager.tsx index f9e465f00..e530dfcbc 100644 --- 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) => { - if (valueIsValid(currentValue) && !valueExist(tag)) { + if (valueIsValid(tag.name) && !valueExist(tag)) { addTag({ itemId, tag }); resetCurrentValue(); diff --git a/src/config/constants.ts b/src/config/constants.ts index f48bdb00d..f4dc20283 100644 --- a/src/config/constants.ts +++ b/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; diff --git a/src/langs/constants.ts b/src/langs/constants.ts index 5017c3607..174b8d843 100644 --- 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 index c09db7cd6..dbe7d822e 100644 --- a/src/langs/en.json +++ b/src/langs/en.json @@ -511,5 +511,9 @@ "DELETE_GUESTS_MODAL_CONTENT": "I confirm deleting <1>permanently 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.", + "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 index cd4c29f14..069eab3cb 100644 --- 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 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.", + "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" }