2 files changed, 27 insertions, 1 deletions
diff --git a/ui/app/components/button-group/button-group.component.js b/ui/app/components/button-group/button-group.component.js
index f99f710ce..17a281030 100644
--- a/ui/app/components/button-group/button-group.component.js
+++ b/ui/app/components/button-group/button-group.component.js
@@ -5,18 +5,30 @@ import classnames from 'classnames'
 export default class ButtonGroup extends PureComponent {
   static propTypes = {
     defaultActiveButtonIndex: PropTypes.number,
+    noButtonActiveByDefault: PropTypes.bool,
     disabled: PropTypes.bool,
     children: PropTypes.array,
     className: PropTypes.string,
     style: PropTypes.object,
+    newActiveButtonIndex: PropTypes.number,
   }
 
   static defaultProps = {
     className: 'button-group',
+    defaultActiveButtonIndex: 0,
   }
 
   state = {
-    activeButtonIndex: this.props.defaultActiveButtonIndex || 0,
+    activeButtonIndex: this.props.noButtonActiveByDefault
+      ? null
+      : this.props.defaultActiveButtonIndex,
+  }
+
+  componentDidUpdate (_, prevState) {
+    // Provides an API for dynamically updating the activeButtonIndex
+    if (typeof this.props.newActiveButtonIndex === 'number' && prevState.activeButtonIndex !== this.props.newActiveButtonIndex) {
+      this.setState({ activeButtonIndex: this.props.newActiveButtonIndex })
+    }
   }
 
   handleButtonClick (activeButtonIndex) {
diff --git a/ui/app/components/button-group/tests/button-group-component.test.js b/ui/app/components/button-group/tests/button-group-component.test.js
index f07bb97c8..0bece90d6 100644
--- a/ui/app/components/button-group/tests/button-group-component.test.js
+++ b/ui/app/components/button-group/tests/button-group-component.test.js
@@ -35,6 +35,20 @@ describe('ButtonGroup Component', function () {
     ButtonGroup.prototype.renderButtons.resetHistory()
   })
 
+  describe('componentDidUpdate', () => {
+    it('should set the activeButtonIndex to the updated newActiveButtonIndex', () => {
+      assert.equal(wrapper.state('activeButtonIndex'), 1)
+      wrapper.setProps({ newActiveButtonIndex: 2 })
+      assert.equal(wrapper.state('activeButtonIndex'), 2)
+    })
+
+    it('should not set the activeButtonIndex to an updated newActiveButtonIndex that is not a number', () => {
+      assert.equal(wrapper.state('activeButtonIndex'), 1)
+      wrapper.setProps({ newActiveButtonIndex: null })
+      assert.equal(wrapper.state('activeButtonIndex'), 1)
+    })
+  })
+
   describe('handleButtonClick', () => {
     it('should set the activeButtonIndex', () => {
       assert.equal(wrapper.state('activeButtonIndex'), 1)