[ML] Improves display for long descriptions in transforms (elastic#16…

…5149)

Improves the display of long descriptions of transforms in the Transform
management page and when editing the description in the transform wizard
or edit flyout.

Previously If there was a long description, the text would not be
wrapped in the table on the management page, and it would not be
possible to view the full text in the text input when editing. This PR
adds line wrapping for the description column, and uses a text area for
editing the text.

Part of elastic#163147

x-pack/plugins/transform/public/app/sections/create_transform/components/step_details/step_details_form.tsx

@@ -22,6 +22,7 @@ import {
   EuiSpacer,
   EuiCallOut,
   EuiText,
+  EuiTextArea,
 } from '@elastic/eui';
 
 import { KBN_FIELD_TYPES } from '@kbn/field-types';
@@ -421,7 +422,7 @@ export const StepDetailsForm: FC<StepDetailsFormProps> = React.memo(
               defaultMessage: 'Transform description',
             })}
           >
-            <EuiFieldText
+            <EuiTextArea
               placeholder={i18n.translate(
                 'xpack.transform.stepDetailsForm.transformDescriptionPlaceholderText',
                 { defaultMessage: 'Description (optional)' }

x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/capitalize_first_letter.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export function capitalizeFirstLetter(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form.tsx

@@ -12,12 +12,13 @@ import { EuiAccordion, EuiForm, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { EditTransformFlyoutFormTextInput } from './edit_transform_flyout_form_text_input';
+import { EditTransformFlyoutFormTextArea } from './edit_transform_flyout_form_text_area';
 import { EditTransformRetentionPolicy } from './edit_transform_retention_policy';
 import { EditTransformIngestPipeline } from './edit_transform_ingest_pipeline';
 
 export const EditTransformFlyoutForm: FC = () => (
   <EuiForm>
-    <EditTransformFlyoutFormTextInput
+    <EditTransformFlyoutFormTextArea
       field="description"
       label={i18n.translate('xpack.transform.transformList.editFlyoutFormDescriptionLabel', {
         defaultMessage: 'Description',

x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form_text_area.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC } from 'react';
+
+import { EuiFormRow, EuiTextArea } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+
+import {
+  useEditTransformFlyout,
+  type EditTransformHookTextInputSelectors,
+} from './use_edit_transform_flyout';
+import { capitalizeFirstLetter } from './capitalize_first_letter';
+
+interface EditTransformFlyoutFormTextInputProps {
+  field: EditTransformHookTextInputSelectors;
+  label: string;
+  helpText?: string;
+  placeHolder?: boolean;
+}
+
+export const EditTransformFlyoutFormTextArea: FC<EditTransformFlyoutFormTextInputProps> = ({
+  field,
+  label,
+  helpText,
+  placeHolder = false,
+}) => {
+  const { defaultValue, errorMessages, value } = useEditTransformFlyout(field);
+  const { formField } = useEditTransformFlyout('actions');
+  const upperCaseField = capitalizeFirstLetter(field);
+
+  return (
+    <EuiFormRow
+      label={label}
+      helpText={helpText}
+      isInvalid={errorMessages.length > 0}
+      error={errorMessages}
+    >
+      <EuiTextArea
+        data-test-subj={`transformEditFlyout${upperCaseField}Input`}
+        placeholder={
+          placeHolder
+            ? i18n.translate('xpack.transform.transformList.editFlyoutFormPlaceholderText', {
+                defaultMessage: 'Default: {defaultValue}',
+                values: { defaultValue },
+              })
+            : undefined
+        }
+        isInvalid={errorMessages.length > 0}
+        value={value}
+        onChange={(e) => formField({ field, value: e.target.value })}
+        aria-label={label}
+      />
+    </EuiFormRow>
+  );
+};

x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form_text_input.tsx

@@ -15,10 +15,7 @@ import {
   useEditTransformFlyout,
   type EditTransformHookTextInputSelectors,
 } from './use_edit_transform_flyout';
-
-function capitalizeFirstLetter(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
+import { capitalizeFirstLetter } from './capitalize_first_letter';
 
 interface EditTransformFlyoutFormTextInputProps {
   field: EditTransformHookTextInputSelectors;

x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_columns.tsx

@@ -222,7 +222,20 @@ export const useColumns = (
       'data-test-subj': 'transformListColumnDescription',
       name: i18n.translate('xpack.transform.description', { defaultMessage: 'Description' }),
       sortable: true,
-      truncateText: true,
+      render(text: string) {
+        return (
+          <EuiText
+            style={{
+              display: '-webkit-box',
+              WebkitBoxOrient: 'vertical',
+              WebkitLineClamp: 3,
+              overflow: 'hidden',
+            }}
+          >
+            {text}
+          </EuiText>
+        );
+      },
     },
     {
       name: i18n.translate('xpack.transform.type', { defaultMessage: 'Type' }),