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

View file

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

View file

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

View file

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

View file

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