From 8ca2e6093285ade4c146687c9c79946a1e5d41f3 Mon Sep 17 00:00:00 2001 From: tobi Date: Wed, 24 Apr 2024 14:01:48 +0200 Subject: [PATCH] [chore] Bit more refactoring of settings panel --- web/source/index.js | 2 +- web/source/package.json | 8 +- .../{back-button.jsx => back-button.tsx} | 0 .../{combo-box.jsx => combo-box.tsx} | 12 +- .../components/{error.jsx => error.tsx} | 4 +- .../{fake-profile.jsx => fake-profile.tsx} | 6 +- .../{fake-toot.jsx => fake-toot.tsx} | 11 +- .../{languages.jsx => languages.tsx} | 10 +- .../components/{loading.jsx => loading.tsx} | 6 +- ...r-logout-card.jsx => user-logout-card.tsx} | 15 +- web/source/settings/lib/query/index.js | 25 - .../views/admin/actions/keys/expireremote.tsx | 2 +- .../views/admin/actions/media/cleanup.tsx | 2 +- .../views/admin/emoji/local/new-emoji.tsx | 2 +- .../views/admin/emoji/local/overview.tsx | 2 +- web/source/settings/views/admin/routes.tsx | 110 +- .../views/admin/settings/ruledetail.tsx | 103 ++ .../settings/views/admin/settings/rules.tsx | 88 +- .../settings/{index.tsx => settings.tsx} | 10 +- .../moderation/accounts/detail/actions.tsx | 5 +- .../accounts/detail/handlesignup.tsx | 6 +- .../moderation/accounts/detail/index.tsx | 5 +- .../moderation/accounts/pending/index.tsx | 2 +- .../moderation/accounts/search/index.tsx | 3 +- .../moderation/domain-permissions/form.tsx | 4 - .../domain-permissions/overview.tsx | 3 - .../moderation/domain-permissions/process.tsx | 2 - .../views/moderation/reports/overview.tsx | 2 - .../settings/views/moderation/routes.tsx | 73 +- web/source/settings/views/user/profile.tsx | 3 +- web/source/settings/views/user/settings.tsx | 9 +- web/source/tsconfig.json | 6 +- web/source/yarn.lock | 1081 ++++++++++------- 33 files changed, 941 insertions(+), 681 deletions(-) rename web/source/settings/components/{back-button.jsx => back-button.tsx} (100%) rename web/source/settings/components/{combo-box.jsx => combo-box.tsx} (85%) rename web/source/settings/components/{error.jsx => error.tsx} (96%) rename web/source/settings/components/{fake-profile.jsx => fake-profile.tsx} (93%) rename web/source/settings/components/{fake-toot.jsx => fake-toot.tsx} (90%) rename web/source/settings/components/{languages.jsx => languages.tsx} (86%) rename web/source/settings/components/{loading.jsx => loading.tsx} (92%) rename web/source/settings/components/{user-logout-card.jsx => user-logout-card.tsx} (84%) delete mode 100644 web/source/settings/lib/query/index.js create mode 100644 web/source/settings/views/admin/settings/ruledetail.tsx rename web/source/settings/views/admin/settings/{index.tsx => settings.tsx} (96%) diff --git a/web/source/index.js b/web/source/index.js index d9ef70ff9..5cee28046 100644 --- a/web/source/index.js +++ b/web/source/index.js @@ -96,4 +96,4 @@ skulk({ }]] } } -}); \ No newline at end of file +}); diff --git a/web/source/package.json b/web/source/package.json index d72cf7764..919bf3c83 100644 --- a/web/source/package.json +++ b/web/source/package.json @@ -35,10 +35,10 @@ "wouter": "^3.1.0" }, "devDependencies": { - "@babel/core": "^7.23.0", - "@babel/preset-env": "^7.22.20", - "@babel/preset-react": "^7.22.15", - "@babel/preset-typescript": "^7.23.0", + "@babel/core": "^7.24.4", + "@babel/preset-env": "^7.24.4", + "@babel/preset-react": "^7.24.1", + "@babel/preset-typescript": "^7.24.1", "@browserify/envify": "^6.0.0", "@browserify/uglifyify": "^6.0.0", "@joepie91/eslint-config": "^1.1.1", diff --git a/web/source/settings/components/back-button.jsx b/web/source/settings/components/back-button.tsx similarity index 100% rename from web/source/settings/components/back-button.jsx rename to web/source/settings/components/back-button.tsx diff --git a/web/source/settings/components/combo-box.jsx b/web/source/settings/components/combo-box.tsx similarity index 85% rename from web/source/settings/components/combo-box.jsx rename to web/source/settings/components/combo-box.tsx index fc0133583..113e6179d 100644 --- a/web/source/settings/components/combo-box.jsx +++ b/web/source/settings/components/combo-box.tsx @@ -17,15 +17,11 @@ along with this program. If not, see . */ -const React = require("react"); +import React from "react"; -const { - Combobox, - ComboboxItem, - ComboboxPopover, -} = require("ariakit/combobox"); +import { Combobox, ComboboxItem, ComboboxPopover } from "ariakit/combobox"; -module.exports = function ComboBox({ field, items, label, children, ...inputProps }) { +export default function ComboBox({ field, items, label, children, ...inputProps }) { return (
); -}; \ No newline at end of file +} \ No newline at end of file diff --git a/web/source/settings/components/error.jsx b/web/source/settings/components/error.tsx similarity index 96% rename from web/source/settings/components/error.jsx rename to web/source/settings/components/error.tsx index 3205cd5e3..15c3bccd4 100644 --- a/web/source/settings/components/error.jsx +++ b/web/source/settings/components/error.tsx @@ -17,7 +17,7 @@ along with this program. If not, see . */ -const React = require("react"); +import React from "react"; function ErrorFallback({ error, resetErrorBoundary }) { return ( @@ -81,4 +81,4 @@ function Error({ error }) { ); } -module.exports = { ErrorFallback, Error }; \ No newline at end of file +export { ErrorFallback, Error }; diff --git a/web/source/settings/components/fake-profile.jsx b/web/source/settings/components/fake-profile.tsx similarity index 93% rename from web/source/settings/components/fake-profile.jsx rename to web/source/settings/components/fake-profile.tsx index 6cb8d0187..4a5157378 100644 --- a/web/source/settings/components/fake-profile.jsx +++ b/web/source/settings/components/fake-profile.tsx @@ -17,9 +17,9 @@ along with this program. If not, see . */ -const React = require("react"); +import React from "react"; -module.exports = function FakeProfile({ avatar, header, display_name, username, role }) { +export default function FakeProfile({ avatar, header, display_name, username, role }) { return ( // Keep in sync with web/template/profile.tmpl
@@ -49,4 +49,4 @@ module.exports = function FakeProfile({ avatar, header, display_name, username,
); -}; \ No newline at end of file +} diff --git a/web/source/settings/components/fake-toot.jsx b/web/source/settings/components/fake-toot.tsx similarity index 90% rename from web/source/settings/components/fake-toot.jsx rename to web/source/settings/components/fake-toot.tsx index 08f806008..ad0c387a4 100644 --- a/web/source/settings/components/fake-toot.jsx +++ b/web/source/settings/components/fake-toot.tsx @@ -17,16 +17,15 @@ along with this program. If not, see . */ -const React = require("react"); +import React from "react"; +import { useVerifyCredentialsQuery } from "../lib/query/oauth"; -const query = require("../lib/query"); - -module.exports = function FakeToot({ children }) { +export default function FakeToot({ children }) { const { data: account = { avatar: "/assets/default_avatars/GoToSocial_icon1.png", display_name: "", username: "" - } } = query.useVerifyCredentialsQuery(); + } } = useVerifyCredentialsQuery(); return (
@@ -54,4 +53,4 @@ module.exports = function FakeToot({ children }) {
); -}; \ No newline at end of file +} diff --git a/web/source/settings/components/languages.jsx b/web/source/settings/components/languages.tsx similarity index 86% rename from web/source/settings/components/languages.jsx rename to web/source/settings/components/languages.tsx index 61c76e03a..7c2986438 100644 --- a/web/source/settings/components/languages.jsx +++ b/web/source/settings/components/languages.tsx @@ -17,10 +17,10 @@ along with this program. If not, see . */ -const React = require("react"); -const langs = require("langs"); +import React from "react"; +import { all } from "langs"; -const asElements = langs.all().map((l) => { +const asElements = all().map((l) => { let code = l["1"].toUpperCase(); let name = l.name; if (l.name != l.local) { @@ -29,6 +29,6 @@ const asElements = langs.all().map((l) => { return ; }); -module.exports = function Languages() { +export default function Languages() { return asElements; -}; \ No newline at end of file +} \ No newline at end of file diff --git a/web/source/settings/components/loading.jsx b/web/source/settings/components/loading.tsx similarity index 92% rename from web/source/settings/components/loading.jsx rename to web/source/settings/components/loading.tsx index c62c72a0a..f7635534f 100644 --- a/web/source/settings/components/loading.jsx +++ b/web/source/settings/components/loading.tsx @@ -17,10 +17,10 @@ along with this program. If not, see . */ -const React = require("react"); +import React from "react"; -module.exports = function Loading() { +export default function Loading() { return ( ); -}; \ No newline at end of file +} diff --git a/web/source/settings/components/user-logout-card.jsx b/web/source/settings/components/user-logout-card.tsx similarity index 84% rename from web/source/settings/components/user-logout-card.jsx rename to web/source/settings/components/user-logout-card.tsx index 9d88642a5..f8eeaf63c 100644 --- a/web/source/settings/components/user-logout-card.jsx +++ b/web/source/settings/components/user-logout-card.tsx @@ -17,15 +17,12 @@ along with this program. If not, see . */ -const React = require("react"); -const Loading = require("./loading"); -const { - useVerifyCredentialsQuery, - useLogoutMutation, -} = require("../lib/query/oauth"); -const { useInstanceV1Query } = require("../lib/query"); +import React from "react"; +import Loading from "./loading"; +import { useVerifyCredentialsQuery, useLogoutMutation } from "../lib/query/oauth"; +import { useInstanceV1Query } from "../lib/query/gts-api"; -module.exports = function UserLogoutCard() { +export default function UserLogoutCard() { const { data: profile, isLoading } = useVerifyCredentialsQuery(); const { data: instance } = useInstanceV1Query(); const [logoutQuery] = useLogoutMutation(); @@ -44,4 +41,4 @@ module.exports = function UserLogoutCard() { ); } -}; \ No newline at end of file +} \ No newline at end of file diff --git a/web/source/settings/lib/query/index.js b/web/source/settings/lib/query/index.js deleted file mode 100644 index aeaa4a1d7..000000000 --- a/web/source/settings/lib/query/index.js +++ /dev/null @@ -1,25 +0,0 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - 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 . -*/ - -module.exports = { - ...require("./gts-api"), - ...require("./oauth"), - ...require("./user"), - ...require("./admin") -}; diff --git a/web/source/settings/views/admin/actions/keys/expireremote.tsx b/web/source/settings/views/admin/actions/keys/expireremote.tsx index c7a410267..82045942c 100644 --- a/web/source/settings/views/admin/actions/keys/expireremote.tsx +++ b/web/source/settings/views/admin/actions/keys/expireremote.tsx @@ -18,10 +18,10 @@ */ import React from "react"; -import { useInstanceKeysExpireMutation } from "../../../../lib/query"; import { TextInput } from "../../../../components/form/inputs"; import MutationButton from "../../../../components/form/mutation-button"; import { useTextInput } from "../../../../lib/form"; +import { useInstanceKeysExpireMutation } from "../../../../lib/query/admin"; export default function ExpireRemote({}) { const domainField = useTextInput("domain"); diff --git a/web/source/settings/views/admin/actions/media/cleanup.tsx b/web/source/settings/views/admin/actions/media/cleanup.tsx index d4bae24a6..c1df511e1 100644 --- a/web/source/settings/views/admin/actions/media/cleanup.tsx +++ b/web/source/settings/views/admin/actions/media/cleanup.tsx @@ -19,10 +19,10 @@ import React from "react"; -import { useMediaCleanupMutation } from "../../../../lib/query"; import { useTextInput } from "../../../../lib/form"; import { TextInput } from "../../../../components/form/inputs"; import MutationButton from "../../../../components/form/mutation-button"; +import { useMediaCleanupMutation } from "../../../../lib/query/admin"; export default function Cleanup({}) { const daysField = useTextInput("days", { defaultValue: "30" }); diff --git a/web/source/settings/views/admin/emoji/local/new-emoji.tsx b/web/source/settings/views/admin/emoji/local/new-emoji.tsx index 73e846f16..8ff8236a7 100644 --- a/web/source/settings/views/admin/emoji/local/new-emoji.tsx +++ b/web/source/settings/views/admin/emoji/local/new-emoji.tsx @@ -26,7 +26,7 @@ import { CategorySelect } from '../category-select'; import FakeToot from "../../../../components/fake-toot"; import MutationButton from "../../../../components/form/mutation-button"; import { useAddEmojiMutation } from "../../../../lib/query/admin/custom-emoji"; -import { useInstanceV1Query } from "../../../../lib/query"; +import { useInstanceV1Query } from "../../../../lib/query/gts-api"; export default function NewEmojiForm() { const shortcode = useShortcode(); diff --git a/web/source/settings/views/admin/emoji/local/overview.tsx b/web/source/settings/views/admin/emoji/local/overview.tsx index b28af59f3..b4fa48d74 100644 --- a/web/source/settings/views/admin/emoji/local/overview.tsx +++ b/web/source/settings/views/admin/emoji/local/overview.tsx @@ -29,7 +29,7 @@ import { TextInput } from "../../../../components/form/inputs"; import { useListEmojiQuery } from "../../../../lib/query/admin/custom-emoji"; import { CustomEmoji } from "../../../../lib/types/custom-emoji"; -export function EmojiOverview() { +export default function EmojiOverview() { const { data: emoji = [], isLoading, isError, error } = useListEmojiQuery({ filter: "domain:local" }); let content: React.JSX.Element; diff --git a/web/source/settings/views/admin/routes.tsx b/web/source/settings/views/admin/routes.tsx index 29889046c..e4193cf93 100644 --- a/web/source/settings/views/admin/routes.tsx +++ b/web/source/settings/views/admin/routes.tsx @@ -18,26 +18,35 @@ */ import { MenuItem } from "../../lib/navigation/menu"; -import React from "react"; -import { BaseUrlContext, useBaseUrl } from "../../lib/navigation/util"; -import { Route, Router, Switch } from "wouter"; -import EmojiDetail from "./emoji/local/detail"; -import { EmojiOverview } from "./emoji/local/overview"; -import RemoteEmoji from "./emoji/remote"; -import InstanceSettings from "./settings"; -import { InstanceRuleDetail, InstanceRules } from "./settings/rules"; -import Media from "./actions/media"; -import Keys from "./actions/keys"; +import React, { Suspense, lazy } from "react"; +import { BaseUrlContext, useBaseUrl, useHasPermission } from "../../lib/navigation/util"; +import { Redirect, Route, Router, Switch } from "wouter"; +import Loading from "../../components/loading"; +import { ErrorBoundary } from "../../lib/navigation/error"; /* EXPORTED COMPONENTS */ /** - * Admininistration menu. Admin actions, - * emoji import, instance settings. + * - /settings/admin/instance-settings + * - /settings/admin/instance-rules + * - /settings/admin/instance-rules/:ruleId + * - /settings/admin/emojis + * - /settings/admin/emojis/local + * - /settings/admin/emojis/local/:emojiId + * - /settings/admin/emojis/remote + * - /settings/admin/actions + * - /settings/admin/actions/media + * - /settings/admin/actions/keys */ export function AdminMenu() { + // Don't route if logged-in user + // doesn't have permissions to access. + if (!useHasPermission(["admin"])) { + return null; + } + return ( import('./settings/settings')); + const InstanceRules = lazy(() => import("./settings/rules")); + const InstanceRuleDetail = lazy(() => import('./settings/ruledetail')); + return ( - - - + + }> + + + + + + + + @@ -139,38 +167,64 @@ function AdminEmojisMenu() { ROUTERS */ +/** + * - /settings/admin/emojis + * - /settings/admin/emojis/local + * - /settings/admin/emojis/local/:emojiId + * - /settings/admin/emojis/remote + */ function AdminEmojisRouter() { const parentUrl = useBaseUrl(); const thisBase = "/emojis"; const absBase = parentUrl + thisBase; + const EmojiOverview = lazy(() => import('./emoji/local/overview')); + const EmojiDetail = lazy(() => import('./emoji/local/detail')); + const RemoteEmoji = lazy(() => import('./emoji/remote')); + return ( - - - - - - + + }> + + + + + + + + ); } +/** + * - /settings/admin/actions + * - /settings/admin/actions/media + * - /settings/admin/actions/keys + */ function AdminActionsRouter() { const parentUrl = useBaseUrl(); const thisBase = "/actions"; const absBase = parentUrl + thisBase; + const Media = lazy(() => import('./actions/media')); + const Keys = lazy(() => import('./actions/keys')); + return ( - - - - - + + }> + + + + + + + ); diff --git a/web/source/settings/views/admin/settings/ruledetail.tsx b/web/source/settings/views/admin/settings/ruledetail.tsx new file mode 100644 index 000000000..cca2b79a5 --- /dev/null +++ b/web/source/settings/views/admin/settings/ruledetail.tsx @@ -0,0 +1,103 @@ +/* + GoToSocial + Copyright (C) GoToSocial Authors admin@gotosocial.org + SPDX-License-Identifier: AGPL-3.0-or-later + + 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 . +*/ + +import React from "react"; +import { Redirect, useParams } from "wouter"; +import { useBaseUrl } from "../../../lib/navigation/util"; +import { useValue, useTextInput } from "../../../lib/form"; +import useFormSubmit from "../../../lib/form/submit"; +import { TextArea } from "../../../components/form/inputs"; +import MutationButton from "../../../components/form/mutation-button"; +import BackButton from "../../../components/back-button"; +import Loading from "../../../components/loading"; +import { useDeleteInstanceRuleMutation, useInstanceRulesQuery, useUpdateInstanceRuleMutation } from "../../../lib/query/admin"; +import { Error } from "../../../components/error"; + +export default function InstanceRuleDetail() { + const baseUrl = useBaseUrl(); + const params: { ruleId: string } = useParams(); + + const { data: rules, isLoading, isError, error } = useInstanceRulesQuery(); + if (isLoading) { + return ; + } else if (isError) { + return ; + } + + if (rules === undefined) { + throw "undefined rules"; + } + + return ( + <> + + + + ); +} + +function EditInstanceRuleForm({ rule }) { + const baseUrl = useBaseUrl(); + const form = { + id: useValue("id", rule.id), + rule: useTextInput("text", { defaultValue: rule.text }) + }; + + const [submitForm, result] = useFormSubmit(form, useUpdateInstanceRuleMutation()); + + const [deleteRule, deleteResult] = useDeleteInstanceRuleMutation({ fixedCacheKey: rule.id }); + + if (result.isSuccess || deleteResult.isSuccess) { + return ( + + ); + } + + return ( +
+
+