fix: move connection columns control

src/components/connection/connection-table.tsx

@@ -1,5 +1,4 @@
-import { ViewColumnRounded } from '@mui/icons-material'
-import { Box, IconButton, Tooltip } from '@mui/material'
+import { Box } from '@mui/material'
 import {
   ColumnDef,
   ColumnOrderState,
@@ -128,20 +127,6 @@ const SX_RESIZE_HANDLE: React.ComponentProps<typeof Box>['sx'] = {
   },
 }
 
-const SX_ICON_BTN: React.ComponentProps<typeof IconButton>['sx'] = {
-  position: 'absolute',
-  top: 4,
-  right: 4,
-  zIndex: 3,
-  backgroundColor: (theme) =>
-    theme.palette.mode === 'dark'
-      ? theme.palette.background.default
-      : theme.palette.background.paper,
-  '&:hover': {
-    backgroundColor: (theme) => theme.palette.action.hover,
-  },
-}
-
 const SX_HEADER_ROW: React.ComponentProps<typeof Box>['sx'] = {
   display: 'flex',
   borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
@@ -311,7 +296,6 @@ interface Props {
   connections: IConnectionsItem[]
   onShowDetail: (data: IConnectionsItem) => void
   columnManagerOpen: boolean
-  onOpenColumnManager: () => void
   onCloseColumnManager: () => void
 }
 
@@ -320,7 +304,6 @@ export const ConnectionTable = (props: Props) => {
     connections,
     onShowDetail: rawOnShowDetail,
     columnManagerOpen,
-    onOpenColumnManager,
     onCloseColumnManager,
   } = props
   const onShowDetailRef = useRef(rawOnShowDetail)
@@ -633,15 +616,6 @@ export const ConnectionTable = (props: Props) => {
   return (
     <>
       <Box sx={SX_OUTER}>
-        <Tooltip title={t('connections.components.columnManager.title')}>
-          <IconButton
-            size="small"
-            onClick={onOpenColumnManager}
-            sx={SX_ICON_BTN}
-          >
-            <ViewColumnRounded fontSize="small" />
-          </IconButton>
-        </Tooltip>
         <Box ref={tableContainerRef} sx={SX_SCROLL_CONTAINER}>
           <Box
             sx={{

src/pages/connections.tsx

@@ -2,6 +2,7 @@ import {
   DeleteForeverRounded,
   TableChartRounded,
   TableRowsRounded,
+  ViewColumnRounded,
 } from '@mui/icons-material'
 import {
   Box,
@@ -10,6 +11,7 @@ import {
   Fab,
   IconButton,
   MenuItem,
+  Tooltip,
   Zoom,
 } from '@mui/material'
 import { useLockFn } from 'ahooks'
@@ -228,6 +230,18 @@ const ConnectionsPage = () => {
         >
           <BaseSearchBox onSearch={handleSearch} />
         </Box>
+        {isTableLayout && hasTableData && (
+          <Tooltip title={t('connections.components.columnManager.title')}>
+            <IconButton
+              size="small"
+              aria-label={t('connections.components.columnManager.title')}
+              onClick={() => setIsColumnManagerOpen(true)}
+              sx={{ flex: '0 0 auto' }}
+            >
+              <ViewColumnRounded fontSize="small" />
+            </IconButton>
+          </Tooltip>
+        )}
       </Box>
 
       {!hasTableData ? (
@@ -239,7 +253,6 @@ const ConnectionsPage = () => {
             detailRef.current?.open(detail, connectionsType === 'closed')
           }
           columnManagerOpen={isTableLayout && isColumnManagerOpen}
-          onOpenColumnManager={() => setIsColumnManagerOpen(true)}
           onCloseColumnManager={() => setIsColumnManagerOpen(false)}
         />
       ) : (