From a517bcf891412a2bc0d658a7c0e96770febdf620 Mon Sep 17 00:00:00 2001 From: Ajith Kumar Date: Wed, 14 Feb 2024 20:22:46 +0530 Subject: [PATCH 1/2] feat: selected use cases section added --- src/components/SelectedUseCases.tsx | 42 +++++++++++++++++++++++++++++ src/pages/CreateData.tsx | 4 ++- src/pages/Help.tsx | 8 +++--- 3 files changed, 50 insertions(+), 4 deletions(-) create mode 100644 src/components/SelectedUseCases.tsx diff --git a/src/components/SelectedUseCases.tsx b/src/components/SelectedUseCases.tsx new file mode 100644 index 00000000..b5bf34a2 --- /dev/null +++ b/src/components/SelectedUseCases.tsx @@ -0,0 +1,42 @@ +/********************************************************************************* + * Copyright (c) 2024 T-Systems International GmbH + * Copyright (c) 2024 Contributors to the Eclipse Foundation + * + * See the NOTICE file(s) distributed with this work for additional + * information regarding copyright ownership. + * + * This program and the accompanying materials are made available under the + * terms of the Apache License, Version 2.0 which is available at + * https://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * SPDX-License-Identifier: Apache-2.0 + ********************************************************************************/ + +import { Typography } from 'cx-portal-shared-components'; +import { filter, isEmpty } from 'lodash'; + +import { useAppSelector } from '../features/store'; + +function SelectedUseCases() { + const { useCases } = useAppSelector(state => state.appSlice); + return ( + <> + {!isEmpty(filter(useCases, 'checked')) && ( + + Selected use cases:{' '} + {filter(useCases, 'checked') + .map(e => e.title) + .join(', ')} + + )} + + ); +} + +export default SelectedUseCases; diff --git a/src/pages/CreateData.tsx b/src/pages/CreateData.tsx index 68e84bfc..257c5632 100644 --- a/src/pages/CreateData.tsx +++ b/src/pages/CreateData.tsx @@ -27,6 +27,7 @@ import { useTranslation } from 'react-i18next'; import DownloadSamples from '../components/DownloadSamples'; import AddEditPolicy from '../components/policies/AddEditPolicy'; +import SelectedUseCases from '../components/SelectedUseCases'; import SelectSubmodel from '../components/SelectSubmodel'; import SubmodelDataTable from '../components/SubmodelDataTable'; import SubmodelInfo from '../components/SubmodelInfo'; @@ -44,9 +45,10 @@ export default function CreateData() { return ( <> - + {t('content.provider.heading')} + {t('content.provider.description_1')} {t('content.provider.description_2')}
    diff --git a/src/pages/Help.tsx b/src/pages/Help.tsx index 21fb1439..8bd1a649 100644 --- a/src/pages/Help.tsx +++ b/src/pages/Help.tsx @@ -1,6 +1,6 @@ /********************************************************************************* - * Copyright (c) 2021,2022,2023 T-Systems International GmbH - * Copyright (c) 2022,2023 Contributors to the Eclipse Foundation + * Copyright (c) 2022,2024 T-Systems International GmbH + * Copyright (c) 2022,2024 Contributors to the Eclipse Foundation * * See the NOTICE file(s) distributed with this work for additional * information regarding copyright ownership. @@ -25,6 +25,7 @@ import { Table, Tooltips, Typography } from 'cx-portal-shared-components'; import { useTranslation } from 'react-i18next'; import DownloadSamples from '../components/DownloadSamples'; +import SelectedUseCases from '../components/SelectedUseCases'; import { useGetHelpPageDataQuery } from '../features/provider/submodels/apiSlice'; import { HelpPageData } from '../features/provider/submodels/types'; import { useAppSelector } from '../features/store'; @@ -78,7 +79,8 @@ export default function Help() { {t('pages.help')} - + + {t('content.help.description')} {data.map((table: HelpPageData) => ( From db748628e14263e11ac8f69631b514f679636d8f Mon Sep 17 00:00:00 2001 From: Ajith Kumar Date: Wed, 14 Feb 2024 21:24:33 +0530 Subject: [PATCH 2/2] feat: Submodel navigation menu in help page --- src/pages/Help.tsx | 79 ++++++++++++++++++++++++++++++---------------- 1 file changed, 52 insertions(+), 27 deletions(-) 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;