Merge pull request #69 from catenax-ng/feature/help_sub_links

feat: Sub-model navigation menu in help page
eclipse-tractusx · Feb 16, 2024 · e898a3a · e898a3a
2 parents 7614771 + db74862
commit e898a3a
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 31 deletions.
diff --git a/src/components/SelectedUseCases.tsx 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')) && (
+        <Typography variant="h4" mb={2} textTransform={'capitalize'}>
+          Selected use cases:{' '}
+          {filter(useCases, 'checked')
+            .map(e => e.title)
+            .join(', ')}
+        </Typography>
+      )}
+    </>
+  );
+}
+
+export default SelectedUseCases;
diff --git 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 (
     <>
-      <Typography variant="h3" mb={2}>
+      <Typography variant="h3" mb={1}>
         {t('content.provider.heading')}
       </Typography>
+      <SelectedUseCases />
       <Typography variant="body1">{t('content.provider.description_1')}</Typography>
       <Typography variant="body1">{t('content.provider.description_2')}</Typography>
       <ul style={{ margin: 0 }}>

diff --git 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.
@@ -18,13 +18,16 @@
  * 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';
+import SelectedUseCases from '../components/SelectedUseCases';
 import { useGetHelpPageDataQuery } from '../features/provider/submodels/apiSlice';
 import { HelpPageData } from '../features/provider/submodels/types';
 import { useAppSelector } from '../features/store';
@@ -71,43 +74,60 @@ 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 (
       <>
+        <Box ref={refScrollUp}> </Box>
         <Typography variant="h3" mb={1}>
           {t('pages.help')}
         </Typography>
-        <Typography variant="body1" mb={4}>
+        <SelectedUseCases />
+        <Typography variant="body1" mb={2}>
           {t('content.help.description')}
         </Typography>
+        <Box mb={3} position={'sticky'}>
+          Quick links:
+          {data.map((table: HelpPageData) => (
+            <Button variant="text" size="small" sx={{ mr: 2 }} key={table.id} href={`#${table.id}`}>
+              {table.name}
+            </Button>
+          ))}
+        </Box>
         {data.map((table: HelpPageData) => (
-          <Grid key={table.id} container spacing={4} display={'flex'} alignItems={'center'}>
-            <Grid item xs={8} mb={4}>
-              <Table
-                title={table.name}
-                getRowId={row => row.id}
-                autoHeight
-                hideFooter={true}
-                columns={columns}
-                rows={table.rows}
-                sx={{
-                  '& .MuiDataGrid-cellCheckbox': {
-                    padding: '0 30px',
-                  },
-                  '& h5.MuiTypography-root.MuiTypography-h5 span': {
-                    display: 'none',
-                  },
-                }}
-              />
-            </Grid>
-            <Grid item xs={4} display={'flex'} flexDirection={'column'} alignItems={'center'}>
-              <Typography variant="body1" mb={4}>
-                {table.description}
-              </Typography>
-              <DownloadSamples submodel={table.id} />
+          <section key={table.id} id={table.id}>
+            <Grid key={table.id} container spacing={4} display={'flex'} alignItems={'center'}>
+              <Grid item xs={8} mb={4}>
+                <Table
+                  title={table.name}
+                  getRowId={row => row.id}
+                  autoHeight
+                  hideFooter={true}
+                  columns={columns}
+                  rows={table.rows}
+                  sx={{
+                    '& .MuiDataGrid-cellCheckbox': {
+                      padding: '0 30px',
+                    },
+                    '& h5.MuiTypography-root.MuiTypography-h5 span': {
+                      display: 'none',
+                    },
+                  }}
+                />
+              </Grid>
+              <Grid item xs={4} display={'flex'} flexDirection={'column'} alignItems={'center'}>
+                <Typography variant="body1" mb={4}>
+                  {table.description}
+                </Typography>
+                <DownloadSamples submodel={table.id} />
+              </Grid>
             </Grid>
-          </Grid>
+          </section>
         ))}
         <Card variant="outlined">
           <CardContent>
@@ -119,6 +139,13 @@ export default function Help() {
             </ul>
           </CardContent>
         </Card>
+        <IconButton
+          color="secondary"
+          onClick={() => handleScrollUp()}
+          sx={{ position: 'fixed', bottom: '30px', right: '30px' }}
+        >
+          <ArrowUpwardIcon />
+        </IconButton>
       </>
     );
   } else return null;