Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Upgrade Assistant] Migrate all usages of EuiPage*_Deprecated #163127

Merged
merged 13 commits into from
Aug 21, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,14 @@ import { EuiEmptyPrompt } from '@elastic/eui';
interface Props {
title: React.ReactNode;
message: React.ReactNode | string;
dataTestSubj?: string;
}

export const NotAuthorizedSection = ({ title, message }: Props) => (
<EuiEmptyPrompt iconType="securityApp" title={<h2>{title}</h2>} body={<p>{message}</p>} />
export const NotAuthorizedSection = ({ title, message, dataTestSubj }: Props) => (
<EuiEmptyPrompt
iconType="securityApp"
data-test-subj={dataTestSubj ? dataTestSubj : 'notAuthorizedSection'}
title={<h2>{title}</h2>}
body={<p>{message}</p>}
/>
);
147 changes: 56 additions & 91 deletions x-pack/plugins/upgrade_assistant/public/application/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,7 @@ import { Redirect } from 'react-router-dom';
import { Router, Routes, Route } from '@kbn/shared-ux-router';

import { FormattedMessage } from '@kbn/i18n-react';
import {
EuiEmptyPrompt,
EuiPageContent_Deprecated as EuiPageContent,
EuiLoadingSpinner,
} from '@elastic/eui';
import { EuiLoadingSpinner, EuiPageTemplate } from '@elastic/eui';
import { ScopedHistory } from '@kbn/core/public';

import { API_BASE_PATH } from '../../common/constants';
Expand Down Expand Up @@ -52,94 +48,72 @@ const AppHandlingClusterUpgradeState: React.FunctionComponent = () => {

if (missingManageSpacesPrivilege) {
return (
<EuiPageContent
verticalPosition="center"
horizontalPosition="center"
color="subdued"
data-test-subj="missingKibanaPrivilegesMessage"
>
<NotAuthorizedSection
title={
<FormattedMessage
id="xpack.upgradeAssistant.app.deniedPrivilegeTitle"
defaultMessage="Kibana admin role required"
/>
}
message={
<FormattedMessage
id="xpack.upgradeAssistant.app.deniedPrivilegeDescription"
defaultMessage="To use Upgrade Assistant and resolve deprecation issues, you must have access to manage all Kibana spaces."
/>
}
/>
</EuiPageContent>
<NotAuthorizedSection
alisonelizabeth marked this conversation as resolved.
Show resolved Hide resolved
alisonelizabeth marked this conversation as resolved.
Show resolved Hide resolved
dataTestSubj="missingKibanaPrivilegesMessage"
title={
<FormattedMessage
id="xpack.upgradeAssistant.app.deniedPrivilegeTitle"
defaultMessage="Kibana admin role required"
/>
}
message={
<FormattedMessage
id="xpack.upgradeAssistant.app.deniedPrivilegeDescription"
defaultMessage="To use Upgrade Assistant and resolve deprecation issues, you must have access to manage all Kibana spaces."
/>
}
/>
);
}

if (clusterUpgradeState === 'isUpgrading') {
return (
<EuiPageContent
hasShadow={false}
paddingSize="none"
verticalPosition="center"
horizontalPosition="center"
data-test-subj="isUpgradingMessage"
>
<EuiEmptyPrompt
iconType="logoElasticsearch"
title={
<h1>
<FormattedMessage
id="xpack.upgradeAssistant.upgradingTitle"
defaultMessage="Your cluster is upgrading"
/>
</h1>
}
body={
<p>
<FormattedMessage
id="xpack.upgradeAssistant.upgradingDescription"
defaultMessage="One or more Elasticsearch nodes have a newer version of
<EuiPageTemplate.EmptyPrompt
iconType="logoElasticsearch"
title={
<h1>
<FormattedMessage
id="xpack.upgradeAssistant.upgradingTitle"
defaultMessage="Your cluster is upgrading"
/>
</h1>
}
body={
<p>
<FormattedMessage
id="xpack.upgradeAssistant.upgradingDescription"
defaultMessage="One or more Elasticsearch nodes have a newer version of
Elasticsearch than Kibana. Once all your nodes are upgraded, upgrade Kibana."
/>
</p>
}
data-test-subj="emptyPrompt"
/>
</EuiPageContent>
/>
</p>
}
data-test-subj="isUpgradingMessage"
/>
);
}

if (clusterUpgradeState === 'isUpgradeComplete') {
return (
<EuiPageContent
hasShadow={false}
paddingSize="none"
verticalPosition="center"
horizontalPosition="center"
<EuiPageTemplate.EmptyPrompt
iconType="logoElasticsearch"
title={
<h1>
<FormattedMessage
id="xpack.upgradeAssistant.upgradedTitle"
defaultMessage="Your cluster has been upgraded"
/>
</h1>
}
body={
<p>
<FormattedMessage
id="xpack.upgradeAssistant.upgradedDescription"
defaultMessage="All Elasticsearch nodes have been upgraded. You may now upgrade Kibana."
/>
</p>
}
data-test-subj="isUpgradeCompleteMessage"
>
<EuiEmptyPrompt
iconType="logoElasticsearch"
title={
<h1>
<FormattedMessage
id="xpack.upgradeAssistant.upgradedTitle"
defaultMessage="Your cluster has been upgraded"
/>
</h1>
}
body={
<p>
<FormattedMessage
id="xpack.upgradeAssistant.upgradedDescription"
defaultMessage="All Elasticsearch nodes have been upgraded. You may now upgrade Kibana."
/>
</p>
}
data-test-subj="emptyPrompt"
/>
</EuiPageContent>
/>
);
}

Expand Down Expand Up @@ -170,16 +144,7 @@ export const App = ({ history }: { history: ScopedHistory }) => {

// Prevent flicker of the underlying UI while we wait for the status to fetch.
if (isLoading && isInitialRequest) {
return (
<EuiPageContent
hasShadow={false}
paddingSize="none"
verticalPosition="center"
horizontalPosition="center"
>
<EuiEmptyPrompt body={<EuiLoadingSpinner size="l" />} />
</EuiPageContent>
);
return <EuiPageTemplate.EmptyPrompt body={<EuiLoadingSpinner size="l" />} />;
}

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
EuiButtonEmpty,
EuiSpacer,
EuiPageBody,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageSection,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { METRIC_TYPE } from '@kbn/analytics';
Expand Down Expand Up @@ -40,7 +40,7 @@ export const EsDeprecationLogs: FunctionComponent = () => {

return (
<EuiPageBody restrictWidth={true} data-test-subj="esDeprecationLogs">
<EuiPageContentBody color="transparent" paddingSize="none">
<EuiPageSection color="transparent" paddingSize="none">
<EuiPageHeader
bottomBorder
pageTitle={i18n.translate('xpack.upgradeAssistant.esDeprecationLogs.pageTitle', {
Expand Down Expand Up @@ -68,7 +68,7 @@ export const EsDeprecationLogs: FunctionComponent = () => {
<EuiSpacer size="l" />

<FixDeprecationLogs />
</EuiPageContentBody>
</EuiPageSection>
</EuiPageBody>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,7 @@
import React, { useEffect, useMemo } from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';

import {
EuiPageHeader,
EuiSpacer,
EuiPageContent_Deprecated as EuiPageContent,
EuiLink,
EuiCallOut,
} from '@elastic/eui';
import { EuiPageHeader, EuiSpacer, EuiLink, EuiCallOut } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { DocLinksStart } from '@kbn/core/public';
Expand Down Expand Up @@ -155,21 +149,15 @@ export const EsDeprecations = withRouter(({ history }: RouteComponentProps) => {
}

if (isLoading) {
return (
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
<SectionLoading>{i18nTexts.isLoading}</SectionLoading>
</EuiPageContent>
);
return <SectionLoading>{i18nTexts.isLoading}</SectionLoading>;
}

if (esDeprecations?.deprecations?.length === 0) {
return (
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
<NoDeprecationsPrompt
deprecationType="Elasticsearch"
navigateToOverviewPage={() => history.push('/overview')}
/>
</EuiPageContent>
<NoDeprecationsPrompt
deprecationType="Elasticsearch"
navigateToOverviewPage={() => history.push('/overview')}
/>
);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,7 @@
import React, { useEffect, useState, useCallback, useMemo } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import {
EuiPageContent_Deprecated as EuiPageContent,
EuiPageHeader,
EuiSpacer,
EuiCallOut,
} from '@elastic/eui';
import { EuiPageHeader, EuiSpacer, EuiCallOut } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { METRIC_TYPE } from '@kbn/analytics';

Expand Down Expand Up @@ -234,21 +229,15 @@ export const KibanaDeprecations = withRouter(({ history }: RouteComponentProps)
}

if (isLoading) {
return (
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
<SectionLoading>{i18nTexts.isLoading}</SectionLoading>
</EuiPageContent>
);
return <SectionLoading>{i18nTexts.isLoading}</SectionLoading>;
}

if (kibanaDeprecations?.length === 0) {
return (
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
<NoDeprecationsPrompt
deprecationType={i18nTexts.deprecationLabel}
navigateToOverviewPage={() => history.push('/overview')}
/>
</EuiPageContent>
<NoDeprecationsPrompt
deprecationType={i18nTexts.deprecationLabel}
navigateToOverviewPage={() => history.push('/overview')}
/>
);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
EuiSpacer,
EuiLink,
EuiPageBody,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageSection,
} from '@elastic/eui';
import type { EuiStepProps } from '@elastic/eui/src/components/steps/step';

Expand Down Expand Up @@ -69,7 +69,7 @@ export const Overview = withRouter(({ history }: RouteComponentProps) => {

return (
<EuiPageBody restrictWidth={true} data-test-subj="overview">
<EuiPageContentBody color="transparent" paddingSize="none">
<EuiPageSection color="transparent" paddingSize="none">
<EuiPageHeader
bottomBorder
pageTitle={i18n.translate('xpack.upgradeAssistant.overview.pageTitle', {
Expand Down Expand Up @@ -135,7 +135,7 @@ export const Overview = withRouter(({ history }: RouteComponentProps) => {
].filter(Boolean) as EuiStepProps[]
}
/>
</EuiPageContentBody>
</EuiPageSection>
</EuiPageBody>
);
});
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import React, { FunctionComponent } from 'react';
import { EuiPageContent_Deprecated as EuiPageContent, EuiEmptyPrompt } from '@elastic/eui';
import { EuiPageTemplate } from '@elastic/eui';
import { i18n } from '@kbn/i18n';

import { DeprecationSource } from '../../../../common/types';
Expand All @@ -20,23 +20,18 @@ export const DeprecationsPageLoadingError: FunctionComponent<Props> = ({
deprecationSource,
message,
}) => (
<EuiPageContent
verticalPosition="center"
horizontalPosition="center"
<EuiPageTemplate.EmptyPrompt
color="danger"
iconType="warning"
alisonelizabeth marked this conversation as resolved.
Show resolved Hide resolved
data-test-subj="deprecationsPageLoadingError"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to retain this data-test-subj for tests

>
<EuiEmptyPrompt
iconType="warning"
title={
<h2>
{i18n.translate('xpack.upgradeAssistant.deprecationsPageLoadingError.title', {
defaultMessage: 'Could not retrieve {deprecationSource} deprecation issues',
values: { deprecationSource },
})}
</h2>
}
body={message}
/>
</EuiPageContent>
title={
<h2>
{i18n.translate('xpack.upgradeAssistant.deprecationsPageLoadingError.title', {
defaultMessage: 'Could not retrieve {deprecationSource} deprecation issues',
values: { deprecationSource },
})}
</h2>
}
body={message}
/>
);
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import React, { FunctionComponent } from 'react';

import { EuiLink, EuiEmptyPrompt } from '@elastic/eui';
import { EuiLink, EuiPageTemplate } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';

Expand Down Expand Up @@ -46,7 +46,7 @@ export const NoDeprecationsPrompt: FunctionComponent<Props> = ({
navigateToOverviewPage,
}) => {
return (
<EuiEmptyPrompt
<EuiPageTemplate.EmptyPrompt
iconType="check"
data-test-subj="noDeprecationsPrompt"
title={<h2>{i18nTexts.getEmptyPromptTitle(deprecationType)}</h2>}
Expand Down
Loading