diff options
Diffstat (limited to 'web')
8 files changed, 296 insertions, 198 deletions
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<DomainPerm, any>({ + 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<DomainPerm, any>({ + 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<DomainPerm, string>({ query: (id) => ({ method: "DELETE", @@ -92,6 +123,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}`. */ const useRemoveDomainBlockMutation = extended.useRemoveDomainBlockMutation; @@ -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<keyof DomainPerm> = 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 = ( - <span> - No stored {permType} yet, you can add one below: - </span> - ); - } else { - infoContent = ( - <div className="info"> - <i className="fa fa-fw fa-exclamation-triangle" aria-hidden="true"></i> - <b>Editing existing domain {permTypeRaw} isn't implemented yet, <a href="https://github.com/superseriousbusiness/gotosocial/issues/1198" target="_blank" rel="noopener noreferrer">check here for progress</a></b> - </div> - ); - } + const title = <span>Domain {permType} for {domain}</span>; return ( - <div> - <h1 className="text-cutoff"> - <BackButton to={`~${baseUrl}/${permTypeRaw}`} /> - {" "} - Domain {permType} for {domain} - </h1> - {infoContent} - <DomainPermForm + <div className="domain-permission-details"> + <h1><BackButton to={`~${baseUrl}/${permTypeRaw}`} /> {title}</h1> + { existingPerm + ? <DomainPermDetails perm={existingPerm} permType={permType} /> + : <span>No stored {permType} yet, you can add one below:</span> + } + <CreateOrUpdateDomainPerm defaultDomain={domain} perm={existingPerm} permType={permType} @@ -136,23 +131,75 @@ export default function DomainPermDetail() { ); } -interface DomainPermFormProps { +interface DomainPermDetailsProps { + perm: DomainPerm, + permType: PermType, +} + +function DomainPermDetails({ + perm, + permType +}: DomainPermDetailsProps) { + const baseUrl = useBaseUrl(); + const [ location ] = useLocation(); + + const created = useMemo(() => { + if (perm.created_at) { + return new Date(perm.created_at).toDateString(); + } + return "unknown"; + }, [perm.created_at]); + + return ( + <dl className="info-list"> + <div className="info-list-entry"> + <dt>Created</dt> + <dd><time dateTime={perm.created_at}>{created}</time></dd> + </div> + <div className="info-list-entry"> + <dt>Created By</dt> + <dd> + <UsernameLozenge + account={perm.created_by} + linkTo={`~/settings/moderation/accounts/${perm.created_by}`} + backLocation={`~${baseUrl}${location}`} + /> + </dd> + </div> + <div className="info-list-entry"> + <dt>Domain</dt> + <dd>{perm.domain}</dd> + </div> + <div className="info-list-entry"> + <dt>Permission type</dt> + <dd className={`permission-type ${permType}`}> + <i + aria-hidden={true} + className={`fa fa-${permType === "allow" ? "check" : "close"}`} + ></i> + {permType} + </dd> + </div> + <div className="info-list-entry"> + <dt>Subscription ID</dt> + <dd>{perm.subscription_id ?? "[none]"}</dd> + </div> + </dl> + ); +} + +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 ( - <form onSubmit={verifyUrlThenSubmit}> - <TextInput - field={form.domain} - label="Domain" - placeholder="example.com" - autoCapitalize="none" - spellCheck="false" - {...disabledForm} - /> + <form onSubmit={onSubmit}> + { !isExistingPerm && + <TextInput + field={form.domain} + label="Domain" + placeholder="example.com" + autoCapitalize="none" + spellCheck="false" + /> + } <Checkbox field={form.obfuscate} label="Obfuscate domain in public lists" - {...disabledForm} /> <TextArea - field={form.commentPrivate} + field={form.privateComment} label="Private comment" autoCapitalize="sentences" rows={3} - {...disabledForm} /> <TextArea - field={form.commentPublic} + field={form.publicComment} label="Public comment" autoCapitalize="sentences" rows={3} - {...disabledForm} /> <div className="action-buttons row"> <MutationButton - label={permTypeUpper} - result={submitFormResult} - showError={false} - {...disabledForm} + label={isExistingPerm ? "Update " + permType.toString() : permTypeUpper} + result={submitResult} + disabled={ + isExistingPerm && + !form.obfuscate.hasChanged() && + !form.privateComment.hasChanged() && + !form.publicComment.hasChanged() + } /> - { - isExistingPerm && - <MutationButton + { isExistingPerm && + <button type="button" onClick={() => removeTrigger(perm.id?? "")} - label="Remove" - result={removeResult} className="button danger" - showError={false} - disabled={!isExistingPerm} - /> + > + Remove {permType.toString()} + </button> } </div> <> - {addResult.error && <Error error={addResult.error} />} + {createOrUpdateResult.error && <Error error={createOrUpdateResult.error} />} {removeResult.error && <Error error={removeResult.error} />} </> diff --git a/web/source/settings/views/moderation/domain-permissions/import-export.tsx b/web/source/settings/views/moderation/domain-permissions/import-export.tsx index 89f385107..d3541c6e7 100644 --- a/web/source/settings/views/moderation/domain-permissions/import-export.tsx +++ b/web/source/settings/views/moderation/domain-permissions/import-export.tsx @@ -61,7 +61,7 @@ export default function ImportExport() { > < back </span> - Confirm import of domain {form.permType.value}s: + Confirm {form.permType.value}s: </h1> <ProcessImport list={parseResult.data} diff --git a/web/source/settings/views/moderation/domain-permissions/process.tsx b/web/source/settings/views/moderation/domain-permissions/process.tsx index d54d7399c..7338e4424 100644 --- a/web/source/settings/views/moderation/domain-permissions/process.tsx +++ b/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> ); } diff --git a/web/source/settings/views/moderation/router.tsx b/web/source/settings/views/moderation/router.tsx index 90214188f..e92a64641 100644 --- a/web/source/settings/views/moderation/router.tsx +++ b/web/source/settings/views/moderation/router.tsx @@ -25,7 +25,7 @@ import ReportDetail from "./reports/detail"; import { ErrorBoundary } from "../../lib/navigation/error"; import ImportExport from "./domain-permissions/import-export"; import DomainPermissionsOverview from "./domain-permissions/overview"; -import DomainPermDetail from "./domain-permissions/detail"; +import DomainPermView from "./domain-permissions/detail"; import AccountsSearch from "./accounts"; import AccountsPending from "./accounts/pending"; import AccountDetail from "./accounts/detail"; @@ -160,7 +160,7 @@ function ModerationDomainPermsRouter() { <Route path="/subscriptions/preview" component={DomainPermissionSubscriptionsPreview} /> <Route path="/subscriptions/:permSubId" component={DomainPermissionSubscriptionDetail} /> <Route path="/:permType" component={DomainPermissionsOverview} /> - <Route path="/:permType/:domain" component={DomainPermDetail} /> + <Route path="/:permType/:domain" component={DomainPermView} /> <Route><Redirect to="/blocks"/></Route> </Switch> </ErrorBoundary> |