[frontend] Fix tags displayed and links to item exercises lists (#1610)

OpenBAS-Platform · Oct 21, 2024 · 7b1f920 · 7b1f920
1 parent 190c8e0
commit 7b1f920
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git a/openbas-front/src/admin/Index.tsx b/openbas-front/src/admin/Index.tsx
@@ -14,6 +14,8 @@ import Loader from '../components/Loader';
 import NotFound from '../components/NotFound';
 import InjectIndex from './components/simulations/simulation/injects/InjectIndex';
 import SystemBanners, { computeBannerSettings } from '../public/components/systembanners/SystemBanners';
+import { fetchTags } from '../actions/Tag';
+import { useAppDispatch } from '../utils/hooks';
 
 const Dashboard = lazy(() => import('./components/Dashboard'));
 const IndexProfile = lazy(() => import('./components/profile/Index'));
@@ -57,7 +59,10 @@ const Index = () => {
     overflowX: 'hidden',
     overflowY: 'hidden',
   };
-  useDataLoader();
+  const dispatch = useAppDispatch();
+  useDataLoader(() => {
+    dispatch(fetchTags());
+  });
   const { bannerHeight } = computeBannerSettings(settings);
   return (
     <>

diff --git a/openbas-front/src/admin/components/atomic_testings/InjectDtoList.tsx b/openbas-front/src/admin/components/atomic_testings/InjectDtoList.tsx
@@ -1,4 +1,5 @@
 import React, { CSSProperties, FunctionComponent, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
 import { makeStyles } from '@mui/styles';
 import { List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import { useFormatter } from '../../../components/i18n';
@@ -195,7 +196,8 @@ const InjectDtoList: FunctionComponent<Props> = ({
               disablePadding
             >
               <ListItemButton
-                href={goTo(injectDto.inject_id)}
+                component={Link}
+                to={goTo(injectDto.inject_id)}
               >
                 <ListItemIcon>
                   <InjectIcon

diff --git a/openbas-front/src/admin/components/scenarios/Scenarios.tsx b/openbas-front/src/admin/components/scenarios/Scenarios.tsx
@@ -2,6 +2,7 @@ import { makeStyles } from '@mui/styles';
 import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, ToggleButtonGroup } from '@mui/material';
 import { MovieFilterOutlined } from '@mui/icons-material';
 import React, { CSSProperties, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
 import { useFormatter } from '../../../components/i18n';
 import { useHelper } from '../../../store';
 import type { TagHelper, UserHelper } from '../../../actions/helper';
@@ -244,7 +245,8 @@ const Scenarios = () => {
               disablePadding
             >
               <ListItemButton
-                href={`/admin/scenarios/${scenario.scenario_id}`}
+                component={Link}
+                to={`/admin/scenarios/${scenario.scenario_id}`}
                 classes={{ root: classes.item }}
               >
                 <ListItemIcon>

diff --git a/openbas-front/src/admin/components/simulations/ExerciseList.tsx b/openbas-front/src/admin/components/simulations/ExerciseList.tsx
@@ -1,6 +1,7 @@
 import { List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import { HubOutlined } from '@mui/icons-material';
 import React, { CSSProperties, FunctionComponent } from 'react';
+import { Link } from 'react-router-dom';
 import { makeStyles } from '@mui/styles';
 import ExerciseStatus from './simulation/ExerciseStatus';
 import ItemTags from '../../../components/ItemTags';
@@ -82,7 +83,7 @@ const ExerciseList: FunctionComponent<Props> = ({
   const dispatch = useAppDispatch();
   const classes = useStyles();
   const inlineStyles = getInlineStyles(variant);
-  const { nsdt } = useFormatter();
+  const { nsdt, vnsdt } = useFormatter();
 
   // Fetching data
   useDataLoader(() => {
@@ -101,7 +102,12 @@ const ExerciseList: FunctionComponent<Props> = ({
       field: 'exercise_start_date',
       label: 'Start date',
       isSortable: true,
-      value: (exercise: ExerciseSimple) => <>{(exercise.exercise_start_date ? (nsdt(exercise.exercise_start_date)) : ('-'))}</>,
+      value: (exercise: ExerciseSimple) => {
+        if (!exercise.exercise_start_date) {
+          return '-';
+        }
+        return <>{(variant === 'reduced-view' ? vnsdt(exercise.exercise_start_date) : nsdt(exercise.exercise_start_date))}</>;
+      },
     },
     {
       field: 'exercise_status',
@@ -131,7 +137,12 @@ const ExerciseList: FunctionComponent<Props> = ({
       field: 'exercise_updated_at',
       label: 'Updated',
       isSortable: true,
-      value: (exercise: ExerciseSimple) => <>{nsdt(exercise.exercise_updated_at)}</>,
+      value: (exercise: ExerciseSimple) => {
+        if (!exercise.exercise_updated_at) {
+          return '-';
+        }
+        return <>{(variant === 'reduced-view' ? vnsdt(exercise.exercise_updated_at) : nsdt(exercise.exercise_updated_at))}</>;
+      },
     },
   ];
 
@@ -164,7 +175,8 @@ const ExerciseList: FunctionComponent<Props> = ({
         >
           <ListItemButton
             classes={{ root: classes.item }}
-            href={`/admin/exercises/${exercise.exercise_id}`}
+            component={Link}
+            to={`/admin/exercises/${exercise.exercise_id}`}
           >
             <ListItemIcon>
               <HubOutlined color="primary" />