[#265] prefills title + trad + test (#293)

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

__test__/features/Events/EventDisplay.test.tsx

@@ -82,6 +82,13 @@ describe("Event Preview Display", () => {
               end: day.toISOString(),
               organizer: { cn: "test", cal_address: "test@test.com" },
             },
+            event3: {
+              uid: "event3",
+              calId: "667037022b752d0026472254/cal1",
+              start: day.toISOString(),
+              end: day.toISOString(),
+              organizer: { cn: "test", cal_address: "test@test.com" },
+            },
           },
           ownerEmails: ["test@test.com"],
         },
@@ -797,7 +804,21 @@ describe("Event Preview Display", () => {
       }).not.toThrow();
     });
   });
+  it("renders correctly event data event with empty title", () => {
+    renderWithProviders(
+      <EventPreviewModal
+        open={true}
+        onClose={mockOnClose}
+        calId={"667037022b752d0026472254/cal1"}
+        eventId={"event3"}
+      />,
+      preloadedState
+    );
 
+    expect(screen.getByText("event.untitled")).toBeInTheDocument();
+
+    expect(screen.getByText("Calendar")).toBeInTheDocument();
+  });
   describe("BUGFIX", () => {
     it("doesnt render anything next to date of all day preview", () => {
       const allDayState = {

__test__/features/Events/EventModal.test.tsx

@@ -1,11 +1,9 @@
 import { DateSelectArg } from "@fullcalendar/core";
 import { act, fireEvent, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import preview from "jest-preview";
 import * as eventThunks from "../../../src/features/Calendars/CalendarSlice";
 import EventPopover from "../../../src/features/Events/EventModal";
 import { api } from "../../../src/utils/apiUtils";
-import { formatDateToYYYYMMDDTHHMMSS } from "../../../src/utils/dateUtils";
 import { renderWithProviders } from "../../utils/Renderwithproviders";
 
 jest.mock("../../../src/utils/apiUtils");

src/components/Calendar/utils/calendarUtils.ts

@@ -6,6 +6,7 @@ import { SlotLabelContentArg } from "@fullcalendar/core";
 import moment from "moment-timezone";
 import { refreshSingularCalendar } from "../../Event/utils/eventUtils";
 import { ThunkDispatch } from "@reduxjs/toolkit";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
 
 export const updateSlotLabelVisibility = (
   currentTime: Date,
@@ -58,13 +59,24 @@ export const eventToFullCalendarFormat = (
   filteredTempEvents: CalendarEvent[],
   userId: string | undefined
 ) => {
+  const { t } = useI18n();
   return filteredEvents
     .concat(filteredTempEvents.map((e) => ({ ...e, temp: true })))
     .map((e) => {
       if (e.calId.split("/")[0] === userId) {
-        return { ...e, colors: e.color, editable: true };
+        return {
+          ...e,
+          title: e.title ? e.title : t("event.untitled"),
+          colors: e.color,
+          editable: true,
+        };
       }
-      return { ...e, colors: e.color, editable: false };
+      return {
+        ...e,
+        title: e.title ? e.title : t("event.untitled"),
+        colors: e.color,
+        editable: false,
+      };
     });
 };
 

src/components/Event/EventFormFields.tsx

@@ -323,7 +323,6 @@ export default function EventFormFields({
   // Validation logic
   const validateForm = React.useCallback(() => {
     return validateEventForm({
-      title,
       startDate,
       startTime,
       endDate,
@@ -410,14 +409,7 @@ export default function EventFormFields({
 
   return (
     <>
-      <FieldWithLabel
+      <FieldWithLabel label={t("event.form.title")} isExpanded={showMore}>
-        label={
-          <>
-            {t("event.form.title")} <span style={{ color: "red" }}>*</span>
-          </>
-        }
-        isExpanded={showMore}
-      >
         <TextField
           fullWidth
           label={!showMore ? t("event.form.title") : ""}
@@ -426,8 +418,6 @@ export default function EventFormFields({
           onChange={(e) => {
             setTitle(e.target.value);
           }}
-          error={!!validation.errors.title}
-          helperText={validation.errors.title}
           size="small"
           margin="dense"
           inputRef={titleInputRef}

src/components/Event/utils/formValidation.ts

@@ -4,7 +4,6 @@ import { combineDateTime } from "./dateTimeHelpers";
  * Validation parameters for event form
  */
 export interface ValidationParams {
-  title: string;
   startDate: string;
   startTime: string;
   endDate: string;
@@ -21,7 +20,6 @@ export interface ValidationParams {
 export interface ValidationResult {
   isValid: boolean;
   errors: {
-    title: string;
     dateTime: string;
   };
 }
@@ -33,7 +31,6 @@ export interface ValidationResult {
  */
 export function validateEventForm(params: ValidationParams): ValidationResult {
   const {
-    title,
     startDate,
     startTime,
     endDate,
@@ -44,9 +41,6 @@ export function validateEventForm(params: ValidationParams): ValidationResult {
     showMore = false,
   } = params;
 
-  const isTitleValid = title.trim().length > 0;
-  const shouldShowTitleError = showValidationErrors && !isTitleValid;
-
   let isDateTimeValid = true;
   let dateTimeError = "";
 
@@ -154,12 +148,11 @@ export function validateEventForm(params: ValidationParams): ValidationResult {
     }
   }
 
-  const isValid = isTitleValid && isDateTimeValid;
+  const isValid = isDateTimeValid;
 
   return {
     isValid,
     errors: {
-      title: shouldShowTitleError ? "Title is required" : "",
       dateTime: showValidationErrors ? dateTimeError : "",
     },
   };

src/components/Menubar/Menubar.tsx

@@ -254,6 +254,7 @@ export function Menubar({
             value={lang}
             onChange={(e) => {
               dispatch(setLanguage(e.target.value));
+              handleLangClose();
             }}
             variant="outlined"
             aria-label={t("menubar.languageSelector")}

src/features/Events/EventDisplayPreview.tsx

@@ -141,7 +141,6 @@ export default function EventPreviewModal({
         actionsJustifyContent="center"
         style={{ overflow: "auto" }}
         title={
-          event.title && (
           <>
             <DialogActions>
               <Box>
@@ -227,8 +226,7 @@ export default function EventPreviewModal({
                       onClick={async () => {
                         if (isRecurring) {
                           setAfterChoiceFunc(
-                              () =>
+                            () => (typeOfAction?: "solo" | "all" | undefined) =>
-                                (typeOfAction?: "solo" | "all" | undefined) =>
                               handleDelete(
                                 isRecurring,
                                 typeOfAction,
@@ -288,13 +286,10 @@ export default function EventPreviewModal({
                 }}
                 gutterBottom
               >
-                  {event.title}
+                {event.title ? event.title : t("event.untitled")}
               </Typography>
               {event.transp === "TRANSPARENT" && (
-                  <Tooltip
+                <Tooltip title={t("eventPreview.free.tooltip")} placement="top">
-                    title={t("eventPreview.free.tooltip")}
-                    placement="top"
-                  >
                   <Chip
                     icon={<CircleIcon color="success" fontSize="small" />}
                     label={t("eventPreview.free.label")}
@@ -309,7 +304,6 @@ export default function EventPreviewModal({
                 ` – ${formatEnd(event.start, event.end, t, event.allday)} ${!event.allday ? getTimezoneOffset(timezone) : ""}`}
             </Typography>
           </>
-          )
         }
         actions={
           currentUserAttendee &&

src/features/Events/EventModal.tsx

@@ -33,7 +33,6 @@ import { addDays } from "../../components/Event/utils/dateRules";
 import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
 
 function EventPopover({
-  anchorEl,
   open,
   onClose,
   selectedRange,
@@ -50,6 +49,7 @@ function EventPopover({
   event?: CalendarEvent;
 }) {
   const dispatch = useAppDispatch();
+  const { t, lang } = useI18n();
 
   const organizer = useAppSelector((state) => state.user.organiserData);
   const userId =
@@ -673,8 +673,6 @@ function EventPopover({
       await updateTempCalendar(tempList, newEvent, dispatch, calendarRange);
     }
   };
-  const { t } = useI18n();
-
   const dialogActions = (
     <Box display="flex" justifyContent="space-between" width="100%" px={2}>
       {!showMore && (

src/locales/en.json

@@ -65,6 +65,7 @@
     "createEvent": "Create Event",
     "updateEvent": "Update Event",
     "organizer": "Organizer",
+    "untitled": "Untitled",
     "repeat": {
       "repeatEvery": "Repeat every",
       "frequency": {

src/locales/fr.json

@@ -65,6 +65,7 @@
     "createEvent": "Créer un événement",
     "updateEvent": "Mettre à jour un événement",
     "organizer": "Organisateur",
+    "untitled": "Sans titre",
     "repeat": {
       "repeatEvery": "Répéter tous les",
       "frequency": {