[Synthetics] Add missing monitorType and tag info in cards !!

x-pack/plugins/observability_solution/observability_shared/public/components/tags_list/tags_list.tsx

@@ -16,6 +16,7 @@ export interface TagsListProps {
   numberOfTagsToDisplay?: number;
   color?: EuiBadgeProps['color'];
   ignoreEmpty?: boolean;
+  disableExpand?: boolean;
 }
 
 const getFilterLabel = (tag: string) => {
@@ -33,6 +34,7 @@ const TagsList = ({
   numberOfTagsToDisplay = 3,
   onClick,
   color = 'hollow',
+  disableExpand = false,
 }: TagsListProps) => {
   const [toDisplay, setToDisplay] = useState(numberOfTagsToDisplay);
 
@@ -99,6 +101,9 @@ const TagsList = ({
             <EuiBadge
               color={color}
               onClick={() => {
+                if (disableExpand) {
+                  return;
+                }
                 setToDisplay(tags.length);
               }}
               onMouseDown={(e: MouseEvent<HTMLButtonElement>) => {

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/common/components/monitor_details_panel.tsx

@@ -17,7 +17,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useDispatch } from 'react-redux';
-import { TagsBadges } from './tag_badges';
+import { TagsList } from '@kbn/observability-shared-plugin/public';
 import { PanelWithTitle } from './panel_with_title';
 import { MonitorEnabled } from '../../monitors_page/management/monitor_list_table/monitor_enabled';
 import { getMonitorAction } from '../../../state';
@@ -102,7 +102,11 @@ export const MonitorDetailsPanel = ({
           {latestPing?.timestamp ? (
             <Time timestamp={latestPing?.timestamp} />
           ) : (
-            <EuiText color="subdued">--</EuiText>
+            <EuiText color="subdued">
+              {i18n.translate('xpack.synthetics.monitorDetailsPanel.TextLabel', {
+                defaultMessage: '--',
+              })}
+            </EuiText>
           )}
         </EuiDescriptionListDescription>
         <EuiDescriptionListTitle>{LAST_MODIFIED_LABEL}</EuiDescriptionListTitle>
@@ -121,7 +125,7 @@ export const MonitorDetailsPanel = ({
         <EuiDescriptionListDescription>{monitor.id}</EuiDescriptionListDescription>
         <EuiDescriptionListTitle>{MONITOR_TYPE_LABEL}</EuiDescriptionListTitle>
         <EuiDescriptionListDescription>
-          <MonitorTypeBadge monitor={monitor} />
+          <MonitorTypeBadge monitorType={monitor.type} />
         </EuiDescriptionListDescription>
         <EuiDescriptionListTitle>{FREQUENCY_LABEL}</EuiDescriptionListTitle>
         <EuiDescriptionListDescription>
@@ -139,7 +143,7 @@ export const MonitorDetailsPanel = ({
 
         <EuiDescriptionListTitle>{TAGS_LABEL}</EuiDescriptionListTitle>
         <EuiDescriptionListDescription>
-          <TagsBadges tags={monitor[ConfigKey.TAGS]} />
+          <TagsList tags={monitor[ConfigKey.TAGS]} />
         </EuiDescriptionListDescription>
       </EuiDescriptionList>
     </PanelWithTitle>

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/common/components/monitor_type_badge.tsx

@@ -5,74 +5,76 @@
  * 2.0.
  */
 
-import React, { MouseEvent, KeyboardEvent } from 'react';
-import { EuiBadge, EuiIcon } from '@elastic/eui';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
-import {
-  EncryptedSyntheticsMonitor,
-  ConfigKey,
-  FormMonitorType,
-  MonitorTypeEnum,
-} from '../../../../../../common/runtime_types';
+import React, { MouseEvent } from 'react';
+import { EuiBadge } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormMonitorType, MonitorTypeEnum } from '../../../../../../common/runtime_types';
 
 export function MonitorTypeBadge({
-  monitor,
+  monitorType,
   ariaLabel,
   onClick,
-  onKeyPress,
 }: {
-  monitor: EncryptedSyntheticsMonitor;
+  monitorType: string;
   ariaLabel?: string;
-  onClick?: (evt: MouseEvent<HTMLDivElement>) => void;
-  onKeyPress?: (evt: KeyboardEvent<HTMLDivElement>) => void;
+  onClick?: () => void;
 }) {
-  const badge = (
-    <EuiBadgeStyled data-is-clickable={!!onClick}>
-      <EuiIcon size="s" type={getMonitorTypeBadgeIcon(monitor)} />{' '}
-      {getMonitorTypeBadgeTitle(monitor)}
-    </EuiBadgeStyled>
-  );
-
   return onClick ? (
-    <div title={ariaLabel} aria-label={ariaLabel} onClick={onClick} onKeyPress={onKeyPress}>
-      {badge}
-    </div>
+    <EuiBadge
+      onClick={onClick}
+      onClickAriaLabel={getFilterTitle(monitorType)}
+      title={ariaLabel}
+      aria-label={ariaLabel}
+      iconType={getMonitorTypeBadgeIcon(monitorType)}
+      onMouseDown={(e: MouseEvent) => {
+        // Prevents the click event from being propagated to the @elastic/chart metric
+        e.stopPropagation();
+      }}
+    >
+      {getMonitorTypeBadgeTitle(monitorType)}
+    </EuiBadge>
   ) : (
-    badge
+    <EuiBadge
+      title={ariaLabel}
+      aria-label={ariaLabel}
+      iconType={getMonitorTypeBadgeIcon(monitorType)}
+      onMouseDown={(e: MouseEvent) => {
+        // Prevents the click event from being propagated to the @elastic/chart metric
+        e.stopPropagation();
+      }}
+    >
+      {getMonitorTypeBadgeTitle(monitorType)}
+    </EuiBadge>
   );
 }
 
-function getMonitorTypeBadgeTitle(monitor: EncryptedSyntheticsMonitor) {
-  switch (monitor[ConfigKey.FORM_MONITOR_TYPE]) {
+const getFilterTitle = (type: string) => {
+  return i18n.translate('xpack.synthetics.management.monitorList.monitorTypeBadge.filter', {
+    defaultMessage: 'Click to filter monitors for type: {type}',
+    values: { type: getMonitorTypeBadgeTitle(type) },
+  });
+};
+
+function getMonitorTypeBadgeTitle(monitorType: string) {
+  switch (monitorType) {
     case FormMonitorType.TCP:
     case FormMonitorType.HTTP:
     case FormMonitorType.ICMP:
-      return monitor?.type?.toUpperCase();
+      return monitorType.toUpperCase();
     case FormMonitorType.SINGLE:
       return 'Page';
     case FormMonitorType.MULTISTEP:
       return 'Journey';
   }
 
-  switch (monitor?.type) {
+  switch (monitorType) {
     case MonitorTypeEnum.BROWSER:
       return 'Journey';
     default:
-      return monitor?.type?.toUpperCase();
+      return monitorType.toUpperCase();
   }
 }
 
-function getMonitorTypeBadgeIcon(monitor: EncryptedSyntheticsMonitor) {
-  return monitor?.type === 'browser' ? 'videoPlayer' : 'online';
+function getMonitorTypeBadgeIcon(monitorType: string) {
+  return monitorType === 'browser' ? 'videoPlayer' : 'online';
 }
-
-const EuiBadgeStyled = euiStyled(EuiBadge)<{ 'data-is-clickable': boolean }>`
-  ${({ 'data-is-clickable': dataIsClickable }) => (dataIsClickable ? `cursor: pointer;` : '')}
-  &&& {
-    .euiBadge__text {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-  }
-`;

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitor_add_edit/monitor_edit_page.test.tsx

@@ -191,6 +191,7 @@ describe('MonitorEditPage', () => {
           attributes: {
             [ConfigKey.MONITOR_SOURCE_TYPE]: 'ui',
             [ConfigKey.FORM_MONITOR_TYPE]: 'multistep',
+            [ConfigKey.MONITOR_TYPE]: 'browser',
             [ConfigKey.LOCATIONS]: [],
             [ConfigKey.THROTTLING_CONFIG]: PROFILES_MAP[PROFILE_VALUES_ENUM.DEFAULT],
           },

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/columns.tsx

@@ -9,7 +9,7 @@ import { EuiBasicTableColumn, EuiButtonIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { FETCH_STATUS } from '@kbn/observability-shared-plugin/public';
+import { FETCH_STATUS, TagsList } from '@kbn/observability-shared-plugin/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useEnablement } from '../../../../hooks';
 import { useCanEditSynthetics } from '../../../../../../hooks/use_capabilities';
@@ -21,7 +21,6 @@ import {
   CANNOT_PERFORM_ACTION_SYNTHETICS,
   NoPermissionsTooltip,
 } from '../../../common/components/permissions';
-import { TagsBadges } from '../../../common/components/tag_badges';
 import { useMonitorAlertEnable } from '../../../../hooks/use_monitor_alert_enable';
 import * as labels from './labels';
 import { MonitorDetailsLink } from './monitor_details_link';
@@ -103,7 +102,7 @@ export function useMonitorListColumns({
       sortable: true,
       render: (_: string, monitor: EncryptedSyntheticsSavedMonitor) => (
         <MonitorTypeBadge
-          monitor={monitor}
+          monitorType={monitor[ConfigKey.MONITOR_TYPE]}
           ariaLabel={labels.getFilterForTypeMessage(monitor[ConfigKey.MONITOR_TYPE])}
           onClick={() => {
             history.push({
@@ -146,7 +145,7 @@ export function useMonitorListColumns({
         defaultMessage: 'Tags',
       }),
       render: (tags: string[]) => (
-        <TagsBadges
+        <TagsList
           tags={tags}
           onClick={(tag) => {
             history.push({ search: `tags=${encodeURIComponent(JSON.stringify([tag]))}` });