[Upgrade Assistant] Overview page UI clean up (elastic#115258)

- Scaling down deprecation issue panel title size to flow with typographic hierarchy. - Removing panel around deprecation logging switch to reduce visual elements. - Using success instead of green color for migration complete message.
sabarasaba · Oct 26, 2021 · cad8a14 · cad8a14
1 parent 170ea9d
commit cad8a14
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 23 deletions.
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -25234,7 +25234,6 @@
     "xpack.upgradeAssistant.overview.observe.observabilityDescription": "使用中のAPIのうち廃止予定のAPIと、更新が必要なアプリケーションを特定できます。",
     "xpack.upgradeAssistant.overview.pageDescription": "次のバージョンのElastic Stackをお待ちください。",
     "xpack.upgradeAssistant.overview.pageTitle": "アップグレードアシスタント",
-    "xpack.upgradeAssistant.overview.toggleTitle": "Elasticsearch廃止予定警告をログに出力",
     "xpack.upgradeAssistant.overview.upgradeGuideLink": "アップグレードガイドを表示",
     "xpack.upgradeAssistant.overview.upgradeStepCloudLink": "クラウドでアップグレード",
     "xpack.upgradeAssistant.overview.upgradeStepDescription": "重要な問題をすべて解決し、アプリケーションの準備を確認した後に、Elastic Stackをアップグレードできます。",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -25663,7 +25663,6 @@
     "xpack.upgradeAssistant.overview.observe.observabilityDescription": "深入了解正在使用哪些已弃用 API 以及需要更新哪些应用程序。",
     "xpack.upgradeAssistant.overview.pageDescription": "准备使用下一版 Elastic Stack！",
     "xpack.upgradeAssistant.overview.pageTitle": "升级助手",
-    "xpack.upgradeAssistant.overview.toggleTitle": "记录 Elasticsearch 弃用警告",
     "xpack.upgradeAssistant.overview.upgradeGuideLink": "查看升级指南",
     "xpack.upgradeAssistant.overview.upgradeStepCloudLink": "在 Cloud 上升级",
     "xpack.upgradeAssistant.overview.upgradeStepDescription": "解决所有关键问题并确认您的应用程序就绪后，便可以升级 Elastic Stack。",

diff --git a/...c/application/components/overview/fix_issues_step/components/deprecation_issues_panel.tsx b/...c/application/components/overview/fix_issues_step/components/deprecation_issues_panel.tsx
@@ -73,9 +73,10 @@ export const DeprecationIssuesPanel = (props: Props) => {
       className="upgDeprecationIssuesPanel"
       layout="horizontal"
       title={deprecationSource}
+      titleSize="xs"
       {...(!hasNoIssues && reactRouterNavigate(history, linkUrl))}
     >
-      <EuiSpacer />
+      <EuiSpacer size="s" />
 
       {hasError ? (
         <LoadingIssuesError>{errorMessage}</LoadingIssuesError>

diff --git a/.../upgrade_assistant/public/application/components/overview/fix_logs_step/fix_logs_step.tsx b/.../upgrade_assistant/public/application/components/overview/fix_logs_step/fix_logs_step.tsx
@@ -8,7 +8,7 @@ import React, { FunctionComponent, useState, useEffect } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiText, EuiSpacer, EuiPanel, EuiLink, EuiCallOut, EuiCode } from '@elastic/eui';
+import { EuiText, EuiSpacer, EuiLink, EuiCallOut, EuiCode } from '@elastic/eui';
 import type { EuiStepProps } from '@elastic/eui/src/components/steps/step';
 
 import { useAppContext } from '../../../app_context';
@@ -25,9 +25,6 @@ const i18nTexts = {
   identifyStepTitle: i18n.translate('xpack.upgradeAssistant.overview.identifyStepTitle', {
     defaultMessage: 'Identify deprecated API use and update your applications',
   }),
-  toggleTitle: i18n.translate('xpack.upgradeAssistant.overview.toggleTitle', {
-    defaultMessage: 'Log Elasticsearch deprecation issues',
-  }),
   analyzeTitle: i18n.translate('xpack.upgradeAssistant.overview.analyzeTitle', {
     defaultMessage: 'Analyze deprecation logs',
   }),
@@ -140,21 +137,15 @@ const FixLogsStep: FunctionComponent<Props> = ({
 
   return (
     <>
-      <EuiText>
-        <h4>{i18nTexts.toggleTitle}</h4>
-      </EuiText>
-      <EuiSpacer size="m" />
-      <EuiPanel>
-        <DeprecationLoggingToggle
-          isDeprecationLogIndexingEnabled={isDeprecationLogIndexingEnabled}
-          isLoading={isLoading}
-          isUpdating={isUpdating}
-          fetchError={fetchError}
-          updateError={updateError}
-          resendRequest={resendRequest}
-          toggleLogging={toggleLogging}
-        />
-      </EuiPanel>
+      <DeprecationLoggingToggle
+        isDeprecationLogIndexingEnabled={isDeprecationLogIndexingEnabled}
+        isLoading={isLoading}
+        isUpdating={isUpdating}
+        fetchError={fetchError}
+        updateError={updateError}
+        resendRequest={resendRequest}
+        toggleLogging={toggleLogging}
+      />
 
       {onlyDeprecationLogWritingEnabled && (
         <>

diff --git a/.../public/application/components/overview/migrate_system_indices/migrate_system_indices.tsx b/.../public/application/components/overview/migrate_system_indices/migrate_system_indices.tsx
@@ -118,7 +118,7 @@ const MigrateSystemIndicesStep: FunctionComponent<Props> = ({ setIsComplete }) =
           <EuiIcon type="check" color="success" />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiText color="green">
+          <EuiText color="success">
             <p>{i18nTexts.noMigrationNeeded}</p>
           </EuiText>
         </EuiFlexItem>