fix: move to separate container

Author: astandrik

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

@@ -0,0 +1,29 @@
+import {Button, Icon, Text} from '@gravity-ui/uikit';
+
+import {cn} from '../../../../../utils/cn';
+import i18n from '../i18n';
+
+import CryCatIcon from '../../../../../assets/icons/cry-cat.svg';
+
+const b = cn('kv-top-queries');
+
+interface NotFoundContainerProps {
+    onClose: () => void;
+}
+
+export const NotFoundContainer = ({onClose}: NotFoundContainerProps) => {
+    return (
+        <div className={b('not-found-container')}>
+            <Icon data={CryCatIcon} size={100} />
+            <Text variant="subheader-2" className={b('not-found-title')}>
+                {i18n('query-details.not-found.title')}
+            </Text>
+            <Text variant="body-1" color="complementary" className={b('not-found-description')}>
+                {i18n('query-details.not-found.description')}
+            </Text>
+            <Button size="m" view="normal" className={b('not-found-close')} onClick={onClose}>
+                {i18n('query-details.close')}
+            </Button>
+        </div>
+    );
+};

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

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import {Button, Icon, Text} from '@gravity-ui/uikit';
 import {useHistory, useLocation} from 'react-router-dom';
 
 import {parseQuery} from '../../../../../routes';
@@ -11,18 +10,13 @@ import {
     TENANT_QUERY_TABS_ID,
 } from '../../../../../store/reducers/tenant/constants';
 import type {KeyValueRow} from '../../../../../types/api/query';
-import {cn} from '../../../../../utils/cn';
 import {useTypedDispatch} from '../../../../../utils/hooks';
 import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
-import i18n from '../i18n';
 import {createQueryInfoItems} from '../utils';
 
+import {NotFoundContainer} from './NotFoundContainer';
 import {QueryDetails} from './QueryDetails';
 
-import CryCatIcon from '../../../../../assets/icons/cry-cat.svg';
-
-const b = cn('kv-top-queries');
-
 interface QueryDetailsDrawerContentProps {
     row: KeyValueRow | null;
     onClose: () => void;
@@ -61,18 +55,5 @@ export const QueryDetailsDrawerContent = ({row, onClose}: QueryDetailsDrawerCont
         );
     }
 
-    return (
-        <div className={b('not-found-container')}>
-            <Icon data={CryCatIcon} size={100} />
-            <Text variant="subheader-2" className={b('not-found-title')}>
-                {i18n('query-details.not-found.title')}
-            </Text>
-            <Text variant="body-1" color="complementary" className={b('not-found-description')}>
-                {i18n('query-details.not-found.description')}
-            </Text>
-            <Button size="m" view="normal" className={b('not-found-close')} onClick={onClose}>
-                {i18n('query-details.close')}
-            </Button>
-        </div>
-    );
+    return <NotFoundContainer onClose={onClose} />;
 };