{
+ 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 (
-
);
}
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() {
-
+