[ML] Adding text fields to datafeed start modal (#55560)

* [ML] Adding text fields to datafeed start modal

* updating strings

* fixing issue with date text being out of sync

* moving tab check to useEffect

x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/start_datafeed_modal.js

@@ -42,6 +42,7 @@ export class StartDatafeedModal extends Component {
       allowCreateWatch: false,
       initialSpecifiedStartTime: now,
       now,
+      timeRangeValid: true,
     };
 
     this.initialSpecifiedStartTime = now;
@@ -77,6 +78,10 @@ export class StartDatafeedModal extends Component {
     this.setState({ isModalVisible: false });
   };
 
+  setTimeRangeValid = timeRangeValid => {
+    this.setState({ timeRangeValid });
+  };
+
   showModal = (jobs, showCreateWatchFlyout) => {
     const startTime = undefined;
     const now = moment();
@@ -116,10 +121,19 @@ export class StartDatafeedModal extends Component {
   };
 
   render() {
-    const { jobs, initialSpecifiedStartTime, startTime, endTime, createWatch, now } = this.state;
+    const {
+      jobs,
+      initialSpecifiedStartTime,
+      startTime,
+      endTime,
+      createWatch,
+      now,
+      timeRangeValid,
+    } = this.state;
     const startableJobs = jobs !== undefined ? jobs.filter(j => j.hasDatafeed) : [];
     // disable start button if the start and end times are the same
-    const startDisabled = startTime !== undefined && startTime === endTime;
+    const startDisabled =
+      timeRangeValid === false || (startTime !== undefined && startTime === endTime);
     let modal;
 
     if (this.state.isModalVisible) {
@@ -151,6 +165,7 @@ export class StartDatafeedModal extends Component {
                 setStartTime={this.setStartTime}
                 setEndTime={this.setEndTime}
                 now={now}
+                setTimeRangeValid={this.setTimeRangeValid}
               />
               {this.state.endTime === undefined && (
                 <div className="create-watch">

x-pack/legacy/plugins/ml/public/application/jobs/jobs_list/components/start_datafeed_modal/time_range_selector/time_range_selector.js

@@ -5,11 +5,12 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { Component, useState, useEffect } from 'react';
 
-import { EuiDatePicker } from '@elastic/eui';
+import { EuiDatePicker, EuiFieldText } from '@elastic/eui';
 
 import moment from 'moment';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
@@ -67,7 +68,7 @@ export class TimeRangeSelector extends Component {
       start: moment.isMoment(this.props.startTime) ? this.props.startTime : this.latestTimestamp,
       end: moment.isMoment(this.props.endTime) ? this.props.endTime : this.now,
     };
-    const formattedStartTime = this.latestTimestamp.format(TIME_FORMAT);
+    const formattedLatestStartTime = this.latestTimestamp.format(TIME_FORMAT);
 
     // Show different labels for the start time depending on whether
     // the job has seen any data yet
@@ -77,8 +78,8 @@ export class TimeRangeSelector extends Component {
         ? [
             <FormattedMessage
               id="xpack.ml.jobsList.startDatafeedModal.continueFromStartTimeLabel"
-              defaultMessage="Continue from {formattedStartTime}"
-              values={{ formattedStartTime }}
+              defaultMessage="Continue from {formattedLatestStartTime}"
+              values={{ formattedLatestStartTime }}
             />,
             <FormattedMessage
               id="xpack.ml.jobsList.startDatafeedModal.continueFromNowLabel"
@@ -111,12 +112,12 @@ export class TimeRangeSelector extends Component {
         index: 2,
         label: startLabels[2],
         body: (
-          <EuiDatePicker
-            selected={datePickerTimes.start}
+          <DatePickerWithInput
+            date={datePickerTimes.start}
             onChange={this.setStartTime}
             maxDate={datePickerTimes.end}
-            inline
-            showTimeSelect
+            setIsValid={this.props.setTimeRangeValid}
+            tab={this.state.startTab}
           />
         ),
       },
@@ -140,12 +141,12 @@ export class TimeRangeSelector extends Component {
           />
         ),
         body: (
-          <EuiDatePicker
-            selected={datePickerTimes.end}
+          <DatePickerWithInput
+            date={datePickerTimes.end}
             onChange={this.setEndTime}
             minDate={datePickerTimes.start}
-            inline
-            showTimeSelect
+            setIsValid={this.props.setTimeRangeValid}
+            tab={this.state.endTab}
           />
         ),
       },
@@ -216,6 +217,59 @@ function TabStack({ title, items, switchState, switchFunc }) {
     </div>
   );
 }
+
+const DatePickerWithInput = ({ date, onChange, minDate, setIsValid, tab }) => {
+  const [dateString, setDateString] = useState(date.format(TIME_FORMAT));
+  const [currentTab, setCurrentTab] = useState(tab);
+
+  useEffect(() => {
+    if (currentTab !== tab) {
+      // if the tab has changed, reset the text to be the same as the date prop
+      setDateString(date.format(TIME_FORMAT));
+      setCurrentTab(tab);
+    }
+  }, [tab]);
+
+  function onTextChange(e) {
+    const val = e.target.value;
+    setDateString(val);
+
+    const newDate = moment(val);
+    if (newDate.isValid()) {
+      setIsValid(true);
+      onChange(newDate);
+    } else {
+      setIsValid(false);
+    }
+  }
+
+  function onCalendarChange(newDate) {
+    setDateString(newDate.format(TIME_FORMAT));
+    setIsValid(true);
+    onChange(newDate);
+  }
+
+  return (
+    <>
+      <EuiFieldText
+        value={dateString}
+        onChange={onTextChange}
+        placeholder={TIME_FORMAT}
+        aria-label={i18n.translate('xpack.ml.jobsList.startDatafeedModal.enterDateText"', {
+          defaultMessage: 'Enter date',
+        })}
+      />
+      <EuiDatePicker
+        selected={date}
+        onChange={onCalendarChange}
+        minDate={minDate}
+        inline
+        showTimeSelect
+      />
+    </>
+  );
+};
+
 TimeRangeSelector.propTypes = {
   startTime: PropTypes.object.isRequired,
   endTime: PropTypes.object,

x-pack/plugins/translations/translations/ja-JP.json

@@ -8241,7 +8241,6 @@
     "xpack.ml.jobsList.startDatafeedModal.cancelButtonLabel": "キャンセル",
     "xpack.ml.jobsList.startDatafeedModal.continueFromNowLabel": "今から続行",
     "xpack.ml.jobsList.startDatafeedModal.continueFromSpecifiedTimeLabel": "特定の時刻から続行",
-    "xpack.ml.jobsList.startDatafeedModal.continueFromStartTimeLabel": "{formattedStartTime} から続行",
     "xpack.ml.jobsList.startDatafeedModal.createWatchDescription": "データフィードの開始後ウォッチを作成します",
     "xpack.ml.jobsList.startDatafeedModal.noEndTimeLabel": "終了時刻が指定されていません (リアルタイム検索)",
     "xpack.ml.jobsList.startDatafeedModal.searchEndTimeTitle": "検索終了時刻",

x-pack/plugins/translations/translations/zh-CN.json

@@ -8240,7 +8240,6 @@
     "xpack.ml.jobsList.startDatafeedModal.cancelButtonLabel": "取消",
     "xpack.ml.jobsList.startDatafeedModal.continueFromNowLabel": "从当前继续",
     "xpack.ml.jobsList.startDatafeedModal.continueFromSpecifiedTimeLabel": "从指定时间继续",
-    "xpack.ml.jobsList.startDatafeedModal.continueFromStartTimeLabel": "从 {formattedStartTime} 继续",
     "xpack.ml.jobsList.startDatafeedModal.createWatchDescription": "在数据馈送开始后创建监视",
     "xpack.ml.jobsList.startDatafeedModal.noEndTimeLabel": "无结束时间（实时搜索）",
     "xpack.ml.jobsList.startDatafeedModal.searchEndTimeTitle": "搜索结束时间",