refactor(TruncatedQuery): migrate to ts (#454)

Author: artemmufazalov

src/components/TruncatedQuery/TruncatedQuery.js renamed to src/components/TruncatedQuery/TruncatedQuery.tsx

@@ -1,11 +1,15 @@
-import React from 'react';
 import cn from 'bem-cn-lite';
 
 import './TruncatedQuery.scss';
 
 const b = cn('kv-truncated-query');
 
-function TruncatedQuery({value, maxQueryHeight}) {
+interface TruncatedQueryProps {
+    value: string | undefined;
+    maxQueryHeight?: number;
+}
+
+export const TruncatedQuery = ({value = '', maxQueryHeight = 6}: TruncatedQueryProps) => {
     const lines = value.split('\n');
     const truncated = lines.length > maxQueryHeight;
 
@@ -14,13 +18,11 @@ function TruncatedQuery({value, maxQueryHeight}) {
         const message =
             '\n...\nThe request was truncated. Click on the line to show the full query on the query tab';
         return (
-            <React.Fragment>
+            <>
                 <span className={b()}>{content}</span>
                 <span className={b('message', {color: 'secondary'})}>{message}</span>
-            </React.Fragment>
+            </>
         );
     }
-    return value;
-}
-
-export default TruncatedQuery;
+    return <>{value}</>;
+};

src/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx

@@ -9,7 +9,7 @@ import {Loader} from '@gravity-ui/uikit';
 
 import {DateRange, DateRangeValues} from '../../../../components/DateRange';
 import {Search} from '../../../../components/Search';
-import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
 
 import {changeUserInput} from '../../../../store/reducers/executeQuery';
 import {
@@ -23,7 +23,11 @@ import type {EPathType} from '../../../../types/api/schema';
 import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries';
 import type {IQueryResult} from '../../../../types/store/query';
 
-import {TENANT_PAGE, TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
+import {
+    TENANT_PAGE,
+    TENANT_PAGES_IDS,
+    TENANT_QUERY_TABS_ID,
+} from '../../../../store/reducers/tenant/constants';
 import {formatDateTime, formatNumber} from '../../../../utils';
 import {HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
@@ -50,7 +54,10 @@ const COLUMNS: Column<KeyValueRow>[] = [
         sortable: false,
         render: ({row}) => (
             <div className={b('query')}>
-                <TruncatedQuery value={row.QueryText} maxQueryHeight={MAX_QUERY_HEIGHT} />
+                <TruncatedQuery
+                    value={row.QueryText?.toString()}
+                    maxQueryHeight={MAX_QUERY_HEIGHT}
+                />
             </div>
         ),
     },

src/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx

@@ -3,7 +3,7 @@ import block from 'bem-cn-lite';
 
 import DataTable, {Column} from '@gravity-ui/react-data-table';
 
-import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
 import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
 import {useTypedSelector} from '../../../../utils/hooks';

src/containers/Tenant/Query/SavedQueries/SavedQueries.tsx

@@ -10,7 +10,7 @@ import {setQueryNameToEdit} from '../../../../store/reducers/saveQuery';
 import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
 import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
 
-import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {IconWrapper} from '../../../../components/Icon';
 
 import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';