CSV import/export, UI/UX improvements to import-export interface

web/source/package.json

@@ -19,6 +19,7 @@
     "langs": "^2.0.0",
     "match-sorter": "^6.3.1",
     "modern-normalize": "^1.1.0",
+    "papaparse": "^5.3.2",
     "photoswipe": "^5.3.3",
     "photoswipe-dynamic-caption-plugin": "^1.2.7",
     "photoswipe-video-plugin": "^1.0.2",

web/source/settings/admin/federation/export-format-table.jsx

@@ -0,0 +1,64 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const React = require("react");
+
+module.exports = function ExportFormatTable() {
+	return (
+		<table className="export-format-table">
+			<thead>
+				<tr>
+					<th rowSpan={2} />
+					<th colSpan={2}>Includes</th>
+					<th colSpan={2}>Importable by</th>
+				</tr>
+				<tr>
+					<th>Domain</th>
+					<th>Public comment</th>
+					<th>GoToSocial</th>
+					<th>Mastodon</th>
+				</tr>
+			</thead>
+			<tbody>
+				<Format name="Text" info={[true, false, true, false]} />
+				<Format name="JSON" info={[true, true, true, false]} />
+				<Format name="CSV" info={[true, true, true, true]} />
+			</tbody>
+		</table>
+	);
+};
+
+function Format({ name, info }) {
+	return (
+		<tr>
+			<td><b>{name}</b></td>
+			{info.map((b, key) => <td key={key} className="bool">{bool(b)}</td>)}
+		</tr>
+	);
+}
+
+function bool(val) {
+	return (
+		<>
+			<i className={`fa fa-${val ? "check" : "times"}`} aria-hidden="true"></i>
+			<span className="sr-only">{val ? "Yes" : "No"}</span>
+		</>
+	);
+}

web/source/settings/admin/federation/import-export.js

@@ -45,6 +45,7 @@ const MutationButton = require("../../components/form/mutation-button");
 const isValidDomain = require("is-valid-domain");
 const FormWithData = require("../../lib/form/form-with-data");
 const { Error } = require("../../components/error");
+const ExportFormatTable = require("./export-format-table");
 
 const baseUrl = "/settings/admin/federation/import-export";
 
@@ -104,39 +105,55 @@ module.exports = function ImportExport() {
 			<Route>
 				{parseResult.isSuccess && <Redirect to={`${baseUrl}/list`} />}
 				<h2>Import / Export suspended domains</h2>
-
 				<div>
-					<form onSubmit={submitParse}>
+					<p>
+						This page can be used to import and export lists of domains to suspend.
+						Exports can be done in various formats, with varying functionality and support in other software.
+						Imports will automatically detect what format is being processed.
+					</p>
+					<ExportFormatTable />
+				</div>
+				<div className="import-export">
 					<TextArea
 						field={form.domains}
-							label="Domains, one per line (plaintext) or JSON"
+						label="Domains"
 						placeholder={`google.com\nfacebook.com`}
 						rows={8}
 					/>
 
 					<div className="row">
-							<MutationButton label="Import" result={parseResult} showError={false} />
+						<MutationButton label="Import" type="button" onClick={() => submitParse()} result={parseResult} showError={false} />
+						<MutationButton label="Export" type="button" onClick={() => submitExport("export")} result={exportResult} showError={false} />
+					</div>
+
+					<div className="row">
 						<button type="button" className="with-padding">
 							<label>
 								Import file
-									<input className="hidden" type="file" onChange={fileChanged} accept="application/json,text/plain" />
+								<input
+									type="file"
+									className="hidden"
+									onChange={fileChanged}
+									accept="application/json,text/plain,text/csv"
+								/>
 							</label>
 						</button>
-						</div>
+						<div className="export-file">
-					</form>
+							<MutationButton label="Export to file" type="button" onClick={() => submitExport("export-file")} result={exportResult} showError={false} />
-					<form onSubmit={submitExport}>
+							<span>
-						<div className="row">
+								as
-							<MutationButton name="export" label="Export" result={exportResult} showError={false} />
+							</span>
-							<MutationButton name="export-file" label="Export file" result={exportResult} showError={false} />
 							<Select
 								field={form.exportType}
 								options={<>
 									<option value="plain">Text</option>
 									<option value="json">JSON</option>
+									<option value="csv">CSV</option>
 								</>}
 							/>
 						</div>
-					</form>
+					</div>
+
 					{parseResult.error && <Error error={parseResult.error} />}
 					{exportResult.error && <Error error={exportResult.error} />}
 				</div>

web/source/settings/lib/query/admin/import-export.js

@@ -21,6 +21,7 @@
 const Promise = require("bluebird");
 const isValidDomain = require("is-valid-domain");
 const fileDownload = require("js-file-download");
+const csv = require("papaparse");
 
 const {
 	replaceCacheOnMutation,
@@ -31,6 +32,23 @@ const {
 function parseDomainList(list) {
 	if (list[0] == "[") {
 		return JSON.parse(list);
+	} else if (list.startsWith("#domain")) { // Mastodon CSV
+		const { data, errors } = csv.parse(list, {
+			header: true,
+			transformHeader: (header) => header.slice(1), // removes starting '#'
+			skipEmptyLines: true,
+			dynamicTyping: true
+		});
+
+		if (errors.length > 0) {
+			let error = "";
+			errors.forEach((err) => {
+				error += `${err.message} (line ${err.row})`;
+			});
+			throw error;
+		}
+
+		return data;
 	} else {
 		return list.split("\n").map((line) => {
 			let domain = line.trim();
@@ -109,6 +127,9 @@ module.exports = (build) => ({
 			}).then((exportList) => {
 				if (formData.exportType == "json") {
 					return JSON.stringify(exportList);
+				} else if (formData.exportType == "csv") {
+					let header = `#domain,#severity,#reject_media,#reject_reports,#public_comment,#obfuscate`;
+
 				} else {
 					return exportList.join("\n");
 				}

web/source/settings/style.css

@@ -712,6 +712,40 @@ button.with-padding {
 	}
 }
 
+.import-export {
+	.export-file {
+		display: flex;
+		gap: 0.7rem;
+		align-items: center;
+	}
+}
+
+.export-format-table {
+	background: $list-entry-alternate-bg;
+	border-collapse: collapse;
+
+	th, td {
+		border: 0.1rem solid $gray1;
+		padding: 0.3rem;
+	}
+
+	th {
+		background: $list-entry-bg;
+	}
+
+	td {
+		text-align: center;
+
+		.fa-check {
+			color: $green1;
+		}
+
+		.fa-times {
+			color: $error3;
+		}
+	}
+}
+
 .form-field.radio {
 	&, label {
 		display: flex;

web/source/yarn.lock

@@ -4117,6 +4117,11 @@ pako@~1.0.5:
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
+papaparse@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/papaparse/-/papaparse-5.3.2.tgz#d1abed498a0ee299f103130a6109720404fbd467"
+  integrity sha512-6dNZu0Ki+gyV0eBsFKJhYr+MdQYAzFUGlBMNj3GNrmHxmz1lfRa24CjFObPXtjcetlOv5Ad299MhIK0znp3afw==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"