AGDNS-4329 design review updates

Author: IldarKamalov

client_v2/src/__locales/en.json

@@ -6,8 +6,8 @@
   "add_tls_certificate": "Add TLS certificate",
   "add_tls_certificate_private_key": "Add TLS certificate private key",
   "add_to_allowlist": "Add to allowlist",
-  "ads_blocked": "Ads blocked",
-  "ads_blocked_card": "Ads blocked",
+  "ads_blocked": "Blocked ads",
+  "ads_blocked_card": "Blocked ads",
   "ads_blocked_tooltip": "The number of DNS queries blocked by adblock filters and hosts blocklist",
   "adult_websites_blocked": "Adult websites blocked",
   "adult_websites_blocked_tooltip": "The number of adult websites blocked",
@@ -228,6 +228,7 @@
   "dns_disallowed_clients": "Disallowed clients",
   "dns_disallowed_clients_desc": "Drops requests from clients on this list. This setting is ignored when there are entries in Allowed clients",
   "dns_disallowed_clients_label": "Disallowed clients, one per line",
+  "dns_disallowed_clients_notice": "To add disallowed clients, clear the allowed clients list",
   "dns_disallowed_domains": "Disallowed domains",
   "dns_disallowed_domains_desc": "Drops DNS queries that match these domains, and they don’t appear in Query log",
   "dns_disallowed_domains_desc_2": "Enter exact domain names, wildcards, or URL filter rules, such as example.org, *.example.org, or ||example.org^",
@@ -271,7 +272,8 @@
   "dns_private_reverse_resolvers": "Private reverse DNS resolvers",
   "dns_private_reverse_resolvers_desc": "Resolves PTR, SOA, and NS requests for ARPA domains with private IP addresses through private upstream servers, DHCP, and /etc/hosts",
   "dns_private_reverse_resolvers_disabled_desc": "When disabled, responds to all such requests with NXDOMAIN",
-  "dns_private_reverse_servers_desc": "Sets the DNS servers for private PTR, SOA, and NS requests. These requests come from clients with private IP addresses and ask for ARPA domains containing subnets from private IP address ranges",
+  "dns_private_reverse_servers_desc": "Sets the DNS servers for private PTR, SOA, and NS requests. These requests come from clients with private IP addresses and ask for ARPA domains containing subnets from private IP address ranges.",
+  "dns_private_reverse_servers_resolvers": "Default DNS resolvers: %value_1% and %value_2%",
   "dns_private_reverse_servers_desc_2": "If this field is empty, your operating system's default DNS resolvers are used, except for AdGuard Home IP addresses. By default, AdGuard Home uses the following reverse DNS resolvers: %value_1% and %value_2%",
   "dns_private_reverse_servers_label": "Private reverse DNS servers, one per line",
   "dns_private_reverse_servers_placeholder": "IP addresses, sdns://, quic://, https://, h3://, or tls://",
@@ -432,6 +434,8 @@
   "ignore_domains_desc_log": "Requests that match these rules are not displayed in Query log",
   "ignore_domains_desc_stats": "Requests that match these rules are not included in the statistics",
   "ignore_domains_title": "Ignored domains",
+  "blocked_only": "Blocked only",
+  "unblocked_only": "Unblocked only",
   "inactivity_schedule": "Inactivity schedule",
   "inactivity_schedule_add": "Add schedule",
   "inactivity_schedule_all_day": "All day",
@@ -482,6 +486,7 @@
   "no": "No",
   "no_stats_yet": "No stats yet — keep using AdGuard Home to view them",
   "none_text": "None",
+  "not_available": "N/A",
   "nothing_found": "Nothing found",
   "notify_undo": "Undo",
   "notify_updated": "Updated",
@@ -504,7 +509,7 @@
   "parental_group_software": "Software development",
   "parental_group_streaming": "Streaming",
   "password_label": "Password",
-  "password_login_error": "Your username and password do not match",
+  "password_login_error": "Invalid username or password",
   "password_placeholder": "Enter password",
   "password_requirements": "Password requirements",
   "password_requirements_characters": "Minimum 8 characters",
@@ -584,6 +589,8 @@
   "reset_dns_confirm_text": "All DNS protocol settings will be reset to their default values",
   "reset_dns_confirm_title": "Reset DNS protocols?",
   "reset_dns_protocols": "Reset DNS protocols",
+  "delete_tls_certificate": "Delete TLS certificate?",
+  "delete_tls_certificate_desc": "Clients using encrypted DNS won’t be able to connect until a new TLS certificate is added",
   "reset_settings": "Reset settings",
   "reset_settings_confirm": "Yes, reset",
   "response_details": "Response details",
@@ -769,8 +776,9 @@
   "try_again": "Try again",
   "tuesday": "Tuesday",
   "type_value": "Type: %value%",
-  "unavailable_dhcp": "DHCP is unavailable",
-  "unavailable_dhcp_desc": "AdGuard Home cannot run a DHCP server on your OS",
+  "unavailable_dhcp": "DHCP is unavailable. The operating system isn’t supported or no DHCP ranges are configured",
+  "setting_not_applied_dhcp": "This setting isn’t applied because DHCP is disabled",
+  "enable_dhcp_leases_notice": "Enable DHCP leases to add a static lease",
   "unblock": "Unblock",
   "unblock_client": "Unblock client",
   "unknown_filter": "Unknown filter %filterId%",
