[UA] Update the styling of Elasticsearch and Kibana cards (#216604)

Fixes https://github.com/elastic/kibana/issues/211502

## Summary
This PR introduces some UI changes in the Upgrade Assistant deprecation
cards. Since the `EuiStat` component had an `isLoading` prop and this
component is no longer used, the loading state is now handled with some
spinner. No changes have been made for the error state.

Also removed the `_deprecation_issues_panel.scss` file since this css
classes are not longer needed.

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -50423,9 +50423,7 @@
     "xpack.upgradeAssistant.deprecationCount.warningStatusLabel": "Avertissement : {count}",
     "xpack.upgradeAssistant.deprecationFlyout.learnMoreLinkLabel": "En savoir plus",
     "xpack.upgradeAssistant.deprecationsPageLoadingError.title": "Impossible de récupérer les problèmes de déclassement de {deprecationSource}",
-    "xpack.upgradeAssistant.deprecationStats.criticalDeprecationsTitle": "Critique",
     "xpack.upgradeAssistant.deprecationStats.loadingErrorMessage": "Impossible de récupérer les problèmes de déclassement Kibana.",
-    "xpack.upgradeAssistant.deprecationStats.warningDeprecationsTitle": "Avertissement",
     "xpack.upgradeAssistant.esDeprecationErrors.loadingErrorMessage": "Impossible de récupérer les problèmes de déclassement Elasticsearch.",
     "xpack.upgradeAssistant.esDeprecationErrors.partiallyUpgradedWarningMessage": "Mettez à niveau Kibana vers la même version que votre cluster Elasticsearch. Un ou plusieurs nœuds du cluster exécutent une version différente de celle de Kibana.",
     "xpack.upgradeAssistant.esDeprecationErrors.permissionsErrorMessage": "Vous n'êtes pas autorisé à afficher les problèmes de déclassement Elasticsearch.",
@@ -50657,7 +50655,6 @@
     "xpack.upgradeAssistant.noDeprecationsPrompt.description": "Votre configuration {deprecationType} est à jour",
     "xpack.upgradeAssistant.noDeprecationsPrompt.nextStepsDescription": "Vérifiez la {overviewButton} pour rechercher les autres déclassements de la Suite Elastic.",
     "xpack.upgradeAssistant.noDeprecationsPrompt.overviewLinkText": "Page d'aperçu",
-    "xpack.upgradeAssistant.noPartialDeprecationsMessage": "Aucun",
     "xpack.upgradeAssistant.overview.analyzeTitle": "Analyser les logs de déclassement",
     "xpack.upgradeAssistant.overview.apiCompatibilityNoteBody": "Nous vous recommandons de résoudre tous les problèmes de déclassement avant la mise à niveau. Si besoin, vous pouvez appliquer des en-têtes de compatibilité d'API aux requêtes utilisant des fonctionnalités déclassées. {learnMoreLink}.",
     "xpack.upgradeAssistant.overview.apiCompatibilityNoteLink": "En savoir plus",
@@ -51836,4 +51833,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "Ce champ est requis.",
     "xpack.watcher.watcherDescription": "Détectez les modifications survenant dans vos données en créant, gérant et monitorant des alertes."
   }
-}
+}

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -50382,9 +50382,7 @@
     "xpack.upgradeAssistant.deprecationCount.warningStatusLabel": "警告：{count}",
     "xpack.upgradeAssistant.deprecationFlyout.learnMoreLinkLabel": "詳細",
     "xpack.upgradeAssistant.deprecationsPageLoadingError.title": "{deprecationSource}廃止予定の問題を取得できませんでした",
-    "xpack.upgradeAssistant.deprecationStats.criticalDeprecationsTitle": "重大",
     "xpack.upgradeAssistant.deprecationStats.loadingErrorMessage": "Kibana廃止予定の問題を取得できませんでした。",
-    "xpack.upgradeAssistant.deprecationStats.warningDeprecationsTitle": "警告",
     "xpack.upgradeAssistant.esDeprecationErrors.loadingErrorMessage": "Elasticsearchの廃止予定の問題を取得できませんでした。",
     "xpack.upgradeAssistant.esDeprecationErrors.partiallyUpgradedWarningMessage": "Kibanaをご使用のElasticsearchクラスターと同じバージョンにアップグレードしてください。クラスターの1つ以上のノードがKibanaとは異なるバージョンを実行しています。",
     "xpack.upgradeAssistant.esDeprecationErrors.permissionsErrorMessage": "Elasticsearchの廃止予定の問題を表示する権限がありません。",
