From 29266ced9b5cb4f1791a5a9ac33d0b3eb0504d4a Mon Sep 17 00:00:00 2001
From: Marine LM <marine.lemezo@filigran.io>
Date: Tue, 17 Dec 2024 10:02:22 +0100
Subject: [PATCH] [frontend] replace deprecated ListItemSecondaryAction
 component

Signed-off-by: Marine LM <marine.lemezo@filigran.io>
---
 .../lessons/exercises/LessonsObjectives.js    |  84 ++++----
 .../lessons/scenarios/LessonsObjectives.js    |  85 ++++----
 .../simulation/timeline/TimelineOverview.tsx  | 195 +++++++++---------
 3 files changed, 184 insertions(+), 180 deletions(-)

diff --git a/openbas-front/src/admin/components/lessons/exercises/LessonsObjectives.js b/openbas-front/src/admin/components/lessons/exercises/LessonsObjectives.js
index be2c2cb0f2..3ef226067c 100644
--- a/openbas-front/src/admin/components/lessons/exercises/LessonsObjectives.js
+++ b/openbas-front/src/admin/components/lessons/exercises/LessonsObjectives.js
@@ -4,9 +4,9 @@ import {
   Grid,
   LinearProgress,
   List,
+  ListItem,
   ListItemButton,
   ListItemIcon,
-  ListItemSecondaryAction,
   ListItemText,
   Paper,
   Typography,
@@ -84,50 +84,52 @@ const LessonsObjectives = ({
           {sortedObjectives.length > 0 ? (
             <List style={{ padding: 0 }}>
               {sortedObjectives.map(objective => (
-                <ListItemButton
+                <ListItem
                   key={objective.objective_id}
-                  divider
-                  onClick={() => setSelectedObjective
-                    && setSelectedObjective(objective.objective_id)}
+                  secondaryAction={!isReport && (
+                    <ObjectivePopover
+                      isReadOnly={source.isReadOnly}
+                      objective={objective}
+                    />
+                  )}
                 >
-                  <ListItemIcon>
-                    <FlagOutlined />
-                  </ListItemIcon>
-                  <ListItemText
-                    style={{ width: '50%' }}
-                    primary={objective.objective_title}
-                    secondary={objective.objective_description}
-                  />
-                  <Box
-                    sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      width: '30%',
-                      marginRight: 1,
-                    }}
+                  <ListItemButton
+                    divider
+                    onClick={() => setSelectedObjective
+                      && setSelectedObjective(objective.objective_id)}
                   >
-                    <Box sx={{ width: '100%', mr: 1 }}>
-                      <LinearProgress
-                        variant="determinate"
-                        value={objective.objective_score}
-                      />
-                    </Box>
-                    <Box sx={{ minWidth: 35 }}>
-                      <Typography variant="body2" color="text.secondary">
-                        {objective.objective_score}
-                        %
-                      </Typography>
+                    <ListItemIcon>
+                      <FlagOutlined />
+                    </ListItemIcon>
+                    <ListItemText
+                      style={{ width: '50%' }}
+                      primary={objective.objective_title}
+                      secondary={objective.objective_description}
+                    />
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        width: '30%',
+                        marginRight: 1,
+                      }}
+                    >
+                      <Box sx={{ width: '100%', mr: 1 }}>
+                        <LinearProgress
+                          variant="determinate"
+                          value={objective.objective_score}
+                        />
+                      </Box>
+                      <Box sx={{ minWidth: 35 }}>
+                        <Typography variant="body2" color="text.secondary">
+                          {objective.objective_score}
+                          %
+                        </Typography>
+                      </Box>
                     </Box>
-                  </Box>
-                  {!isReport && (
-                    <ListItemSecondaryAction>
-                      <ObjectivePopover
-                        isReadOnly={source.isReadOnly}
-                        objective={objective}
-                      />
-                    </ListItemSecondaryAction>
-                  )}
-                </ListItemButton>
+                  </ListItemButton>
+                </ListItem>
+
               ))}
             </List>
           ) : (
diff --git a/openbas-front/src/admin/components/lessons/scenarios/LessonsObjectives.js b/openbas-front/src/admin/components/lessons/scenarios/LessonsObjectives.js
index 3fa790b3da..101dd28c0c 100644
--- a/openbas-front/src/admin/components/lessons/scenarios/LessonsObjectives.js
+++ b/openbas-front/src/admin/components/lessons/scenarios/LessonsObjectives.js
@@ -3,10 +3,9 @@ import {
   Box,
   Grid,
   LinearProgress,
-  List,
+  List, ListItem,
   ListItemButton,
   ListItemIcon,
-  ListItemSecondaryAction,
   ListItemText,
   Paper,
   Typography,
@@ -53,50 +52,52 @@ const LessonsObjectives = ({
           {sortedObjectives.length > 0 ? (
             <List style={{ padding: 0 }}>
               {sortedObjectives.map(objective => (
-                <ListItemButton
+                <ListItem
                   key={objective.objective_id}
-                  divider
-                  onClick={() => setSelectedObjective
-                    && setSelectedObjective(objective.objective_id)}
+                  secondaryAction={!isReport && (
+                    <ObjectivePopover
+                      isReadOnly={source.isReadOnly}
+                      objective={objective}
+                    />
+                  )}
                 >
-                  <ListItemIcon>
-                    <FlagOutlined />
-                  </ListItemIcon>
-                  <ListItemText
-                    style={{ width: '50%' }}
-                    primary={objective.objective_title}
-                    secondary={objective.objective_description}
-                  />
-                  <Box
-                    sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      width: '30%',
-                      marginRight: 1,
-                    }}
+                  <ListItemButton
+                    divider
+                    onClick={() => setSelectedObjective
+                      && setSelectedObjective(objective.objective_id)}
                   >
-                    <Box sx={{ width: '100%', mr: 1 }}>
-                      <LinearProgress
-                        variant="determinate"
-                        value={objective.objective_score}
-                      />
-                    </Box>
-                    <Box sx={{ minWidth: 35 }}>
-                      <Typography variant="body2" color="text.secondary">
-                        {objective.objective_score}
-                        %
-                      </Typography>
+                    <ListItemIcon>
+                      <FlagOutlined />
+                    </ListItemIcon>
+                    <ListItemText
+                      style={{ width: '50%' }}
+                      primary={objective.objective_title}
+                      secondary={objective.objective_description}
+                    />
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        width: '30%',
+                        marginRight: 1,
+                      }}
+                    >
+                      <Box sx={{ width: '100%', mr: 1 }}>
+                        <LinearProgress
+                          variant="determinate"
+                          value={objective.objective_score}
+                        />
+                      </Box>
+                      <Box sx={{ minWidth: 35 }}>
+                        <Typography variant="body2" color="text.secondary">
+                          {objective.objective_score}
+                          %
+                        </Typography>
+                      </Box>
                     </Box>
-                  </Box>
-                  {!isReport && (
-                    <ListItemSecondaryAction>
-                      <ObjectivePopover
-                        isReadOnly={source.isReadOnly}
-                        objective={objective}
-                      />
-                    </ListItemSecondaryAction>
-                  )}
-                </ListItemButton>
+                  </ListItemButton>
+                </ListItem>
+
               ))}
             </List>
           ) : (
diff --git a/openbas-front/src/admin/components/simulations/simulation/timeline/TimelineOverview.tsx b/openbas-front/src/admin/components/simulations/simulation/timeline/TimelineOverview.tsx
index e120590f15..d4b153e582 100644
--- a/openbas-front/src/admin/components/simulations/simulation/timeline/TimelineOverview.tsx
+++ b/openbas-front/src/admin/components/simulations/simulation/timeline/TimelineOverview.tsx
@@ -2,9 +2,9 @@ import { PreviewOutlined } from '@mui/icons-material';
 import {
   Grid,
   List,
+  ListItem,
   ListItemButton,
   ListItemIcon,
-  ListItemSecondaryAction,
   ListItemText,
   Paper,
   Typography,
@@ -157,13 +157,93 @@ const TimelineOverview = () => {
                   {pendingInjects.map((inject: InjectStore) => {
                     const isDisabled = !inject.inject_injector_contract.injector_contract_content_parsed?.config.expose;
                     return (
-                      <ListItemButton
+                      <ListItem
                         key={inject.inject_id}
+                        secondaryAction={(
+                          <InjectPopover
+                            inject={inject}
+                            setSelectedInjectId={setSelectedInjectId}
+                            isDisabled={isDisabled}
+                            canDone
+                            canTriggerNow
+                          />
+                        )}
+                      >
+                        <ListItemButton
+                          dense
+                          classes={{ root: classes.item }}
+                          divider
+                          disabled={isDisabled || !inject.inject_enabled}
+                          onClick={() => setSelectedInjectId(inject.inject_id)}
+                        >
+                          <ListItemIcon>
+                            <InjectIcon
+                              isPayload={isNotEmptyField(inject.inject_injector_contract.injector_contract_payload)}
+                              type={
+                                inject.inject_injector_contract.injector_contract_payload
+                                  ? inject.inject_injector_contract.injector_contract_payload?.payload_collector_type
+                                  || inject.inject_injector_contract.injector_contract_payload?.payload_type
+                                  : inject.inject_type
+                              }
+                              variant="inline"
+                            />
+                          </ListItemIcon>
+                          <ListItemText
+                            primary={(
+                              <div className={classes.bodyItems}>
+                                <div
+                                  className={classes.bodyItem}
+                                  style={{ width: '50%' }}
+                                >
+                                  {inject.inject_title}
+                                </div>
+                                <div
+                                  className={classes.bodyItem}
+                                  style={{ width: '20%' }}
+                                >
+                                  <ProgressBarCountdown
+                                    date={inject.inject_date}
+                                    paused={
+                                      exercise?.exercise_status === 'PAUSED'
+                                      || exercise?.exercise_status === 'CANCELED'
+                                    }
+                                  />
+                                </div>
+                                <div
+                                  className={classes.bodyItem}
+                                  style={{
+                                    fontFamily: 'Consolas, monaco, monospace',
+                                    fontSize: 12,
+                                  }}
+                                >
+                                  {fndt(inject.inject_date)}
+                                </div>
+                              </div>
+                            )}
+                          />
+                        </ListItemButton>
+                      </ListItem>
+                    );
+                  })}
+                </List>
+              ) : (
+                <Empty message={t('No pending injects in this simulation.')} />
+              )}
+            </Paper>
+          </Grid>
+          <Grid item xs={6} sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Typography variant="h4">{t('Processed injects')}</Typography>
+            <Paper variant="outlined" classes={{ root: classes.paper }}>
+              {processedInjects.length > 0 ? (
+                <List style={{ paddingTop: 0 }}>
+                  {processedInjects.map((inject: InjectStore) => (
+                    <ListItem key={inject.inject_id} secondaryAction={<PreviewOutlined />}>
+                      <ListItemButton
                         dense
                         classes={{ root: classes.item }}
                         divider
-                        disabled={isDisabled || !inject.inject_enabled}
-                        onClick={() => setSelectedInjectId(inject.inject_id)}
+                        component={Link}
+                        to={`/admin/simulations/${exerciseId}/injects/${inject.inject_id}?backlabel=Animation&backuri=/admin/simulations/${exerciseId}/animation/timeline`}
                       >
                         <ListItemIcon>
                           <InjectIcon
@@ -182,7 +262,7 @@ const TimelineOverview = () => {
                             <div className={classes.bodyItems}>
                               <div
                                 className={classes.bodyItem}
-                                style={{ width: '50%' }}
+                                style={{ width: '40%' }}
                               >
                                 {inject.inject_title}
                               </div>
@@ -190,12 +270,11 @@ const TimelineOverview = () => {
                                 className={classes.bodyItem}
                                 style={{ width: '20%' }}
                               >
-                                <ProgressBarCountdown
-                                  date={inject.inject_date}
-                                  paused={
-                                    exercise?.exercise_status === 'PAUSED'
-                                    || exercise?.exercise_status === 'CANCELED'
-                                  }
+                                <ItemStatus
+                                  key={inject.inject_id}
+                                  variant="inList"
+                                  label={inject.inject_status?.status_name ? t(inject.inject_status.status_name) : 'No Status'}
+                                  status={inject.inject_status?.status_name}
                                 />
                               </div>
                               <div
@@ -205,97 +284,19 @@ const TimelineOverview = () => {
                                   fontSize: 12,
                                 }}
                               >
-                                {fndt(inject.inject_date)}
+                                {fndt(inject.inject_status?.tracking_sent_date)}
+                                {' '}
+                                {
+                                  inject.inject_status && inject.inject_status.tracking_total_execution_time
+                                  && (inject.inject_status.tracking_total_execution_time / 1000).toFixed(2)
+                                }
+                                {t('s')}
                               </div>
                             </div>
                           )}
                         />
-                        <ListItemSecondaryAction>
-                          <InjectPopover
-                            inject={inject}
-                            setSelectedInjectId={setSelectedInjectId}
-                            isDisabled={isDisabled}
-                            canDone
-                            canTriggerNow
-                          />
-                        </ListItemSecondaryAction>
                       </ListItemButton>
-                    );
-                  })}
-                </List>
-              ) : (
-                <Empty message={t('No pending injects in this simulation.')} />
-              )}
-            </Paper>
-          </Grid>
-          <Grid item xs={6} sx={{ display: 'flex', flexDirection: 'column' }}>
-            <Typography variant="h4">{t('Processed injects')}</Typography>
-            <Paper variant="outlined" classes={{ root: classes.paper }}>
-              {processedInjects.length > 0 ? (
-                <List style={{ paddingTop: 0 }}>
-                  {processedInjects.map((inject: InjectStore) => (
-                    <ListItemButton
-                      key={inject.inject_id}
-                      dense
-                      classes={{ root: classes.item }}
-                      divider
-                      component={Link}
-                      to={`/admin/simulations/${exerciseId}/injects/${inject.inject_id}?backlabel=Animation&backuri=/admin/simulations/${exerciseId}/animation/timeline`}
-                    >
-                      <ListItemIcon>
-                        <InjectIcon
-                          isPayload={isNotEmptyField(inject.inject_injector_contract.injector_contract_payload)}
-                          type={
-                            inject.inject_injector_contract.injector_contract_payload
-                              ? inject.inject_injector_contract.injector_contract_payload?.payload_collector_type
-                              || inject.inject_injector_contract.injector_contract_payload?.payload_type
-                              : inject.inject_type
-                          }
-                          variant="inline"
-                        />
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={(
-                          <div className={classes.bodyItems}>
-                            <div
-                              className={classes.bodyItem}
-                              style={{ width: '40%' }}
-                            >
-                              {inject.inject_title}
-                            </div>
-                            <div
-                              className={classes.bodyItem}
-                              style={{ width: '20%' }}
-                            >
-                              <ItemStatus
-                                key={inject.inject_id}
-                                variant="inList"
-                                label={inject.inject_status?.status_name ? t(inject.inject_status.status_name) : 'No Status'}
-                                status={inject.inject_status?.status_name}
-                              />
-                            </div>
-                            <div
-                              className={classes.bodyItem}
-                              style={{
-                                fontFamily: 'Consolas, monaco, monospace',
-                                fontSize: 12,
-                              }}
-                            >
-                              {fndt(inject.inject_status?.tracking_sent_date)}
-                              {' '}
-                              {
-                                inject.inject_status && inject.inject_status.tracking_total_execution_time
-                                && (inject.inject_status.tracking_total_execution_time / 1000).toFixed(2)
-                              }
-                              {t('s')}
-                            </div>
-                          </div>
-                        )}
-                      />
-                      <ListItemSecondaryAction>
-                        <PreviewOutlined />
-                      </ListItemSecondaryAction>
-                    </ListItemButton>
+                    </ListItem>
                   ))}
                 </List>
               ) : (