antd 6 fix bugs

src/Routes/Tables/Jobs/index.jsx

@@ -5,15 +5,11 @@ import styled from 'styled-components';
 import useQueryHook from 'hooks/useQuery';
 import { HKGrid, Card } from 'components/common';
 import { Collapse } from 'react-collapse';
-import { Divider, FloatButton } from 'antd';
+import { Divider } from 'antd';
 import { selectors } from 'reducers';
 import { useSelector } from 'react-redux';
 import { USER_GUIDE } from 'const';
-import {
-  ArrowUpOutlined,
-  CaretUpOutlined,
-  CaretDownOutlined,
-} from '@ant-design/icons';
+import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
 import useJobsFunctionsLimit from './useJobsFunctionsLimit';
 
 import GridView from './GridView';
@@ -44,6 +40,7 @@ const CaretDownOutlinedCenter = styled(CaretDownOutlined)`
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 20px;
+  margin-top: 8px;
 `;
 
 const CaretUpOutlinedCenter = styled(CaretUpOutlined)`
@@ -54,8 +51,6 @@ const CaretUpOutlinedCenter = styled(CaretUpOutlined)`
   margin-top: 18px;
 `;
 
-const BackToTop = () => document.querySelector('#jobsTable .ag-body-viewport');
-
 const JobsTable = () => {
   const { keycloakEnable } = useSelector(selectors.connection);
   const {
@@ -175,15 +170,6 @@ const JobsTable = () => {
           onBodyScroll={handleBodyScroll}
         />
       </div>
-
-      <FloatButton.BackTop
-        target={BackToTop}
-        style={{ opacity: '0.7', marginRight: '70px' }}
-        type="primary"
-        shape="circle"
-        size="large"
-        icon={<ArrowUpOutlined />}
-      />
     </JobsWrapper>
   );
 };

src/Routes/Tables/Jobs/jobColumns.jsx

@@ -117,7 +117,10 @@ const Types = ({ data }) => {
 
       {tags && tags.length > 0 && (
         <>
-          <Divider style={{ height: '24px' }} orientation="vertical" />
+          <Divider
+            style={{ height: '24px', marginTop: '15px' }}
+            orientation="vertical"
+          />
           <JobTags tags={tags} />
         </>
       )}
@@ -310,5 +313,6 @@ export default [
     },
     suppressMenu: true,
     headerClass: 'ag-header-cell-center',
+    suppressMovable: true,
   },
 ];

src/Routes/Tables/Pipelines/EditDrawer.jsx

@@ -16,7 +16,7 @@ const EditDrawer = () => {
   const { setOff, isOn } = useToggle(true);
 
   const value = useMemo(() => stringify(pipeline), [pipeline]);
-  if (loading) return 'Loading...';
+
   return (
     <Drawer
       isOpened={isOn}
@@ -25,7 +25,8 @@ const EditDrawer = () => {
       styles={{ body: { padding: '10px' } }}
       width={DRAWER_SIZE.PIPELINE_INFO}
       title={pipeline?.name ?? pipelineId}
-      asFlex>
+      asFlex
+      loading={loading}>
       {pipeline ? (
         <AddPipeline jsonPipeline={value} />
       ) : (

src/Routes/Tables/Pipelines/ExecuteDrawer.jsx

@@ -32,15 +32,15 @@ const ExecuteDrawer = () => {
     [executePipeline, experimentName]
   );
 
-  if (loading) return 'Loading...';
   return (
     <Drawer
       isOpened={isOn}
       onDidClose={goTo.root}
       onClose={setOff}
       width={DRAWER_SIZE.PIPELINE_INFO}
       title={record?.name ?? pipelineId}
-      asFlex>
+      asFlex
+      loading={loading}>
       {record ? (
         <AddPipeline isRunPipeline jsonPipeline={value} />
       ) : (

src/Routes/Tables/Pipelines/OverviewDrawer.jsx

@@ -12,7 +12,7 @@ import { DRAWER_TITLES } from '../../../const';
 
 const OverviewDrawer = () => {
   const { goTo } = usePath();
-  const { pipeline: record, pipelineId } = useActivePipeline();
+  const { pipeline: record, pipelineId, loading } = useActivePipeline();
   const { setOff, isOn } = useToggle(true);
 
   return (
@@ -22,6 +22,7 @@ const OverviewDrawer = () => {
       onClose={setOff}
       width={DRAWER_SIZE.PIPELINE_INFO}
       title={record?.name ?? pipelineId}
+      loading={loading}
       extra={
         <Button type="primary" onClick={goTo.edit}>
           Edit

src/Routes/Tables/Workers/columns.jsx

@@ -27,7 +27,9 @@ const WorkerState = (_, { workerStatus, jobStatus }) => {
   return (
     <>
       <Tag color={COLOR_TASK_STATUS[workerStatus]}>{title}</Tag>
-      <Tag color={COLOR_TASK_STATUS[jobStatus]}>{`Job ${title}`}</Tag>
+      <Tag
+        color={COLOR_TASK_STATUS[jobStatus]}
+        style={{ marginLeft: '2px' }}>{`Job ${title}`}</Tag>
     </>
   );
 };

src/Routes/index.jsx

@@ -3,8 +3,7 @@ import { events } from 'utils';
 import { ApolloProvider, useReactiveVar } from '@apollo/client';
 import { selectors } from 'reducers';
 import { useSelector } from 'react-redux';
-import { Layout, message, FloatButton, Button, notification } from 'antd';
-import { ArrowUpOutlined } from '@ant-design/icons';
+import { Layout, message, notification } from 'antd';
 import styled, { ThemeProvider } from 'styled-components';
 import { Route, Routes } from 'react-router-dom';
 import { COLOR, COLOR_LAYOUT, Theme } from 'styles';
@@ -46,8 +45,6 @@ message.config({
   maxCount: 3,
 });
 
-const BackToTop = () => document.getElementById('globalContent');
-
 const RoutesNav = () => {
   const { grafanaUrl } = useSelector(selectors.connection);
   const { filtersInitCacheItems } = useCacheFilters();
@@ -142,15 +139,6 @@ const RoutesNav = () => {
               <ContentMargin id="globalContent">
                 {contextHolderModalApollo}
                 <Tables />
-                <FloatButton.BackTop target={BackToTop}>
-                  <Button
-                    style={{ opacity: '0.5' }}
-                    type="primary"
-                    shape="circle"
-                    size="large"
-                    icon={<ArrowUpOutlined />}
-                  />
-                </FloatButton.BackTop>
               </ContentMargin>
 
               <RightContainer>

src/components/StatusTag.jsx

@@ -10,8 +10,13 @@ export const StatusTag = ({
   colorMap = COLOR_PIPELINE_STATUS,
   isError = false,
 }) => (
-  <BaseTag key={status} status={status} colorMap={colorMap} isError={isError}>
-    {Number.isInteger(count) ? count : `No Stats`}
+  <BaseTag
+    key={status}
+    status={status}
+    colorMap={colorMap}
+    isError={isError}
+    style={{ margin: '1px' }}>
+    <span>{Number.isInteger(count) ? count : `No Stats`}</span>
   </BaseTag>
 );
 

src/components/common/HKGrid/BackToTopButton.jsx

@@ -0,0 +1,105 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { ArrowUpOutlined } from '@ant-design/icons';
+import { FloatButton } from 'antd';
+
+const DEFAULT_ROW_THRESHOLD = 3;
+
+const getFirstDisplayedRow = api => {
+  if (!api) {
+    return -1;
+  }
+
+  if (typeof api.getFirstDisplayedRowIndex === 'function') {
+    return api.getFirstDisplayedRowIndex();
+  }
+
+  if (typeof api.getFirstDisplayedRow === 'function') {
+    return api.getFirstDisplayedRow();
+  }
+
+  return -1;
+};
+
+const BackToTopButton = ({
+  gridApi,
+  rowData,
+  rowThreshold = DEFAULT_ROW_THRESHOLD,
+}) => {
+  const [showBackToTop, setShowBackToTop] = useState(false);
+
+  const updateVisibility = useCallback(() => {
+    if (!gridApi) {
+      setShowBackToTop(false);
+      return;
+    }
+
+    const firstDisplayedRow = getFirstDisplayedRow(gridApi);
+    const displayedRowsCount = gridApi.getDisplayedRowCount();
+
+    setShowBackToTop(
+      displayedRowsCount > rowThreshold && firstDisplayedRow >= rowThreshold
+    );
+  }, [gridApi, rowThreshold]);
+
+  const onBackToTop = () => {
+    if (!gridApi) {
+      return;
+    }
+
+    gridApi.ensureIndexVisible(0, 'top');
+    setShowBackToTop(false);
+  };
+
+  useEffect(() => {
+    if (!gridApi) {
+      setShowBackToTop(false);
+      return undefined;
+    }
+
+    gridApi.addEventListener('bodyScroll', updateVisibility);
+    gridApi.addEventListener('modelUpdated', updateVisibility);
+    gridApi.addEventListener('firstDataRendered', updateVisibility);
+
+    updateVisibility();
+
+    return () => {
+      gridApi.removeEventListener('bodyScroll', updateVisibility);
+      gridApi.removeEventListener('modelUpdated', updateVisibility);
+      gridApi.removeEventListener('firstDataRendered', updateVisibility);
+    };
+  }, [gridApi, updateVisibility]);
+
+  useEffect(() => {
+    updateVisibility();
+  }, [rowData, updateVisibility]);
+
+  if (!showBackToTop) {
+    return null;
+  }
+
+  return (
+    <FloatButton
+      onClick={onBackToTop}
+      style={{ opacity: '0.7', marginRight: '70px' }}
+      type="primary"
+      shape="circle"
+      size="large"
+      icon={<ArrowUpOutlined />}
+    />
+  );
+};
+
+BackToTopButton.propTypes = {
+  gridApi: PropTypes.object,
+  rowData: PropTypes.array,
+  rowThreshold: PropTypes.number,
+};
+
+BackToTopButton.defaultProps = {
+  gridApi: null,
+  rowData: [],
+  rowThreshold: DEFAULT_ROW_THRESHOLD,
+};
+
+export default BackToTopButton;

src/components/common/HKGrid/HKGrid.jsx

@@ -11,6 +11,7 @@ import { LoadingOutlined } from '@ant-design/icons';
 import { Spin } from 'antd';
 import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
 import ColumnsControl from './ColumnsControl';
+import BackToTopButton from './BackToTopButton';
 import { LoadingOverlay, StyledGridWrapper } from './HKGrid.styles';
 
 // Register community modules
@@ -90,6 +91,8 @@ export const HKGrid = forwardRef(
             />
           </div>
         </StyledGridWrapper>
+
+        <BackToTopButton gridApi={gridApi} rowData={rowData} />
       </>
     );
   }