fix(Settings): do not display balancer setting in embedded version (#990)

Author: ValeraS

src/containers/App/App.tsx

@@ -9,7 +9,7 @@ import {ErrorBoundary} from '../../components/ErrorBoundary/ErrorBoundary';
 import type {RootState} from '../../store';
 import {Navigation} from '../AsideNavigation/Navigation';
 import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
-import {settings} from '../UserSettings/settings';
+import {getUserSettings} from '../UserSettings/settings';
 import type {YDBEmbeddedUISettings} from '../UserSettings/settings';
 
 import ContentWrapper, {Content} from './Content';
@@ -25,7 +25,13 @@ export interface AppProps {
     children?: React.ReactNode;
 }
 
-function App({store, history, singleClusterMode, children, userSettings = settings}: AppProps) {
+function App({
+    store,
+    history,
+    singleClusterMode,
+    children,
+    userSettings = getUserSettings({singleClusterMode}),
+}: AppProps) {
     return (
         <Providers store={store} history={history}>
             <Helmet defaultTitle="YDB Monitoring" titleTemplate="%s — YDB Monitoring" />

src/containers/AppWithClusters/AppWithClusters.tsx

@@ -3,20 +3,17 @@ import React from 'react';
 import type {Store} from '@reduxjs/toolkit';
 import type {History} from 'history';
 
-import {USE_CLUSTER_BALANCER_AS_BACKEND_KEY} from '../../utils/constants';
 import type {GetMonitoringClusterLink, GetMonitoringLink} from '../../utils/monitoring';
 import {
     getMonitoringClusterLink as getMonitoringClusterLinkDefault,
     getMonitoringLink as getMonitoringLinkDefault,
 } from '../../utils/monitoring';
 import {App, AppSlots} from '../App';
 import type {YDBEmbeddedUISettings} from '../UserSettings/settings';
-import {settings} from '../UserSettings/settings';
 
 import {ExtendedCluster} from './ExtendedCluster/ExtendedCluster';
 import {ExtendedNode} from './ExtendedNode/ExtendedNode';
 import {ExtendedTenant} from './ExtendedTenant/ExtendedTenant';
-import i18n from './i18n';
 
 export interface AppWithClustersProps {
     store: Store;
@@ -27,20 +24,12 @@ export interface AppWithClustersProps {
     children?: React.ReactNode;
 }
 
-const defaultUserSettings = settings;
-
-defaultUserSettings[2].sections[0].settings.push({
-    title: i18n('settings.useClusterBalancerAsBackend.title'),
-    description: i18n('settings.useClusterBalancerAsBackend.popover'),
-    settingKey: USE_CLUSTER_BALANCER_AS_BACKEND_KEY,
-});
-
 export function AppWithClusters({
     store,
     history,
     getMonitoringLink = getMonitoringLinkDefault,
     getMonitoringClusterLink = getMonitoringClusterLinkDefault,
-    userSettings = defaultUserSettings,
+    userSettings,
     children,
 }: AppWithClustersProps) {
     return (

src/containers/AppWithClusters/i18n/en.json

@@ -5,7 +5,7 @@ import type {YDBEmbeddedUISettings} from '../UserSettings/settings';
 import {YdbInternalUser} from './YdbInternalUser/YdbInternalUser';
 
 interface NavigationProps {
-    userSettings?: YDBEmbeddedUISettings;
+    userSettings: YDBEmbeddedUISettings;
     children: React.ReactNode;
 }
 export function Navigation({children, userSettings}: NavigationProps) {

src/containers/AppWithClusters/i18n/index.ts

@@ -2,13 +2,12 @@ import {Settings} from '@gravity-ui/navigation';
 
 import {Setting} from './Setting';
 import type {YDBEmbeddedUISettings} from './settings';
-import {settings} from './settings';
 
 interface UserSettingsProps {
-    settings?: YDBEmbeddedUISettings;
+    settings: YDBEmbeddedUISettings;
 }
 
-export const UserSettings = ({settings: userSettings = settings}: UserSettingsProps) => {
+export const UserSettings = ({settings: userSettings}: UserSettingsProps) => {
     return (
         <Settings>
             {userSettings.map((page) => {

src/containers/AppWithClusters/i18n/ru.json

@@ -40,5 +40,8 @@
   "settings.queryUseMultiSchema.title": "Allow queries with multiple result sets",
   "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.useClusterBalancerAsBackend.title": "Use cluster balancer as backend",
+  "settings.useClusterBalancerAsBackend.popover": "By default random cluster node is used as backend. It causes saved links to become invalid after some time, when node is restarted. Using balancer as backend fixes it",
+
   "settings.about.interfaceVersionInfoField.title": "Interface version"
 }

src/containers/AsideNavigation/Navigation.tsx

@@ -1,5 +1,6 @@
 import {CircleInfo, Flask, PencilToSquare, StarFill} from '@gravity-ui/icons';
 import type {IconProps} from '@gravity-ui/uikit';
+import {createNextState} from '@reduxjs/toolkit';
 
 import {
     AUTOCOMPLETE_ON_ENTER,
@@ -10,6 +11,7 @@ import {
     QUERY_USE_MULTI_SCHEMA_KEY,
     THEME_KEY,
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
+    USE_CLUSTER_BALANCER_AS_BACKEND_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
 } from '../../utils/constants';
 import {Lang, defaultLang} from '../../utils/i18n';
@@ -109,6 +111,12 @@ export const queryUseMultiSchemaSetting: SettingProps = {
     description: i18n('settings.queryUseMultiSchema.popover'),
 };
 
+export const useClusterBalancerAsBackendSetting: SettingProps = {
+    settingKey: USE_CLUSTER_BALANCER_AS_BACKEND_KEY,
+    title: i18n('settings.useClusterBalancerAsBackend.title'),
+    description: i18n('settings.useClusterBalancerAsBackend.popover'),
+};
+
 export const enableAutocompleteSetting: SettingProps = {
     settingKey: ENABLE_AUTOCOMPLETE,
     title: i18n('settings.editor.autocomplete.title'),
@@ -175,9 +183,14 @@ export const aboutPage: SettingsPage = {
     sections: [aboutSettingsSection],
 };
 
-export const settings: YDBEmbeddedUISettings = [
-    generalPage,
-    editorPage,
-    experimentsPage,
-    aboutPage,
-];
+export function getUserSettings({singleClusterMode}: {singleClusterMode: boolean}) {
+    const experiments = singleClusterMode
+        ? experimentsPage
+        : createNextState(experimentsPage, (draft) => {
+              draft.sections[0].settings.push(useClusterBalancerAsBackendSetting);
+          });
+
+    const settings: YDBEmbeddedUISettings = [generalPage, editorPage, experiments, aboutPage];
+
+    return settings;
+}

src/containers/UserSettings/UserSettings.tsx

@@ -10,7 +10,7 @@ export {default as appRoutes} from './routes';
 
 export {createApi, YdbEmbeddedAPI, YdbWebVersionAPI} from './services/api';
 export {settingsManager} from './services/settings';
-export {settings as userSettings} from './containers/UserSettings/settings';
+export {getUserSettings} from './containers/UserSettings/settings';
 export {setSettingValue, getSettingValue} from './store/reducers/settings/settings';
 
 export {componentsRegistry} from './components/ComponentsProvider/componentsRegistry';