feat(settings): add a disclaimer for dns servers and ipv4 first settings (#1375)

* feat(settings): add a disclaimer for dns servers and ipv4 first settings

This PR adds a disclaimer to warn the user that he should use the network settings of his
containers/system first instead of this one.

* fix: add missing translations

* feat: create a new Advanced Network Settings section

* Update src/components/Settings/SettingsNetwork/index.tsx

Co-authored-by: fallenbagel <98979876+fallenbagel@users.noreply.github.com>

* Update src/i18n/locale/en.json

Co-authored-by: fallenbagel <98979876+fallenbagel@users.noreply.github.com>

* fix: rename to Force IPv4 Resolution First

---------

Co-authored-by: fallenbagel <98979876+fallenbagel@users.noreply.github.com>

src/components/Settings/SettingsNetwork/index.tsx

@@ -27,12 +27,6 @@ const messages = defineMessages('components.Settings.SettingsNetwork', {
   trustProxy: 'Enable Proxy Support',
   trustProxyTip:
     'Allow Jellyseerr to correctly register client IP addresses behind a proxy',
-  forceIpv4First: 'IPv4 Resolution First',
-  forceIpv4FirstTip:
-    'Force Jellyseerr to resolve IPv4 addresses first instead of IPv6',
-  dnsServers: 'Custom DNS Servers',
-  dnsServersTip:
-    'Comma-separated list of custom DNS servers, e.g. "1.1.1.1,[2606:4700:4700::1111]"',
   proxyEnabled: 'HTTP(S) Proxy',
   proxyHostname: 'Proxy Hostname',
   proxyPort: 'Proxy Port',
@@ -44,9 +38,19 @@ const messages = defineMessages('components.Settings.SettingsNetwork', {
     "Use ',' as a separator, and '*.' as a wildcard for subdomains",
   proxyBypassLocalAddresses: 'Bypass Proxy for Local Addresses',
   validationProxyPort: 'You must provide a valid port',
+  advancedNetworkSettings: 'Advanced Network Settings',
+  networkDisclaimer:
+    'Network parameters from your container/system should be used instead of these settings. See the {docs} for more information.',
+  docs: 'documentation',
+  forceIpv4First: 'Force IPv4 Resolution First',
+  forceIpv4FirstTip:
+    'Force Jellyseerr to resolve IPv4 addresses first instead of IPv6',
+  dnsServers: 'Custom DNS Servers',
+  dnsServersTip:
+    'Comma-separated list of custom DNS servers, e.g. "1.1.1.1,[2606:4700:4700::1111]"',
 });
 
-const SettingsMain = () => {
+const SettingsNetwork = () => {
   const { addToast } = useToasts();
   const intl = useIntl();
   const {
@@ -206,55 +210,6 @@ const SettingsMain = () => {
                     </Tooltip>
                   </div>
                 </div>
-                <div className="form-row">
-                  <label htmlFor="forceIpv4First" className="checkbox-label">
-                    <span className="mr-2">
-                      {intl.formatMessage(messages.forceIpv4First)}
-                    </span>
-                    <SettingsBadge badgeType="advanced" className="mr-2" />
-                    <SettingsBadge badgeType="restartRequired" />
-                    <span className="label-tip">
-                      {intl.formatMessage(messages.forceIpv4FirstTip)}
-                    </span>
-                  </label>
-                  <div className="form-input-area">
-                    <Field
-                      type="checkbox"
-                      id="forceIpv4First"
-                      name="forceIpv4First"
-                      onChange={() => {
-                        setFieldValue('forceIpv4First', !values.forceIpv4First);
-                      }}
-                    />
-                  </div>
-                </div>
-                <div className="form-row">
-                  <label htmlFor="dnsServers" className="checkbox-label">
-                    <span className="mr-2">
-                      {intl.formatMessage(messages.dnsServers)}
-                    </span>
-                    <SettingsBadge badgeType="advanced" className="mr-2" />
-                    <SettingsBadge badgeType="restartRequired" />
-                    <span className="label-tip">
-                      {intl.formatMessage(messages.dnsServersTip)}
-                    </span>
-                  </label>
-                  <div className="form-input-area">
-                    <div className="form-input-field">
-                      <Field
-                        id="dnsServers"
-                        name="dnsServers"
-                        type="text"
-                        inputMode="url"
-                      />
-                    </div>
-                    {errors.dnsServers &&
-                      touched.dnsServers &&
-                      typeof errors.dnsServers === 'string' && (
-                        <div className="error">{errors.dnsServers}</div>
-                      )}
-                  </div>
-                </div>
                 <div className="form-row">
                   <label htmlFor="proxyEnabled" className="checkbox-label">
                     <span className="mr-2">
@@ -431,6 +386,74 @@ const SettingsMain = () => {
                     </div>
                   </>
                 )}
+                <h3 className="heading mt-10">
+                  {intl.formatMessage(messages.advancedNetworkSettings)}
+                </h3>
+                <p className="description">
+                  {intl.formatMessage(messages.networkDisclaimer, {
+                    docs: (
+                      <a
+                        href="https://docs.jellyseerr.dev/troubleshooting"
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-white"
+                      >
+                        {intl.formatMessage(messages.docs)}
+                      </a>
+                    ),
+                  })}
+                </p>
+                <div className="form-row">
+                  <label htmlFor="forceIpv4First" className="checkbox-label">
+                    <span className="mr-2">
+                      {intl.formatMessage(messages.forceIpv4First)}
+                    </span>
+                    <SettingsBadge badgeType="advanced" className="mr-2" />
+                    <SettingsBadge badgeType="restartRequired" />
+                    <SettingsBadge badgeType="experimental" />
+                    <span className="label-tip">
+                      {intl.formatMessage(messages.forceIpv4FirstTip)}
+                    </span>
+                  </label>
+                  <div className="form-input-area">
+                    <Field
+                      type="checkbox"
+                      id="forceIpv4First"
+                      name="forceIpv4First"
+                      onChange={() => {
+                        setFieldValue('forceIpv4First', !values.forceIpv4First);
+                      }}
+                    />
+                  </div>
+                </div>
+                <div className="form-row">
+                  <label htmlFor="dnsServers" className="checkbox-label">
+                    <span className="mr-2">
+                      {intl.formatMessage(messages.dnsServers)}
+                    </span>
+                    <SettingsBadge badgeType="advanced" className="mr-2" />
+                    <SettingsBadge badgeType="restartRequired" />
+                    <SettingsBadge badgeType="experimental" />
+                    <span className="label-tip">
+                      {intl.formatMessage(messages.dnsServersTip)}
+                    </span>
+                  </label>
+                  <div className="form-input-area">
+                    <div className="form-input-field">
+                      <Field
+                        id="dnsServers"
+                        name="dnsServers"
+                        type="text"
+                        inputMode="url"
+                      />
+                    </div>
+                    {errors.dnsServers &&
+                      touched.dnsServers &&
+                      typeof errors.dnsServers === 'string' && (
+                        <div className="error">{errors.dnsServers}</div>
+                      )}
+                  </div>
+                </div>
                 <div className="actions">
                   <div className="flex justify-end">
                     <span className="ml-3 inline-flex rounded-md shadow-sm">
@@ -458,4 +481,4 @@ const SettingsMain = () => {
   );
 };
 
-export default SettingsMain;
+export default SettingsNetwork;

src/i18n/locale/en.json

@@ -935,14 +935,17 @@
   "components.Settings.SettingsMain.validationApplicationTitle": "You must provide an application title",
   "components.Settings.SettingsMain.validationApplicationUrl": "You must provide a valid URL",
   "components.Settings.SettingsMain.validationApplicationUrlTrailingSlash": "URL must not end in a trailing slash",
+  "components.Settings.SettingsNetwork.advancedNetworkSettings": "Advanced Network Settings",
   "components.Settings.SettingsNetwork.csrfProtection": "Enable CSRF Protection",
   "components.Settings.SettingsNetwork.csrfProtectionHoverTip": "Do NOT enable this setting unless you understand what you are doing!",
   "components.Settings.SettingsNetwork.csrfProtectionTip": "Set external API access to read-only (requires HTTPS)",
   "components.Settings.SettingsNetwork.dnsServers": "Custom DNS Servers",
   "components.Settings.SettingsNetwork.dnsServersTip": "Comma-separated list of custom DNS servers, e.g. \"1.1.1.1,[2606:4700:4700::1111]\"",
-  "components.Settings.SettingsNetwork.forceIpv4First": "IPv4 Resolution First",
+  "components.Settings.SettingsNetwork.docs": "documentation",
+  "components.Settings.SettingsNetwork.forceIpv4First": "Force IPv4 Resolution First",
   "components.Settings.SettingsNetwork.forceIpv4FirstTip": "Force Jellyseerr to resolve IPv4 addresses first instead of IPv6",
   "components.Settings.SettingsNetwork.network": "Network",
+  "components.Settings.SettingsNetwork.networkDisclaimer": "Network parameters from your container/system should be used instead of these settings. See the {docs} for more information.",
   "components.Settings.SettingsNetwork.networksettings": "Network Settings",
   "components.Settings.SettingsNetwork.networksettingsDescription": "Configure network settings for your Jellyseerr instance.",
   "components.Settings.SettingsNetwork.proxyBypassFilter": "Proxy Ignored Addresses",