@@ -884,6 +892,5 @@
   "yes_disable": "Yes, disable",
   "yes_disallow": "Yes, disallow",
   "yes_remove": "Yes, remove",
-  "yes_reset": "Yes, reset",
-  "logs": "Logs"
+  "yes_reset": "Yes, reset"
 }

client_v2/src/__tests__/blocked-services.test.ts

@@ -12,6 +12,9 @@ const filterServices = (
     search: string,
     groupFilter: string[],
     serviceGroupMap: Map<string, string>,
+    blockedIds: Set<string>,
+    showBlockedOnly: boolean,
+    showUnblockedOnly: boolean,
 ): WebService[] => {
     let filtered = services;
 
@@ -23,6 +26,12 @@ const filterServices = (
         });
     }
 
+    if (showBlockedOnly) {
+        filtered = filtered.filter((s) => blockedIds.has(s.id));
+    } else if (showUnblockedOnly) {
+        filtered = filtered.filter((s) => !blockedIds.has(s.id));
+    }
+
     const term = search.trim().toLowerCase();
     if (term) {
         filtered = filtered.filter(
@@ -48,36 +57,116 @@ describe('filterServices', () => {
         ['epic_games', 'gaming'],
     ]);
 
+    const blockedIds = new Set(['telegram', 'steam']);
+    const noFilters = (showBlockedOnly = false, showUnblockedOnly = false): WebService[] =>
+        filterServices(
+            services,
+            '',
+            [],
+            serviceGroupMap,
+            blockedIds,
+            showBlockedOnly,
+            showUnblockedOnly,
+        );
+
     test('no filters returns all services', () => {
-        expect(filterServices(services, '', [], serviceGroupMap)).toHaveLength(4);
+        expect(noFilters()).toHaveLength(4);
     });
 
     test('search by name (case-insensitive)', () => {
-        const result = filterServices(services, 'tel', [], serviceGroupMap);
+        const result = filterServices(
+            services,
+            'tel',
+            [],
+            serviceGroupMap,
+            blockedIds,
+            false,
+            false,
+        );
         expect(result).toHaveLength(1);
         expect(result[0].id).toBe('telegram');
     });
 
     test('search by id', () => {
-        const result = filterServices(services, 'epic', [], serviceGroupMap);
+        const result = filterServices(
+            services,
+            'epic',
+            [],
+            serviceGroupMap,
+            blockedIds,
+            false,
+            false,
+        );
         expect(result).toHaveLength(1);
         expect(result[0].id).toBe('epic_games');
     });
 
     test('filter by group', () => {
-        const result = filterServices(services, '', ['gaming'], serviceGroupMap);
+        const result = filterServices(
+            services,
+            '',
+            ['gaming'],
+            serviceGroupMap,
+            blockedIds,
+            false,
+            false,
+        );
         expect(result).toHaveLength(2);
         expect(result.map((s) => s.id)).toEqual(['steam', 'epic_games']);
     });
 
     test('combined search + group filter', () => {
-        const result = filterServices(services, 'steam', ['gaming'], serviceGroupMap);
+        const result = filterServices(
+            services,
+            'steam',
+            ['gaming'],
+            serviceGroupMap,
+            blockedIds,
+            false,
+            false,
+        );
         expect(result).toHaveLength(1);
         expect(result[0].id).toBe('steam');
     });
 
     test('no match returns empty array', () => {
-        const result = filterServices(services, 'xyz', [], serviceGroupMap);
+        const result = filterServices(
+            services,
+            'xyz',
+            [],
+            serviceGroupMap,
+            blockedIds,
+            false,
+            false,
+        );
         expect(result).toHaveLength(0);
     });
+
+    test('blocked only filter returns blocked services', () => {
+        const result = noFilters(true);
+        expect(result.map((s) => s.id)).toEqual(['telegram', 'steam']);
+    });
+
+    test('unblocked only filter returns unblocked services', () => {
+        const result = noFilters(false, true);
+        expect(result.map((s) => s.id)).toEqual(['whatsapp', 'epic_games']);
+    });
+
+    test('blocked only takes precedence when both state filters are active', () => {
+        const result = noFilters(true, true);
+        expect(result.map((s) => s.id)).toEqual(['telegram', 'steam']);
+    });
+
+    test('state filter combines with group filter', () => {
+        const result = filterServices(
+            services,
+            '',
+            ['gaming'],
+            serviceGroupMap,
+            blockedIds,
+            false,
+            true,
+        );
+        expect(result.map((s) => s.id)).toEqual(['epic_games']);
+    });
 });

client_v2/src/__tests__/helpers/matchMedia.ts

@@ -0,0 +1,23 @@
+/**
+ * Overrides `window.matchMedia` for a single test.
+ *
+ * The global setup mock in `setup.ts` always reports `matches: false`
+ * (mobile).  Components that branch on `useIsDesktop()` need an explicit
+ * override, e.g. `setMatchMedia(true)` to emulate a desktop viewport.
+ */
+export const setMatchMedia = (matches: boolean): void => {
+    Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: (query: string): MediaQueryList =>
+            ({
+                matches,
+                media: query,
+                onchange: null,
+                addListener: () => {},
+                removeListener: () => {},
+                addEventListener: () => {},
+                removeEventListener: () => {},
+                dispatchEvent: () => false,
+            }) as MediaQueryList,
+    });
+};