diff --git a/striker-ui/pages/init/index.tsx b/striker-ui/pages/init/index.tsx index d6ea2888..a959c9e0 100644 --- a/striker-ui/pages/init/index.tsx +++ b/striker-ui/pages/init/index.tsx @@ -2,10 +2,13 @@ import { FC, useEffect, useState } from 'react'; import { Box as MUIBox, BoxProps as MUIBoxProps, + IconButton as MUIIconButton, + IconButtonProps as MUIIconButtonProps, iconButtonClasses as muiIconButtonClasses, } from '@mui/material'; import { Check as MUICheckIcon, + Close as MUICloseIcon, DragHandle as MUIDragHandleIcon, } from '@mui/icons-material'; import { @@ -90,12 +93,25 @@ const DataGridCellText: FC = ({ /> ); +type BriefNetworkInterfaceOptionalProps = { + onClose?: MUIIconButtonProps['onClick']; +}; + +const BRIEF_NETWORK_INTERFACE_DEFAULT_PROPS: Required< + Omit +> & + Pick = { + onClose: undefined, +}; + const BriefNetworkInterface: FC< - MUIBoxProps & { - networkInterface: NetworkInterfaceOverviewMetadata; - } + MUIBoxProps & + BriefNetworkInterfaceOptionalProps & { + networkInterface: NetworkInterfaceOverviewMetadata; + } > = ({ networkInterface: { networkInterfaceName, networkInterfaceState }, + onClose, sx: rootSx, ...restRootProps }) => ( @@ -118,9 +134,16 @@ const BriefNetworkInterface: FC< sx={{ height: 'auto' }} /> + {onClose && ( + + + + )} ); +BriefNetworkInterface.defaultProps = BRIEF_NETWORK_INTERFACE_DEFAULT_PROPS; + const createNetworkInterfaceTableColumns = ( handleDragMouseDown: ( row: NetworkInterfaceOverviewMetadata, @@ -376,12 +399,6 @@ const NetworkInterfaceList: FC = () => { }, }} /> - - {networkInputs.map(({ interfaces, ipAddress, name, subnetMask }) => ( @@ -414,12 +431,29 @@ const NetworkInterfaceList: FC = () => { }} > {interfaces.length > 0 ? ( - interfaces.map((networkInterface) => ( - - )) + interfaces.map( + (networkInterface, networkInterfaceIndex) => { + const { networkInterfaceUUID } = networkInterface; + + return ( + { + interfaces.splice(networkInterfaceIndex, 1); + + networkInterfaceInputMap[ + networkInterfaceUUID + ].isApplied = false; + + setNetworkInterfaceInputMap({ + ...networkInterfaceInputMap, + }); + }} + /> + ); + }, + ) ) : ( )}