[#367] added custom placeholder to people search (#411)

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

__test__/components/Calendar.test.tsx

@@ -364,7 +364,9 @@ describe("calendar Availability search", () => {
       renderWithProviders(<CalendarTestWrapper />, preloadedState)
     );
 
-    const input = screen.getByPlaceholderText("peopleSearch.placeholder");
+    const input = screen.getByPlaceholderText(
+      "peopleSearch.availabilityPlaceholder"
+    );
     act(() => {
       userEvent.type(input, "New");
     });
@@ -394,14 +396,16 @@ describe("calendar Availability search", () => {
       renderWithProviders(<CalendarTestWrapper />, preloadedState)
     );
 
-    const input = screen.getByPlaceholderText("peopleSearch.placeholder");
+    const input = screen.getByPlaceholderText(
+      "peopleSearch.availabilityPlaceholder"
+    );
     await act(async () => userEvent.type(input, "Alice"));
 
     const option = await screen.findByText("Alice");
     await act(async () => {
       fireEvent.click(option);
     });
-    expect(spy).not.toHaveBeenCalledWith();
+    expect(spy).not.toHaveBeenCalled();
   });
 
   it("open window with attendees filled after temp search on create event button click", async () => {
@@ -423,7 +427,9 @@ describe("calendar Availability search", () => {
       renderWithProviders(<CalendarTestWrapper />, preloadedState)
     );
 
-    const input = screen.getByPlaceholderText("peopleSearch.placeholder");
+    const input = screen.getByPlaceholderText(
+      "peopleSearch.availabilityPlaceholder"
+    );
     await act(async () => userEvent.type(input, "New"));
 
     const option = await screen.findByText("New User");
@@ -462,7 +468,9 @@ describe("calendar Availability search", () => {
       renderWithProviders(<CalendarTestWrapper />, preloadedState)
     );
 
-    const input = screen.getByPlaceholderText("peopleSearch.placeholder");
+    const input = screen.getByPlaceholderText(
+      "peopleSearch.availabilityPlaceholder"
+    );
     await act(async () => userEvent.type(input, "New"));
 
     const option = await screen.findByText("New User");

src/components/Attendees/PeopleSearch.tsx

@@ -29,13 +29,15 @@ export function PeopleSearch({
   disabled,
   freeSolo,
   onToggleEventPreview,
+  placeholder,
 }: {
   selectedUsers: User[];
   onChange: Function;
   objectTypes: string[];
   disabled?: boolean;
   freeSolo?: boolean;
-  onToggleEventPreview?: Function;
+  onToggleEventPreview?: () => void;
+  placeholder?: string;
 }) {
   const { t } = useI18n();
   const [query, setQuery] = useState("");
@@ -51,6 +53,8 @@ export function PeopleSearch({
   const [snackbarMessage, setSnackbarMessage] = useState("");
   const theme = useTheme();
 
+  const searchPlaceholder = placeholder ?? t("peopleSearch.placeholder");
+
   useEffect(() => {
     let cancelled = false;
 
@@ -149,7 +153,7 @@ export function PeopleSearch({
               {...params}
               error={!!inputError}
               helperText={inputError}
-              placeholder={t("peopleSearch.placeholder")}
+              placeholder={searchPlaceholder}
               label=""
               inputProps={{
                 ...params.inputProps,

src/components/Calendar/TempCalendarsInput.tsx

@@ -1,5 +1,6 @@
 import { useTheme } from "@mui/material/styles";
 import { useRef } from "react";
+import { useI18n } from "twake-i18n";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import {
   getTempCalendarsListAsync,
@@ -30,6 +31,7 @@ export function TempCalendarsInput({
     useAppSelector((state) => state.calendars.templist) ?? {};
   const calendars = useAppSelector((state) => state.calendars.list);
   const theme = useTheme();
+  const { t } = useI18n();
 
   const prevUsersRef = useRef<User[]>([]);
   const userColorsRef = useRef(new Map<string, string>());
@@ -102,6 +104,7 @@ export function TempCalendarsInput({
       selectedUsers={tempUsers}
       onChange={handleUserChange}
       onToggleEventPreview={handleToggleEventPreview}
+      placeholder={t("peopleSearch.availabilityPlaceholder")}
     />
   );
 }

src/locales/en.json

@@ -169,6 +169,7 @@
   "peopleSearch": {
     "label": "Start typing a name or email",
     "placeholder": "Start typing a name or email",
+    "availabilityPlaceholder": "Check availability",
     "invalidEmail": "%{email} is not a valid email address",
     "searchError": "Unable to fetch contacts right now. Please try again.",
     "noResults": "No results",

src/locales/fr.json

@@ -169,6 +169,7 @@
   "peopleSearch": {
     "label": "Commencez à saisir un nom ou un e-mail",
     "placeholder": "Commencez à saisir un nom ou un e-mail",
+    "availabilityPlaceholder": "Vérifier la disponibilité",
     "invalidEmail": "%{email} n'est pas une adresse e-mail valide",
     "searchError": "Impossible de récupérer les contacts pour le moment. Veuillez réessayer.",
     "noResults": "Aucun résultat",

src/locales/ru.json

@@ -169,6 +169,7 @@
   "peopleSearch": {
     "label": "Поиск по имени или email",
     "placeholder": "Введите имя или email",
+    "availabilityPlaceholder": "Проверить наличие мест",
     "invalidEmail": "%{email} — некорректный адрес",
     "searchError": "Не удалось загрузить контакты. Попробуйте ещё раз.",
     "noResults": "Нет результатов",

src/locales/vi.json

@@ -169,6 +169,7 @@
   "peopleSearch": {
     "label": "Nhập tên hoặc email",
     "placeholder": "Nhập tên hoặc email",
+    "availabilityPlaceholder": "Kiểm tra tình trạng phòng trống",
     "invalidEmail": "%{email} không phải địa chỉ email hợp lệ",
     "searchError": "Không thể lấy danh bạ. Vui lòng thử lại.",
     "noResults": "Không có kết quả",