Lists scroll improvements [Management page]. (#1448)

Co-authored-by: Andrei Nenashev <[email protected]>

odd-platform-ui/src/components/Management/CollectorsList/CollectorsList.tsx

@@ -17,15 +17,15 @@ import {
   EmptyContentPlaceholder,
   Input,
   NumberFormatted,
+  ScrollableContainer,
 } from 'components/shared/elements';
 import { Permission } from 'generated-sources';
 import { WithPermissions } from 'components/shared/contexts';
 import CollectorForm from './CollectorForm/CollectorForm';
 import CollectorSkeletonItem from './CollectorSkeletonItem/CollectorSkeletonItem';
 import CollectorItem from './CollectorItem/CollectorItem';
-import { CollectorCaption } from './CollectorsListStyles';
 
-const CollectorsListView: React.FC = () => {
+const CollectorsListView = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
@@ -72,13 +72,13 @@ const CollectorsListView: React.FC = () => {
 
   return (
     <Grid container flexDirection='column' alignItems='center'>
-      <CollectorCaption container sx={{ mb: 1 }}>
+      <Grid alignItems='center' justifyContent='space-between' container sx={{ mb: 1 }}>
         <Typography variant='h1'>{t('Collectors')}</Typography>
         <Typography variant='subtitle1' color='texts.info'>
           <NumberFormatted value={totalCollectors} /> {t('collectors overall')}
         </Typography>
-      </CollectorCaption>
-      <CollectorCaption container sx={{ mb: 2 }}>
+      </Grid>
+      <Grid alignItems='center' justifyContent='space-between' container sx={{ mb: 2 }}>
         <Input
           variant='search-m'
           placeholder={t('Search collector')}
@@ -99,25 +99,26 @@ const CollectorsListView: React.FC = () => {
             }
           />
         </WithPermissions>
-      </CollectorCaption>
-      <Grid container>
-        <Grid item xs={12}>
+      </Grid>
+      {collectorsList.length > 0 && (
+        <ScrollableContainer container id='collectors-list'>
           <InfiniteScroll
+            scrollableTarget='collectors-list'
             next={fetchNextPage}
             hasMore={hasNext}
             dataLength={collectorsList.length}
-            loader={isCollectorsListFetching && <CollectorSkeletonItem length={5} />}
+            loader={<CollectorSkeletonItem length={5} />}
           >
             {collectorsList.map(collector => (
               <Grid key={collector.id} sx={{ mb: 1 }}>
                 <CollectorItem key={collector.id} collector={collector} />
               </Grid>
             ))}
           </InfiniteScroll>
-        </Grid>
-      </Grid>
+        </ScrollableContainer>
+      )}
       {!isCollectorsListFetching && !collectorsList.length ? (
-        <EmptyContentPlaceholder />
+        <EmptyContentPlaceholder offsetTop={170} />
       ) : null}
     </Grid>
   );

odd-platform-ui/src/components/Management/DataSourcesList/DataSourcesList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Grid, Typography } from '@mui/material';
 import { useDebouncedCallback } from 'use-debounce';
 import InfiniteScroll from 'react-infinite-scroll-component';
@@ -17,15 +17,15 @@ import {
   EmptyContentPlaceholder,
   Input,
   NumberFormatted,
+  ScrollableContainer,
 } from 'components/shared/elements';
 import { Permission } from 'generated-sources';
 import { WithPermissions } from 'components/shared/contexts';
 import DataSourceForm from './DataSourceForm/DataSourceForm';
 import DataSourceSkeletonItem from './DataSourceSkeletonItem/DataSourceSkeletonItem';
 import DataSourceItem from './DataSourceItem/DataSourceItem';
-import * as S from './DataSourcesListStyles';
 
-const DataSourcesListView: React.FC = () => {
+const DataSourcesListView = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
@@ -40,23 +40,20 @@ const DataSourcesListView: React.FC = () => {
   );
 
   const size = 30;
-  const [query, setQuery] = React.useState('');
-  const [totalDataSources, setTotalDataSources] = React.useState(total);
+  const [query, setQuery] = useState('');
+  const [totalDataSources, setTotalDataSources] = useState(total);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!query) dispatch(fetchDataSourcesList({ page: 1, size }));
   }, [isDataSourceDeleting, query]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!query) setTotalDataSources(total);
   }, [total, query]);
 
