[ML] DF Analytics: add description field to job creation and display in jobs list (#52217)

* add job description input to creation form

* wip add description to expanded row

* add description to analytics list table

* update jest test

* description input to 2 rows and update types

* update type

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/common/analytics.ts

@@ -164,7 +164,7 @@ export const isRegressionResultsSearchBoolQuery = (
 export interface DataFrameAnalyticsConfig {
   id: DataFrameAnalyticsId;
   // Description attribute is not supported yet
-  // description?: string;
+  description?: string;
   dest: {
     index: IndexName;
     results_field: string;

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/columns.tsx

@@ -171,8 +171,6 @@ export const getColumns = (
       truncateText: true,
       'data-test-subj': 'mlAnalyticsTableColumnId',
     },
-    // Description is not supported yet by API
-    /*
     {
       field: DataFrameAnalyticsListColumn.description,
       name: i18n.translate('xpack.ml.dataframe.analyticsList.description', {
@@ -181,7 +179,6 @@ export const getColumns = (
       sortable: true,
       truncateText: true,
     },
-    */
     {
       field: DataFrameAnalyticsListColumn.configSourceIndex,
       name: i18n.translate('xpack.ml.dataframe.analyticsList.sourceIndex', {
@@ -240,7 +237,7 @@ export const getColumns = (
         defaultMessage: 'Actions',
       }),
       actions,
-      width: isManagementTable === true ? '100px' : '200px',
+      width: isManagementTable === true ? '100px' : '150px',
     },
   ];
 

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/common.ts

@@ -105,8 +105,7 @@ export enum DataFrameAnalyticsListColumn {
   configDestIndex = 'config.dest.index',
   configSourceIndex = 'config.source.index',
   configCreateTime = 'config.create_time',
-  // Description attribute is not supported yet by API
-  // description = 'config.description',
+  description = 'config.description',
   id = 'id',
 }
 

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx

@@ -133,7 +133,11 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
     }
   }, [jobIsCompleted]);
 
-  const stateValues = { ...item.stats };
+  const stateValues: any = { ...item.stats };
+
+  if (item.config?.description) {
+    stateValues.description = item.config.description;
+  }
   delete stateValues.progress;
 
   const state: SectionConfig = {

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.test.tsx

@@ -45,7 +45,7 @@ describe('Data Frame Analytics: <CreateAnalyticsForm />', () => {
     );
 
     const euiFormRows = wrapper.find('EuiFormRow');
-    expect(euiFormRows.length).toBe(7);
+    expect(euiFormRows.length).toBe(8);
 
     const row1 = euiFormRows.at(0);
     expect(row1.find('label').text()).toBe('Job type');

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.tsx

@@ -36,6 +36,7 @@ import {
 import { JOB_ID_MAX_LENGTH } from '../../../../../../../common/constants/validation';
 import { Messages } from './messages';
 import { JobType } from './job_type';
+import { JobDescriptionInput } from './job_description';
 import { mmlUnitInvalidErrorMessage } from '../../hooks/use_create_analytics_form/reducer';
 
 // based on code used by `ui/index_patterns` internally
@@ -70,6 +71,7 @@ export const CreateAnalyticsForm: FC<CreateAnalyticsFormProps> = ({ actions, sta
     dependentVariable,
     dependentVariableFetchFail,
     dependentVariableOptions,
+    description,
     destinationIndex,
     destinationIndexNameEmpty,
     destinationIndexNameExists,
@@ -322,6 +324,7 @@ export const CreateAnalyticsForm: FC<CreateAnalyticsFormProps> = ({ actions, sta
               data-test-subj="mlAnalyticsCreateJobFlyoutJobIdInput"
             />
           </EuiFormRow>
+          <JobDescriptionInput description={description} setFormState={setFormState} />
           <EuiFormRow
             label={i18n.translate('xpack.ml.dataframe.analytics.create.sourceIndexLabel', {
               defaultMessage: 'Source index',

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/job_description.tsx

@@ -0,0 +1,37 @@
+/*
+ * 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, { FC } from 'react';
+import { EuiFormRow, EuiTextArea } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+const helpText = i18n.translate('xpack.ml.dataframe.analytics.create.jobDescription.helpText', {
+  defaultMessage: 'Optional descriptive text',
+});
+
+interface Props {
+  description: string;
+  setFormState: React.Dispatch<React.SetStateAction<any>>;
+}
+
+export const JobDescriptionInput: FC<Props> = ({ description, setFormState }) => (
+  <EuiFormRow
+    label={i18n.translate('xpack.ml.dataframe.analytics.create.jobDescription.label', {
+      defaultMessage: 'Job description',
+    })}
+    helpText={helpText}
+  >
+    <EuiTextArea
+      value={description}
+      rows={2}
+      onChange={e => {
+        const value = e.target.value;
+        setFormState({ description: value });
+      }}
+      data-test-subj="mlDFAnalyticsJobCreationJobDescription"
+    />
+  </EuiFormRow>
+);

x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/state.ts

@@ -46,6 +46,7 @@ export interface State {
     dependentVariable: DependentVariable;
     dependentVariableFetchFail: boolean;
     dependentVariableOptions: Array<{ label: DependentVariable }> | [];
+    description: string;
     destinationIndex: EsIndexName;
     destinationIndexNameExists: boolean;
     destinationIndexNameEmpty: boolean;
@@ -89,6 +90,7 @@ export const getInitialState = (): State => ({
     dependentVariable: '',
     dependentVariableFetchFail: false,
     dependentVariableOptions: [],
+    description: '',
     destinationIndex: '',
     destinationIndexNameExists: false,
     destinationIndexNameEmpty: true,
@@ -131,6 +133,7 @@ export const getJobConfigFromFormState = (
   formState: State['form']
 ): DeepPartial<DataFrameAnalyticsConfig> => {
   const jobConfig: DeepPartial<DataFrameAnalyticsConfig> = {
+    description: formState.description,
     source: {
       // If a Kibana index patterns includes commas, we need to split
       // the into an array of indices to be in the correct format for