Импорт/экспорт на план/факт перенесён справа от крошек

src/pages/Well/WellOperations/OperationEditor/WellOperationsEditor.jsx

@@ -3,7 +3,7 @@ import { Input } from 'antd'
 import { useLocation } from 'react-router-dom'
 import { useState, useEffect, memo, useMemo, useCallback } from 'react'
 
-import { useWell } from '@asb/context'
+import { useTopRightBlock, useWell } from '@asb/context'
 import {
   EditableTable,
   makeColumn,
@@ -15,7 +15,6 @@ import {
   makeNumericSorter,
   makeTextColumn,
 } from '@components/Table'
-import { Flex } from '@components/Grid'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { arrayOrDefault } from '@utils'
@@ -61,6 +60,7 @@ export const WellOperationsEditor = memo(({ idType, showNpt, ...other }) => {
   const [showLoader, setShowLoader] = useState(false)
 
   const [well] = useWell()
+  const setTopRightBlock = useTopRightBlock()
 
   const [categories, setCategories] = useState([])
   const [sectionTypes, setSectionTypes] = useState([])
@@ -73,21 +73,6 @@ export const WellOperationsEditor = memo(({ idType, showNpt, ...other }) => {
     return arrayOrDefault(query.get('selectedId')?.split(',')?.map(parseInt))
   }, [location])
 
-  useEffect(() => {
-    invokeWebApiWrapperAsync(
-      async () => {
-        const categories = arrayOrDefault(await WellOperationService.getCategories(well.id))
-        setCategories(categories.map((item) => ({ value: item.id, label: item.name })))
-
-        const sectionTypes = Object.entries(await WellOperationService.getSectionTypes(well.id) ?? {})
-        setSectionTypes(sectionTypes.map(([id, label]) => ({ value: parseInt(id), label })))
-      },
-      setShowLoader,
-      `Не удалось загрузить список операций`,
-      { actionName: 'Получение списка операций по скважине', well }
-    )
-  }, [well])
-
   const updateOperations = useCallback(() => invokeWebApiWrapperAsync(
     async () => {
       const skip = ((pageNumAndPageSize.current - 1) * pageNumAndPageSize.pageSize) || 0
@@ -105,10 +90,6 @@ export const WellOperationsEditor = memo(({ idType, showNpt, ...other }) => {
     { actionName: 'Получение списка операций', well }
   ), [well, idType, pageNumAndPageSize])
 
-  useEffect(() => {
-    updateOperations()
-  }, [updateOperations])
-
   const onRow = useCallback((record) => {
     if (selectedIds?.includes(record.id))
       return { style: { background: '#BF0000A0' } }
@@ -138,11 +119,33 @@ export const WellOperationsEditor = memo(({ idType, showNpt, ...other }) => {
       }
   }, [updateOperations, well.id, recordParser])
 
+  useEffect(() => {
+    updateOperations()
+  }, [updateOperations])
+
+  useEffect(() => {
+    invokeWebApiWrapperAsync(
+      async () => {
+        const categories = arrayOrDefault(await WellOperationService.getCategories(well.id))
+        setCategories(categories.map((item) => ({ value: item.id, label: item.name })))
+
+        const sectionTypes = Object.entries(await WellOperationService.getSectionTypes(well.id) ?? {})
+        setSectionTypes(sectionTypes.map(([id, label]) => ({ value: parseInt(id), label })))
+      },
+      setShowLoader,
+      `Не удалось загрузить список операций`,
+      { actionName: 'Получение списка операций по скважине', well }
+    )
+  }, [well])
+
+  useEffect(() => {
+    setTopRightBlock(
+      <ImportExportBar onImported={updateOperations} />
+    )
+  }, [well, setTopRightBlock, updateOperations])
+
   return (
     <LoaderPortal show={showLoader}>
-      <Flex style={{ width: '100%' }}>
-        <ImportExportBar onImported={updateOperations}/>
-      </Flex>
       <EditableTable
         {...other}
         bordered