github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 10:40:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

Update usage of deprecated EUI components in SharedUx plugins (#163560)

Browse source 
## Summary

Partially addresses https://github.com/elastic/kibana/issues/161422

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Vadim Kibana 2023-08-14 15:36:38 +02:00 • committed by GitHub
parent 1fe8ffd0c8
commit cc8e8fe6a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 53 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

6
examples/state_containers_examples/public/common/example_page.tsx
View file

@ -7,7 +7,7 @@
*/ */
import React, { PropsWithChildren } from 'react'; import React, { PropsWithChildren } from 'react';
import { EuiPage, EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui'; import { EuiPage, EuiPageTemplate, EuiSideNav } from '@elastic/eui';
import { CoreStart } from '@kbn/core/public'; import { CoreStart } from '@kbn/core/public';
export interface ExampleLink { export interface ExampleLink {
@ -53,9 +53,9 @@ export const StateContainersExamplesPage: React.FC<Props> = ({
}: PropsWithChildren<Props>) => { }: PropsWithChildren<Props>) => {
return ( return (
<EuiPage> <EuiPage>
<EuiPageSideBar> <EuiPageTemplate.Sidebar>
<SideNav navigateToApp={navigateToApp} exampleLinks={exampleLinks} /> <SideNav navigateToApp={navigateToApp} exampleLinks={exampleLinks} />
</EuiPageSideBar> </EuiPageTemplate.Sidebar>
{children} {children}
</EuiPage> </EuiPage>
); );

12
examples/state_containers_examples/public/todo/todo.tsx
View file

@ -15,8 +15,8 @@ import {
EuiCheckbox, EuiCheckbox,
EuiFieldText, EuiFieldText,
EuiPageBody, EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent, EuiPageTemplate,
EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageSection,
EuiPageHeader, EuiPageHeader,
EuiPageHeaderSection, EuiPageHeaderSection,
EuiSpacer, EuiSpacer,
@ -202,8 +202,8 @@ export const TodoAppPage: React.FC<{
</EuiText> </EuiText>
</EuiPageHeaderSection> </EuiPageHeaderSection>
</EuiPageHeader> </EuiPageHeader>
<EuiPageContent> <EuiPageTemplate.Section>
<EuiPageContentBody> <EuiPageSection>
<Routes> <Routes>
<Route path={'/completed'}> <Route path={'/completed'}>
<TodoApp filter={'completed'} stateContainer={stateContainer} /> <TodoApp filter={'completed'} stateContainer={stateContainer} />
@ -233,8 +233,8 @@ export const TodoAppPage: React.FC<{
<EuiButton onClick={() => setUseHashedUrl(!useHashedUrl)}> <EuiButton onClick={() => setUseHashedUrl(!useHashedUrl)}>
{useHashedUrl ? 'Use Expanded State' : 'Use Hashed State'} {useHashedUrl ? 'Use Expanded State' : 'Use Hashed State'}
</EuiButton> </EuiButton>
</EuiPageContentBody> </EuiPageSection>
</EuiPageContent> </EuiPageTemplate.Section>
</EuiPageBody> </EuiPageBody>
</Router> </Router>
); );

6
examples/state_containers_examples/public/with_data_services/app.tsx
View file

@ -13,7 +13,7 @@ import { Router } from '@kbn/shared-ux-router';
import { import {
EuiFieldText, EuiFieldText,
EuiPageBody, EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent, EuiPageTemplate,
EuiPageHeader, EuiPageHeader,
EuiText, EuiText,
EuiTitle, EuiTitle,
@ -99,7 +99,7 @@ export const App = ({
useDefaultBehaviors={true} useDefaultBehaviors={true}
showSaveQuery={true} showSaveQuery={true}
/> />
<EuiPageContent> <EuiPageTemplate.Section>
<EuiText> <EuiText>
<p>In addition to state from query bar also sync your arbitrary application state:</p> <p>In addition to state from query bar also sync your arbitrary application state:</p>
</EuiText> </EuiText>
@ -109,7 +109,7 @@ export const App = ({
onChange={(e) => appStateContainer.set({ ...appState, name: e.target.value })} onChange={(e) => appStateContainer.set({ ...appState, name: e.target.value })}
aria-label="My name" aria-label="My name"
/> />
</EuiPageContent> </EuiPageTemplate.Section>
</EuiPageBody> </EuiPageBody>
</Router> </Router>
</StateContainersExamplesPage> </StateContainersExamplesPage>

37
examples/ui_actions_explorer/public/app.tsx
View file

@ -9,18 +9,19 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { EuiPage } from '@elastic/eui'; import {
EuiPage,
import { EuiButton } from '@elastic/eui'; EuiButton,
import { EuiPageBody } from '@elastic/eui'; EuiPageBody,
import { EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui'; EuiPageTemplate,
import { EuiPageContentBody_Deprecated as EuiPageContentBody } from '@elastic/eui'; EuiPageSection,
import { EuiSpacer } from '@elastic/eui'; EuiSpacer,
import { EuiText } from '@elastic/eui'; EuiText,
import { EuiFieldText } from '@elastic/eui'; EuiFieldText,
import { EuiCallOut } from '@elastic/eui'; EuiCallOut,
import { EuiPageHeader } from '@elastic/eui'; EuiPageHeader,
import { EuiModalBody } from '@elastic/eui'; EuiModalBody,
} from '@elastic/eui';
import { toMountPoint } from '@kbn/kibana-react-plugin/public'; import { toMountPoint } from '@kbn/kibana-react-plugin/public';
import { UiActionsStart, createAction } from '@kbn/ui-actions-plugin/public'; import { UiActionsStart, createAction } from '@kbn/ui-actions-plugin/public';
import { AppMountParameters, OverlayStart } from '@kbn/core/public'; import { AppMountParameters, OverlayStart } from '@kbn/core/public';
@ -39,9 +40,11 @@ const ActionsExplorer = ({ uiActionsApi, openModal }: Props) => {
return ( return (
<EuiPage> <EuiPage>
<EuiPageBody> <EuiPageBody>
<EuiPageHeader>Ui Actions Explorer</EuiPageHeader> <EuiPageSection>
<EuiPageContent> <EuiPageHeader pageTitle={'Ui Actions Explorer'} />
<EuiPageContentBody> </EuiPageSection>
<EuiPageTemplate.Section>
<EuiPageSection>
<EuiText> <EuiText>
<p> <p>
By default there is a single action attached to the `HELLO_WORLD_TRIGGER`. Clicking By default there is a single action attached to the `HELLO_WORLD_TRIGGER`. Clicking
@ -105,8 +108,8 @@ const ActionsExplorer = ({ uiActionsApi, openModal }: Props) => {
<EuiSpacer /> <EuiSpacer />
<ContextMenuExamples /> <ContextMenuExamples />
</EuiPageContentBody> </EuiPageSection>
</EuiPageContent> </EuiPageTemplate.Section>
</EuiPageBody> </EuiPageBody>
</EuiPage> </EuiPage>
); );

25
examples/ui_actions_explorer/public/page.tsx
View file

@ -8,14 +8,7 @@
import React from 'react'; import React from 'react';
import { import { EuiPageBody, EuiPageTemplate, EuiPageSection, EuiPageHeader } from '@elastic/eui';
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageHeader,
EuiPageHeaderSection,
EuiTitle,
} from '@elastic/eui';
interface PageProps { interface PageProps {
title: string; title: string;
@ -25,16 +18,12 @@ interface PageProps {
export function Page({ title, children }: PageProps) { export function Page({ title, children }: PageProps) {
return ( return (
<EuiPageBody data-test-subj="searchTestPage"> <EuiPageBody data-test-subj="searchTestPage">
<EuiPageHeader> <EuiPageSection>
<EuiPageHeaderSection> <EuiPageHeader pageTitle={title} />
<EuiTitle size="l"> </EuiPageSection>
<h1>{title}</h1> <EuiPageTemplate.Section>
</EuiTitle> <EuiPageSection>{children}</EuiPageSection>
</EuiPageHeaderSection> </EuiPageTemplate.Section>
</EuiPageHeader>
<EuiPageContent>
<EuiPageContentBody>{children}</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody> </EuiPageBody>
); );
} }

22
src/plugins/share/public/url_service/redirect/components/page.tsx
View file

@ -8,9 +8,9 @@
import * as React from 'react'; import * as React from 'react';
import useObservable from 'react-use/lib/useObservable'; import useObservable from 'react-use/lib/useObservable';
import { EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui'; import { EuiPageTemplate } from '@elastic/eui';
import { ThemeServiceSetup } from '@kbn/core/public'; import { ThemeServiceSetup } from '@kbn/core/public';
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
import { CustomBrandingStart } from '@kbn/core-custom-branding-browser'; import { CustomBrandingStart } from '@kbn/core-custom-branding-browser';
import { Error } from './error'; import { Error } from './error';
import { RedirectManager } from '../redirect_manager'; import { RedirectManager } from '../redirect_manager';
@ -28,13 +28,8 @@ export const Page: React.FC<PageProps> = ({ manager, theme, customBranding }) =>
if (error) { if (error) {
return ( return (
<KibanaThemeProvider theme$={theme.theme$}> <KibanaThemeProvider theme={{ theme$: theme.theme$ }}>
<EuiPageTemplate <EuiPageTemplate>
template="centeredContent"
pageContentProps={{
color: 'danger',
}}
>
<Error error={error} /> <Error error={error} />
</EuiPageTemplate> </EuiPageTemplate>
</KibanaThemeProvider> </KibanaThemeProvider>
@ -42,13 +37,8 @@ export const Page: React.FC<PageProps> = ({ manager, theme, customBranding }) =>
} }
return ( return (
<KibanaThemeProvider theme$={theme.theme$}> <KibanaThemeProvider theme={{ theme$: theme.theme$ }}>
<EuiPageTemplate <EuiPageTemplate>
template="centeredContent"
pageContentProps={{
color: 'primary',
}}
>
<Spinner showPlainSpinner={Boolean(hasCustomBranding)} /> <Spinner showPlainSpinner={Boolean(hasCustomBranding)} />
</EuiPageTemplate> </EuiPageTemplate>
</KibanaThemeProvider> </KibanaThemeProvider>

1
src/plugins/share/tsconfig.json
View file

@ -14,6 +14,7 @@
"@kbn/config-schema", "@kbn/config-schema",
"@kbn/core-custom-branding-browser", "@kbn/core-custom-branding-browser",
"@kbn/core-saved-objects-utils-server", "@kbn/core-saved-objects-utils-server",
"@kbn/react-kibana-context-theme",
], ],
"exclude": [ "exclude": [
"target/**/*", "target/**/*",

27
x-pack/examples/ui_actions_enhanced_examples/public/components/page/index.tsx
View file

@ -6,14 +6,7 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import { import { EuiPageBody, EuiPageTemplate, EuiPageSection, EuiPageHeader } from '@elastic/eui';
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageHeader,
EuiPageHeaderSection,
EuiTitle,
} from '@elastic/eui';
export interface PageProps { export interface PageProps {
title?: React.ReactNode; title?: React.ReactNode;
@ -22,18 +15,12 @@ export interface PageProps {
export const Page: React.FC<PageProps> = ({ title = 'Untitled', children }) => { export const Page: React.FC<PageProps> = ({ title = 'Untitled', children }) => {
return ( return (
<EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}> <EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}>
<EuiPageHeader> <EuiPageSection>
<EuiPageHeaderSection> <EuiPageHeader pageTitle={title} />
<EuiTitle size="l"> </EuiPageSection>
<h1>{title}</h1> <EuiPageTemplate.Section>
</EuiTitle> <EuiPageSection style={{ maxWidth: 800, margin: '0 auto' }}>{children}</EuiPageSection>
</EuiPageHeaderSection> </EuiPageTemplate.Section>
</EuiPageHeader>
<EuiPageContent>
<EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
{children}
</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody> </EuiPageBody>
); );
}; };