diff --git a/messages/en-US.json b/messages/en-US.json index 39327ae7b..10b20c4fd 100644 --- a/messages/en-US.json +++ b/messages/en-US.json @@ -4441,7 +4441,7 @@ "redirectDestinationHost": "Destination", "redirectDestinationHostDescription": "Where requests are sent, including the scheme, such as https://example.com", "redirectDestinationHostRequired": "Enter a destination", - "redirectSameDomainAsSource": "Same domain as source", + "redirectSameDomainAsSource": "Same Domain as Source", "redirectSameDomainAsSourceDescription": "Keep the destination on the source domain and only change the path", "redirectDestinationHostInvalid": "Enter a valid destination with a scheme, such as https://example.com", "redirectMatchPathDescription": "Which incoming paths this redirect applies to", diff --git a/src/components/RedirectForm.tsx b/src/components/RedirectForm.tsx index f57e6b9c3..e8c703e23 100644 --- a/src/components/RedirectForm.tsx +++ b/src/components/RedirectForm.tsx @@ -1,6 +1,5 @@ "use client"; -import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog"; import DomainPicker from "@app/components/DomainPicker"; import { PathMatchDisplay, @@ -15,7 +14,6 @@ import { SettingsSection, SettingsSectionBody, SettingsSectionDescription, - SettingsSectionFooter, SettingsSectionForm, SettingsSectionHeader, SettingsSectionTitle @@ -101,8 +99,6 @@ export default function RedirectForm({ const t = useTranslations(); const [, formAction, saveLoading] = useActionState(onSubmit, null); - const [deleteLoading, setDeleteLoading] = useState(false); - const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [selectedResource, setSelectedResource] = useState(initialResource); @@ -320,96 +316,301 @@ export default function RedirectForm({ } } - async function onDelete() { - setDeleteLoading(true); - try { - await api.delete(`/org/${orgId}/redirects/${redirect!.redirectId}`); - toast({ - title: t("success"), - description: t("redirectDeleted") - }); - router.push(`/${orgId}/settings/redirects`); - } catch (e) { - toast({ - variant: "destructive", - title: t("redirectErrorDelete"), - description: formatAxiosError(e, t("redirectErrorDelete")) - }); - } finally { - setDeleteLoading(false); - setIsDeleteModalOpen(false); - } - } - return ( - <> - {isEditing && ( - -

{t("redirectQuestionRemove")}

-

{t("redirectMessageRemove")}

