{
+ 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", {
@@ -171,70 +217,80 @@ 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
+ },
+ );
// Uppercase first letter of given permType.
const permTypeUpper = useCapitalize(permType);
const [location, setLocation] = useLocation();
-
function verifyUrlThenSubmit(e) {
// 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 (