feat: Sub-model navigation menu in help page

src/features/app/actions.ts → src/components/SelectedUseCases.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) 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.
@@ -17,26 +17,26 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
-import { createAsyncThunk } from '@reduxjs/toolkit';
 
-import AppService from '../../services/appService';
+import { Typography } from 'cx-portal-shared-components';
+import { filter, isEmpty } from 'lodash';
 
-const fetchUserPermissions = createAsyncThunk('/user/permissions', async () => {
-  try {
-    const res = await AppService.getInstance().getUserPermissions();
-    return res.data;
-  } catch (error) {
-    console.log('api call error:', error);
-  }
-});
+import { useAppSelector } from '../features/store';
 
-const fetchUseCases = createAsyncThunk('/usecases', async () => {
-  try {
-    const res = await AppService.getInstance().getUseCases();
-    return res.data;
-  } catch (error) {
-    console.log('api call error:', error);
-  }
-});
+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 { fetchUseCases, fetchUserPermissions };
+export default SelectedUseCases;

src/components/layouts/AppLayout.tsx

@@ -1,6 +1,6 @@
 /********************************************************************************
- * Copyright (c) 2021,2022,2023 T-Systems International GmbH
- * Copyright (c) 2021,2022 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,22 +18,20 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 import { Box } from '@mui/material';
-import { useEffect } from 'react';
 
-import { fetchUserPermissions } from '../../features/app/actions';
+import { useGetPermissionsQuery, useGetUseCasesQuery } from '../../features/app/apiSlice';
 import { setLoggedInUser } from '../../features/app/slice';
 import { useAppDispatch } from '../../features/store';
 import Nav from '../Nav';
 import Sidebar from '../sidebar';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default function AppLayout(props: any) {
+  useGetUseCasesQuery({});
+  useGetPermissionsQuery({});
+
   const dispatch = useAppDispatch();
-  useEffect(() => {
-    dispatch(fetchUserPermissions());
-    dispatch(setLoggedInUser(props.loggedUser));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  dispatch(setLoggedInUser(props.loggedUser));
 
   return (
     <Box sx={{ my: 0, mx: 'auto', overflowY: 'auto', overflowX: 'hidden', height: '100vh' }}>

src/features/app/apiSlice.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /********************************************************************************
- * 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.
  *
@@ -21,7 +21,8 @@ import { BaseQueryFn, createApi, FetchArgs, fetchBaseQuery, FetchBaseQueryError
 
 import { apiBaseQuery } from '../../services/RequestService';
 import { setSnackbarMessage } from '../notifiication/slice';
-import { IExtraOptions } from './types';
+import { setPageLoading, setPermissions, setUseCases } from './slice';
+import { IExtraOptions, UseCaseSelectionModel } from './types';
 
 const baseQuery = fetchBaseQuery(apiBaseQuery());
 const baseQueryInterceptor: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, IExtraOptions> = async (
@@ -54,6 +55,41 @@ const baseQueryInterceptor: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQu
 export const apiSlice = createApi({
   reducerPath: 'api',
   baseQuery: baseQueryInterceptor,
-  endpoints: () => ({}),
+  endpoints: builder => ({
+    getUseCases: builder.query({
+      query: () => {
+        return {
+          url: '/usecases',
+        };
+      },
+      async onQueryStarted(_, { dispatch, queryFulfilled }) {
+        try {
+          dispatch(setPageLoading(true));
+          const data = UseCaseSelectionModel.create((await queryFulfilled).data);
+          dispatch(setUseCases(data));
+        } finally {
+          dispatch(setPageLoading(false));
+        }
+      },
+    }),
+    getPermissions: builder.query({
+      query: () => {
+        return {
+          url: '/user/role/permissions',
+        };
+      },
+      async onQueryStarted(_, { dispatch, queryFulfilled }) {
+        try {
+          dispatch(setPageLoading(true));
+          const data = (await queryFulfilled).data;
+          dispatch(setPermissions(data));
+        } finally {
+          dispatch(setPageLoading(false));
+        }
+      },
+    }),
+  }),
   tagTypes: ['UploadHistory', 'DeleteContract'],
 });
+
+export const { useGetUseCasesQuery, useGetPermissionsQuery } = apiSlice;

src/features/app/slice.ts

@@ -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.
@@ -19,8 +19,8 @@
  ********************************************************************************/
 
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { filter } from 'lodash';
 
-import { fetchUseCases, fetchUserPermissions } from './actions';
 import { IAppSlice, IUser } from './types';
 
 const initialState: IAppSlice = {
@@ -53,27 +53,15 @@ export const appSlice = createSlice({
     setSidebarExpanded: state => {
       state.sidebarExpanded = !state.sidebarExpanded;
     },
-    setSelectedUseCases: (state, action: PayloadAction<string[]>) => {
-      state.selectedUseCases = action.payload;
+    setUseCases: (state, { payload }) => {
+      state.useCases = payload;
+      state.selectedUseCases = filter(payload, 'checked').map(e => e.id);
+    },
+    setPermissions: (state, { payload }) => {
+      state.permissions = payload;
     },
-  },
-  extraReducers: builder => {
-    builder.addCase(fetchUserPermissions.pending, state => {
-      state.pageLoading = true;
-    });
-    builder.addCase(fetchUserPermissions.fulfilled, (state, action) => {
-      state.permissions = action.payload;
-      state.pageLoading = false;
-    });
-    builder.addCase(fetchUseCases.pending, state => {
-      state.pageLoading = true;
-    });
-    builder.addCase(fetchUseCases.fulfilled, (state, action) => {
-      state.useCases = action.payload;
-      state.pageLoading = false;
-    });
   },
 });
 
-export const { setPageLoading, setLoggedInUser, setSelectedUseCases, setSidebarExpanded } = appSlice.actions;
+export const { setPageLoading, setLoggedInUser, setUseCases, setPermissions, setSidebarExpanded } = appSlice.actions;
 export default appSlice.reducer;

src/features/app/types.ts

@@ -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.
@@ -41,9 +41,18 @@ export interface IAppSlice {
 export interface IUseCase {
   id: string;
   title: string;
+  checked?: boolean;
 }
 export interface IExtraOptions {
   showNotification?: boolean;
   message?: string;
   type?: IAlertColors;
 }
+
+export class UseCaseSelectionModel {
+  static create(useCase: IUseCase[]) {
+    return useCase.map(item => {
+      return { id: item.id, title: item.title, checked: false };
+    });
+  }
+}

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 }}>

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;