diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/CommandDisplay.js b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/CommandDisplay.js index bf0852c59..b237e25d2 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/CommandDisplay.js +++ b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/CommandDisplay.js @@ -2,42 +2,53 @@ import {Button, Card, Nav} from 'react-bootstrap'; import CopyToClipboard from 'react-copy-to-clipboard'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {faClipboard} from '@fortawesome/free-solid-svg-icons/faClipboard'; -import React, {useState} from 'react'; +import React, {useEffect, useState} from 'react'; import PropTypes from 'prop-types'; export default function commandDisplay(props) { - const [selectedVariant, setSelectedVariant] = useState(props.commands[0].name); + const [selectedCommand, setSelectedCommand] = useState(props.commands[0]); + + function setSelectedCommandByName(type){ + setSelectedCommand(getCommandByName(props.commands, type)); + } + + function getCommandByName(commands, type){ + return commands.find((command) => {return command.type === type}); + } + + useEffect(() => { + let sameTypeCommand = getCommandByName(props.commands, selectedCommand.type); + if( sameTypeCommand !== undefined){ + setSelectedCommand(sameTypeCommand); + } else { + setSelectedCommand(props.commands[0]); + } + }, [props.commands]); function renderNav() { return ( -