fix(Overview): display titles for topic, stream and tableIndex

Author: artemmufazalov

src/components/InfoViewer/InfoViewer.tsx

@@ -35,7 +35,7 @@ const InfoViewer = ({title, info, dots = true, size, className}: InfoViewerProps
                 ))}
             </div>
         ) : (
-            <>no {title} data</>
+            <>No {title} data</>
         )}
     </div>
 );

src/components/InfoViewer/schemaInfo/CDCStreamInfo.tsx

@@ -1,6 +1,7 @@
 import type {TEvDescribeSchemeResult, TCdcStreamDescription} from '../../../types/api/schema';
 import {useTypedSelector} from '../../../utils/hooks';
 import {selectSchemaData} from '../../../store/reducers/schema';
+import {getEntityName} from '../../../containers/Tenant/utils';
 
 import {formatCdcStreamItem, formatPQGroupItem, formatCommonItem} from '../formatters';
 import {InfoViewer, InfoViewerItem} from '..';
@@ -15,8 +16,10 @@ interface CDCStreamInfoProps {
 export const CDCStreamInfo = ({data, childrenPaths}: CDCStreamInfoProps) => {
     const pqGroupData = useTypedSelector((state) => selectSchemaData(state, childrenPaths?.[0]));
 
+    const entityName = getEntityName(data?.PathDescription);
+
     if (!data || !pqGroupData) {
-        return <div className="error">No Changefeed data</div>;
+        return <div className="error">No {entityName} data</div>;
     }
 
     const cdcStream = data.PathDescription?.CdcStreamDescription;
@@ -41,5 +44,5 @@ export const CDCStreamInfo = ({data, childrenPaths}: CDCStreamInfoProps) => {
         ),
     );
 
-    return <InfoViewer title={'Changefeed'} info={info} />;
+    return <InfoViewer title={entityName} info={info} />;
 };

src/components/InfoViewer/schemaInfo/PersQueueGroupInfo.tsx

@@ -1,22 +1,23 @@
 import type {TEvDescribeSchemeResult} from '../../../types/api/schema';
+import {getEntityName} from '../../../containers/Tenant/utils';
 
-import {formatCommonItem, formatPQGroupItem} from '../formatters';
+import {formatPQGroupItem} from '../formatters';
 import {InfoViewer, InfoViewerItem} from '..';
 
 interface PersQueueGrouopInfoProps {
     data?: TEvDescribeSchemeResult;
 }
 
 export const PersQueueGroupInfo = ({data}: PersQueueGrouopInfoProps) => {
+    const entityName = getEntityName(data?.PathDescription);
+
     if (!data) {
-        return <div className="error">No PersQueueGroup data</div>;
+        return <div className="error">No {entityName} data</div>;
     }
 
     const pqGroup = data.PathDescription?.PersQueueGroup;
     const info: Array<InfoViewerItem> = [];
 
-    info.push(formatCommonItem('PathType', data.PathDescription?.Self?.PathType));
-
     info.push(formatPQGroupItem('Partitions', pqGroup?.Partitions || []));
     info.push(
         formatPQGroupItem(
@@ -25,5 +26,5 @@ export const PersQueueGroupInfo = ({data}: PersQueueGrouopInfoProps) => {
         ),
     );
 
-    return <>{info.length ? <InfoViewer info={info}></InfoViewer> : <>Empty</>}</>;
+    return <InfoViewer title={entityName} info={info} />;
 };

src/components/InfoViewer/schemaInfo/TableIndexInfo.tsx

@@ -1,4 +1,5 @@
 import type {TEvDescribeSchemeResult, TIndexDescription} from '../../../types/api/schema';
+import {getEntityName} from '../../../containers/Tenant/utils';
 
 import {formatTableIndexItem} from '../formatters';
 import {InfoViewer, InfoViewerItem} from '..';
@@ -16,8 +17,10 @@ interface TableIndexInfoProps {
 }
 
 export const TableIndexInfo = ({data}: TableIndexInfoProps) => {
+    const entityName = getEntityName(data?.PathDescription);
+
     if (!data) {
-        return <div className="error">no index data</div>;
+        return <div className="error">No {entityName} data</div>;
     }
 
     const TableIndex = data.PathDescription?.TableIndex;
@@ -30,5 +33,5 @@ export const TableIndexInfo = ({data}: TableIndexInfoProps) => {
         }
     }
 
-    return <>{info.length ? <InfoViewer info={info}></InfoViewer> : <>Empty</>}</>;
+    return <InfoViewer title={entityName} info={info} />;
 };

src/containers/Tenant/utils/index.ts

@@ -0,0 +1,8 @@
+import {TPathDescription} from '../../../types/api/schema';
+import {mapPathTypeToEntityName} from './schema';
+
+export const getEntityName = (pathDescription?: TPathDescription) => {
+    const {PathType, PathSubType} = pathDescription?.Self || {};
+
+    return mapPathTypeToEntityName(PathType, PathSubType);
+};