remove deprecated components, improve spacing and title (#163378)

## Summary

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

New look:

<img width="1645" alt="image"
src="9da0ae4a-9f6e-4744-80c1-9a13b6d23d1c">
This commit is contained in:
Vadim Kibana 2023-08-08 18:46:40 +02:00 committed by GitHub
parent a69870b950
commit 346fc7ece6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 45 additions and 31 deletions

View file

@ -11,13 +11,14 @@ import {
EuiFlexItem, EuiFlexItem,
EuiFlexGroup, EuiFlexGroup,
EuiPageBody, EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent, EuiPageTemplate,
EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageSection,
EuiPageHeader, EuiPageHeader,
EuiPageHeaderSection, EuiPageHeaderSection,
EuiPanel, EuiPanel,
EuiText, EuiText,
EuiTitle, EuiTitle,
EuiSpacer,
} from '@elastic/eui'; } from '@elastic/eui';
import { ExpressionsStart } from '@kbn/expressions-plugin/public'; import { ExpressionsStart } from '@kbn/expressions-plugin/public';
import { UiActionsStart } from '@kbn/ui-actions-plugin/public'; import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
@ -55,8 +56,8 @@ export function ActionsExpressionsExample({ expressions, actions }: Props) {
</EuiTitle> </EuiTitle>
</EuiPageHeaderSection> </EuiPageHeaderSection>
</EuiPageHeader> </EuiPageHeader>
<EuiPageContent data-test-subj="expressionsActionsTest"> <EuiPageTemplate.Section data-test-subj="expressionsActionsTest">
<EuiPageContentBody> <EuiPageSection>
<EuiFlexGroup> <EuiFlexGroup>
<EuiFlexItem> <EuiFlexItem>
<EuiText> <EuiText>
@ -67,6 +68,8 @@ export function ActionsExpressionsExample({ expressions, actions }: Props) {
</EuiFlexItem> </EuiFlexItem>
</EuiFlexGroup> </EuiFlexGroup>
<EuiSpacer />
<EuiFlexGroup gutterSize="l"> <EuiFlexGroup gutterSize="l">
<EuiFlexItem> <EuiFlexItem>
<EuiPanel data-test-subj="expressionEditor" paddingSize="none" role="figure"> <EuiPanel data-test-subj="expressionEditor" paddingSize="none" role="figure">
@ -86,8 +89,8 @@ export function ActionsExpressionsExample({ expressions, actions }: Props) {
</EuiPanel> </EuiPanel>
</EuiFlexItem> </EuiFlexItem>
</EuiFlexGroup> </EuiFlexGroup>
</EuiPageContentBody> </EuiPageSection>
</EuiPageContent> </EuiPageTemplate.Section>
</EuiPageBody> </EuiPageBody>
); );
} }

View file

@ -11,13 +11,14 @@ import {
EuiFlexItem, EuiFlexItem,
EuiFlexGroup, EuiFlexGroup,
EuiPageBody, EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent, EuiPageTemplate,
EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageSection,
EuiPageHeader, EuiPageHeader,
EuiPageHeaderSection, EuiPageHeaderSection,
EuiPanel, EuiPanel,
EuiText, EuiText,
EuiTitle, EuiTitle,
EuiSpacer,
} from '@elastic/eui'; } from '@elastic/eui';
import { ExpressionsStart } from '@kbn/expressions-plugin/public'; import { ExpressionsStart } from '@kbn/expressions-plugin/public';
import { UiActionsStart } from '@kbn/ui-actions-plugin/public'; import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
@ -54,8 +55,8 @@ export function ActionsExpressionsExample2({ expressions, actions }: Props) {
</EuiTitle> </EuiTitle>
</EuiPageHeaderSection> </EuiPageHeaderSection>
</EuiPageHeader> </EuiPageHeader>
<EuiPageContent> <EuiPageTemplate.Section>
<EuiPageContentBody data-test-subj="expressionsVariablesTest"> <EuiPageSection data-test-subj="expressionsVariablesTest">
<EuiFlexGroup> <EuiFlexGroup>
<EuiFlexItem> <EuiFlexItem>
<EuiText> <EuiText>
@ -65,6 +66,8 @@ export function ActionsExpressionsExample2({ expressions, actions }: Props) {
</EuiFlexItem> </EuiFlexItem>
</EuiFlexGroup> </EuiFlexGroup>
<EuiSpacer />
<EuiFlexGroup gutterSize="l"> <EuiFlexGroup gutterSize="l">
<EuiFlexItem> <EuiFlexItem>
<EuiPanel data-test-subj="expressionEditor" paddingSize="none" role="figure"> <EuiPanel data-test-subj="expressionEditor" paddingSize="none" role="figure">
@ -86,8 +89,8 @@ export function ActionsExpressionsExample2({ expressions, actions }: Props) {
</EuiPanel> </EuiPanel>
</EuiFlexItem> </EuiFlexItem>
</EuiFlexGroup> </EuiFlexGroup>
</EuiPageContentBody> </EuiPageSection>
</EuiPageContent> </EuiPageTemplate.Section>
</EuiPageBody> </EuiPageBody>
); );
} }

View file