@@ -50617,7 +50615,6 @@
     "xpack.upgradeAssistant.noDeprecationsPrompt.description": "{deprecationType}構成は最新です",
     "xpack.upgradeAssistant.noDeprecationsPrompt.nextStepsDescription": "他のスタック廃止予定については、{overviewButton}を確認してください。",
     "xpack.upgradeAssistant.noDeprecationsPrompt.overviewLinkText": "概要ページ",
-    "xpack.upgradeAssistant.noPartialDeprecationsMessage": "なし",
     "xpack.upgradeAssistant.overview.analyzeTitle": "廃止予定ログを分析",
     "xpack.upgradeAssistant.overview.apiCompatibilityNoteBody": "アップグレード前にすべての廃止予定の問題を解決することをお勧めします。必要に応じて、廃止予定の機能を使用する要求にAPI互換性ヘッダーを適用できます。{learnMoreLink}。",
     "xpack.upgradeAssistant.overview.apiCompatibilityNoteLink": "詳細",
@@ -51797,4 +51794,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "フィールドを選択してください。",
     "xpack.watcher.watcherDescription": "アラートの作成、管理、監視によりデータへの変更を検知します。"
   }
-}
+}

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -50466,9 +50466,7 @@
     "xpack.upgradeAssistant.deprecationCount.warningStatusLabel": "警告：{count}",
     "xpack.upgradeAssistant.deprecationFlyout.learnMoreLinkLabel": "了解详情",
     "xpack.upgradeAssistant.deprecationsPageLoadingError.title": "无法检索 {deprecationSource} 弃用问题",
-    "xpack.upgradeAssistant.deprecationStats.criticalDeprecationsTitle": "紧急",
     "xpack.upgradeAssistant.deprecationStats.loadingErrorMessage": "无法检索 Kibana 弃用问题。",
-    "xpack.upgradeAssistant.deprecationStats.warningDeprecationsTitle": "警告",
     "xpack.upgradeAssistant.esDeprecationErrors.loadingErrorMessage": "无法检索 Elasticsearch 弃用问题。",
     "xpack.upgradeAssistant.esDeprecationErrors.partiallyUpgradedWarningMessage": "将 Kibana 升级到与您的 Elasticsearch 集群相同的版本。集群中的一个或多个节点正在运行与 Kibana 不同的版本。",
     "xpack.upgradeAssistant.esDeprecationErrors.permissionsErrorMessage": "您无权查看 Elasticsearch 弃用问题。",
@@ -50701,7 +50699,6 @@
     "xpack.upgradeAssistant.noDeprecationsPrompt.description": "您的 {deprecationType} 配置是最新的",
     "xpack.upgradeAssistant.noDeprecationsPrompt.nextStepsDescription": "查看{overviewButton}以了解其他 Stack 弃用。",
     "xpack.upgradeAssistant.noDeprecationsPrompt.overviewLinkText": "“概览”页面",
-    "xpack.upgradeAssistant.noPartialDeprecationsMessage": "无",
     "xpack.upgradeAssistant.overview.analyzeTitle": "分析弃用日志",
     "xpack.upgradeAssistant.overview.apiCompatibilityNoteBody": "建议您在升级之前解决所有弃用问题。如果需要，您可以将 API 兼容性标头应用于使用过时功能的请求。{learnMoreLink}。",
     "xpack.upgradeAssistant.overview.apiCompatibilityNoteLink": "了解详情",
@@ -51881,4 +51878,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "此字段必填。",
     "xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。"
   }
-}
+}

x-pack/platform/plugins/private/upgrade_assistant/__jest__/client_integration/overview/fix_issues_step/elasticsearch_deprecation_issues.test.tsx

@@ -73,11 +73,11 @@ describe('Overview - Fix deprecation issues step - Elasticsearch deprecations',
         await setup();
       });
 
