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;