[8.7] [ML] Transforms: Fix health constants, styles and wording. (#151415) (#151552)

# Backport

This will backport the following commits from `main` to `8.7`:
- [[ML] Transforms: Fix health constants, styles and wording.
(#151415)](https://github.com/elastic/kibana/pull/151415)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Walter
Rafelsberger","email":"walter.rafelsberger@elastic.co"},"sourceCommit":{"committedDate":"2023-02-17T08:48:21Z","message":"[ML]
Transforms: Fix health constants, styles and wording. (#151415)\n\n- Fix
to make all keys lower case across constants to match API texts.\r\n-
Fix styling to use `EuiHealth` instead of `EuiBadge` in the search
bar\r\nfilter dropdown.\r\n- Fix text format in expanded row health
tab.","sha":"e55d60e039c42555aa07f9b0e1b8770d801d7e10","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug",":ml","release_note:skip","Feature:Transforms","v8.7.0","v8.8.0"],"number":151415,"url":"https://github.com/elastic/kibana/pull/151415","mergeCommit":{"message":"[ML]
Transforms: Fix health constants, styles and wording. (#151415)\n\n- Fix
to make all keys lower case across constants to match API texts.\r\n-
Fix styling to use `EuiHealth` instead of `EuiBadge` in the search
bar\r\nfilter dropdown.\r\n- Fix text format in expanded row health
tab.","sha":"e55d60e039c42555aa07f9b0e1b8770d801d7e10"}},"sourceBranch":"main","suggestedTargetBranches":["8.7"],"targetPullRequestStates":[{"branch":"8.7","label":"v8.7.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/151415","number":151415,"mergeCommit":{"message":"[ML]
Transforms: Fix health constants, styles and wording. (#151415)\n\n- Fix
to make all keys lower case across constants to match API texts.\r\n-
Fix styling to use `EuiHealth` instead of `EuiBadge` in the search
bar\r\nfilter dropdown.\r\n- Fix text format in expanded row health
tab.","sha":"e55d60e039c42555aa07f9b0e1b8770d801d7e10"}}]}] BACKPORT-->

Co-authored-by: Walter Rafelsberger <walter.rafelsberger@elastic.co>

x-pack/plugins/transform/common/constants.ts

@@ -98,10 +98,10 @@ export const TRANSFORM_STATE = {
 export type TransformState = typeof TRANSFORM_STATE[keyof typeof TRANSFORM_STATE];
 
 export const TRANSFORM_HEALTH = {
-  GREEN: 'green',
-  UNKNOWN: 'unknown',
-  YELLOW: 'yellow',
-  RED: 'red',
+  green: 'green',
+  unknown: 'unknown',
+  yellow: 'yellow',
+  red: 'red',
 } as const;
 
 export type TransformHealth = typeof TRANSFORM_HEALTH[keyof typeof TRANSFORM_HEALTH];

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

@@ -19,21 +19,32 @@ import {
 interface TransformHealthProps {
   healthStatus: TransformHealth;
   compact?: boolean;
+  showToolTip?: boolean;
 }
 
 export const TransformHealthColoredDot: FC<TransformHealthProps> = ({
   healthStatus,
   compact = true,
+  showToolTip = true,
 }) => {
-  return compact ? (
-    <EuiToolTip content={TRANSFORM_HEALTH_DESCRIPTION[healthStatus]}>
-      <EuiHealth color={TRANSFORM_HEALTH_COLOR[healthStatus]}>
-        <small data-test-subj="transformListHealth">{TRANSFORM_HEALTH_LABEL[healthStatus]}</small>
-      </EuiHealth>
-    </EuiToolTip>
-  ) : (
-    <EuiHealth color={TRANSFORM_HEALTH_COLOR[healthStatus]}>
-      {TRANSFORM_HEALTH_LABEL[healthStatus]} {TRANSFORM_HEALTH_DESCRIPTION[healthStatus]}
+  const transformHealthDescription = TRANSFORM_HEALTH_DESCRIPTION[healthStatus];
+  const transformHealthColor = TRANSFORM_HEALTH_COLOR[healthStatus];
+  const transformHealthLabel = TRANSFORM_HEALTH_LABEL[healthStatus];
+
+  const health = (
+    <EuiHealth
+      color={transformHealthColor}
+      textSize={compact ? 'xs' : undefined}
+      data-test-subj="transformListHealth"
+    >
+      {transformHealthLabel}
+      {compact ? '' : `: ${transformHealthDescription}`}
     </EuiHealth>
   );
+
+  if (showToolTip) {
+    return <EuiToolTip content={transformHealthDescription}>{health}</EuiToolTip>;
+  }
+
+  return health;
 };

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

@@ -14,12 +14,11 @@ import {
   TRANSFORM_MODE,
   TRANSFORM_STATE,
   TRANSFORM_HEALTH,
-  TRANSFORM_HEALTH_COLOR,
-  TRANSFORM_HEALTH_LABEL,
 } from '../../../../../../common/constants';
 import { isLatestTransform, isPivotTransform } from '../../../../../../common/types/transform';
 import { TransformListRow } from '../../../../common';
 import { TransformTaskStateBadge } from './transform_task_state_badge';
+import { TransformHealthColoredDot } from './transform_health_colored_dot';
 
 export const transformFilters: SearchFilterConfig[] = [
   {
@@ -56,15 +55,7 @@ export const transformFilters: SearchFilterConfig[] = [
     options: Object.values(TRANSFORM_HEALTH).map((val) => ({
       value: val,
       name: val,
-      view: (
-        <EuiBadge
-          className="transform__TaskHealthBadge"
-          // For the color icon 'subdued' is used but for the badge we need 'hollow' instead.
-          color={TRANSFORM_HEALTH_COLOR[val] === 'subdued' ? 'hollow' : TRANSFORM_HEALTH_COLOR[val]}
-        >
-          {TRANSFORM_HEALTH_LABEL[val]}
-        </EuiBadge>
-      ),
+      view: <TransformHealthColoredDot compact={true} showToolTip={false} healthStatus={val} />,
     })),
   },
 ];

x-pack/test/functional/apps/transform/start_reset_delete/starting.ts

@@ -59,7 +59,7 @@ export default function ({ getService }: FtrProviderContext) {
         expected: {
           healthDescription: TRANSFORM_HEALTH_DESCRIPTION.green,
           healthLabel: TRANSFORM_HEALTH_LABEL.green,
-          healthStatus: TRANSFORM_HEALTH.GREEN,
+          healthStatus: TRANSFORM_HEALTH.green,
         },
       },
       {
@@ -70,7 +70,7 @@ export default function ({ getService }: FtrProviderContext) {
         expected: {
           healthDescription: TRANSFORM_HEALTH_DESCRIPTION.green,
           healthLabel: TRANSFORM_HEALTH_LABEL.green,
-          healthStatus: TRANSFORM_HEALTH.GREEN,
+          healthStatus: TRANSFORM_HEALTH.green,
         },
       },
       {
@@ -81,7 +81,7 @@ export default function ({ getService }: FtrProviderContext) {
         expected: {
           healthDescription: TRANSFORM_HEALTH_DESCRIPTION.yellow,
           healthLabel: TRANSFORM_HEALTH_LABEL.yellow,
-          healthStatus: TRANSFORM_HEALTH.YELLOW,
+          healthStatus: TRANSFORM_HEALTH.yellow,
         },
       },
       {
@@ -92,7 +92,7 @@ export default function ({ getService }: FtrProviderContext) {
         expected: {
           healthDescription: TRANSFORM_HEALTH_DESCRIPTION.green,
           healthLabel: TRANSFORM_HEALTH_LABEL.green,
-          healthStatus: TRANSFORM_HEALTH.GREEN,
+          healthStatus: TRANSFORM_HEALTH.green,
         },
       },
       {
@@ -103,7 +103,7 @@ export default function ({ getService }: FtrProviderContext) {
         expected: {
           healthDescription: TRANSFORM_HEALTH_DESCRIPTION.green,
           healthLabel: TRANSFORM_HEALTH_LABEL.green,
-          healthStatus: TRANSFORM_HEALTH.GREEN,
+          healthStatus: TRANSFORM_HEALTH.green,
         },
       },
     ];
@@ -114,7 +114,7 @@ export default function ({ getService }: FtrProviderContext) {
 
       for (const testData of testDataList) {
         if (
-          testData.expected.healthStatus === TRANSFORM_HEALTH.YELLOW &&
+          testData.expected.healthStatus === TRANSFORM_HEALTH.yellow &&
           testData.type === 'pivot'
         ) {
           testData.originalConfig.pivot.aggregations['products.base_price.fail'] = {
@@ -128,7 +128,7 @@ export default function ({ getService }: FtrProviderContext) {
         await transform.api.createTransform(
           testData.originalConfig.id,
           testData.originalConfig,
-          testData.expected.healthStatus === TRANSFORM_HEALTH.YELLOW
+          testData.expected.healthStatus === TRANSFORM_HEALTH.yellow
         );
       }
       await transform.testResources.setKibanaTimeZoneToUTC();
@@ -169,7 +169,7 @@ export default function ({ getService }: FtrProviderContext) {
 
           await transform.table.assertTransformExpandedRowHealth(
             testData.expected.healthDescription,
-            testData.expected.healthStatus !== TRANSFORM_HEALTH.GREEN
+            testData.expected.healthStatus !== TRANSFORM_HEALTH.green
           );
 
           await transform.table.clearSearchString(testDataList.length);