Add LevelIconTips to be more explicit about the difference between critical and warning issues. (#115121)

Author: cjcenizal

x-pack/plugins/upgrade_assistant/public/application/components/overview/fix_issues_step/fix_issues_step.tsx

@@ -70,7 +70,7 @@ export const getFixIssuesStep = ({
           <p>
             <FormattedMessage
               id="xpack.upgradeAssistant.overview.fixIssuesStepDescription"
-              defaultMessage="Update your Elasticsearch and Kibana deployments to be compatible with {nextMajor}.0. Critical issues must be resolved before you upgrade."
+              defaultMessage="Update your Elasticsearch and Kibana deployments to be compatible with {nextMajor}.0. Critical issues must be resolved before you upgrade. Warning issues can be ignored at your discretion."
               values={{ nextMajor }}
             />
           </p>

x-pack/plugins/upgrade_assistant/public/application/components/shared/deprecation_count.tsx

@@ -6,10 +6,11 @@
  */
 
 import React, { FunctionComponent } from 'react';
-
 import { EuiFlexGroup, EuiFlexItem, EuiHealth } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
+import { LevelInfoTip } from './level_info_tip';
+
 const i18nTexts = {
   getCriticalStatusLabel: (count: number) =>
     i18n.translate('xpack.upgradeAssistant.deprecationCount.criticalStatusLabel', {
@@ -39,14 +40,31 @@ export const DeprecationCount: FunctionComponent<Props> = ({
   return (
     <EuiFlexGroup>
       <EuiFlexItem grow={false}>
-        <EuiHealth color="danger" data-test-subj="criticalDeprecationsCount">
-          {i18nTexts.getCriticalStatusLabel(totalCriticalDeprecations)}
-        </EuiHealth>
+        <EuiFlexGroup gutterSize="xs" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiHealth color="danger" data-test-subj="criticalDeprecationsCount">
+              {i18nTexts.getCriticalStatusLabel(totalCriticalDeprecations)}
+            </EuiHealth>
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <LevelInfoTip level="critical" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiFlexItem>
+
       <EuiFlexItem grow={false}>
-        <EuiHealth color="subdued" data-test-subj="warningDeprecationsCount">
-          {i18nTexts.getWarningStatusLabel(totalWarningDeprecations)}
-        </EuiHealth>
+        <EuiFlexGroup gutterSize="xs" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiHealth color="subdued" data-test-subj="warningDeprecationsCount">
+              {i18nTexts.getWarningStatusLabel(totalWarningDeprecations)}
+            </EuiHealth>
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <LevelInfoTip level="warning" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiFlexItem>
     </EuiFlexGroup>
   );

x-pack/plugins/upgrade_assistant/public/application/components/shared/index.ts

@@ -9,3 +9,4 @@ export { NoDeprecationsPrompt } from './no_deprecations';
 export { DeprecationCount } from './deprecation_count';
 export { DeprecationBadge } from './deprecation_badge';
 export { DeprecationsPageLoadingError } from './deprecations_page_loading_error';
+export { LevelInfoTip } from './level_info_tip';

x-pack/plugins/upgrade_assistant/public/application/components/shared/level_info_tip.tsx

@@ -0,0 +1,27 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiIconTip } from '@elastic/eui';
+
+const i18nTexts = {
+  critical: i18n.translate('xpack.upgradeAssistant.levelInfoTip.criticalLabel', {
+    defaultMessage: 'Critical issues must be resolved before you upgrade',
+  }),
+  warning: i18n.translate('xpack.upgradeAssistant.levelInfoTip.warningLabel', {
+    defaultMessage: 'Warning issues can be ignored at your discretion',
+  }),
+};
+
+interface Props {
+  level: 'critical' | 'warning';
+}
+
+export const LevelInfoTip: FunctionComponent<Props> = ({ level }) => {
+  return <EuiIconTip content={i18nTexts[level]} position="top" type="iInCircle" />;
+};