[#415] added keyword field highligh on empty search (#423)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/components/Menubar/EventSearchBar.tsx

@@ -56,7 +56,7 @@ export default function SearchBar() {
 
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const filterOpen = Boolean(anchorEl);
-
+  const [filterError, setFilterError] = useState(false);
   const searchWidth = {
     xs: "10vw",
     sm: "20vw",
@@ -142,6 +142,7 @@ export default function SearchBar() {
       attendees: [] as userAttendee[],
     });
     setAnchorEl(null);
+    setFilterError(false);
   };
 
   const handleContactSelect = (_event: any, contacts: User[]) => {
@@ -174,9 +175,11 @@ export default function SearchBar() {
     const cleanedQuery = buildQuery(searchQuery, filters);
     if (cleanedQuery) {
       dispatch(searchEventsAsync(cleanedQuery));
+      dispatch(setView("search"));
+      setAnchorEl(null);
+    } else {
+      filterOpen && setFilterError(true);
     }
-    dispatch(setView("search"));
-    setAnchorEl(null);
   };
 
   useEffect(() => {
@@ -446,11 +449,16 @@ export default function SearchBar() {
                 </InputLabel>
                 <TextField
                   fullWidth
+                  error={filterError}
+                  helperText={filterError ? t("search.error.emptySearch") : ""}
                   placeholder={t("search.keywordsPlaceholder")}
                   value={filters.keywords}
-                  onChange={(e) =>
+                  onChange={(e) => {
-                    handleFilterChange("keywords", e.target.value)
+                    handleFilterChange("keywords", e.target.value);
-                  }
+                    if (e.target.value.trim()) {
+                      setFilterError(false);
+                    }
+                  }}
                   size="small"
                 />
               </Box>
@@ -468,9 +476,12 @@ export default function SearchBar() {
                 </InputLabel>
                 <UserSearch
                   attendees={filters.organizers}
-                  setAttendees={(users: userAttendee[]) =>
+                  setAttendees={(users: userAttendee[]) => {
-                    handleFilterChange("organizers", users)
+                    handleFilterChange("organizers", users);
-                  }
+                    if (users.length > 0) {
+                      setFilterError(false);
+                    }
+                  }}
                 />
               </Box>
 
@@ -487,9 +498,12 @@ export default function SearchBar() {
                 </InputLabel>
                 <UserSearch
                   attendees={filters.attendees}
-                  setAttendees={(users: userAttendee[]) =>
+                  setAttendees={(users: userAttendee[]) => {
-                    handleFilterChange("attendees", users)
+                    handleFilterChange("attendees", users);
-                  }
+                    if (users.length > 0) {
+                      setFilterError(false);
+                    }
+                  }}
                 />
               </Box>
             </Stack>

src/locales/en.json

@@ -65,7 +65,8 @@
     "participants": "Participants",
     "noResults": "No events found",
     "resultsTitle": "Search Results",
-    "noResultsSubtitle": "Try adjusting your filters or search terms."
+    "noResultsSubtitle": "Try adjusting your filters or search terms.",
+    "error": { "emptySearch": "Try adding keywords or other filters." }
   },
   "calendarPopover": {
     "tabs": {

src/locales/fr.json

@@ -65,7 +65,10 @@
     "participants": "Participants",
     "noResults": "Aucun résultat",
     "resultsTitle": "Résultats de la recherche",
-    "noResultsSubtitle": "Essayez de changer vos filtres ou termes recherchés."
+    "noResultsSubtitle": "Essayez de changer vos filtres ou termes recherchés.",
+    "error": {
+      "emptySearch": "Essayez d'ajouter des mots clés ou d'autres filtres."
+    }
   },
   "calendarPopover": {
     "tabs": {

src/locales/ru.json

@@ -65,7 +65,10 @@
     "participants": "Участники",
     "noResults": "Результаты не найдены",
     "resultsTitle": "Результаты поиска",
-    "noResultsSubtitle": "Попробуйте изменить фильтры или условия поиска."
+    "noResultsSubtitle": "Попробуйте изменить фильтры или условия поиска.",
+    "error": {
+      "emptySearch": "Попробуйте добавить ключевые слова или другие фильтры."
+    }
   },
   "calendarPopover": {
     "tabs": {

src/locales/vi.json

@@ -65,7 +65,8 @@
     "participants": "Người tham gia",
     "noResults": "Không tìm thấy kết quả",
     "resultsTitle": "Kết quả tìm kiếm",
-    "noResultsSubtitle": "Hãy thử điều chỉnh bộ lọc hoặc thuật ngữ tìm kiếm của bạn."
+    "noResultsSubtitle": "Hãy thử điều chỉnh bộ lọc hoặc thuật ngữ tìm kiếm của bạn.",
+    "error": { "emptySearch": "Hãy thử thêm từ khóa hoặc các bộ lọc khác." }
   },
   "calendarPopover": {
     "tabs": {