From 70f2677213b021a968d00f4fda9927dc8a877ff8 Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Wed, 15 Sep 2021 12:31:41 +0200 Subject: [PATCH] [Upgrade Assistant] Improve flyout information architecture (#111713) * Make sure longstrings inside flyout body are text-wrap * Show resolved badge for reindex flyout and row * Finish off rest of ES deprecation flyouts * Refactor deprecation badge into its own component * Add tests for kibana deprecations * Add tests for es deprecations * Also check that we have status=error before rendering error callout * Check for non-complete states instead of just error * Small refactor * Default deprecation is not resolvable * Add a bit more spacing between title and badge * Address CR changes * Use EuiSpacer instead of flexitems --- .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - .../index_settings_deprecation_flyout.test.ts | 6 +- .../ml_snapshots_deprecation_flyout.test.ts | 24 ++--- .../deprecation_details_flyout.test.ts | 10 ++- .../deprecation_types/default/flyout.tsx | 8 +- .../deprecation_types/default/table_row.tsx | 3 +- .../index_settings/flyout.tsx | 6 ++ .../index_settings/table_row.tsx | 1 + .../deprecation_types/ml_snapshots/flyout.tsx | 89 ++++++++----------- .../ml_snapshots/table_row.tsx | 1 + .../reindex/flyout/checklist_step.tsx | 33 +++---- .../reindex/flyout/container.tsx | 6 ++ .../deprecation_types/reindex/table_row.tsx | 1 + .../es_deprecations_table_cells.tsx | 21 +---- .../deprecation_details_flyout.tsx | 18 ++-- .../kibana_deprecations_table.tsx | 33 +------ .../components/shared/deprecation_badge.tsx | 51 +++++++++++ .../application/components/shared/index.ts | 1 + 19 files changed, 171 insertions(+), 143 deletions(-) create mode 100644 x-pack/plugins/upgrade_assistant/public/application/components/shared/deprecation_badge.tsx diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 89db152c7fc2e..f6e95ad83273e 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -25845,7 +25845,6 @@ "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.backgroundResumeDetail": "再インデックスはバックグラウンドで継続しますが、Kibana がシャットダウンまたは再起動した場合、このページに戻り再インデックスを再開させる必要があります。", "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.calloutTitle": "インデックスは再インデックス中にドキュメントを投入、更新、または削除できません", "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.cantStopDetail": "ドキュメントの更新を停止できない場合、または新しいクラスターに再インデックスする必要がある場合は、異なるアップグレード方法をお勧めします。", - "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.doneLabel": "完了！", "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.reindexingLabel": "再インデックス中…", "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.resumeLabel": "再開", "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.runReindexLabel": "再インデックスを実行", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 824e8e302f2a7..ea58a5a780062 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -26280,7 +26280,6 @@ "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.backgroundResumeDetail": "重新索引将在后台继续，但如果 Kibana 关闭或重新启动，您将需要返回此页，才能恢复重新索引。", "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.calloutTitle": "在重新索引时，索引无法采集、更新或删除文档", "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.cantStopDetail": "如果您无法停止文档更新或需要重新索引到新的集群中，请考虑使用不同的升级策略。", - "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.doneLabel": "已完成！", "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.reindexingLabel": "正在重新索引……", "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.resumeLabel": "恢复", "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.runReindexLabel": "运行重新索引", diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/index_settings_deprecation_flyout.test.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/index_settings_deprecation_flyout.test.ts index e3cefe313063a..145cea24dde8b 100644 --- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/index_settings_deprecation_flyout.test.ts +++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/index_settings_deprecation_flyout.test.ts @@ -47,12 +47,14 @@ describe('Index settings deprecation flyout', () => { }); it('removes deprecated index settings', async () => { - const { find, actions } = testBed; + const { find, actions, exists } = testBed; httpRequestsMockHelpers.setUpdateIndexSettingsResponse({ acknowledged: true, }); + expect(exists('indexSettingsDetails.warningDeprecationBadge')).toBe(true); + await actions.indexSettingsDeprecationFlyout.clickDeleteSettingsButton(); const request = server.requests[server.requests.length - 1]; @@ -75,6 +77,8 @@ describe('Index settings deprecation flyout', () => { expect(find('removeSettingsPrompt').length).toEqual(0); // Verify the action button no longer displays expect(find('indexSettingsDetails.deleteSettingsButton').length).toEqual(0); + // Verify the badge got marked as resolved + expect(exists('indexSettingsDetails.resolvedDeprecationBadge')).toBe(true); }); it('handles failure', async () => { diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/ml_snapshots_deprecation_flyout.test.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/ml_snapshots_deprecation_flyout.test.ts index ff9dae03a2c57..bf20d52639699 100644 --- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/ml_snapshots_deprecation_flyout.test.ts +++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/es_deprecations/ml_snapshots_deprecation_flyout.test.ts @@ -48,7 +48,7 @@ describe('Machine learning deprecation flyout', () => { describe('upgrade snapshots', () => { it('successfully upgrades snapshots', async () => { - const { find, actions } = testBed; + const { find, actions, exists } = testBed; httpRequestsMockHelpers.setUpgradeMlSnapshotResponse({ nodeId: 'my_node', @@ -64,6 +64,7 @@ describe('Machine learning deprecation flyout', () => { status: 'complete', }); + expect(exists('mlSnapshotDetails.criticalDeprecationBadge')).toBe(true); expect(find('mlSnapshotDetails.upgradeSnapshotButton').text()).toEqual('Upgrade'); await actions.mlDeprecationFlyout.clickUpgradeSnapshot(); @@ -86,10 +87,11 @@ describe('Machine learning deprecation flyout', () => { // Reopen the flyout await actions.table.clickDeprecationRowAt('mlSnapshot', 0); - // Flyout actions should be disabled if deprecation was resolved - expect(find('mlSnapshotDetails.upgradeSnapshotButton').props().disabled).toBe(true); - expect(find('mlSnapshotDetails.upgradeSnapshotButton').text()).toContain('Upgrade complete'); - expect(find('mlSnapshotDetails.deleteSnapshotButton').props().disabled).toBe(true); + // Flyout actions should be hidden if deprecation was resolved + expect(exists('mlSnapshotDetails.upgradeSnapshotButton')).toBe(false); + expect(exists('mlSnapshotDetails.deleteSnapshotButton')).toBe(false); + // Badge should be updated in flyout title + expect(exists('mlSnapshotDetails.resolvedDeprecationBadge')).toBe(true); }); it('handles upgrade failure', async () => { @@ -133,12 +135,13 @@ describe('Machine learning deprecation flyout', () => { describe('delete snapshots', () => { it('successfully deletes snapshots', async () => { - const { find, actions } = testBed; + const { find, actions, exists } = testBed; httpRequestsMockHelpers.setDeleteMlSnapshotResponse({ acknowledged: true, }); + expect(exists('mlSnapshotDetails.criticalDeprecationBadge')).toBe(true); expect(find('mlSnapshotDetails.deleteSnapshotButton').text()).toEqual('Delete'); await actions.mlDeprecationFlyout.clickDeleteSnapshot(); @@ -158,10 +161,11 @@ describe('Machine learning deprecation flyout', () => { // Reopen the flyout await actions.table.clickDeprecationRowAt('mlSnapshot', 0); - // Flyout actions should be disabled if deprecation was resolved - expect(find('mlSnapshotDetails.deleteSnapshotButton').props().disabled).toBe(true); - expect(find('mlSnapshotDetails.deleteSnapshotButton').text()).toContain('Deletion complete'); - expect(find('mlSnapshotDetails.upgradeSnapshotButton').props().disabled).toBe(true); + // Flyout actions should be hidden if deprecation was resolved + expect(exists('mlSnapshotDetails.upgradeSnapshotButton')).toBe(false); + expect(exists('mlSnapshotDetails.deleteSnapshotButton')).toBe(false); + // Badge should be updated in flyout title + expect(exists('mlSnapshotDetails.resolvedDeprecationBadge')).toBe(true); }); it('handles delete failure', async () => { diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/kibana_deprecations/deprecation_details_flyout.test.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/kibana_deprecations/deprecation_details_flyout.test.ts index f4f501221e595..11b7dc72ea5d2 100644 --- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/kibana_deprecations/deprecation_details_flyout.test.ts +++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/kibana_deprecations/deprecation_details_flyout.test.ts @@ -47,6 +47,7 @@ describe('Kibana deprecation details flyout', () => { await actions.table.clickDeprecationAt(1); expect(exists('kibanaDeprecationDetails')).toBe(true); + expect(exists('kibanaDeprecationDetails.warningDeprecationBadge')).toBe(true); expect(find('kibanaDeprecationDetails.flyoutTitle').text()).toBe(manualDeprecation.title); expect(find('manualStepsList').find('li').length).toEqual( manualDeprecation.correctiveActions.manualSteps.length @@ -66,6 +67,7 @@ describe('Kibana deprecation details flyout', () => { await actions.table.clickDeprecationAt(0); expect(exists('kibanaDeprecationDetails')).toBe(true); + expect(exists('kibanaDeprecationDetails.criticalDeprecationBadge')).toBe(true); expect(find('kibanaDeprecationDetails.flyoutTitle').text()).toBe( quickResolveDeprecation.title ); @@ -87,8 +89,9 @@ describe('Kibana deprecation details flyout', () => { // Resolve information should not display and Quick resolve button should be disabled expect(exists('resolveSection')).toBe(false); - expect(find('resolveButton').props().disabled).toBe(true); - expect(find('resolveButton').text()).toContain('Resolved'); + expect(exists('resolveButton')).toBe(false); + // Badge should be updated in flyout title + expect(exists('kibanaDeprecationDetails.resolvedDeprecationBadge')).toBe(true); }); test('handles resolve failure', async () => { @@ -103,6 +106,7 @@ describe('Kibana deprecation details flyout', () => { await actions.table.clickDeprecationAt(0); expect(exists('kibanaDeprecationDetails')).toBe(true); + expect(exists('kibanaDeprecationDetails.criticalDeprecationBadge')).toBe(true); expect(find('kibanaDeprecationDetails.flyoutTitle').text()).toBe( quickResolveDeprecation.title ); @@ -123,6 +127,8 @@ describe('Kibana deprecation details flyout', () => { expect(exists('quickResolveError')).toBe(true); // Resolve information should display and Quick resolve button should be enabled expect(exists('resolveSection')).toBe(true); + // Badge should remain the same + expect(exists('kibanaDeprecationDetails.criticalDeprecationBadge')).toBe(true); expect(find('resolveButton').props().disabled).toBe(false); expect(find('resolveButton').text()).toContain('Try again'); }); diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/default/flyout.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/default/flyout.tsx index 9262ea9664033..c436d585db9ae 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/default/flyout.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/default/flyout.tsx @@ -18,9 +18,11 @@ import { EuiText, EuiTextColor, EuiLink, + EuiSpacer, } from '@elastic/eui'; import { EnrichedDeprecationInfo } from '../../../../../../common/types'; +import { DeprecationBadge } from '../../../shared'; export interface DefaultDeprecationFlyoutProps { deprecation: EnrichedDeprecationInfo; @@ -61,10 +63,10 @@ export const DefaultDeprecationFlyout = ({ return ( <> + + -

- {message} -

+

{message}

 {index && ( diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/default/table_row.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/default/table_row.tsx index 7f4b2e3be3479..51179a6899eff 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/default/table_row.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/default/table_row.tsx @@ -44,6 +44,7 @@ export const DefaultTableRow: React.FunctionComponent = ({ rowFieldNames, }, flyoutProps: { onClose: closeFlyout, + className: 'eui-textBreakWord', 'data-test-subj': 'defaultDeprecationDetails', 'aria-labelledby': 'defaultDeprecationDetailsFlyoutTitle', }, @@ -62,8 +63,8 @@ export const DefaultTableRow: React.FunctionComponent = ({ rowFieldNames, > setShowFlyout(true)} deprecation={deprecation} + openFlyout={() => setShowFlyout(true)} /> ); diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/index_settings/flyout.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/index_settings/flyout.tsx index edb46ee0dc85b..24c1897fbdd02 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/index_settings/flyout.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/index_settings/flyout.tsx @@ -26,6 +26,7 @@ import { import { EnrichedDeprecationInfo, IndexSettingAction } from '../../../../../../common/types'; import type { ResponseError } from '../../../../lib/api'; import type { Status } from '../../../types'; +import { DeprecationBadge } from '../../../shared'; export interface RemoveIndexSettingsFlyoutProps { deprecation: EnrichedDeprecationInfo; @@ -109,6 +110,11 @@ export const RemoveIndexSettingsFlyout = ({ return ( <> + +

{message}

 diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/index_settings/table_row.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/index_settings/table_row.tsx index 3ce85a9345aeb..29be8c519f520 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/index_settings/table_row.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/index_settings/table_row.tsx @@ -75,6 +75,7 @@ export const IndexSettingsTableRow: React.FunctionComponent = ({ }, flyoutProps: { onClose: closeFlyout, + className: 'eui-textBreakWord', 'data-test-subj': 'indexSettingsDetails', 'aria-labelledby': 'indexSettingsDetailsFlyoutTitle', }, diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/ml_snapshots/flyout.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/ml_snapshots/flyout.tsx index a972b7ec192d2..40921981dfa5e 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/ml_snapshots/flyout.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/ml_snapshots/flyout.tsx @@ -24,6 +24,7 @@ import { } from '@elastic/eui'; import { EnrichedDeprecationInfo } from '../../../../../../common/types'; +import { DeprecationBadge } from '../../../shared'; import { MlSnapshotContext } from './context'; import { SnapshotState } from './use_snapshot_state'; @@ -51,12 +52,6 @@ const i18nTexts = { defaultMessage: 'Retry upgrade', } ), - upgradeResolvedButtonLabel: i18n.translate( - 'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.deleteResolvupgradeResolvedButtonLabeledButtonLabel', - { - defaultMessage: 'Upgrade complete', - } - ), closeButtonLabel: i18n.translate( 'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.closeButtonLabel', { @@ -75,12 +70,6 @@ const i18nTexts = { defaultMessage: 'Deleting…', } ), - deleteResolvedButtonLabel: i18n.translate( - 'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.deleteResolvedButtonLabel', - { - defaultMessage: 'Deletion complete', - } - ), retryDeleteButtonLabel: i18n.translate( 'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.retryDeleteButtonLabel', { @@ -119,8 +108,6 @@ const getDeleteButtonLabel = (snapshotState: SnapshotState) => { switch (snapshotState.status) { case 'in_progress': return i18nTexts.deletingButtonLabel; - case 'complete': - return i18nTexts.deleteResolvedButtonLabel; case 'idle': default: return i18nTexts.deleteButtonLabel; @@ -138,8 +125,6 @@ const getUpgradeButtonLabel = (snapshotState: SnapshotState) => { switch (snapshotState.status) { case 'in_progress': return i18nTexts.upgradingButtonLabel; - case 'complete': - return i18nTexts.upgradeResolvedButtonLabel; case 'idle': default: return i18nTexts.upgradeButtonLabel; @@ -155,6 +140,8 @@ export const FixSnapshotsFlyout = ({ upgradeSnapshot, deleteSnapshot, }: FixSnapshotsFlyoutProps) => { + const isResolved = snapshotState.status === 'complete'; + const onUpgradeSnapshot = () => { upgradeSnapshot(); closeFlyout(); @@ -168,12 +155,14 @@ export const FixSnapshotsFlyout = ({ return ( <> + +

{i18nTexts.flyoutTitle}

 - {snapshotState.error && ( + {snapshotState.error && !isResolved && ( <> - - - - - {getDeleteButtonLabel(snapshotState)} - - - - - {getUpgradeButtonLabel(snapshotState)} - - - - + {!isResolved && ( + + + + + {getDeleteButtonLabel(snapshotState)} + + + + + {getUpgradeButtonLabel(snapshotState)} + + + + + )} diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/ml_snapshots/table_row.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/ml_snapshots/table_row.tsx index 0815be4a1f956..0af0292bbe046 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/ml_snapshots/table_row.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/ml_snapshots/table_row.tsx @@ -52,6 +52,7 @@ export const MlSnapshotsTableRowCells: React.FunctionComponent = }, flyoutProps: { onClose: closeFlyout, + className: 'eui-textBreakWord', 'data-test-subj': 'mlSnapshotDetails', 'aria-labelledby': 'mlSnapshotDetailsFlyoutTitle', }, diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/checklist_step.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/checklist_step.tsx index 856e2a57649df..b0af397b16a30 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/checklist_step.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/checklist_step.tsx @@ -41,13 +41,6 @@ const buttonLabel = (status?: ReindexStatus) => { defaultMessage="Reindexing…" /> ); - case ReindexStatus.completed: - return ( - - ); case ReindexStatus.paused: return ( - - - {buttonLabel(status)} - - + {status !== ReindexStatus.completed && ( + + + {buttonLabel(status)} + + + )} diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/container.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/container.tsx index d2d07b47acd49..0a2e26b1ed886 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/container.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/container.tsx @@ -21,6 +21,7 @@ import { useAppContext } from '../../../../../app_context'; import type { ReindexStateContext } from '../context'; import { ChecklistFlyoutStep } from './checklist_step'; import { WarningsFlyoutStep } from './warnings_step'; +import { DeprecationBadge } from '../../../../shared'; enum ReindexFlyoutStep { reindexWarnings, @@ -130,6 +131,11 @@ export const ReindexFlyout: React.FunctionComponent = ({ return ( <> + +

= ({ }, flyoutProps: { onClose: closeFlyout, + className: 'eui-textBreakWord', 'data-test-subj': 'reindexDetails', 'aria-labelledby': 'reindexDetailsFlyoutTitle', }, diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/es_deprecations_table_cells.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/es_deprecations_table_cells.tsx index 2e2299ec8b1e0..0a075e049495f 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/es_deprecations_table_cells.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/es_deprecations_table_cells.tsx @@ -7,10 +7,11 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiBadge, EuiLink, EuiText, EuiToolTip } from '@elastic/eui'; +import { EuiLink, EuiText, EuiToolTip } from '@elastic/eui'; import { EnrichedDeprecationInfo } from '../../../../common/types'; import { DEPRECATION_TYPE_MAP } from '../constants'; import { DeprecationTableColumns } from '../types'; +import { DeprecationBadge } from '../shared'; interface Props { resolutionTableCell?: React.ReactNode; @@ -20,18 +21,6 @@ interface Props { } const i18nTexts = { - criticalBadgeLabel: i18n.translate( - 'xpack.upgradeAssistant.esDeprecations.defaultDeprecation.criticalBadgeLabel', - { - defaultMessage: 'Critical', - } - ), - warningBadgeLabel: i18n.translate( - 'xpack.upgradeAssistant.esDeprecations.defaultDeprecation.warningBadgeLabel', - { - defaultMessage: 'Warning', - } - ), manualCellLabel: i18n.translate( 'xpack.upgradeAssistant.esDeprecations.defaultDeprecation.manualCellLabel', { @@ -54,11 +43,7 @@ export const EsDeprecationsTableCells: React.FunctionComponent = ({ }) => { // "Status column" if (fieldName === 'isCritical') { - if (deprecation.isCritical === true) { - return {i18nTexts.criticalBadgeLabel}; - } - - return {i18nTexts.warningBadgeLabel}; + return ; } // "Issue" column diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/deprecation_details_flyout.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/deprecation_details_flyout.tsx index d9d7b50c87f0c..d41b0a95e7679 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/deprecation_details_flyout.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/deprecation_details_flyout.tsx @@ -25,6 +25,7 @@ import { } from '@elastic/eui'; import type { DeprecationResolutionState, KibanaDeprecationDetails } from './kibana_deprecations'; +import { DeprecationBadge } from '../shared'; import './_deprecation_details_flyout.scss'; @@ -130,12 +131,18 @@ export const DeprecationDetailsFlyout = ({ deprecationResolutionState, }: DeprecationDetailsFlyoutProps) => { const { documentationUrl, message, correctiveActions, title } = deprecation; + const isCurrent = deprecationResolutionState?.id === deprecation.id; + const isResolved = isCurrent && deprecationResolutionState?.resolveDeprecationStatus === 'ok'; return ( <> + + -

{title}

+

+ {title} +

@@ -154,7 +161,7 @@ export const DeprecationDetailsFlyout = ({ )} -

{message}

+

{message}

{documentationUrl && (

@@ -168,7 +175,7 @@ export const DeprecationDetailsFlyout = ({ {/* Hide resolution steps if already resolved */} - {deprecationResolutionState?.resolveDeprecationStatus !== 'ok' && ( + {!isResolved && (

{correctiveActions.api && ( <> @@ -212,8 +219,8 @@ export const DeprecationDetailsFlyout = ({ - {/* Only show the "Quick resolve" button if deprecation supports it */} - {correctiveActions.api && ( + {/* Only show the "Quick resolve" button if deprecation supports it and deprecation is not yet resolved */} + {correctiveActions.api && !isResolved && ( {getQuickResolveButtonLabel(deprecationResolutionState)} diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/kibana_deprecations_table.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/kibana_deprecations_table.tsx index 1df9402c686aa..6a757d0cb2b0b 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/kibana_deprecations_table.tsx +++ b/x-pack/plugins/upgrade_assistant/public/application/components/kibana_deprecations/kibana_deprecations_table.tsx @@ -6,18 +6,12 @@ */ import React from 'react'; import { i18n } from '@kbn/i18n'; -import { - EuiInMemoryTable, - EuiBasicTableColumn, - EuiButton, - EuiLink, - EuiBadge, - Search, -} from '@elastic/eui'; +import { EuiInMemoryTable, EuiBasicTableColumn, EuiButton, EuiLink, Search } from '@elastic/eui'; import { PAGINATION_CONFIG } from '../constants'; import type { DeprecationResolutionState, KibanaDeprecationDetails } from './kibana_deprecations'; import { ResolutionTableCell } from './resolution_table_cell'; +import { DeprecationBadge } from '../shared'; const i18nTexts = { refreshButtonLabel: i18n.translate( @@ -80,18 +74,6 @@ const i18nTexts = { defaultMessage: 'Critical', } ), - criticalBadgeLabel: i18n.translate( - 'xpack.upgradeAssistant.kibanaDeprecations.table.criticalBadgeLabel', - { - defaultMessage: 'critical', - } - ), - warningBadgeLabel: i18n.translate( - 'xpack.upgradeAssistant.kibanaDeprecations.table.warningBadgeLabel', - { - defaultMessage: 'warning', - } - ), searchPlaceholderLabel: i18n.translate( 'xpack.upgradeAssistant.kibanaDeprecations.table.searchPlaceholderLabel', { @@ -121,16 +103,7 @@ export const KibanaDeprecationsTable: React.FunctionComponent = ({ truncateText: true, sortable: true, render: (level: KibanaDeprecationDetails['level']) => { - switch (level) { - case 'critical': - return {i18nTexts.criticalBadgeLabel}; - - case 'warning': - return {i18nTexts.warningBadgeLabel}; - - default: - return <>{''}; - } + return ; }, }, { diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/shared/deprecation_badge.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/shared/deprecation_badge.tsx new file mode 100644 index 0000000000000..c0b8f0eb24304 --- /dev/null +++ b/x-pack/plugins/upgrade_assistant/public/application/components/shared/deprecation_badge.tsx @@ -0,0 +1,51 @@ +/* + * 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 { EuiBadge } from '@elastic/eui'; + +const i18nTexts = { + criticalBadgeLabel: i18n.translate('xpack.upgradeAssistant.deprecationBadge.criticalBadgeLabel', { + defaultMessage: 'Critical', + }), + resolvedBadgeLabel: i18n.translate('xpack.upgradeAssistant.deprecationBadge.resolvedBadgeLabel', { + defaultMessage: 'Resolved', + }), + warningBadgeLabel: i18n.translate('xpack.upgradeAssistant.deprecationBadge.warningBadgeLabel', { + defaultMessage: 'Warning', + }), +}; + +interface Props { + isCritical: boolean; + isResolved?: boolean; +} + +export const DeprecationBadge: FunctionComponent = ({ isCritical, isResolved }) => { + if (isResolved) { + return ( + + {i18nTexts.resolvedBadgeLabel} + + ); + } + + if (isCritical) { + return ( + + {i18nTexts.criticalBadgeLabel} + + ); + } + + return ( + + {i18nTexts.warningBadgeLabel} + + ); +}; diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/shared/index.ts b/x-pack/plugins/upgrade_assistant/public/application/components/shared/index.ts index 89bce0813b92f..9464b5ecb98ca 100644 --- a/x-pack/plugins/upgrade_assistant/public/application/components/shared/index.ts +++ b/x-pack/plugins/upgrade_assistant/public/application/components/shared/index.ts @@ -7,3 +7,4 @@ export { NoDeprecationsPrompt } from './no_deprecations'; export { DeprecationCount } from './deprecation_count'; +export { DeprecationBadge } from './deprecation_badge';