[chore] Settings refactor fix4 (#1383)

* fix error handling behavior in emoji overview and FormWithData components

* css: long domain cutoff

* unused require

* eslint vscode task

.vscode/settings.json

@@ -2,5 +2,8 @@
 	"go.lintTool":"golangci-lint",
 	"go.lintFlags": [
 	  "--fast"
-	]
+	],
+	"eslint.workingDirectories": ["web/source"],
+	"eslint.lintTask.enable": true,
+	"eslint.lintTask.options": "${workspaceFolder}/web/source"
 }

web/source/.eslintrc.js

@@ -22,6 +22,6 @@ module.exports = {
 	"extends": ["@joepie91/eslint-config/react"],
 	"plugins": ["license-header"],
 	"rules": {
-		"license-header/header": ["error", ".license-header.js"]
+		"license-header/header": ["error", __dirname + "/.license-header.js"]
 	}
 };

web/source/css/base.css

@@ -408,3 +408,9 @@ label {
 		animation: none;
 	}
 }
+
+.text-cutoff {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}

web/source/settings/admin/emoji/local/overview.js

@@ -26,27 +26,35 @@ const NewEmojiForm = require("./new-emoji");
 const query = require("../../../lib/query");
 const { useEmojiByCategory } = require("../category-select");
 const Loading = require("../../../components/loading");
+const { Error } = require("../../../components/error");
 
 module.exports = function EmojiOverview({ baseUrl }) {
 	const {
 		data: emoji = [],
 		isLoading,
+		isError,
 		error
 	} = query.useListEmojiQuery({ filter: "domain:local" });
 
+	let content = null;
+
+	if (isLoading) {
+		content = <Loading />;
+	} else if (isError) {
+		content = <Error error={error} />;
+	} else {
+		content = (
+			<>
+				<EmojiList emoji={emoji} baseUrl={baseUrl} />
+				<NewEmojiForm emoji={emoji} />
+			</>
+		);
+	}
+
 	return (
 		<>
 			<h1>Custom Emoji (local)</h1>
-			{error &&
-				<div className="error accent">{error}</div>
-			}
-			{isLoading
-				? <Loading />
-				: <>
-					<EmojiList emoji={emoji} baseUrl={baseUrl} />
-					<NewEmojiForm emoji={emoji} />
-				</>
-			}
+			{content}
 		</>
 	);
 };

web/source/settings/admin/federation/detail.js

@@ -67,7 +67,7 @@ module.exports = function InstanceDetail({ baseUrl }) {
 
 	return (
 		<div>
-			<h1><BackButton to={baseUrl} /> Federation settings for: {domain}</h1>
+			<h1 className="text-cutoff"><BackButton to={baseUrl} /> Federation settings for: <span title={domain}>{domain}</span></h1>
 			{infoContent}
 			<DomainBlockForm defaultDomain={domain} block={existingBlock} />
 		</div>

web/source/settings/components/authorization/index.jsx

@@ -34,8 +34,6 @@ module.exports = function Authorization({ App }) {
 		skip: loginState == "none" || loginState == "logout" || expectingRedirect
 	});
 
-	console.log("skip verify:", loginState, expectingRedirect);
-
 	let showLogin = true;
 	let content = null;
 

web/source/settings/lib/form/form-with-data.jsx

@@ -19,13 +19,14 @@
 "use strict";
 
 const React = require("react");
+const { Error } = require("../../components/error");
 
 const Loading = require("../../components/loading");
 
 // Wrap Form component inside component that fires the RTK Query call,
 // so Form will only be rendered when data is available to generate form-fields for
 module.exports = function FormWithData({ dataQuery, DataForm, queryArg, ...formProps }) {
-	const { data, isLoading } = dataQuery(queryArg);
+	const { data, isLoading, isError, error } = dataQuery(queryArg);
 
 	if (isLoading) {
 		return (
@@ -33,6 +34,10 @@ module.exports = function FormWithData({ dataQuery, DataForm, queryArg, ...formP
 				<Loading />
 			</div>
 		);
+	} else if (isError) {
+		return (
+			<Error error={error} />
+		);
 	} else {
 		return <DataForm data={data} {...formProps} />;
 	}