Add dialog to delete network.

src/components/2-molecules/AttachDialog.jsx

@@ -16,13 +16,25 @@ import {
     Divider,
     Grid,
     Typography,
+    ListItemText,
+    List,
+    IconButton,
+    ListItem,
 } from '@mui/material';
 import PropTypes from 'prop-types';
 import { useStyles } from './AttachDialogStyles';
 import Autocomplete from '../1-atoms/Autocomplete';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 
 const AttachDialog = (props) => {
-    const { open, handleClose, attachWithFile, networks, attachWithId } = props;
+    const {
+        open,
+        handleClose,
+        attachWithFile,
+        networks,
+        attachWithId,
+        onDeleteNetwork,
+    } = props;
     const [file, setFile] = useState(null);
     const [networkId, setNetworkId] = useState('');
     const classes = useStyles();
@@ -107,6 +119,31 @@ const AttachDialog = (props) => {
                 )}
             </DialogContent>
             <Divider />
+            <DialogContent>
+                <Typography>Delete a known network :</Typography>
+                <List>
+                    {networks.map((network) => (
+                        <ListItem
+                            key={network.networkName}
+                            divider
+                            secondaryAction={
+                                <IconButton
+                                    onClick={() =>
+                                        onDeleteNetwork(network.networkId)
+                                    }
+                                    edge="end"
+                                    aria-label="delete"
+                                >
+                                    <DeleteForeverIcon />
+                                </IconButton>
+                            }
+                        >
+                            <ListItemText primary={`${network.networkName}`} />
+                        </ListItem>
+                    ))}
+                </List>
+            </DialogContent>
+            <Divider />
             <DialogActions>
                 <Button onClick={closeDialog} color="primary">
                     Cancel

src/containers/MappingContainer.jsx

@@ -19,6 +19,7 @@ import {
 } from '../redux/slices/Mapping';
 import { convertScript } from '../redux/slices/Script';
 import {
+    deleteNetwork,
     getCurrentNetworkObj,
     getNetworkNames,
     getPropertyValuesFromFile,
@@ -128,6 +129,10 @@ const MappingContainer = () => {
         dispatch(getPropertyValuesFromFile(file));
     }
 
+    const handleDeleteNetwork = (networkId) => {
+        dispatch(deleteNetwork(networkId));
+    };
+
     function setFilteredType(type) {
         dispatch(MappingSlice.actions.changeFilteredType(type));
     }
@@ -256,6 +261,7 @@ const MappingContainer = () => {
                 handleClose={() => setIsAttachedModalOpen(false)}
                 attachWithId={attachWithId}
                 attachWithFile={attachWithFile}
+                onDeleteNetwork={handleDeleteNetwork}
             />
             {editParameters && (
                 <ParametersContainer

src/redux/slices/Network.js

@@ -111,6 +111,14 @@ export const getNetworkNames = createAsyncThunk(
     }
 );
 
+export const deleteNetwork = createAsyncThunk(
+    'network/delete',
+    async (networkId, { getState }) => {
+        const token = getState()?.user.user?.id_token;
+        return await networkAPI.deleteNetwork(networkId, token);
+    }
+);
+
 const reducers = {
     cleanNetwork: (state) => {
         state.propertyValues = [];
@@ -156,6 +164,19 @@ const extraReducers = {
     [getNetworkNames.pending]: (state, _action) => {
         state.status = RequestStatus.PENDING;
     },
+    [deleteNetwork.fulfilled]: (state, action) => {
+        state.status = RequestStatus.SUCCESS;
+        const networkId = action.payload;
+        state.knownNetworks = state.knownNetworks.filter(
+            (network) => network.networkId !== networkId
+        );
+    },
+    [deleteNetwork.rejected]: (state, _action) => {
+        state.status = RequestStatus.ERROR;
+    },
+    [deleteNetwork.pending]: (state, _action) => {
+        state.status = RequestStatus.PENDING;
+    },
 };
 
 export const NetworkSlice = createSlice({

src/redux/slices/Script.js

@@ -78,6 +78,7 @@ export const deleteScript = createAsyncThunk(
         return await scriptsAPI.deleteScript(scriptName, token);
     }
 );
+
 export const copyScript = createAsyncThunk(
     'scripts/copy',
     async ({ originalName, copyName }, { getState }) => {

src/rest/networkAPI.js

@@ -74,3 +74,15 @@ export function getNetworkMatchesFromRule(networkId, ruleToMatch, token) {
         token
     );
 }
+
+export function deleteNetwork(networkId, token) {
+    return backendFetchJson(`${API_URL}/${networkId}`, {
+        method: 'DELETE',
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            Authorization: 'Bearer ' + token,
+        },
+        cache: 'default',
+    });
+}