diff --git a/messages/en-US.json b/messages/en-US.json index c78d3e1be..1b7e446fb 100644 --- a/messages/en-US.json +++ b/messages/en-US.json @@ -2884,6 +2884,8 @@ "editInternalResourceDialogAddClients": "Add Clients", "editInternalResourceDialogDestinationLabel": "Destination", "editInternalResourceDialogDestinationDescription": "Choose where this resource runs and how clients reach it. Selecting multiple sites will create a high availability resource that can be accessed from any of the selected sites.", + "internalResourceFormMultiSiteRoutingHelp": "Selecting multiple sites enables resilient routing and failover for high availability.", + "internalResourceFormMultiSiteRoutingHelpLearnMore": "Learn more", "editInternalResourceDialogPortRestrictionsDescription": "Restrict access to specific TCP/UDP ports or allow/block all ports.", "createInternalResourceDialogHttpConfiguration": "HTTP configuration", "createInternalResourceDialogHttpConfigurationDescription": "Choose the domain clients will use to reach this resource over HTTP or HTTPS.", diff --git a/src/components/InternalResourceForm.tsx b/src/components/InternalResourceForm.tsx index 6d7fd1537..76a614207 100644 --- a/src/components/InternalResourceForm.tsx +++ b/src/components/InternalResourceForm.tsx @@ -749,108 +749,129 @@ export function InternalResourceForm({ )} -
-
- ( - - - {t("sites")} - - - - - - - - - { - setSelectedSites( - sites - ); - field.onChange( - sites.map( - (s) => - s.siteId - ) - ); - }} - /> - - - - - )} - /> -
-
- { - const modeOptions: OptionSelectOption[] = - [ - { - value: "host", - label: t(modeHostKey) - }, - { - value: "cidr", - label: t(modeCidrKey) - }, - { - value: "http", - label: t(modeHttpKey) - } - ]; - return ( - +
+
+
+ ( + - {t(modeLabelKey)} + {t("sites")} - - options={modeOptions} - value={field.value} - onChange={ - field.onChange - } - cols={3} - /> + + + + + + + + { + setSelectedSites( + sites + ); + field.onChange( + sites.map( + (s) => + s.siteId + ) + ); + }} + /> + + - ); - }} - /> + )} + /> +
+
+ { + const modeOptions: OptionSelectOption[] = + [ + { + value: "host", + label: t(modeHostKey) + }, + { + value: "cidr", + label: t(modeCidrKey) + }, + { + value: "http", + label: t(modeHttpKey) + } + ]; + return ( + + + {t(modeLabelKey)} + + + options={modeOptions} + value={field.value} + onChange={ + field.onChange + } + cols={3} + /> + + + ); + }} + /> +
+ {selectedSites.length > 1 && ( +

+ {t( + "internalResourceFormMultiSiteRoutingHelp" + )}{" "} + + {t( + "internalResourceFormMultiSiteRoutingHelpLearnMore" + )} + + + . +

+ )}