@ -12,8 +12,8 @@ import {
EuiPage, EuiPage,
EuiPageHeader, EuiPageHeader,
EuiPageBody, EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent, EuiPageTemplate,
EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageSection,
EuiSpacer, EuiSpacer,
EuiText, EuiText,
EuiLink, EuiLink,
@ -55,9 +55,11 @@ const ExpressionsExplorer = ({
<KibanaReactContextProvider> <KibanaReactContextProvider>
<EuiPage> <EuiPage>
<EuiPageBody> <EuiPageBody>
<EuiPageHeader>Expressions Explorer</EuiPageHeader> <EuiPageSection>
<EuiPageContent> <EuiPageHeader pageTitle="Expressions Explorer" />
<EuiPageContentBody> </EuiPageSection>
<EuiPageTemplate.Section>
<EuiPageSection>
<EuiText> <EuiText>
<p> <p>
There are a couple of ways to run the expressions. Below some of the options are There are a couple of ways to run the expressions. Below some of the options are
@ -87,8 +89,8 @@ const ExpressionsExplorer = ({
<EuiSpacer /> <EuiSpacer />
<ActionsExpressionsExample2 expressions={expressions} actions={actions} /> <ActionsExpressionsExample2 expressions={expressions} actions={actions} />
</EuiPageContentBody> </EuiPageSection>
</EuiPageContent> </EuiPageTemplate.Section>
</EuiPageBody> </EuiPageBody>
</EuiPage> </EuiPage>
</KibanaReactContextProvider> </KibanaReactContextProvider>

View file

@ -11,14 +11,15 @@ import {
EuiFlexItem, EuiFlexItem,
EuiFlexGroup, EuiFlexGroup,
EuiPageBody, EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent, EuiPageTemplate,
EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageSection,
EuiPageHeader, EuiPageHeader,
EuiPageHeaderSection, EuiPageHeaderSection,
EuiPanel, EuiPanel,
EuiText, EuiText,
EuiTitle, EuiTitle,
EuiButton, EuiButton,
EuiSpacer,
} from '@elastic/eui'; } from '@elastic/eui';
import { ExpressionsStart } from '@kbn/expressions-plugin/public'; import { ExpressionsStart } from '@kbn/expressions-plugin/public';
import { Start as InspectorStart } from '@kbn/inspector-plugin/public'; import { Start as InspectorStart } from '@kbn/inspector-plugin/public';
@ -49,8 +50,8 @@ export function RenderExpressionsExample({ expressions, inspector }: Props) {
</EuiTitle> </EuiTitle>
</EuiPageHeaderSection> </EuiPageHeaderSection>
</EuiPageHeader> </EuiPageHeader>
<EuiPageContent> <EuiPageTemplate.Section>
<EuiPageContentBody> <EuiPageSection>
<EuiFlexGroup> <EuiFlexGroup>
<EuiFlexItem> <EuiFlexItem>
<EuiText> <EuiText>
@ -69,6 +70,8 @@ export function RenderExpressionsExample({ expressions, inspector }: Props) {
</EuiFlexItem> </EuiFlexItem>
</EuiFlexGroup> </EuiFlexGroup>
<EuiSpacer />
<EuiFlexGroup gutterSize="l"> <EuiFlexGroup gutterSize="l">
<EuiFlexItem> <EuiFlexItem>
<EuiPanel data-test-subj="expressionEditor" paddingSize="none" role="figure"> <EuiPanel data-test-subj="expressionEditor" paddingSize="none" role="figure">
@ -90,8 +93,8 @@ export function RenderExpressionsExample({ expressions, inspector }: Props) {
</EuiPanel> </EuiPanel>
</EuiFlexItem> </EuiFlexItem>
</EuiFlexGroup> </EuiFlexGroup>
</EuiPageContentBody> </EuiPageSection>
</EuiPageContent> </EuiPageTemplate.Section>
</EuiPageBody> </EuiPageBody>
); );
} }

View file

@ -13,14 +13,15 @@ import {
EuiFlexItem, EuiFlexItem,
EuiFlexGroup, EuiFlexGroup,
EuiPageBody, EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent, EuiPageTemplate,
EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageSection,
EuiPageHeader, EuiPageHeader,
EuiPageHeaderSection, EuiPageHeaderSection,
EuiPanel, EuiPanel,
EuiText, EuiText,
EuiTitle, EuiTitle,
EuiButton, EuiButton,
EuiSpacer,
} from '@elastic/eui'; } from '@elastic/eui';
import { ExpressionsStart } from '@kbn/expressions-plugin/public'; import { ExpressionsStart } from '@kbn/expressions-plugin/public';
import { Adapters, Start as InspectorStart } from '@kbn/inspector-plugin/public'; import { Adapters, Start as InspectorStart } from '@kbn/inspector-plugin/public';
@ -64,8 +65,8 @@ export function RunExpressionsExample({ expressions, inspector }: Props) {
</EuiTitle> </EuiTitle>
</EuiPageHeaderSection> </EuiPageHeaderSection>
</EuiPageHeader> </EuiPageHeader>
<EuiPageContent> <EuiPageTemplate.Section>
<EuiPageContentBody> <EuiPageSection>
<EuiFlexGroup> <EuiFlexGroup>
<EuiFlexItem> <EuiFlexItem>
<EuiText> <EuiText>
@ -84,6 +85,8 @@ export function RunExpressionsExample({ expressions, inspector }: Props) {
</EuiFlexItem> </EuiFlexItem>
</EuiFlexGroup> </EuiFlexGroup>
<EuiSpacer />
<EuiFlexGroup gutterSize="l"> <EuiFlexGroup gutterSize="l">
<EuiFlexItem> <EuiFlexItem>
<EuiPanel data-test-subj="expressionEditor" paddingSize="none" role="figure"> <EuiPanel data-test-subj="expressionEditor" paddingSize="none" role="figure">
@ -104,8 +107,8 @@ export function RunExpressionsExample({ expressions, inspector }: Props) {
</EuiPanel> </EuiPanel>
</EuiFlexItem> </EuiFlexItem>
</EuiFlexGroup> </EuiFlexGroup>
</EuiPageContentBody> </EuiPageSection>
</EuiPageContent> </EuiPageTemplate.Section>
</EuiPageBody> </EuiPageBody>
); );
} }