From b1844323314dd1f0832f1fcdb765a7f67ca01dbc Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Fri, 4 Apr 2025 18:29:22 +0200 Subject: [feature] Allow editing domain blocks/allows, fix comment import (#3967) * start implementing editing of existing domain permissions * [feature] Allow editing domain blocks/allows, fix comment import * [bugfix] Use "comment" via /api/v1/instance * fix the stuff --- .../lib/query/admin/domain-permissions/import.ts | 38 +-- .../lib/query/admin/domain-permissions/update.ts | 43 ++++ web/source/settings/lib/types/domain-permission.ts | 8 +- web/source/settings/style.css | 41 ++-- .../views/moderation/domain-permissions/detail.tsx | 255 +++++++++++++-------- .../domain-permissions/import-export.tsx | 2 +- .../moderation/domain-permissions/process.tsx | 103 ++++----- web/source/settings/views/moderation/router.tsx | 4 +- 8 files changed, 296 insertions(+), 198 deletions(-) (limited to 'web/source/settings') diff --git a/web/source/settings/lib/query/admin/domain-permissions/import.ts b/web/source/settings/lib/query/admin/domain-permissions/import.ts index cbcf44964..a83448a1f 100644 --- a/web/source/settings/lib/query/admin/domain-permissions/import.ts +++ b/web/source/settings/lib/query/admin/domain-permissions/import.ts @@ -40,39 +40,19 @@ function importEntriesProcessor(formData: ImportDomainPermsParams): (_entry: Dom // Override each obfuscate entry if necessary. if (formData.obfuscate !== undefined) { - const obfuscateEntry = (entry: DomainPerm) => { + processingFuncs.push((entry: DomainPerm) => { entry.obfuscate = formData.obfuscate; - }; - processingFuncs.push(obfuscateEntry); + }); } - // Check whether we need to append or replace - // private_comment and public_comment. + // Check whether we need to replace + // private_comment and/or public_comment. ["private_comment","public_comment"].forEach((commentType) => { - let text = formData.commentType?.trim(); - if (!text) { - return; - } - - switch(formData[`${commentType}_behavior`]) { - case "append": - const appendComment = (entry: DomainPerm) => { - if (entry.commentType == undefined) { - entry.commentType = text; - } else { - entry.commentType = [entry.commentType, text].join("\n"); - } - }; - - processingFuncs.push(appendComment); - break; - case "replace": - const replaceComment = (entry: DomainPerm) => { - entry.commentType = text; - }; - - processingFuncs.push(replaceComment); - break; + if (formData[`replace_${commentType}`]) { + const text = formData[commentType]?.trim(); + processingFuncs.push((entry: DomainPerm) => { + entry[commentType] = text; + }); } }); diff --git a/web/source/settings/lib/query/admin/domain-permissions/update.ts b/web/source/settings/lib/query/admin/domain-permissions/update.ts index a6b4b2039..396c30d6e 100644 --- a/web/source/settings/lib/query/admin/domain-permissions/update.ts +++ b/web/source/settings/lib/query/admin/domain-permissions/update.ts @@ -22,6 +22,7 @@ import { gtsApi } from "../../gts-api"; import { replaceCacheOnMutation, removeFromCacheOnMutation, + updateCacheOnMutation, } from "../../query-modifiers"; import { listToKeyedObject } from "../../transforms"; import type { @@ -55,6 +56,36 @@ const extended = gtsApi.injectEndpoints({ ...replaceCacheOnMutation("domainAllows") }), + updateDomainBlock: build.mutation({ + query: ({ id, ...formData}) => ({ + method: "PUT", + url: `/api/v1/admin/domain_blocks/${id}`, + asForm: true, + body: formData, + discardEmpty: false + }), + ...updateCacheOnMutation("domainBlocks", { + key: (_draft, newData) => { + return newData.domain; + } + }) + }), + + updateDomainAllow: build.mutation({ + query: ({ id, ...formData}) => ({ + method: "PUT", + url: `/api/v1/admin/domain_allows/${id}`, + asForm: true, + body: formData, + discardEmpty: false + }), + ...updateCacheOnMutation("domainAllows", { + key: (_draft, newData) => { + return newData.domain; + } + }) + }), + removeDomainBlock: build.mutation({ query: (id) => ({ method: "DELETE", @@ -91,6 +122,16 @@ const useAddDomainBlockMutation = extended.useAddDomainBlockMutation; */ const useAddDomainAllowMutation = extended.useAddDomainAllowMutation; +/** + * Update a single domain permission (block) by PUTing to `/api/v1/admin/domain_blocks/{id}`. + */ +const useUpdateDomainBlockMutation = extended.useUpdateDomainBlockMutation; + +/** + * Update a single domain permission (allow) by PUTing to `/api/v1/admin/domain_allows/{id}`. + */ +const useUpdateDomainAllowMutation = extended.useUpdateDomainAllowMutation; + /** * Remove a single domain permission (block) by DELETEing to `/api/v1/admin/domain_blocks/{id}`. */ @@ -104,6 +145,8 @@ const useRemoveDomainAllowMutation = extended.useRemoveDomainAllowMutation; export { useAddDomainBlockMutation, useAddDomainAllowMutation, + useUpdateDomainBlockMutation, + useUpdateDomainAllowMutation, useRemoveDomainBlockMutation, useRemoveDomainAllowMutation }; diff --git a/web/source/settings/lib/types/domain-permission.ts b/web/source/settings/lib/types/domain-permission.ts index c4560d79b..27c4b56c9 100644 --- a/web/source/settings/lib/types/domain-permission.ts +++ b/web/source/settings/lib/types/domain-permission.ts @@ -46,8 +46,8 @@ export interface DomainPerm { valid?: boolean; checked?: boolean; commentType?: string; - private_comment_behavior?: "append" | "replace"; - public_comment_behavior?: "append" | "replace"; + replace_private_comment?: boolean; + replace_public_comment?: boolean; } /** @@ -65,8 +65,8 @@ const domainPermStripOnImport: Set = new Set([ "valid", "checked", "commentType", - "private_comment_behavior", - "public_comment_behavior", + "replace_private_comment", + "replace_public_comment", ]); /** diff --git a/web/source/settings/style.css b/web/source/settings/style.css index fc146cdd7..c05072043 100644 --- a/web/source/settings/style.css +++ b/web/source/settings/style.css @@ -618,6 +618,15 @@ span.form-info { } } +section > div.domain-block, +section > div.domain-allow { + height: 100%; + + > a { + margin-top: auto; + } +} + .domain-permissions-list { p { margin-top: 0; @@ -976,32 +985,26 @@ button.tab-button { .domain-perm-import-list { .checkbox-list-wrapper { - overflow-x: auto; display: grid; gap: 1rem; } .checkbox-list { + overflow-x: auto; .header { + align-items: center; input[type="checkbox"] { - align-self: start; height: 1.5rem; } } .entry { - gap: 0; - width: 100%; - grid-template-columns: auto minmax(25ch, 2fr) minmax(40ch, 1fr); - grid-template-rows: auto 1fr; - - input[type="checkbox"] { - margin-right: 1rem; - } + grid-template-columns: auto max(50%, 14rem) 1fr; + column-gap: 1rem; + align-items: center; .domain-input { - margin-right: 0.5rem; display: grid; grid-template-columns: 1fr $fa-fw; gap: 0.5rem; @@ -1020,13 +1023,21 @@ button.tab-button { } p { - align-self: center; margin: 0; - grid-column: 4; - grid-row: 1 / span 2; } } } + + .set-comment-checkbox { + display: flex; + flex-direction: column; + gap: 0.25rem; + + padding: 0.5rem 1rem 1rem 1rem; + width: 100%; + border: 0.1rem solid var(--gray1); + border-radius: 0.1rem; + } } .import-export { @@ -1406,6 +1417,7 @@ button.tab-button { } } +.domain-permission-details, .domain-permission-draft-details, .domain-permission-exclude-details, .domain-permission-subscription-details { @@ -1414,6 +1426,7 @@ button.tab-button { } } +.domain-permission-details, .domain-permission-drafts-view, .domain-permission-draft-details, .domain-permission-subscriptions-view, diff --git a/web/source/settings/views/moderation/domain-permissions/detail.tsx b/web/source/settings/views/moderation/domain-permissions/detail.tsx index 0105d9615..e8ef487e3 100644 --- a/web/source/settings/views/moderation/domain-permissions/detail.tsx +++ b/web/source/settings/views/moderation/domain-permissions/detail.tsx @@ -32,8 +32,18 @@ import Loading from "../../../components/loading"; import BackButton from "../../../components/back-button"; import MutationButton from "../../../components/form/mutation-button"; -import { useDomainAllowsQuery, useDomainBlocksQuery } from "../../../lib/query/admin/domain-permissions/get"; -import { useAddDomainAllowMutation, useAddDomainBlockMutation, useRemoveDomainAllowMutation, useRemoveDomainBlockMutation } from "../../../lib/query/admin/domain-permissions/update"; +import { + useDomainAllowsQuery, + useDomainBlocksQuery, +} from "../../../lib/query/admin/domain-permissions/get"; +import { + useAddDomainAllowMutation, + useAddDomainBlockMutation, + useRemoveDomainAllowMutation, + useRemoveDomainBlockMutation, + useUpdateDomainAllowMutation, + useUpdateDomainBlockMutation, +} from "../../../lib/query/admin/domain-permissions/update"; import { DomainPerm } from "../../../lib/types/domain-permission"; import { NoArg } from "../../../lib/types/query"; import { Error } from "../../../components/error"; @@ -41,8 +51,10 @@ import { useBaseUrl } from "../../../lib/navigation/util"; 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 DomainPermDetail() { +export default function DomainPermView() { const baseUrl = useBaseUrl(); const search = useSearch(); @@ -101,33 +113,16 @@ export default function DomainPermDetail() { ? blocks[domain] : allows[domain]; - // Render different into content depending on - // if we have a perm already for this domain. - let infoContent: React.JSX.Element; - if (existingPerm === undefined) { - infoContent = ( - - No stored {permType} yet, you can add one below: - - ); - } else { - infoContent = ( -
- - Editing existing domain {permTypeRaw} isn't implemented yet, check here for progress -
- ); - } + const title = Domain {permType} for {domain}; return ( -
-

- - {" "} - Domain {permType} for {domain} -

- {infoContent} - +

{title}

+ { existingPerm + ? + : No stored {permType} yet, you can add one below: + } + { + if (perm.created_at) { + return new Date(perm.created_at).toDateString(); + } + return "unknown"; + }, [perm.created_at]); + + return ( +
+
+
Created
+
+
+
+
Created By
+
+ +
+
+
+
Domain
+
{perm.domain}
+
+
+
Permission type
+
+ + {permType} +
+
+
+
Subscription ID
+
{perm.subscription_id ?? "[none]"}
+
+
+ ); +} + +interface CreateOrUpdateDomainPermProps { defaultDomain: string; perm?: DomainPerm; permType: PermType; } -function DomainPermForm({ defaultDomain, perm, permType }: DomainPermFormProps) { +function CreateOrUpdateDomainPerm({ + defaultDomain, + perm, + permType +}: CreateOrUpdateDomainPermProps) { const isExistingPerm = perm !== undefined; - const disabledForm = isExistingPerm - ? { - disabled: true, - title: "Domain permissions currently cannot be edited." - } - : { - disabled: false, - title: "", - }; const form = { domain: useTextInput("domain", { @@ -161,8 +208,8 @@ function DomainPermForm({ defaultDomain, perm, permType }: DomainPermFormProps) 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 @@ -171,112 +218,132 @@ function DomainPermForm({ defaultDomain, perm, permType }: DomainPermFormProps) // react is like "weh" (mood), but we can decide // which ones to use conditionally. const [ addBlock, addBlockResult ] = useAddDomainBlockMutation(); + const [ updateBlock, updateBlockResult ] = useUpdateDomainBlockMutation({ fixedCacheKey: perm?.id }); const [ removeBlock, removeBlockResult] = useRemoveDomainBlockMutation({ fixedCacheKey: perm?.id }); const [ addAllow, addAllowResult ] = useAddDomainAllowMutation(); + const [ updateAllow, updateAllowResult ] = useUpdateDomainAllowMutation({ fixedCacheKey: perm?.id }); const [ removeAllow, removeAllowResult ] = useRemoveDomainAllowMutation({ fixedCacheKey: perm?.id }); const [ - addTrigger, - addResult, + createOrUpdateTrigger, + createOrUpdateResult, removeTrigger, removeResult, ] = useMemo(() => { - return permType == "block" - ? [ - addBlock, - addBlockResult, - removeBlock, - removeBlockResult, - ] - : [ - addAllow, - addAllowResult, - removeAllow, - removeAllowResult, - ]; - }, [permType, - addBlock, addBlockResult, removeBlock, removeBlockResult, - addAllow, addAllowResult, removeAllow, removeAllowResult, + switch (true) { + case (permType === "block" && !isExistingPerm): + return [ addBlock, addBlockResult, removeBlock, removeBlockResult ]; + case (permType === "block"): + return [ updateBlock, updateBlockResult, removeBlock, removeBlockResult ]; + case !isExistingPerm: + return [ addAllow, addAllowResult, removeAllow, removeAllowResult ]; + default: + return [ updateAllow, updateAllowResult, removeAllow, removeAllowResult ]; + } + }, [permType, isExistingPerm, + addBlock, addBlockResult, updateBlock, updateBlockResult, removeBlock, removeBlockResult, + addAllow, addAllowResult, updateAllow, updateAllowResult, removeAllow, removeAllowResult, ]); - // Use appropriate submission params for this permType. - const [submitForm, submitFormResult] = useFormSubmit(form, [addTrigger, addResult], { changedOnly: false }); + // Use appropriate submission params for this + // permType, and whether we're creating or updating. + const [submit, submitResult] = useFormSubmit( + form, + [ createOrUpdateTrigger, createOrUpdateResult ], + { + 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; + } + }, + }, + ); // Uppercase first letter of given permType. 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 // and causes issues later on so, before submitting the form, // silently change url, and THEN submit. - let correctUrl = `/${permType}s/${form.domain.value}`; - if (location != correctUrl) { - setLocation(correctUrl); + if (!isExistingPerm) { + let correctUrl = `/${permType}s/${form.domain.value}`; + if (location != correctUrl) { + setLocation(correctUrl); + } } - return submitForm(e); + return submit(e); } return ( -
- + + { !isExistingPerm && + + }