-  const handleSearch = React.useCallback(
-    useDebouncedCallback(() => {
-      dispatch(fetchDataSourcesList({ page: 1, size, query }));
-    }, 500),
-    [query]
-  );
+  const handleSearch = useDebouncedCallback(() => {
+    dispatch(fetchDataSourcesList({ page: 1, size, query }));
+  }, 500);
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setQuery(event.target.value);
@@ -74,13 +71,13 @@ const DataSourcesListView: React.FC = () => {
 
   return (
     <Grid container flexDirection='column' alignItems='center'>
-      <S.Caption container sx={{ mb: 1 }}>
+      <Grid alignItems='center' justifyContent='space-between' container sx={{ mb: 1 }}>
         <Typography variant='h1'>{t('Datasources')}</Typography>
         <Typography variant='subtitle1' color='texts.info'>
           <NumberFormatted value={totalDataSources} /> {t('datasources overall')}
         </Typography>
-      </S.Caption>
-      <S.Caption container sx={{ mb: 2 }}>
+      </Grid>
+      <Grid alignItems='center' justifyContent='space-between' container sx={{ mb: 2 }}>
         <Input
           variant='search-m'
           placeholder={t('Search datasource')}
@@ -101,13 +98,14 @@ const DataSourcesListView: React.FC = () => {
             }
           />
         </WithPermissions>
-      </S.Caption>
-      <Grid container>
-        <Grid item xs={12}>
+      </Grid>
+      {dataSourcesList.length > 0 && (
+        <ScrollableContainer container id='datasources-list'>
           <InfiniteScroll
+            scrollableTarget='datasources-list'
             next={fetchNextPage}
             hasMore={hasNext}
-            loader={isDataSourcesListFetching && <DataSourceSkeletonItem length={5} />}
+            loader={<DataSourceSkeletonItem length={5} />}
             dataLength={dataSourcesList.length}
           >
             {dataSourcesList.map(dataSource => (
@@ -116,8 +114,8 @@ const DataSourcesListView: React.FC = () => {
               </Grid>
             ))}
           </InfiniteScroll>
-        </Grid>
-      </Grid>
+        </ScrollableContainer>
+      )}
       {!isDataSourcesListFetching && !dataSourcesList.length ? (
         <EmptyContentPlaceholder />
       ) : null}

odd-platform-ui/src/components/Management/Integrations/IntegrationPreviewList/IntegrationPreviewList.tsx

@@ -1,4 +1,4 @@
-import React, { type ChangeEvent, type FC, useCallback, useState } from 'react';
+import React, { type ChangeEvent, type FC, useState } from 'react';
 import { Grid, Typography } from '@mui/material';
 import isEmpty from 'lodash/isEmpty';
 import { useTranslation } from 'react-i18next';
@@ -8,6 +8,7 @@ import {
   EmptyContentPlaceholder,
   Input,
   NumberFormatted,
+  ScrollableContainer,
 } from 'components/shared/elements';
 import { useIntegrationPreviews } from 'lib/hooks/api';
 import type { ErrorState } from 'redux/interfaces';
@@ -19,10 +20,8 @@ const IntegrationPreviewList: FC = () => {
 
   const { data, isError, isSuccess, error, isLoading } = useIntegrationPreviews();
 
-  const handleInputChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value),
-    []
-  );
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) =>
+    setQuery(e.target.value);
 
   const filteredIntegrations =
     data?.items.filter(integration =>
@@ -50,18 +49,22 @@ const IntegrationPreviewList: FC = () => {
       </Grid>
       {isLoading ? <AppLoadingPage /> : null}
 
-      {!isEmpty(filteredIntegrations) && (
-        <Grid container columnGap={2} rowGap={4}>
-          {filteredIntegrations.map(({ id, name, description, installed }) => (
-            <IntegrationPreviewItem
-              key={id}
-              id={id}
-              name={name}
-              description={description}
-              installed={installed}
-            />
-          ))}
-        </Grid>
+      {filteredIntegrations.length > 0 && (
+        <ScrollableContainer>
+          {!isEmpty(filteredIntegrations) && (
+            <Grid container columnGap={2} rowGap={4}>
+              {filteredIntegrations.map(({ id, name, description, installed }) => (
+                <IntegrationPreviewItem
+                  key={id}
+                  id={id}
+                  name={name}
+                  description={description}
+                  installed={installed}
+                />
+              ))}
+            </Grid>
+          )}
+        </ScrollableContainer>
       )}
 
       <AppErrorPage showError={isError} error={error as ErrorState} offsetTop={120} />