fix(UserSettings): fix highlight on search (#972)

Author: artemmufazalov

src/containers/AppWithClusters/AppWithClusters.tsx

@@ -31,7 +31,7 @@ const defaultUserSettings = settings;
 
 defaultUserSettings[2].sections[0].settings.push({
     title: i18n('settings.useClusterBalancerAsBackend.title'),
-    helpPopoverContent: i18n('settings.useClusterBalancerAsBackend.popover'),
+    description: i18n('settings.useClusterBalancerAsBackend.popover'),
     settingKey: USE_CLUSTER_BALANCER_AS_BACKEND_KEY,
 });
 

src/containers/UserSettings/Setting.tsx

@@ -1,10 +1,13 @@
-import {Settings} from '@gravity-ui/navigation';
 import {RadioButton, Switch} from '@gravity-ui/uikit';
 
-import {LabelWithPopover} from '../../components/LabelWithPopover/LabelWithPopover';
 import {useSetting} from '../../utils/hooks';
 
-import {b} from './UserSettings';
+export interface SettingsInfoFieldProps {
+    type: 'info';
+    title: string;
+    description?: React.ReactNode;
+    content: React.ReactNode;
+}
 
 export type SettingsElementType = 'switch' | 'radio';
 
@@ -13,7 +16,6 @@ export interface SettingProps {
     title: string;
     description?: React.ReactNode;
     settingKey: string;
-    helpPopoverContent?: React.ReactNode;
     options?: {value: string; content: string}[];
     defaultValue?: unknown;
     onValueUpdate?: VoidFunction;
@@ -22,9 +24,6 @@ export interface SettingProps {
 export const Setting = ({
     type = 'switch',
     settingKey,
-    title,
-    description,
-    helpPopoverContent,
     options,
     defaultValue,
     onValueUpdate,
@@ -36,73 +35,30 @@ export const Setting = ({
         onValueUpdate?.();
     };
 
-    const renderTitleComponent = (value: React.ReactNode) => {
-        if (helpPopoverContent) {
-            return (
-                <LabelWithPopover
-                    className={b('item-with-popup')}
-                    contentClassName={b('popup')}
-                    text={value}
-                    popoverContent={helpPopoverContent}
-                />
-            );
+    switch (type) {
+        case 'switch': {
+            return <Switch checked={Boolean(settingValue)} onUpdate={onUpdate} />;
         }
 
-        return value;
-    };
-
-    const getSettingsElement = (elementType: SettingsElementType) => {
-        switch (elementType) {
-            case 'switch': {
-                return <Switch checked={Boolean(settingValue)} onUpdate={onUpdate} />;
-            }
-
-            case 'radio': {
-                if (!options) {
-                    return null;
-                }
-
-                return (
-                    <RadioButton value={String(settingValue)} onUpdate={onUpdate}>
-                        {options.map(({value, content}) => {
-                            return (
-                                <RadioButton.Option value={value} key={value}>
-                                    {content}
-                                </RadioButton.Option>
-                            );
-                        })}
-                    </RadioButton>
-                );
+        case 'radio': {
+            if (!options) {
+                return null;
             }
 
-            default:
-                return null;
+            return (
+                <RadioButton value={String(settingValue)} onUpdate={onUpdate}>
+                    {options.map(({value, content}) => {
+                        return (
+                            <RadioButton.Option value={value} key={value}>
+                                {content}
+                            </RadioButton.Option>
+                        );
+                    })}
+                </RadioButton>
+            );
         }
-    };
-
-    return (
-        <Settings.Item
-            title={title}
-            highlightedTitle={title}
-            description={description}
-            renderTitleComponent={renderTitleComponent}
-        >
-            {getSettingsElement(type)}
-        </Settings.Item>
-    );
-};
-
-export interface SettingsInfoFieldProps {
-    type: 'info';
-    title: string;
-    description?: React.ReactNode;
-    content: React.ReactNode;
-}
 
-export const SettingsInfoField = ({title, description, content}: SettingsInfoFieldProps) => {
-    return (
-        <Settings.Item title={title} highlightedTitle={title} description={description}>
-            {content}
-        </Settings.Item>
-    );
+        default:
+            return null;
+    }
 };

src/containers/UserSettings/UserSettings.scss

@@ -1,15 +1,9 @@
 import {Settings} from '@gravity-ui/navigation';
 
-import {cn} from '../../utils/cn';
-
-import {Setting, SettingsInfoField} from './Setting';
+import {Setting} from './Setting';
 import type {YDBEmbeddedUISettings} from './settings';
 import {settings} from './settings';
 
-import './UserSettings.scss';
-
-export const b = cn('ydb-user-settings');
-
 interface UserSettingsProps {
     settings?: YDBEmbeddedUISettings;
 }
@@ -30,13 +24,16 @@ export const UserSettings = ({settings: userSettings = settings}: UserSettingsPr
                                     {sectionSettings.map((setting) => {
                                         if (setting.type === 'info') {
                                             return (
-                                                <SettingsInfoField
-                                                    key={setting.title}
-                                                    {...setting}
-                                                />
+                                                <Settings.Item key={setting.title} {...setting}>
+                                                    {setting.content}
+                                                </Settings.Item>
                                             );
                                         }
-                                        return <Setting key={setting.settingKey} {...setting} />;
+                                        return (
+                                            <Settings.Item key={setting.title} {...setting}>
+                                                <Setting {...setting} />
+                                            </Settings.Item>
+                                        );
                                     })}
                                 </Settings.Section>
                             );

src/containers/UserSettings/UserSettings.tsx

@@ -32,13 +32,13 @@
   "settings.invertedDisks.title": "Inverted disks space indicators",
 
   "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",
-  "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It could return incorrect data on some versions",
+  "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes tab in diagnostics. It could return incorrect data on versions before 24-1",
 
   "settings.useVirtualTables.title": "Use table with data load on scroll for Nodes and Storage tabs",
   "settings.useVirtualTables.popover": "It will increase performance, but could work unstable",
 
   "settings.queryUseMultiSchema.title": "Allow queries with multiple result sets",
-  "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries that enables queries with multiple result sets. Returns nothing on versions 23-3 and older",
+  "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries. It enables queries with multiple result sets. It returns nothing on versions 23-3 and older",
 
   "settings.about.interfaceVersionInfoField.title": "Interface version"
 }

src/containers/UserSettings/i18n/en.json

@@ -96,17 +96,17 @@ export const invertedDisksSetting: SettingProps = {
 export const useNodesEndpointSetting: SettingProps = {
     settingKey: USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
     title: i18n('settings.useNodesEndpoint.title'),
-    helpPopoverContent: i18n('settings.useNodesEndpoint.popover'),
+    description: i18n('settings.useNodesEndpoint.popover'),
 };
 export const useVirtualTables: SettingProps = {
     settingKey: USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     title: i18n('settings.useVirtualTables.title'),
-    helpPopoverContent: i18n('settings.useVirtualTables.popover'),
+    description: i18n('settings.useVirtualTables.popover'),
 };
 export const queryUseMultiSchemaSetting: SettingProps = {
     settingKey: QUERY_USE_MULTI_SCHEMA_KEY,
     title: i18n('settings.queryUseMultiSchema.title'),
-    helpPopoverContent: i18n('settings.queryUseMultiSchema.popover'),
+    description: i18n('settings.queryUseMultiSchema.popover'),
 };
 
 export const enableAutocompleteSetting: SettingProps = {