From 788dae973a1deee7427a4b4cc139d0692a642a5a Mon Sep 17 00:00:00 2001
From: GitStart <1501599+gitstart@users.noreply.github.com>
Date: Fri, 29 Sep 2023 07:10:27 +0100
Subject: [PATCH] [ML] Improves display for long descriptions in transforms
 (#165149)

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 https://github.com/elastic/kibana/issues/163147
---
 .../step_details/step_details_form.tsx        |  3 +-
 .../capitalize_first_letter.ts                | 10 +++
 .../edit_transform_flyout_form.tsx            |  3 +-
 .../edit_transform_flyout_form_text_area.tsx  | 61 +++++++++++++++++++
 .../edit_transform_flyout_form_text_input.tsx |  5 +-
 .../components/transform_list/use_columns.tsx | 15 ++++-
 6 files changed, 90 insertions(+), 7 deletions(-)
 create mode 100644 x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/capitalize_first_letter.ts
 create mode 100644 x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form_text_area.tsx

diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_details/step_details_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_details/step_details_form.tsx
index da9ebbf9b2ef7..0d93a31f9e3f2 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_details/step_details_form.tsx
+++ b/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)' }
diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/capitalize_first_letter.ts b/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/capitalize_first_letter.ts
new file mode 100644
index 0000000000000..96ec3ca8d8314
--- /dev/null
+++ b/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);
+}
diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form.tsx
index eb4e9cd792b3a..0ab4bff038e68 100644
--- a/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form.tsx
+++ b/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',
diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form_text_area.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form_text_area.tsx
new file mode 100644
index 0000000000000..b4e5470ae7e00
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form_text_input.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form_text_input.tsx
index d9310762ef3e0..9c93d286cb9c4 100644
--- a/x-pack/plugins/transform/public/app/sections/transform_management/components/edit_transform_flyout/edit_transform_flyout_form_text_input.tsx
+++ b/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;
diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_columns.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_columns.tsx
index fb578ec06aa3c..732261bde89d2 100644
--- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/use_columns.tsx
+++ b/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' }),