fix: review

Author: Raubzeug

src/components/JsonViewer/unipika/unipika.ts

@@ -16,6 +16,9 @@ export const defaultUnipikaSettings = {
 };
 
 export function unipikaConvert(value: unknown) {
+    if (!value) {
+        return value;
+    }
     let result;
     try {
         result = unipika.converters.yson(value, defaultUnipikaSettings);

src/containers/Configs/Configs.tsx

@@ -1,15 +1,23 @@
+import React from 'react';
+
 import {SegmentedRadioGroup} from '@gravity-ui/uikit';
 
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
+import {
+    useConfigAvailable,
+    useFeatureFlagsAvailable,
+} from '../../store/reducers/capabilities/hooks';
 import {cn} from '../../utils/cn';
 
 import {Config} from './components/Config/Config';
 import {FeatureFlags} from './components/FeatureFlags/FeatureFlags';
 import {Startup} from './components/Startup/Startup';
+import type {ConfigType} from './types';
 import {ConfigTypeTitles, ConfigTypes} from './types';
 import {useConfigQueryParams} from './useConfigsQueryParams';
 
 import './Configs.scss';
+
 interface ConfigsProps {
     database?: string;
     className?: string;
@@ -21,6 +29,21 @@ const b = cn('ydb-configs');
 export function Configs({database, className, scrollContainerRef}: ConfigsProps) {
     const {configType} = useConfigQueryParams();
 
+    const isFeaturesAvailable = useFeatureFlagsAvailable();
+    const isConfigsAvailable = useConfigAvailable();
+
+    const options = React.useMemo(() => {
+        const options: ConfigType[] = [];
+        if (isFeaturesAvailable) {
+            options.push(ConfigTypes.features);
+        }
+        if (isConfigsAvailable) {
+            options.push(ConfigTypes.current);
+            options.push(ConfigTypes.startup);
+        }
+        return options;
+    }, [isFeaturesAvailable, isConfigsAvailable]);
+
     const renderContent = () => {
         switch (configType) {
             case ConfigTypes.current:
@@ -35,7 +58,7 @@ export function Configs({database, className, scrollContainerRef}: ConfigsProps)
     return (
         <TableWithControlsLayout fullHeight className={b(null, className)}>
             <TableWithControlsLayout.Controls>
-                <ConfigSelector />
+                <ConfigSelector options={options} />
             </TableWithControlsLayout.Controls>
             <TableWithControlsLayout.Table scrollContainerRef={scrollContainerRef}>
                 {renderContent()}
@@ -44,20 +67,20 @@ export function Configs({database, className, scrollContainerRef}: ConfigsProps)
     );
 }
 
-function ConfigSelector() {
+function ConfigSelector({options}: {options: ConfigType[]}) {
     const {configType, handleConfigTypeChange} = useConfigQueryParams();
 
+    if (!options.length) {
+        return null;
+    }
+
     return (
         <SegmentedRadioGroup value={configType} onUpdate={handleConfigTypeChange}>
-            <SegmentedRadioGroup.Option value={ConfigTypes.current}>
-                {ConfigTypeTitles[ConfigTypes.current]}
-            </SegmentedRadioGroup.Option>
-            <SegmentedRadioGroup.Option value={ConfigTypes.startup}>
-                {ConfigTypeTitles[ConfigTypes.startup]}
-            </SegmentedRadioGroup.Option>
-            <SegmentedRadioGroup.Option value={ConfigTypes.features}>
-                {ConfigTypeTitles[ConfigTypes.features]}
-            </SegmentedRadioGroup.Option>
+            {options.map((option) => (
+                <SegmentedRadioGroup.Option key={option} value={option}>
+                    {ConfigTypeTitles[option]}
+                </SegmentedRadioGroup.Option>
+            ))}
         </SegmentedRadioGroup>
     );
 }

src/containers/Configs/useConfigsQueryParams.ts

@@ -2,6 +2,11 @@ import React from 'react';
 
 import {StringParam, createEnumParam, useQueryParams, withDefault} from 'use-query-params';
 
+import {
+    useConfigAvailable,
+    useFeatureFlagsAvailable,
+} from '../../store/reducers/capabilities/hooks';
+
 import type {ConfigType} from './types';
 import {ConfigTypes} from './types';
 
@@ -18,6 +23,8 @@ export const ConfigTypeValueParam = withDefault<ConfigType | undefined | null, '
 );
 
 export function useConfigQueryParams() {
+    const isFeaturesAvailable = useFeatureFlagsAvailable();
+    const isConfigsAvailable = useConfigAvailable();
     const [{configType, search}, setQueryParams] = useQueryParams({
         configType: ConfigTypeValueParam,
         search: StringParam,
@@ -35,6 +42,16 @@ export function useConfigQueryParams() {
         [setQueryParams],
     );
 
+    React.useEffect(() => {
+        if (!isConfigsAvailable && !isFeaturesAvailable) {
+            handleConfigTypeChange(undefined);
+        } else if (!isFeaturesAvailable && configType === ConfigTypes.features) {
+            handleConfigTypeChange(ConfigTypes.current);
+        } else {
+            handleConfigTypeChange(ConfigTypes.features);
+        }
+    }, [isFeaturesAvailable, isConfigsAvailable]);
+
     return {
         configType,
         handleConfigTypeChange,

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -7,6 +7,7 @@ import {AutoRefreshControl} from '../../../components/AutoRefreshControl/AutoRef
 import {DrawerContextProvider} from '../../../components/Drawer/DrawerContext';
 import {InternalLink} from '../../../components/InternalLink';
 import {
+    useConfigAvailable,
     useFeatureFlagsAvailable,
     useTopicDataAvailable,
 } from '../../../store/reducers/capabilities/hooks';
@@ -64,14 +65,15 @@ function Diagnostics(props: DiagnosticsProps) {
     );
 
     const hasFeatureFlags = useFeatureFlagsAvailable();
+    const hasConfigs = useConfigAvailable();
+    const configsAvailable = hasFeatureFlags || hasConfigs;
     const hasTopicData = useTopicDataAvailable();
     const isViewerUser = useIsViewerUser();
     const pages = getPagesByType(type, subType, {
-        hasFeatureFlags,
         hasTopicData,
         isTopLevel: path === database,
         hasBackups: typeof uiFactory.renderBackups === 'function' && Boolean(controlPlane),
-        hasConfigs: isViewerUser,
+        hasConfigs: isViewerUser && configsAvailable,
         hasAccess: uiFactory.hasAccess,
         databaseType,
     });

src/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -16,7 +16,6 @@ type Page = {
 };
 
 interface GetPagesOptions {
-    hasFeatureFlags?: boolean;
     hasTopicData?: boolean;
     isTopLevel?: boolean;
     hasBackups?: boolean;
@@ -231,12 +230,7 @@ export const getPagesByType = (
     const dbContext = isDatabaseEntityType(type) || options?.isTopLevel;
     const seeded = dbContext ? getDatabasePages(options?.databaseType) : base;
 
-    let withFlags = seeded;
-    if (!options?.hasFeatureFlags) {
-        withFlags = seeded.filter((p) => p.id !== TENANT_DIAGNOSTICS_TABS_IDS.configs);
-    }
-
-    return applyFilters(withFlags, type, options);
+    return applyFilters(seeded, type, options);
 };
 
 export const useDiagnosticsPageLinkGetter = () => {

src/store/reducers/capabilities/hooks.ts

@@ -87,6 +87,9 @@ export const useClusterDashboardAvailable = () => {
 export const useStreamingAvailable = () => {
     return useGetFeatureVersion('/viewer/query') >= 8;
 };
+export const useConfigAvailable = () => {
+    return useGetFeatureVersion('/viewer/config') >= 1;
+};
 export const useEditAccessAvailable = () => {
     return useGetFeatureVersion('/viewer/acl') >= 2 && !uiFactory.hideGrantAccess;
 };

src/types/api/capabilities.ts

@@ -21,6 +21,7 @@ export type Capability =
     | '/storage/groups'
     | '/viewer/query'
     | '/viewer/feature_flags'
+    | '/viewer/config'
     | '/viewer/cluster'
     | '/viewer/nodes'
     | '/viewer/acl'