[ML] Fixes restoring table interval selection from appState. (#32056)

Fixes a regression introduced in #31692. The table interval selection wasn't properly restored from `AppState` because of a mismatch in the expected object structure.

x-pack/plugins/ml/public/components/controls/select_interval/__tests__/select_interval_directive.js

@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+
+import { interval$ } from '../select_interval';
+
+describe('ML - mlSelectIntervalService', () => {
+  let appState;
+
+  beforeEach(ngMock.module('kibana', (stateManagementConfigProvider) => {
+    stateManagementConfigProvider.enable();
+  }));
+  beforeEach(ngMock.module(($provide) => {
+    appState = {
+      fetch: () => {},
+      save: () => {}
+    };
+
+    $provide.factory('AppState', () => () => appState);
+  }));
+
+  it('initializes AppState with correct default value', (done) => {
+    ngMock.inject(($injector) => {
+      $injector.get('mlSelectIntervalService');
+      const defaultValue = { display: 'Auto', val: 'auto' };
+
+      expect(appState.mlSelectInterval).to.eql(defaultValue);
+      expect(interval$.getValue()).to.eql(defaultValue);
+
+      done();
+    });
+  });
+
+  it('restores AppState to interval$ observable', (done) => {
+    ngMock.inject(($injector) => {
+      const restoreValue = { display: '1 day', val: 'day' };
+      appState.mlSelectInterval = restoreValue;
+
+      $injector.get('mlSelectIntervalService');
+
+      expect(appState.mlSelectInterval).to.eql(restoreValue);
+      expect(interval$.getValue()).to.eql(restoreValue);
+
+      done();
+    });
+  });
+
+});

x-pack/plugins/ml/public/components/controls/select_interval/select_interval.js

@@ -9,6 +9,8 @@
 /*
  * React component for rendering a select element with various aggregation interval levels.
  */
+
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { BehaviorSubject } from 'rxjs';
 
@@ -53,9 +55,13 @@ function optionValueToInterval(value) {
   return interval;
 }
 
-export const interval$ = new BehaviorSubject(OPTIONS[0]);
+export const interval$ = new BehaviorSubject(optionValueToInterval(OPTIONS[0].value));
 
 class SelectIntervalUnwrapped extends Component {
+  static propTypes = {
+    interval: PropTypes.object.isRequired,
+  };
+
   onChange = (e) => {
     const interval = optionValueToInterval(e.target.value);
     interval$.next(interval);
@@ -66,7 +72,7 @@ class SelectIntervalUnwrapped extends Component {
       <EuiSelect
         options={OPTIONS}
         className="ml-select-interval"
-        value={this.props.interval.value}
+        value={this.props.interval.val}
         onChange={this.onChange}
       />
     );

x-pack/plugins/ml/public/components/controls/select_interval/select_interval.test.js

@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { SelectInterval } from './select_interval';
+
+describe('SelectInterval', () => {
+
+  test('creates correct initial selected value', () => {
+    const wrapper = shallowWithIntl(<SelectInterval/>);
+    const defaultSelectedValue = wrapper.props().interval.val;
+
+    expect(defaultSelectedValue).toBe('auto');
+  });
+
+  test('currently selected value is updated correctly on click', () => {
+    const wrapper = shallowWithIntl(<SelectInterval/>);
+    const select = wrapper.first().shallow();
+
+    const defaultSelectedValue = wrapper.props().interval.val;
+    expect(defaultSelectedValue).toBe('auto');
+
+    select.simulate('change', { target: { value: 'day' } });
+    const updatedSelectedValue = wrapper.props().interval.val;
+    expect(updatedSelectedValue).toBe('day');
+  });
+
+});