Skip to content

Fix traffic policy settings styling #1720

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
j-chmielewski merged 3 commits into from
Nov 24, 2025
Merged

Fix traffic policy settings styling #1720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2061e3c
fix client traffic policy helpers styling
j-chmielewski Nov 24, 2025
38c7bf2
remove unused useMemo deps
j-chmielewski Nov 24, 2025
dfb644c
tweak the header
j-chmielewski Nov 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions web/src/i18n/en/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
},
},
},
Expand Down
12 changes: 6 additions & 6 deletions web/src/i18n/i18n-types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand All @@ -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
}
Expand All @@ -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
}
Expand Down Expand Up @@ -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
}
Expand All @@ -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
}
Expand All @@ -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
}
Expand Down
6 changes: 3 additions & 3 deletions web/src/i18n/pl/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
},
}
},
Expand Down
75 changes: 44 additions & 31 deletions ...ings/components/EnterpriseSettings/components/TrafficPolicySelect/TrafficPolicySelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -21,57 +20,71 @@ 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(),
},
],
[
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,
],
);

return (
<div className="client-traffic-policy-select">
<label>{LL.settingsPage.enterprise.fields.clientTrafficPolicy.header()}</label>
{options.map(({ key, value, label, meta, disabled = false }) => {
const active = fieldValue === value;
return (
<div
className={clsx(`client-traffic-policy`, {
active,
disabled,
})}
key={key}
onClick={() => {
if (!disabled) {
onChange(value);
}
}}
>
<p className="label">{label}</p>
<RadioButton active={active} />
<Helper>{parse(meta)}</Helper>
</div>
);
})}
<div className="client-traffic-policy-settings">
<div className="subsection-header">
<h3>{LL.settingsPage.enterprise.fields.clientTrafficPolicy.header()}</h3>
</div>
<div className="client-traffic-policy-select">
<MessageBox id="client-traffic-policy-message-box">
<ul>
<li>
<p>{LL.settingsPage.enterprise.fields.clientTrafficPolicy.none.helper()}</p>
</li>
<li>
<p>
{LL.settingsPage.enterprise.fields.clientTrafficPolicy.disableAllTraffic.helper()}
</p>
</li>
<li>
<p>
{LL.settingsPage.enterprise.fields.clientTrafficPolicy.forceAllTraffic.helper()}
</p>
</li>
</ul>
</MessageBox>
{options.map(({ key, value, label, disabled = false }) => {
const active = fieldValue === value;
return (
<div
className={clsx(`client-traffic-policy`, {
active,
disabled,
})}
key={key}
onClick={() => {
if (!disabled) {
onChange(value);
}
}}
>
<p className="label">{label}</p>
<RadioButton active={active} />
</div>
);
})}
</div>
</div>
);
};
13 changes: 13 additions & 0 deletions ...rc/pages/settings/components/EnterpriseSettings/components/TrafficPolicySelect/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,17 @@
@include animate-standard;
}
}

#client-traffic-policy-message-box {
ul {
list-style-position: inside;
margin-top: 8px;

li {
p {
display: inline;
}
}
}
}
}