[ML] Ensure job group badge fonts are same color (#86674)

* use badge component to keep group badge consistent. sort groups

* use all colors now that badge component is used

* set left margin on group badge wrapped in link to match badge margin

* add badge colors to edit flyout job groups

x-pack/plugins/ml/common/util/group_color_utils.ts

@@ -13,7 +13,7 @@ const COLORS = [
   euiVars.euiColorVis1,
   euiVars.euiColorVis2,
   euiVars.euiColorVis3,
-  // euiVars.euiColorVis4, // light pink, too hard to read with white text
+  euiVars.euiColorVis4,
   euiVars.euiColorVis5,
   euiVars.euiColorVis6,
   euiVars.euiColorVis7,

x-pack/plugins/ml/public/application/jobs/jobs_list/components/edit_job_flyout/tabs/job_details.js

@@ -19,6 +19,7 @@ import {
 import { ml } from '../../../../../services/ml_api_service';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { tabColor } from '../../../../../../../common/util/group_color_utils';
 
 export class JobDetails extends Component {
   constructor(props) {
@@ -43,7 +44,7 @@ export class JobDetails extends Component {
     ml.jobs
       .groups()
       .then((resp) => {
-        const groups = resp.map((g) => ({ label: g.id }));
+        const groups = resp.map((g) => ({ label: g.id, color: tabColor(g.id) }));
         this.setState({ groups });
       })
       .catch((error) => {
@@ -53,7 +54,9 @@ export class JobDetails extends Component {
 
   static getDerivedStateFromProps(props) {
     const selectedGroups =
-      props.jobGroups !== undefined ? props.jobGroups.map((g) => ({ label: g })) : [];
+      props.jobGroups !== undefined
+        ? props.jobGroups.map((g) => ({ label: g, color: tabColor(g) }))
+        : [];
 
     return {
       description: props.jobDescription,

x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_filter_bar/job_filter_bar.tsx

@@ -17,7 +17,6 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-// @ts-ignore
 import { JobGroup } from '../job_group';
 import { useMlKibana } from '../../../../contexts/kibana';
 

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

@@ -1,34 +0,0 @@
-/*
- * 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 { tabColor } from '../../../../../../common/util/group_color_utils';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
-
-export function JobGroup({ name }) {
-  return (
-    <div
-      className="inline-group"
-      data-test-subj="mlJobGroup"
-      style={{
-        backgroundColor: tabColor(name),
-        display: 'inline-block',
-        padding: '2px 5px',
-        borderRadius: '2px',
-        fontSize: '12px',
-        margin: '0px 3px',
-        color: theme.euiColorEmptyShade,
-      }}
-    >
-      {name}
-    </div>
-  );
-}
-JobGroup.propTypes = {
-  name: PropTypes.string.isRequired,
-};

x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_group/job_group.tsx

@@ -0,0 +1,15 @@
+/*
+ * 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 { EuiBadge } from '@elastic/eui';
+import { tabColor } from '../../../../../../common/util/group_color_utils';
+
+export const JobGroup: FC<{ name: string }> = ({ name }) => (
+  <EuiBadge key={`${name}-id`} data-test-subj="mlJobGroup" color={tabColor(name)}>
+    {name}
+  </EuiBadge>
+);

x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list/job_id_link.tsx

@@ -55,7 +55,8 @@ export const AnomalyDetectionJobIdLink = (props: AnomalyDetectionJobIdLinkProps)
 
   if (isGroupIdLink(props)) {
     return (
-      <EuiLink key={props.groupId} href={href}>
+      // Set margin-left to match EuiBadge (in JobGroup) built-in left margin for consistent badge spacing in management and plugin jobs list
+      <EuiLink style={{ marginLeft: '4px' }} key={props.groupId} href={href}>
         <JobGroup name={props.groupId} />
       </EuiLink>
     );

x-pack/plugins/ml/server/models/job_service/groups.ts

@@ -72,7 +72,9 @@ export function groupsProvider(mlClient: MlClient) {
       });
     }
 
-    return Object.keys(groups).map((g) => groups[g]);
+    return Object.keys(groups)
+      .sort()
+      .map((g) => groups[g]);
   }
 
   async function updateGroups(jobs: Job[]) {