From 2061e3cf306d063a7b0855d3c0c197086a90f145 Mon Sep 17 00:00:00 2001 From: Jacek Chmielewski Date: Mon, 24 Nov 2025 08:03:47 +0100 Subject: [PATCH 1/3] fix client traffic policy helpers styling --- web/src/i18n/en/index.ts | 6 ++--- web/src/i18n/i18n-types.ts | 12 ++++----- web/src/i18n/pl/index.ts | 6 ++--- .../TrafficPolicySelect.tsx | 26 ++++++++++++++----- .../components/TrafficPolicySelect/style.scss | 13 ++++++++++ 5 files changed, 44 insertions(+), 19 deletions(-) diff --git a/web/src/i18n/en/index.ts b/web/src/i18n/en/index.ts index ce572bb6bb..fa88c26ca5 100644 --- a/web/src/i18n/en/index.ts +++ b/web/src/i18n/en/index.ts @@ -1718,17 +1718,17 @@ Licensing information: [https://docs.defguard.net/enterprise/license](https://do none: { label: 'None', helper: - 'When this option is enabled, users will be able to select all routing options.', + 'None - When this option is enabled, users will be able to select all routing options.', }, disableAllTraffic: { label: 'Disable the option to route all traffic through VPN', helper: - 'When this option is enabled, users will not be able to route all traffic through the VPN.', + 'Disable all traffic - When this option is enabled, users will not be able to route all traffic through the VPN.', }, forceAllTraffic: { label: 'Force the clients to route all traffic through VPN', helper: - 'When this option is enabled, the users will always route all traffic through the VPN.', + 'Force all traffic - When this option is enabled, the users will always route all traffic through the VPN.', }, }, }, diff --git a/web/src/i18n/i18n-types.ts b/web/src/i18n/i18n-types.ts index 517c50734c..a2ce0a2129 100644 --- a/web/src/i18n/i18n-types.ts +++ b/web/src/i18n/i18n-types.ts @@ -4103,7 +4103,7 @@ type RootTranslation = { */ label: string /** - * W​h​e​n​ ​t​h​i​s​ ​o​p​t​i​o​n​ ​i​s​ ​e​n​a​b​l​e​d​,​ ​u​s​e​r​s​ ​w​i​l​l​ ​b​e​ ​a​b​l​e​ ​t​o​ ​s​e​l​e​c​t​ ​a​l​l​ ​r​o​u​t​i​n​g​ ​o​p​t​i​o​n​s​. + * N​o​n​e​ ​-​ ​W​h​e​n​ ​t​h​i​s​ ​o​p​t​i​o​n​ ​i​s​ ​e​n​a​b​l​e​d​,​ ​u​s​e​r​s​ ​w​i​l​l​ ​b​e​ ​a​b​l​e​ ​t​o​ ​s​e​l​e​c​t​ ​a​l​l​ ​r​o​u​t​i​n​g​ ​o​p​t​i​o​n​s​. */ helper: string } @@ -4113,7 +4113,7 @@ type RootTranslation = { */ label: string /** - * W​h​e​n​ ​t​h​i​s​ ​o​p​t​i​o​n​ ​i​s​ ​e​n​a​b​l​e​d​,​ ​u​s​e​r​s​ ​w​i​l​l​ ​n​o​t​ ​b​e​ ​a​b​l​e​ ​t​o​ ​r​o​u​t​e​ ​a​l​l​ ​t​r​a​f​f​i​c​ ​t​h​r​o​u​g​h​ ​t​h​e​ ​V​P​N​. + * D​i​s​a​b​l​e​ ​a​l​l​ ​t​r​a​f​f​i​c​ ​-​ ​W​h​e​n​ ​t​h​i​s​ ​o​p​t​i​o​n​ ​i​s​ ​e​n​a​b​l​e​d​,​ ​u​s​e​r​s​ ​w​i​l​l​ ​n​o​t​ ​b​e​ ​a​b​l​e​ ​t​o​ ​r​o​u​t​e​ ​a​l​l​ ​t​r​a​f​f​i​c​ ​t​h​r​o​u​g​h​ ​t​h​e​ ​V​P​N​. */ helper: string } @@ -4123,7 +4123,7 @@ type RootTranslation = { */ label: string /** - * W​h​e​n​ ​t​h​i​s​ ​o​p​t​i​o​n​ ​i​s​ ​e​n​a​b​l​e​d​,​ ​t​h​e​ ​u​s​e​r​s​ ​w​i​l​l​ ​a​l​w​a​y​s​ ​r​o​u​t​e​ ​a​l​l​ ​t​r​a​f​f​i​c​ ​t​h​r​o​u​g​h​ ​t​h​e​ ​V​P​N​. + * F​o​r​c​e​ ​a​l​l​ ​t​r​a​f​f​i​c​ ​-​ ​W​h​e​n​ ​t​h​i​s​ ​o​p​t​i​o​n​ ​i​s​ ​e​n​a​b​l​e​d​,​ ​t​h​e​ ​u​s​e​r​s​ ​w​i​l​l​ ​a​l​w​a​y​s​ ​r​o​u​t​e​ ​a​l​l​ ​t​r​a​f​f​i​c​ ​t​h​r​o​u​g​h​ ​t​h​e​ ​V​P​N​. */ helper: string } @@ -10860,7 +10860,7 @@ export type TranslationFunctions = { */ label: () => LocalizedString /** - * When this option is enabled, users will be able to select all routing options. + * None - When this option is enabled, users will be able to select all routing options. */ helper: () => LocalizedString } @@ -10870,7 +10870,7 @@ export type TranslationFunctions = { */ label: () => LocalizedString /** - * When this option is enabled, users will not be able to route all traffic through the VPN. + * Disable all traffic - When this option is enabled, users will not be able to route all traffic through the VPN. */ helper: () => LocalizedString } @@ -10880,7 +10880,7 @@ export type TranslationFunctions = { */ label: () => LocalizedString /** - * When this option is enabled, the users will always route all traffic through the VPN. + * Force all traffic - When this option is enabled, the users will always route all traffic through the VPN. */ helper: () => LocalizedString } diff --git a/web/src/i18n/pl/index.ts b/web/src/i18n/pl/index.ts index 7356101f64..3255916235 100644 --- a/web/src/i18n/pl/index.ts +++ b/web/src/i18n/pl/index.ts @@ -1504,17 +1504,17 @@ Uwaga, podane tutaj konfiguracje nie posiadają klucza prywatnego. Musisz uzupe none: { label: 'Brak', helper: - 'Kiedy ta opcja jest włączona, użytkownicy mogą wybierać dowolny typ przekierowania ruchu.', + 'Brak - Kiedy ta opcja jest włączona, użytkownicy mogą wybrać dowolny typ przekierowania ruchu.', }, disableAllTraffic: { label: 'Zablokuj możliwość przekierowania całego ruchu przez VPN', helper: - 'Kiedy ta opcja jest włączona, użytkownicy nie będą mogli przekierować całego ruchu przez VPN.', + 'Zablokuj przekierowanie całego ruchu - Kiedy ta opcja jest włączona, użytkownicy nie będą mogli przekierować całego ruchu przez VPN.', }, forceAllTraffic: { label: 'Wymuś przekierowanie całego ruchu przez VPN', helper: - 'Kiedy ta opcja jest włączona, użytkownicy będą zawsze przekierowywać cały ruch przez VPN.', + 'Wymuś przekierowanie całego ruchu - Kiedy ta opcja jest włączona, użytkownicy będą zawsze przekierowywać cały ruch przez VPN.', }, } }, diff --git a/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx b/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx index 43fa5f3f9c..15e61ff5ca 100644 --- a/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx +++ b/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx @@ -1,9 +1,8 @@ import './style.scss'; import clsx from 'clsx'; -import parse from 'html-react-parser'; import { useMemo } from 'react'; import { useI18nContext } from '../../../../../../i18n/i18n-react'; -import { Helper } from '../../../../../../shared/defguard-ui/components/Layout/Helper/Helper'; +import { MessageBox } from '../../../../../../shared/defguard-ui/components/Layout/MessageBox/MessageBox'; import { RadioButton } from '../../../../../../shared/defguard-ui/components/Layout/RadioButton/Radiobutton'; import type { SelectOption } from '../../../../../../shared/defguard-ui/components/Layout/Select/types'; import { ClientTrafficPolicy } from '../../../../../../shared/types'; @@ -21,21 +20,18 @@ export const ClientTrafficPolicySelect = ({ onChange, fieldValue }: Props) => { key: ClientTrafficPolicy.NONE, value: ClientTrafficPolicy.NONE, label: LL.settingsPage.enterprise.fields.clientTrafficPolicy.none.label(), - meta: LL.settingsPage.enterprise.fields.clientTrafficPolicy.none.helper(), }, { key: ClientTrafficPolicy.DISABLE_ALL_TRAFFIC, value: ClientTrafficPolicy.DISABLE_ALL_TRAFFIC, label: LL.settingsPage.enterprise.fields.clientTrafficPolicy.disableAllTraffic.label(), - meta: LL.settingsPage.enterprise.fields.clientTrafficPolicy.disableAllTraffic.helper(), }, { key: ClientTrafficPolicy.FORCE_ALL_TRAFFIC, value: ClientTrafficPolicy.FORCE_ALL_TRAFFIC, label: LL.settingsPage.enterprise.fields.clientTrafficPolicy.forceAllTraffic.label(), - meta: LL.settingsPage.enterprise.fields.clientTrafficPolicy.forceAllTraffic.helper(), }, ], [ @@ -51,7 +47,24 @@ export const ClientTrafficPolicySelect = ({ onChange, fieldValue }: Props) => { return (
- {options.map(({ key, value, label, meta, disabled = false }) => { + +
    +
  • +

    {LL.settingsPage.enterprise.fields.clientTrafficPolicy.none.helper()}

    +
    • +
  • +

    + {LL.settingsPage.enterprise.fields.clientTrafficPolicy.disableAllTraffic.helper()} +

    +
    • +
  • +

    + {LL.settingsPage.enterprise.fields.clientTrafficPolicy.forceAllTraffic.helper()} +

    +
    • +
+ + {options.map(({ key, value, label, disabled = false }) => { const active = fieldValue === value; return (
{ >

{label}

- {parse(meta)}
); })} diff --git a/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/style.scss b/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/style.scss index 692d1123b8..ad3f917539 100644 --- a/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/style.scss +++ b/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/style.scss @@ -56,4 +56,17 @@ @include animate-standard; } } + + #client-traffic-policy-message-box { + ul { + list-style-position: inside; + margin-top: 8px; + + li { + p { + display: inline; + } + } + } + } } From 38c7bf2b32f48eaa09f23a508cf3abba471a92e6 Mon Sep 17 00:00:00 2001 From: Jacek Chmielewski Date: Mon, 24 Nov 2025 08:05:17 +0100 Subject: [PATCH 2/3] remove unused useMemo deps --- .../components/TrafficPolicySelect/TrafficPolicySelect.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx b/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx index 15e61ff5ca..4b3e0fe3d8 100644 --- a/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx +++ b/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx @@ -36,11 +36,8 @@ export const ClientTrafficPolicySelect = ({ onChange, fieldValue }: Props) => { ], [ LL.settingsPage.enterprise.fields.clientTrafficPolicy.none.label, - LL.settingsPage.enterprise.fields.clientTrafficPolicy.none.helper, LL.settingsPage.enterprise.fields.clientTrafficPolicy.forceAllTraffic.label, - LL.settingsPage.enterprise.fields.clientTrafficPolicy.forceAllTraffic.helper, LL.settingsPage.enterprise.fields.clientTrafficPolicy.disableAllTraffic.label, - LL.settingsPage.enterprise.fields.clientTrafficPolicy.disableAllTraffic.helper, ], ); From dfb644c1cca6a8e90445418c7fd3905136923146 Mon Sep 17 00:00:00 2001 From: Jacek Chmielewski Date: Mon, 24 Nov 2025 08:11:24 +0100 Subject: [PATCH 3/3] tweak the header --- .../TrafficPolicySelect.tsx | 82 ++++++++++--------- 1 file changed, 43 insertions(+), 39 deletions(-) diff --git a/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx b/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx index 4b3e0fe3d8..2faf81784e 100644 --- a/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx +++ b/web/src/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx @@ -42,45 +42,49 @@ export const ClientTrafficPolicySelect = ({ onChange, fieldValue }: Props) => { ); return ( -
- - -
    -
  • -

    {LL.settingsPage.enterprise.fields.clientTrafficPolicy.none.helper()}

    -
    • -
  • -

    - {LL.settingsPage.enterprise.fields.clientTrafficPolicy.disableAllTraffic.helper()} -

    -
    • -
  • -

    - {LL.settingsPage.enterprise.fields.clientTrafficPolicy.forceAllTraffic.helper()} -

    -
    • -
- - {options.map(({ key, value, label, disabled = false }) => { - const active = fieldValue === value; - return ( -
{ - if (!disabled) { - onChange(value); - } - }} - > -

{label}

- -
- ); - })} +
+
+

{LL.settingsPage.enterprise.fields.clientTrafficPolicy.header()}

+
+
+ +
    +
  • +

    {LL.settingsPage.enterprise.fields.clientTrafficPolicy.none.helper()}

    +
    • +
  • +

    + {LL.settingsPage.enterprise.fields.clientTrafficPolicy.disableAllTraffic.helper()} +

    +
    • +
  • +

    + {LL.settingsPage.enterprise.fields.clientTrafficPolicy.forceAllTraffic.helper()} +

    +
    • +
+ + {options.map(({ key, value, label, disabled = false }) => { + const active = fieldValue === value; + return ( +
{ + if (!disabled) { + onChange(value); + } + }} + > +

{label}

+ +
+ ); + })} +
); };