-      test('renders a count for critical issues and success state for warning issues', () => {
+      test('renders a count for critical issues', () => {
         const { exists, find } = testBed;
         expect(exists('esStatsPanel')).toBe(true);
         expect(find('esStatsPanel.criticalDeprecations').text()).toContain('1');
-        expect(exists('esStatsPanel.noWarningDeprecationIssues')).toBe(true);
+        expect(exists('esStatsPanel.warningDeprecations')).toBe(false);
       });
 
       test('panel links to ES deprecations page', () => {
@@ -93,7 +93,7 @@ describe('Overview - Fix deprecation issues step - Elasticsearch deprecations',
         await setup();
       });
 
-      test('renders a count for critical issues and success state for warning issues', () => {
+      test('renders a success state', () => {
         const { exists } = testBed;
         expect(exists('esStatsPanel')).toBe(true);
         expect(exists('esStatsPanel.noDeprecationIssues')).toBe(true);

x-pack/platform/plugins/private/upgrade_assistant/__jest__/client_integration/overview/fix_issues_step/kibana_deprecation_issues.test.tsx

@@ -73,12 +73,12 @@ describe('Overview - Fix deprecation issues step - Kibana deprecations', () => {
         await setup(mockedCriticalKibanaDeprecations);
       });
 
-      test('renders a count for critical issues and success state for warning issues', () => {
+      test('renders a count for critical issues', () => {
         const { exists, find } = testBed;
 
         expect(exists('kibanaStatsPanel')).toBe(true);
         expect(find('kibanaStatsPanel.criticalDeprecations').text()).toContain('1');
-        expect(exists('kibanaStatsPanel.noWarningDeprecationIssues')).toBe(true);
+        expect(exists('kibanaStatsPanel.warningDeprecations')).toBe(false);
       });
 
       test('panel links to Kibana deprecations page', () => {

x-pack/platform/plugins/private/upgrade_assistant/public/application/components/overview/fix_issues_step/components/_deprecation_issues_panel.scss

@@ -1,24 +0,0 @@
-/**
- * Push <NoDeprecationIssues isPartial={false} /> success state to the bottom
- * of the card, so it aligns with <NoDeprecationIssues isPartial={true} />,
- * which is inside EuiStat.
- */
-.upgDeprecationIssuesPanel .euiCard__content {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-/**
-  * Ensure the stat is a consistent height, even when it contains
-  * <NoDeprecationIssues isPartial={true} />, which is shorter than the
-  * standard number value. We also push it to the bottom of the its
-  * container, to base-align it with the number value.
-  */
-.upgDeprecationIssuesPanel__stat {
-  height: 60px; // Derived from font measurements, not sizing vars
-  justify-content: space-between;
-  flex-grow: 1;
-  flex-direction: column;
-  display: flex;
-}

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

@@ -0,0 +1,35 @@
+/*
+ * 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 from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiText, EuiIcon } from '@elastic/eui';
+
+interface Props {
+  type: string;
+  color: string;
+  iconType: string;
+  message: React.ReactNode;
+}
+export const DeprecationIssue = (props: Props) => {
+  const { type, color, iconType, message } = props;
+
+  return (
+    <EuiFlexItem data-test-subj={`${type}Deprecations`}>
+      <EuiText color={color}>
+        <EuiFlexGroup gutterSize="s" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiIcon type={iconType} />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false} alignItems="center">
+            <EuiFlexGroup gutterSize="s" alignItems="center">
+              {message}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiText>
+    </EuiFlexItem>
+  );
+};

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

@@ -7,31 +7,15 @@
 
 import React, { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
-import { EuiCard, EuiStat, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
+import { EuiCard, EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
 
 import { reactRouterNavigate } from '../../../../../shared_imports';
 import { DeprecationSource } from '../../../../../../common/types';
 import { getDeprecationsUpperLimit } from '../../../../lib/utils';
 import { LoadingIssuesError } from './loading_issues_error';
 import { NoDeprecationIssues } from './no_deprecation_issues';
-
-import './_deprecation_issues_panel.scss';
-
-const i18nTexts = {
-  warningDeprecationsTitle: i18n.translate(
-    'xpack.upgradeAssistant.deprecationStats.warningDeprecationsTitle',
-    {
-      defaultMessage: 'Warning',
-    }
-  ),
-  criticalDeprecationsTitle: i18n.translate(
-    'xpack.upgradeAssistant.deprecationStats.criticalDeprecationsTitle',
-    {
-      defaultMessage: 'Critical',
-    }
-  ),
-};
+import { DeprecationIssue } from './deprecation_issues';
 
 interface Props {
   'data-test-subj': string;
@@ -70,8 +54,9 @@ export const DeprecationIssuesPanel = (props: Props) => {
   return (
     <EuiCard
       data-test-subj={props['data-test-subj']}
-      className="upgDeprecationIssuesPanel"
       layout="horizontal"
+      display="plain"
+      hasBorder
       title={deprecationSource}
       titleSize="xs"
       {...(!hasNoIssues && reactRouterNavigate(history, linkUrl))}
@@ -84,50 +69,49 @@ export const DeprecationIssuesPanel = (props: Props) => {
         <NoDeprecationIssues data-test-subj="noDeprecationIssues" />
       ) : (
         <EuiFlexGroup>
-          <EuiFlexItem>
-            <EuiStat
-              data-test-subj="criticalDeprecations"
-              className="upgDeprecationIssuesPanel__stat"
-              title={
-                hasError ? (
-                  '--'
-                ) : hasCriticalIssues ? (
-                  getDeprecationsUpperLimit(criticalDeprecationsCount)
-                ) : (
-                  <NoDeprecationIssues
-                    isPartial={true}
-                    data-test-subj="noCriticalDeprecationIssues"
-                  />
-                )
+          {isLoading && (
+            <EuiFlexItem grow={false}>
+              <EuiLoadingSpinner size="m" />
+            </EuiFlexItem>
+          )}
+          {hasCriticalIssues && (
+            <DeprecationIssue
+              type="critical"
+              color="danger"
+              iconType="errorFilled"
+              message={
+                <FormattedMessage
+                  id="xpack.upgradeAssistant.deprecationStats.criticalDeprecationsTitle"
+                  defaultMessage="{errorCountValue} {criticalDeprecationsCount, plural, one {Error} other {Errors}}"
+                  values={{
+                    criticalDeprecationsCount,
+                    errorCountValue: (
+                      <strong>{getDeprecationsUpperLimit(criticalDeprecationsCount)}</strong>
+                    ),
+                  }}
+                />
               }
-              titleElement="span"
-              description={i18nTexts.criticalDeprecationsTitle}
-              titleColor="danger"
-              isLoading={isLoading}
             />
-          </EuiFlexItem>
-
-          <EuiFlexItem>
-            <EuiStat
-              data-test-subj="warningDeprecations"
-              className="upgDeprecationIssuesPanel__stat"
-              title={
-                hasError ? (
-                  '--'
-                ) : hasWarningIssues ? (
-                  getDeprecationsUpperLimit(warningDeprecationsCount)
-                ) : (
-                  <NoDeprecationIssues
-                    isPartial={true}
-                    data-test-subj="noWarningDeprecationIssues"
-                  />
-                )
+          )}
+          {hasWarningIssues && (
+            <DeprecationIssue
+              type="warning"
+              color="warning"
+              iconType="warningFilled"
+              message={
+                <FormattedMessage
+                  id="xpack.upgradeAssistant.deprecationStats.warningDeprecationsTitle"
+                  defaultMessage="{warningCountValue} {warningDeprecationsCount, plural, one {Warning} other {Warnings}}"
+                  values={{
+                    warningDeprecationsCount,
+                    warningCountValue: (
+                      <strong>{getDeprecationsUpperLimit(warningDeprecationsCount)}</strong>
+                    ),
+                  }}
+                />
               }
-              titleElement="span"
-              description={i18nTexts.warningDeprecationsTitle}
-              isLoading={isLoading}
             />
-          </EuiFlexItem>
+          )}
         </EuiFlexGroup>
       )}
     </EuiCard>

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

@@ -10,34 +10,25 @@ import { EuiFlexGroup, EuiFlexItem, EuiText, EuiIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 const i18nTexts = {
-  noPartialDeprecationIssuesText: i18n.translate(
-    'xpack.upgradeAssistant.noPartialDeprecationsMessage',
-    {
-      defaultMessage: 'None',
-    }
-  ),
   noDeprecationIssuesText: i18n.translate('xpack.upgradeAssistant.noDeprecationsMessage', {
     defaultMessage: 'No issues',
   }),
 };
 
 interface Props {
-  isPartial?: boolean;
   'data-test-subj'?: string;
 }
 
 export const NoDeprecationIssues: FunctionComponent<Props> = (props) => {
-  const { isPartial = false } = props;
-
   return (
     <EuiText color="success">
       <EuiFlexGroup gutterSize="s" alignItems="center">
         <EuiFlexItem grow={false}>
-          <EuiIcon type="check" />
+          <EuiIcon type="checkInCircleFilled" />
         </EuiFlexItem>
 
         <EuiFlexItem grow={false} data-test-subj={props['data-test-subj']}>
-          {isPartial ? i18nTexts.noPartialDeprecationIssuesText : i18nTexts.noDeprecationIssuesText}
+          {i18nTexts.noDeprecationIssuesText}
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiText>

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

@@ -7,7 +7,7 @@
 
 import React, { FunctionComponent, useState, useEffect } from 'react';
 
-import { EuiText, EuiFlexItem, EuiFlexGroup, EuiSpacer } from '@elastic/eui';
+import { EuiText, EuiFlexGroup, EuiSpacer, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { EuiStepProps } from '@elastic/eui/src/components/steps/step';
@@ -38,11 +38,10 @@ const FixIssuesStep: FunctionComponent<Props> = ({ setIsComplete }) => {
 
   return (
     <EuiFlexGroup>
-      <EuiFlexItem>
+      <EuiFlexItem grow={false} style={{ width: 350 }}>
         <EsDeprecationIssuesPanel setIsFixed={setIsEsFixed} />
       </EuiFlexItem>
-
-      <EuiFlexItem>
+      <EuiFlexItem grow={false} style={{ width: 350 }}>
         <KibanaDeprecationIssuesPanel setIsFixed={setIsKibanaFixed} />
       </EuiFlexItem>
     </EuiFlexGroup>