- - } - buttonText={t("redirectDeleteConfirm")} - onConfirm={onDelete} - string={redirect!.name} - title={t("redirectDelete")} - /> - )} + + + + + {t("redirectSource")} + + + {t("redirectSourceSectionDescription")} + + - - - - - {t("redirectSource")} - - - {t("redirectSourceSectionDescription")} - - - - - -
- - - - {resourceMissingDomain && ( - - - - {t( - "redirectDomainSelectedDomainNotFound" - )} - - + + + + + + + {resourceMissingDomain && ( + + + + {t( + "redirectDomainSelectedDomainNotFound" + )} + + + )} + ( + + + + + + )} + /> + + + + ( + + + {t("name")} + + + + + + + )} + /> + + + + ( + + + {t( + "redirectAttachedTo" + )} + + + + {t( + "redirectAttachedToDescription" + )} + + + + )} + /> + + {attachTo === "domain" ? ( + ( + + { + form.setValue( + "domainId", + res?.domainId ?? + null, + { + shouldValidate: true + } + ); + form.setValue( + "subdomain", + res?.subdomain || + null + ); + setDomainFullDomain( + res?.fullDomain ?? + null + ); + }} + /> + + + )} + /> + + ) : ( + + ( + + + {t( + "selectedRedirectResource" + )} + + + + + + + + + { + setSelectedResource( + resource + ); + field.onChange( + resource.resourceId + ); + }} + /> + + + + + )} + /> + + )} + + {attachTo === "resource" && ( + + + + {t("resourceDomain")} + + + + + )} + + {/* The cloud only serves HTTPS, so there is nothing to toggle there. */} + {build !== "saas" && ( + + ( + )} + + + + + +
- - ( - - - {t("name")} - - - - - - - )} - /> - + + + + {t("redirectSettings")} + + + {t("redirectSettingsDescription")} + + - - ( - - - {t( - "redirectAttachedTo" - )} - - - - {t( - "redirectAttachedToDescription" - )} - - - - )} - /> - - {attachTo === "domain" ? ( - - ( - - { - form.setValue( - "domainId", - res?.domainId ?? - null, - { - shouldValidate: true - } - ); - form.setValue( - "subdomain", - res?.subdomain || - null - ); - setDomainFullDomain( - res?.fullDomain ?? - null - ); - }} - /> - - - )} - /> - - ) : ( - - ( - - - {t( - "selectedRedirectResource" - )} - - - - - - - - - { - setSelectedResource( - resource - ); - field.onChange( - resource.resourceId - ); - }} - /> - - - - - )} - /> - - )} + + +
+ + + + + - {attachTo === "resource" && ( - + + ( - {t("resourceDomain")} + {t( + "redirectDestinationHost" + )} - + + + + {t( + "redirectDestinationHostDescription" + )} + + + + )} + /> + + + + ( + + + {t("matchPath")} + + { + // No match path + // means the + // redirect applies + // to every path; + // pathMatchType is + // NOT NULL so it + // keeps a default. + field.onChange( + config.path || + null + ); + form.setValue( + "pathMatchType", + (config.pathMatchType as + | "exact" + | "prefix" + | "regex") || + DEFAULT_PATH_MATCH_TYPE + ); + }} + trigger={ + } /> + + {t( + "redirectMatchPathDescription" + )} + + - - )} + )} + /> + - {/* The cloud only serves HTTPS, so there is nothing to toggle there. */} - {build !== "saas" && ( - - ( - - - - - - - )} - /> - - )} - -
- -
-
-
- - - - - {t("redirectSettings")} - - - {t("redirectSettingsDescription")} - - - - - -
- - - - - - - - ( - - - {t( - "redirectDestinationHost" - )} - - - - - - {t( - "redirectDestinationHostDescription" - )} - - - - )} - /> - - - - ( - - - {t("matchPath")} - - { - // No match path - // means the - // redirect applies - // to every path; - // pathMatchType is - // NOT NULL so it - // keeps a default. - field.onChange( - config.path || - null - ); - form.setValue( - "pathMatchType", - (config.pathMatchType as - | "exact" - | "prefix" - | "regex") || - DEFAULT_PATH_MATCH_TYPE - ); - }} - trigger={ + + ( + + + {t("rewritePath")} + + { + field.onChange( + config.rewritePath || + null + ); + form.setValue( + "rewritePathType", + (config.rewritePathType as + | "exact" + | "prefix" + | "regex" + | "stripPrefix" + | null) ?? + null + ); + }} + trigger={ + hasRewrite ? ( + ) : ( + - } - /> - - {t( - "redirectMatchPathDescription" - )} - - - - )} - /> - + ) + } + /> + + {t( + "redirectRewritePathDescription" + )} + + + + )} + /> + - - ( - - - {t("rewritePath")} - - { + + ( + + + {t("priority")} + + + field.onChange( - config.rewritePath || - null - ); - form.setValue( - "rewritePathType", - (config.rewritePathType as - | "exact" - | "prefix" - | "regex" - | "stripPrefix" - | null) ?? - null - ); - }} - trigger={ - hasRewrite ? ( - - ) : ( - + e.target + .valueAsNumber ) } /> - - {t( - "redirectRewritePathDescription" + + + {t( + "redirectPriorityDescription" + )} + + + + )} + /> + + + + ( + + + - - - )} - /> - - - - ( - - - {t("priority")} - - - - field.onChange( - e.target - .valueAsNumber - ) - } - /> - - - {t( - "redirectPriorityDescription" + description={t( + "redirectPermanentDescription" )} - - - - )} - /> - + checked={ + field.value + } + onCheckedChange={ + field.onChange + } + /> + + + + )} + /> + + +
+ +
+
+
- - ( - - - - - - - )} - /> - - - - - - -
- - {isEditing && ( - - - - {t("dangerSection")} - - - - - - - )} - -
- - -
-
- +
+ + +
+ ); }