[#309] homogenized add add Desc button (#345)

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

__test__/features/Calendars/CalendarModal.test.tsx

@@ -38,7 +38,7 @@ describe("CalendarPopover", () => {
     renderPopover();
 
     expect(screen.getByLabelText(/Name/i)).toBeInTheDocument();
-    expect(screen.getByText("calendar.addDescription")).toBeInTheDocument();
+    expect(screen.getByText("event.form.addDescription")).toBeInTheDocument();
   });
 
   it("updates name and description fields", () => {
@@ -48,7 +48,7 @@ describe("CalendarPopover", () => {
     fireEvent.change(nameInput, { target: { value: "My Calendar" } });
     expect(nameInput).toHaveValue("My Calendar");
 
-    fireEvent.click(screen.getByText("calendar.addDescription"));
+    fireEvent.click(screen.getByText("event.form.addDescription"));
     const descInput = screen.getByLabelText(/Description/i);
     fireEvent.change(descInput, { target: { value: "Test description" } });
     expect(descInput).toHaveValue("Test description");
@@ -65,7 +65,7 @@ describe("CalendarPopover", () => {
     fireEvent.change(screen.getByLabelText(/Name/i), {
       target: { value: "Test Calendar" },
     });
-    fireEvent.click(screen.getByText("calendar.addDescription"));
+    fireEvent.click(screen.getByText("event.form.addDescription"));
     fireEvent.change(screen.getByLabelText(/Description/i), {
       target: { value: "Test Description" },
     });

src/components/Calendar/ImportTab.tsx

@@ -31,7 +31,7 @@ export function ImportTab({
     name: string;
     setName: Function;
     description: string;
-    setDescription: Function;
+    setDescription: (d: string) => void;
     color: Record<string, string>;
     setColor: Function;
     visibility: "public" | "private";

src/components/Calendar/SettingsTab.tsx

@@ -13,6 +13,7 @@ import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
 import { useState, useEffect } from "react";
 import { useAppSelector } from "../../app/hooks";
 import { Calendars } from "../../features/Calendars/CalendarTypes";
+import { AddDescButton } from "../Event/AddDescButton";
 import { ColorPicker } from "./CalendarColorPicker";
 
 export function SettingsTab({
@@ -29,7 +30,7 @@ export function SettingsTab({
   name: string;
   setName: Function;
   description: string;
-  setDescription: Function;
+  setDescription: (d: string) => void;
   color: Record<string, string>;
   setColor: Function;
   visibility: "public" | "private";
@@ -57,29 +58,13 @@ export function SettingsTab({
         margin="dense"
       />
 
-      {!toggleDesc && (
+      <AddDescButton
-        <Button
+        showDescription={toggleDesc}
-          variant="outlined"
+        setShowDescription={setToggleDesc}
-          size="small"
+        showMore={false}
-          onClick={() => setToggleDesc(!toggleDesc)}
+        description={description}
-          startIcon={<FormatListBulletedIcon />}
+        setDescription={setDescription}
-        >
+      />
-          {t("calendar.addDescription")}
-        </Button>
-      )}
-
-      {toggleDesc && (
-        <TextField
-          fullWidth
-          label={t("common.description")}
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          size="small"
-          margin="dense"
-          multiline
-          rows={2}
-        />
-      )}
 
       <Box mt={2}>
         <Typography variant="body2" gutterBottom>

src/components/Event/AddDescButton.tsx

@@ -0,0 +1,69 @@
+import { Box, Button, TextField } from "@mui/material";
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { FieldWithLabel } from "./components/FieldWithLabel";
+import { Description as DescriptionIcon } from "@mui/icons-material";
+
+export function AddDescButton({
+  showDescription,
+  setShowDescription,
+  showMore,
+  description,
+  setDescription,
+}: {
+  showDescription: boolean;
+  setShowDescription: (b: boolean) => void;
+  showMore: boolean;
+  description: string;
+  setDescription: (d: string) => void;
+}) {
+  const { t } = useI18n();
+  return (
+    <>
+      {!showDescription && (
+        <FieldWithLabel label=" " isExpanded={showMore}>
+          <Box display="flex" gap={1} mb={1}>
+            <Button
+              startIcon={<DescriptionIcon />}
+              onClick={() => setShowDescription(true)}
+              size="small"
+              sx={{
+                textTransform: "none",
+                color: "text.secondary",
+              }}
+            >
+              {t("event.form.addDescription")}
+            </Button>
+          </Box>
+        </FieldWithLabel>
+      )}
+      {showDescription && (
+        <FieldWithLabel
+          label={t("event.form.description")}
+          isExpanded={showMore}
+        >
+          <TextField
+            fullWidth
+            label={!showMore ? t("event.form.description") : ""}
+            placeholder={t("event.form.descriptionPlaceholder")}
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            size="small"
+            margin="dense"
+            multiline
+            minRows={2}
+            maxRows={10}
+            sx={{
+              "& .MuiInputBase-root": {
+                maxHeight: "33%",
+                overflowY: "auto",
+              },
+              "& textarea": {
+                resize: "vertical",
+              },
+            }}
+          />
+        </FieldWithLabel>
+      )}
+    </>
+  );
+}

src/components/Event/EventFormFields.tsx

@@ -42,6 +42,7 @@ import {} from "./utils/dateRules";
 import {} from "./utils/dateTimeFormatters";
 import { validateEventForm } from "./utils/formValidation";
 import { SnackbarAlert } from "../Loading/SnackBarAlert";
+import { AddDescButton } from "./AddDescButton";
 
 interface EventFormFieldsProps {
   // Form state
@@ -424,52 +425,13 @@ export default function EventFormFields({
         />
       </FieldWithLabel>
 
-      {!showDescription && (
+      <AddDescButton
-        <FieldWithLabel label=" " isExpanded={showMore}>
+        showDescription={showDescription}
-          <Box display="flex" gap={1} mb={1}>
+        setShowDescription={setShowDescription}
-            <Button
+        showMore={showMore}
-              startIcon={<DescriptionIcon />}
+        description={description}
-              onClick={() => setShowDescription(true)}
+        setDescription={setDescription}
-              size="small"
+      />
-              sx={{
-                textTransform: "none",
-                color: "text.secondary",
-              }}
-            >
-              {t("event.form.addDescription")}
-            </Button>
-          </Box>
-        </FieldWithLabel>
-      )}
-
-      {showDescription && (
-        <FieldWithLabel
-          label={t("event.form.description")}
-          isExpanded={showMore}
-        >
-          <TextField
-            fullWidth
-            label={!showMore ? t("event.form.description") : ""}
-            placeholder={t("event.form.descriptionPlaceholder")}
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            size="small"
-            margin="dense"
-            multiline
-            minRows={2}
-            maxRows={10}
-            sx={{
-              "& .MuiInputBase-root": {
-                maxHeight: "33%",
-                overflowY: "auto",
-              },
-              "& textarea": {
-                resize: "vertical",
-              },
-            }}
-          />
-        </FieldWithLabel>
-      )}
 
       <FieldWithLabel label={t("event.form.dateTime")} isExpanded={showMore}>
         <DateTimeFields

src/locales/en.json

@@ -13,7 +13,6 @@
     "ics_feed_url": "ICS feed URL",
     "import_to": "Import to",
     "new_calendar": "New calendar",
-    "addDescription": "Add description",
     "color": "Color",
     "newEventsVisibility": "New events created will be visible to:",
     "browseOtherCalendars": "Browse other calendars",

src/locales/fr.json

@@ -13,7 +13,6 @@
     "ics_feed_url": "URL du flux ICS",
     "import_to": "Importer vers",
     "new_calendar": "Nouveau calendrier",
-    "addDescription": "Ajouter une description",
     "color": "Couleur",
     "newEventsVisibility": "Les nouveaux événements créés seront visibles par :",
     "browseOtherCalendars": "Parcourir d'autres calendriers",

src/locales/ru.json

@@ -13,7 +13,6 @@
     "ics_feed_url": "Адрес ICS-ленты",
     "import_to": "Импортирт в",
     "new_calendar": "Новый календарь",
-    "addDescription": "Добавить описание",
     "color": "Цвет",
     "newEventsVisibility": "Новые события будут видны:",
     "browseOtherCalendars": "Просмотреть другие календари",

src/locales/vi.json

@@ -13,7 +13,6 @@
     "ics_feed_url": "URL nguồn ICS",
     "import_to": "Nhập vào",
     "new_calendar": "Lịch mới",
-    "addDescription": "Thêm mô tả",
     "color": "Màu",
     "newEventsVisibility": "Sự kiện mới tạo sẽ hiển thị với:",
     "browseOtherCalendars": "Xem các lịch khác",