fix: check feature flag api is available (#1308)

Author: sareyu

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -7,6 +7,7 @@ import {StringParam, useQueryParams} from 'use-query-params';
 
 import {AutoRefreshControl} from '../../../components/AutoRefreshControl/AutoRefreshControl';
 import routes, {createHref} from '../../../routes';
+import {useFeatureFlagsAvailable} from '../../../store/reducers/capabilities/hooks';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
 import {setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
 import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../types/additionalProps';
@@ -25,7 +26,7 @@ import {Configs} from './Configs/Configs';
 import {Consumers} from './Consumers';
 import Describe from './Describe/Describe';
 import DetailedOverview from './DetailedOverview/DetailedOverview';
-import {DATABASE_PAGES, getPagesByType} from './DiagnosticsPages';
+import {getDataBasePages, getPagesByType} from './DiagnosticsPages';
 import {HotKeys} from './HotKeys/HotKeys';
 import {Network} from './Network/Network';
 import {Partitions} from './Partitions/Partitions';
@@ -62,7 +63,8 @@ function Diagnostics(props: DiagnosticsProps) {
     const tenantName = isDatabaseEntityType(props.type) ? props.path : props.tenantName;
     const isDatabase = isDatabaseEntityType(props.type) || props.path === props.tenantName;
 
-    const pages = isDatabase ? DATABASE_PAGES : getPagesByType(props.type);
+    const hasFeatureFlags = useFeatureFlagsAvailable();
+    const pages = isDatabase ? getDataBasePages({hasFeatureFlags}) : getPagesByType(props.type);
     let activeTab = pages.find((el) => el.id === diagnosticsTab);
     if (!activeTab) {
         activeTab = pages[0];

src/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -130,3 +130,9 @@ const pathTypeToPages: Record<EPathType, Page[] | undefined> = {
 };
 
 export const getPagesByType = (type?: EPathType) => (type && pathTypeToPages[type]) || DIR_PAGES;
+
+export const getDataBasePages = ({hasFeatureFlags}: {hasFeatureFlags?: boolean}) => {
+    return hasFeatureFlags
+        ? DATABASE_PAGES
+        : DATABASE_PAGES.filter((item) => item.id !== TENANT_DIAGNOSTICS_TABS_IDS.configs);
+};

src/store/reducers/capabilities/hooks.ts

@@ -30,3 +30,7 @@ export const useTracingLevelOptionAvailable = () => {
 export const useStorageGroupsHandlerAvailable = () => {
     return useGetFeatureVersion('/storage/groups') > 2;
 };
+
+export const useFeatureFlagsAvailable = () => {
+    return useGetFeatureVersion('/viewer/feature_flags') > 1;
+};

src/types/api/capabilities.ts

@@ -6,4 +6,9 @@ export interface CapabilitiesResponse {
 }
 
 // Add feature name before using it
-export type Capability = '/pdisk/info' | '/scheme/directory' | '/storage/groups' | '/viewer/query';
+export type Capability =
+    | '/pdisk/info'
+    | '/scheme/directory'
+    | '/storage/groups'
+    | '/viewer/query'
+    | '/viewer/feature_flags';