feat(dialog): add editing mode to CreateSectionDialog

Author: florianduros

apps/web/src/components/views/dialogs/CreateSectionDialog.tsx

@@ -14,6 +14,11 @@ import DialogButtons from "../elements/DialogButtons";
 import { _t } from "../../../languageHandler";
 
 interface CreateSectionDialogProps {
+    /**
+     * Whether this dialog is being used to edit an existing section or create a new one
+     */
+    sectionToEdit?: string;
+
     /**
      * Callback called when the dialog is closed.
      * @param shouldCreateSection Whether a section should be created or not. This will be false if the user cancels the dialog.
@@ -25,15 +30,16 @@ interface CreateSectionDialogProps {
 /**
  * Dialog shown to the user to create a new section in the room list.
  */
-export function CreateSectionDialog({ onFinished }: CreateSectionDialogProps): JSX.Element {
-    const [value, setValue] = useState("");
+export function CreateSectionDialog({ onFinished, sectionToEdit }: CreateSectionDialogProps): JSX.Element {
+    const isEdition = Boolean(sectionToEdit);
+    const [value, setValue] = useState(sectionToEdit ?? "");
     const isInvalid = Boolean(value.trim().length === 0);
 
     return (
         <BaseDialog
             className="mx_CreateSectionDialog"
             onFinished={() => onFinished(false, value)}
-            title={_t("create_section_dialog|title")}
+            title={isEdition ? _t("create_section_dialog|title_edition") : _t("create_section_dialog|title")}
             hasCancel={true}
         >
             <Flex gap="var(--cpd-space-6x)" direction="column" className="mx_CreateSectionDialog_content">
@@ -49,12 +55,18 @@ export function CreateSectionDialog({ onFinished }: CreateSectionDialogProps): J
                 >
                     <Form.Field name="sectionName">
                         <Form.Label> {_t("create_section_dialog|label")}</Form.Label>
-                        <Form.TextControl onChange={(evt) => setValue(evt.target.value)} required={true} />
+                        <Form.TextControl
+                            value={value}
+                            onChange={(evt) => setValue(evt.target.value)}
+                            required={true}
+                        />
                     </Form.Field>
                 </Form.Root>
             </Flex>
             <DialogButtons
-                primaryButton={_t("create_section_dialog|create_section")}
+                primaryButton={
+                    isEdition ? _t("create_section_dialog|edit_section") : _t("create_section_dialog|create_section")
+                }
                 primaryDisabled={isInvalid}
                 hasCancel={true}
                 onCancel={() => onFinished(false, "")}

apps/web/src/i18n/strings/en_EN.json

@@ -684,8 +684,10 @@
     "create_section_dialog": {
         "create_section": "Create section",
         "description": "Sections are only for you",
+        "edit_section": "Edit section",
         "label": "Section name",
-        "title": "Create a section"
+        "title": "Create a section",
+        "title_edition": "Edit a section"
     },
     "create_space": {
         "add_details_prompt": "Add some details to help people recognise it.",
@@ -1855,6 +1857,12 @@
         "ongoing": "Removing…",
         "reason_label": "Reason (optional)"
     },
+    "remove_section_dialog": {
+        "confirmation": "Are you sure you want to remove this section? ",
+        "description": "The chats in this section will still be available in your chats list.",
+        "remove_section": "Remove section",
+        "title_edition": "Remove section?"
+    },
     "report_content": {
         "description": "Reporting this message will send its unique 'event ID' to the administrator of your homeserver. If messages in this room are encrypted, your homeserver administrator will not be able to read the message text or view any files or images.",
         "disagree": "Disagree",

apps/web/test/unit-tests/components/views/dialogs/CreateSectionDialog-test.tsx

@@ -56,4 +56,38 @@ describe("CreateSectionDialog", () => {
         await userEvent.keyboard("{Enter}");
         expect(onFinished).toHaveBeenCalledWith(true, "My section");
     });
+
+    describe("editing mode", () => {
+        function renderEditComponent(): void {
+            render(<CreateSectionDialog onFinished={onFinished} sectionToEdit="Existing Section" />);
+        }
+
+        it("pre-fills the input with the existing section name", () => {
+            renderEditComponent();
+            const input = screen.getByRole("textbox");
+            expect(input).toHaveValue("Existing Section");
+        });
+
+        it("shows the edit section button instead of create section", () => {
+            renderEditComponent();
+            expect(screen.getByRole("button", { name: "Edit section" })).toBeInTheDocument();
+            expect(screen.queryByRole("button", { name: "Create section" })).not.toBeInTheDocument();
+        });
+
+        it("calls onFinished with the updated name when edit section is clicked", async () => {
+            renderEditComponent();
+            const input = screen.getByRole("textbox");
+            await userEvent.clear(input);
+            await userEvent.type(input, "Updated Section");
+            await userEvent.click(screen.getByRole("button", { name: "Edit section" }));
+            expect(onFinished).toHaveBeenCalledWith(true, "Updated Section");
+        });
+
+        it("has the edit section button disabled when the input is empty", async () => {
+            renderEditComponent();
+            const input = screen.getByRole("textbox");
+            await userEvent.clear(input);
+            expect(screen.getByRole("button", { name: "Edit section" })).toBeDisabled();
+        });
+    });
 });