Allow for editing of labels

Close #7755

src/common/api/worker/facades/lazy/MailFacade.ts

@@ -1058,6 +1058,20 @@ export class MailFacade {
 			},
 		)
 	}
+
+	/*
+	 * Update a label, if needed
+	 * @param label existing label
+	 * @param name possible new name for label
+	 * @param color possible new color for label
+	 */
+	async updateLabel(label: MailFolder, name: string, color: string) {
+		if (name !== label.name || color != label.color) {
+			label.name = name
+			label.color = color
+			await this.entityClient.update(label)
+		}
+	}
 }
 
 export function phishingMarkerValue(type: ReportedMailFieldType, value: string): string {

src/common/misc/TranslationKey.ts

@@ -1800,3 +1800,4 @@ export type TranslationKeyType =
 	| "yourMessage_label"
 	| "you_label"
 	| "emptyString_msg"
+	| "editLabel_action"

src/mail-app/mail/model/MailModel.ts

@@ -534,6 +534,10 @@ export class MailModel {
 		await this.mailFacade.createLabel(mailGroupId, labelData)
 	}
 
+	async updateLabel(label: MailFolder, newData: { name: string; color: string }) {
+		await this.mailFacade.updateLabel(label, newData.name, newData.color)
+	}
+
 	async getFolderById(folderElementId: Id): Promise<MailFolder | null> {
 		const folderStructures = await this.loadMailSets()
 		for (const folders of folderStructures.values()) {

src/mail-app/mail/view/EditLabelDialog.ts

@@ -3,20 +3,35 @@ import { TextField, TextFieldAttrs } from "../../../common/gui/base/TextField"
 import { ColorPicker } from "../../../common/gui/base/ColorPicker"
 import m from "mithril"
 import { theme } from "../../../common/gui/theme"
+import type { MailBox, MailFolder } from "../../../common/api/entities/tutanota/TypeRefs"
+import { isOfflineError } from "../../../common/api/common/utils/ErrorUtils"
+import { LockedError } from "../../../common/api/common/error/RestError"
+import { MailViewModel } from "./MailViewModel"
+import { lang } from "../../../common/misc/LanguageViewModel"
 
-export function showEditLabelDialog(): Promise<{ name: string; color: string } | null> {
+export async function showEditLabelDialog(mailbox: MailBox | null, mailViewModel: MailViewModel, label: MailFolder | null): Promise<void> {
 	return new Promise((resolve) => {
-		let name = ""
-		let color = theme.content_accent
+		let name = label ? label.name : ""
+		let color = label && label.color ? label.color : theme.content_accent
 		Dialog.showActionDialog({
-			// FIXME translate
-			title: () => "Create label",
+			title: lang.get(label ? "editLabel_action" : "addLabel_action"),
 			allowCancel: true,
-			okAction: (dialog) => {
-				resolve({ name, color })
+			okAction: async (dialog: Dialog) => {
 				dialog.close()
+				try {
+					if (label) {
+						// editing a label
+						await mailViewModel.editLabel(label, { name, color })
+					} else if (mailbox) {
+						// adding a label
+						await mailViewModel.createLabel(mailbox, { name, color })
+					}
+				} catch (error) {
+					if (isOfflineError(error) || !(error instanceof LockedError)) {
+						throw error
+					}
+				}
 			},
-			cancelAction: () => resolve(null),
 			child: () =>
 				m(".flex.col.gap-vpad", [
 					m(TextField, {

src/mail-app/mail/view/MailView.ts

@@ -787,11 +787,12 @@ export class MailView extends BaseTopLevelView implements TopLevelView<MailViewA
 		await showEditFolderDialog(mailboxDetail, folder, parentFolder)
 	}
 
-	private async onAddLabelClicked(mailbox: MailBox) {
-		const labelData = await showEditLabelDialog()
-		if (labelData != null) {
-			await this.mailViewModel.createLabel(mailbox, labelData)
-		}
+	private async showLabelAddDialog(mailbox: MailBox) {
+		await showEditLabelDialog(mailbox, this.mailViewModel, null)
+	}
+
+	private async showLabelEditDialog(label: MailFolder) {
+		await showEditLabelDialog(null, this.mailViewModel, label)
 	}
 
 	private renderMailboxLabelItems(mailboxDetail: MailboxDetail, inEditMode: boolean, onEditMailbox: () => void): Children {
@@ -823,6 +824,9 @@ export class MailView extends BaseTopLevelView implements TopLevelView<MailViewA
 										{
 											label: "edit_action",
 											icon: Icons.Edit,
+											click: () => {
+												this.showLabelEditDialog(label)
+											},
 										},
 										{ label: "delete_action", icon: Icons.Trash },
 									],
@@ -840,7 +844,7 @@ export class MailView extends BaseTopLevelView implements TopLevelView<MailViewA
 					width: `calc(100% - ${px(size.hpad_button * 2)})`,
 				},
 				onclick: () => {
-					this.onAddLabelClicked(mailboxDetail.mailbox)
+					this.showLabelAddDialog(mailboxDetail.mailbox)
 				},
 			}),
 		]
@@ -860,7 +864,7 @@ export class MailView extends BaseTopLevelView implements TopLevelView<MailViewA
 			title: "addLabel_action",
 			icon: Icons.Add,
 			click: () => {
-				this.onAddLabelClicked(mailboxDetail.mailbox)
+				this.showLabelAddDialog(mailboxDetail.mailbox)
 			},
 		})
 	}

src/mail-app/mail/view/MailViewModel.ts

@@ -827,4 +827,8 @@ export class MailViewModel {
 	async createLabel(mailbox: MailBox, labelData: { name: string; color: string }) {
 		await this.mailModel.createLabel(assertNotNull(mailbox._ownerGroup), labelData)
 	}
+
+	async editLabel(label: MailFolder, newData: { name: string; color: string }) {
+		await this.mailModel.updateLabel(label, newData)
+	}
 }