diff --git a/src/pages/Help.tsx b/src/pages/Help.tsx
index 8bd1a649..99753bf1 100644
--- a/src/pages/Help.tsx
+++ b/src/pages/Help.tsx
@@ -18,10 +18,12 @@
* SPDX-License-Identifier: Apache-2.0
********************************************************************************/
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import InfoIcon from '@mui/icons-material/Info';
-import { Card, CardContent, Grid } from '@mui/material';
+import { Box, Card, CardContent, Grid } from '@mui/material';
import { GridColDef } from '@mui/x-data-grid';
-import { Table, Tooltips, Typography } from 'cx-portal-shared-components';
+import { Button, IconButton, Table, Tooltips, Typography } from 'cx-portal-shared-components';
+import { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import DownloadSamples from '../components/DownloadSamples';
@@ -72,10 +74,16 @@ export default function Help() {
const { t } = useTranslation();
const { selectedUseCases } = useAppSelector(state => state.appSlice);
const { isSuccess, data } = useGetHelpPageDataQuery({ usecases: selectedUseCases });
+ const refScrollUp = useRef(null);
+
+ const handleScrollUp = () => {
+ refScrollUp.current.scrollIntoView({ behavior: 'smooth' });
+ };
if (isSuccess) {
return (
<>
+
{t('pages.help')}
@@ -83,33 +91,43 @@ export default function Help() {
{t('content.help.description')}
+
+ Quick links:
+ {data.map((table: HelpPageData) => (
+
+ ))}
+
{data.map((table: HelpPageData) => (
-
-
- row.id}
- autoHeight
- hideFooter={true}
- columns={columns}
- rows={table.rows}
- sx={{
- '& .MuiDataGrid-cellCheckbox': {
- padding: '0 30px',
- },
- '& h5.MuiTypography-root.MuiTypography-h5 span': {
- display: 'none',
- },
- }}
- />
-
-
-
- {table.description}
-
-
+
+
+
+ row.id}
+ autoHeight
+ hideFooter={true}
+ columns={columns}
+ rows={table.rows}
+ sx={{
+ '& .MuiDataGrid-cellCheckbox': {
+ padding: '0 30px',
+ },
+ '& h5.MuiTypography-root.MuiTypography-h5 span': {
+ display: 'none',
+ },
+ }}
+ />
+
+
+
+ {table.description}
+
+
+
-
+
))}
@@ -121,6 +139,13 @@ export default function Help() {
+ handleScrollUp()}
+ sx={{ position: 'fixed', bottom: '30px', right: '30px' }}
+ >
+
+
>
);
} else return null;