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 {