diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js b/monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js index 56658cf71..508bafa83 100644 --- a/monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js +++ b/monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js @@ -1,5 +1,5 @@ import React from 'react'; -import {Form} from 'react-bootstrap'; +import {Button, Card, Form} from 'react-bootstrap'; import {cloneDeep} from 'lodash'; @@ -7,21 +7,45 @@ import {getComponentHeight} from './utils/HeightCalculator'; import InfoPane from './InfoPane'; import {MasterCheckbox, MasterCheckboxState} from './MasterCheckbox'; import ChildCheckbox from './ChildCheckbox'; -import {getFullDefinitionByKey, getDefaultPaneParams} from './JsonSchemaHelpers.js'; +import {getFullDefinitionByKey, getDefaultPaneParams} from './JsonSchemaHelpers'; + +function AdvancedMultiSelectHeader(props) { + const { + title, + disabled, + onCheckboxClick, + checkboxState, + hideReset, + onResetClick + } = props; + + return ( + + + + + ); +} class AdvancedMultiSelect extends React.Component { constructor(props) { super(props); this.enumOptions = props.options.enumOptions; + this.defaultValues = props.schema.default; this.state = { masterCheckboxState: this.getMasterCheckboxState(props.value), + hideReset: this.getHideResetState(props.value), infoPaneParams: getDefaultPaneParams(props.schema.items.$ref, props.registry) }; this.onMasterCheckboxClick = this.onMasterCheckboxClick.bind(this); this.onChildCheckboxClick = this.onChildCheckboxClick.bind(this); + this.onResetClick = this.onResetClick.bind(this); this.setPaneInfo = this.setPaneInfo.bind(this, props.schema.items.$ref, props.registry); } @@ -34,6 +58,7 @@ class AdvancedMultiSelect extends React.Component { this.props.onChange(newValues); this.setMasterCheckboxState(newValues); + this.setHideResetState(newValues); } onChildCheckboxClick(value) { @@ -41,6 +66,7 @@ class AdvancedMultiSelect extends React.Component { this.props.onChange(selectValues); this.setMasterCheckboxState(selectValues); + this.setHideResetState(selectValues); } getSelectValuesAfterClick(clickedValue) { @@ -72,11 +98,34 @@ class AdvancedMultiSelect extends React.Component { return MasterCheckboxState.ALL; } + onResetClick() { + this.props.onChange(this.defaultValues); + this.setHideResetState(this.defaultValues); + this.setMasterCheckboxState(this.defaultValues); + this.setPaneInfoToDefault(); + } + + setHideResetState(selectValues) { + this.setState(() => ({ + hideReset: this.getHideResetState(selectValues) + })); + } + + getHideResetState(selectValues) { + return selectValues.every((value) => this.defaultValues.includes(value)); + } + setPaneInfo(refString, registry, itemKey) { let definitionObj = getFullDefinitionByKey(refString, registry, itemKey); this.setState({infoPaneParams: {title: definitionObj.title, content: definitionObj.info, link: definitionObj.link}}); } + setPaneInfoToDefault() { + this.setState(() => ({ + infoPaneParams: getDefaultPaneParams(this.props.schema.items.$ref, this.props.registry) + })); + } + render() { const { schema, @@ -90,9 +139,10 @@ class AdvancedMultiSelect extends React.Component { return (
- + +
{title} - +
); } diff --git a/monkey/monkey_island/cc/ui/src/styles/components/AdvancedMultiSelect.scss b/monkey/monkey_island/cc/ui/src/styles/components/AdvancedMultiSelect.scss index 3dc1fe9a5..de3d5d542 100644 --- a/monkey/monkey_island/cc/ui/src/styles/components/AdvancedMultiSelect.scss +++ b/monkey/monkey_island/cc/ui/src/styles/components/AdvancedMultiSelect.scss @@ -18,12 +18,14 @@ padding-bottom: 5px; } -.advanced-multi-select .card-header button { - padding-top: 0; +.advanced-multi-select .card-header .master-checkbox span { + padding-bottom: 0.188rem; } .advanced-multi-select .card-header .header-title { font-size: 1.2em; + display: inline-block; + vertical-align: middle; } .advanced-multi-select .choice-block .form-group {