[feature] Allow editing domain blocks/allows, fix comment import

web/source/settings/views/moderation/domain-permissions/detail.tsx

@@ -52,6 +52,7 @@ import { PermType } from "../../../lib/types/perm";
 import { useCapitalize } from "../../../lib/util";
 import { formDomainValidator } from "../../../lib/util/formvalidators";
 import UsernameLozenge from "../../../components/username-lozenge";
+import { FormSubmitEvent } from "../../../lib/form/types";
 
 export default function DomainPermView() {
 	const baseUrl = useBaseUrl();
@@ -161,7 +162,7 @@ function DomainPermDetails({
 					<UsernameLozenge
 						account={perm.created_by}
 						linkTo={`~/settings/moderation/accounts/${perm.created_by}`}
-						backLocation={`~${baseUrl}/${location}`}
+						backLocation={`~${baseUrl}${location}`}
 					/>
 				</dd>
 			</div>
@@ -207,8 +208,8 @@ function CreateOrUpdateDomainPerm({
 			validator: formDomainValidator,
 		}),
 		obfuscate: useBoolInput("obfuscate", { source: perm }),
-		commentPrivate: useTextInput("private_comment", { source: perm }),
-		commentPublic: useTextInput("public_comment", { source: perm })
+		privateComment: useTextInput("private_comment", { source: perm }),
+		publicComment: useTextInput("public_comment", { source: perm })
 	};
 
 	// Check which perm type we're meant to be handling
@@ -248,12 +249,23 @@ function CreateOrUpdateDomainPerm({
 	// permType, and whether we're creating or updating.
 	const [submit, submitResult] = useFormSubmit(
 		form,
-		[
-			createOrUpdateTrigger,
-			createOrUpdateResult,
-		],
+		[ createOrUpdateTrigger, createOrUpdateResult ],
 		{
-			changedOnly: isExistingPerm
+			changedOnly: isExistingPerm,
+			// If we're updating an existing perm,
+			// insert the perm ID into the mutation
+			// data before submitting. Otherwise just
+			// return the mutationData unmodified.
+			customizeMutationArgs: (mutationData) => {
+				if (isExistingPerm) {
+					return {
+						id: perm?.id,
+						...mutationData,
+					};
+				} else {
+					return mutationData;
+				}
+			},
 		},
 	);
 
@@ -261,7 +273,7 @@ function CreateOrUpdateDomainPerm({
 	const permTypeUpper = useCapitalize(permType);
 
 	const [location, setLocation] = useLocation();
-	function verifyUrlThenSubmit(e) {
+	function onSubmit(e: FormSubmitEvent) {
 		// Adding a new domain permissions happens on a url like
 		// "/settings/admin/domain-permissions/:permType/domain.com",
 		// but if domain input changes, that doesn't match anymore
@@ -277,7 +289,7 @@ function CreateOrUpdateDomainPerm({
 	}
 
 	return (
-		<form onSubmit={verifyUrlThenSubmit}>
+		<form onSubmit={onSubmit}>
 			{ !isExistingPerm && 
 				<TextInput
 					field={form.domain}
@@ -294,14 +306,14 @@ function CreateOrUpdateDomainPerm({
 			/>
 
 			<TextArea
-				field={form.commentPrivate}
+				field={form.privateComment}
 				label="Private comment"
 				autoCapitalize="sentences"
 				rows={3}
 			/>
 
 			<TextArea
-				field={form.commentPublic}
+				field={form.publicComment}
 				label="Public comment"
 				autoCapitalize="sentences"
 				rows={3}
@@ -311,21 +323,22 @@ function CreateOrUpdateDomainPerm({
 				<MutationButton
 					label={isExistingPerm ? "Update " + permType.toString() : permTypeUpper}
 					result={submitResult}
-					showError={false}
-					disabled={false}
+					disabled={
+						isExistingPerm &&
+						!form.obfuscate.hasChanged() &&
+						!form.privateComment.hasChanged() &&
+						!form.publicComment.hasChanged()
+					}
 				/>
 
-				{
-					isExistingPerm &&
-					<MutationButton
+				{ isExistingPerm &&
+					<button
 						type="button"
 						onClick={() => removeTrigger(perm.id?? "")}
-						label={"Remove " + permType.toString()} 
-						result={removeResult}
 						className="button danger"
-						showError={false}
-						disabled={!isExistingPerm}
-					/>
+					>
+						Remove {permType.toString()}
+					</button>
 				}
 			</div>
 

web/source/settings/views/moderation/domain-permissions/import-export.tsx

@@ -61,7 +61,7 @@ export default function ImportExport() {
 									>
 										< back
 									</span>
-									&nbsp; Confirm import of domain {form.permType.value}s:
+									&nbsp; Confirm {form.permType.value}s:
 								</h1>
 								<ProcessImport
 									list={parseResult.data}

web/source/settings/views/moderation/domain-permissions/process.tsx

@@ -24,14 +24,12 @@ import { isValidDomainPermission, hasBetterScope } from "../../../lib/util/domai
 import {
 	useTextInput,
 	useBoolInput,
-	useRadioInput,
 	useCheckListInput,
 } from "../../../lib/form";
 
 import {
 	Select,
 	TextArea,
-	RadioGroup,
 	Checkbox,
 	TextInput,
 } from "../../../components/form/inputs";
@@ -113,84 +111,81 @@ function ImportList({ list, data: domainPerms, permType }: ImportListProps) {
 		privateComment: useTextInput("private_comment", {
 			defaultValue: `Imported on ${new Date().toLocaleString()}`
 		}),
-		privateCommentBehavior: useRadioInput("private_comment_behavior", {
-			defaultValue: "append",
-			options: {
-				append: "Append to",
-				replace: "Replace"
-			}
-		}),
+		replacePrivateComment: useBoolInput("replace_private_comment", { defaultValue: false }),
 		publicComment: useTextInput("public_comment"),
-		publicCommentBehavior: useRadioInput("public_comment_behavior", {
-			defaultValue: "append",
-			options: {
-				append: "Append to",
-				replace: "Replace"
-			}
-		}),
+		replacePublicComment: useBoolInput("replace_public_comment", { defaultValue: false }),
 		permType: permType,
 	};
 
-	const [importDomains, importResult] = useFormSubmit(form, useImportDomainPermsMutation(), { changedOnly: false });
+	const [importDomains, importResult] = useFormSubmit(
+		form,
+		useImportDomainPermsMutation(),
+		{ changedOnly: false },
+	);
 
 	return (
-		<>
-			<form
-				onSubmit={importDomains}
-				className="domain-perm-import-list"
-			>
-				<span>{list.length} domain{list.length != 1 ? "s" : ""} in this list</span>
+		<form
+			onSubmit={importDomains}
+			className="domain-perm-import-list"
+		>
+			<span>{list.length} domain{list.length != 1 ? "s" : ""} in this list</span>
 
-				{hasComment.both &&
+			{hasComment.both &&
 					<Select field={showComment} options={
 						<>
 							<option value="public_comment">Show public comments</option>
 							<option value="private_comment">Show private comments</option>
 						</>
 					} />
-				}
+			}
 
-				<div className="checkbox-list-wrapper">
-					<DomainCheckList
-						field={form.domains}
-						domainPerms={domainPerms}
-						commentType={showComment.value as "public_comment" | "private_comment"}
-						permType={form.permType}
-					/>
-				</div>
+			<div className="checkbox-list-wrapper">
+				<DomainCheckList
+					field={form.domains}
+					domainPerms={domainPerms}
+					commentType={showComment.value as "public_comment" | "private_comment"}
+					permType={form.permType}
+				/>
+			</div>
 
+			<Checkbox
+				field={form.obfuscate}
+				label="Obfuscate domains in public lists"
+			/>
+
+			<div className="set-comment-checkbox">
+				<Checkbox
+					field={form.replacePrivateComment}
+					label="Set/replace private comment(s) to:"
+				/>
 				<TextArea
 					field={form.privateComment}
-					label="Private comment"
 					rows={3}
+					disabled={!form.replacePrivateComment.value}
+					placeholder="Private comment"
 				/>
-				<RadioGroup
-					field={form.privateCommentBehavior}
-					label="imported private comment"
-				/>
+			</div>
 
+			<div className="set-comment-checkbox">
+				<Checkbox
+					field={form.replacePublicComment}
+					label="Set/replace public comment(s) to:"
+				/>
 				<TextArea
 					field={form.publicComment}
-					label="Public comment"
 					rows={3}
+					disabled={!form.replacePublicComment.value}
+					placeholder="Public comment"
 				/>
-				<RadioGroup
-					field={form.publicCommentBehavior}
-					label="imported public comment"
-				/>
+			</div>
 
-				<Checkbox
-					field={form.obfuscate}
-					label="Obfuscate domains in public lists"
-				/>
 
-				<MutationButton
-					label="Import"
-					disabled={false}
-					result={importResult}
-				/>
-			</form>
-		</>
+			<MutationButton
+				label="Import"
+				disabled={false}
+				result={importResult}
+			/>
+		</form>
 	);
 }