🌊 Streams: Remove back button (#212670)

The back button takes away a ton of vertical space and doesn't provide
that much value. This PR removes it and also reduced the vertical
padding of the header in accordance with the designs:
<img width="550" alt="Screenshot 2025-02-27 at 17 09 10"
src="https://github.com/user-attachments/assets/88969ecd-071a-45b4-9a8e-bad90f00dc4e"
/>
<img width="867" alt="Screenshot 2025-02-27 at 17 09 20"
src="https://github.com/user-attachments/assets/a174191b-b79d-493c-9c27-6566ac801d60"
/>
This commit is contained in:
Joe Reuter 2025-02-28 09:07:34 +01:00 committed by GitHub
parent 14067ca469
commit 91b1ac0305
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 3 additions and 19 deletions

View file

@ -4,7 +4,7 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiPanel, EuiBadge } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiBadge } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import { css } from '@emotion/css';
@ -90,21 +90,8 @@ export function EntityDetailViewWithoutParams({
max-width: 100%;
`}
>
<EuiFlexItem grow={false}>
<EuiPanel color="transparent">
<EuiLink data-test-subj="streamsEntityDetailViewGoBackHref" href={router.link('/')}>
<EuiFlexGroup direction="row" alignItems="center" gutterSize="s">
<EuiIcon type="arrowLeft" />
{i18n.translate('xpack.streams.entityDetailView.goBackLinkLabel', {
defaultMessage: 'Back',
})}
</EuiFlexGroup>
</EuiLink>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<StreamsAppPageHeader
verticalPaddingSize="none"
title={
<StreamsAppPageHeaderTitle
title={

View file

@ -11,20 +11,17 @@ import React from 'react';
export function StreamsAppPageHeader({
title,
children,
verticalPaddingSize = 'l',
}: {
title: React.ReactNode;
children?: React.ReactNode;
verticalPaddingSize?: 'none' | 'l';
}) {
const theme = useEuiTheme().euiTheme;
return (
<EuiFlexGroup direction="column" gutterSize="s">
<EuiFlexGroup direction="column" gutterSize="none">
<EuiPageHeader
className={css`
padding: ${verticalPaddingSize === 'none' ? 0 : theme.size[verticalPaddingSize]}
${theme.size.l};
padding: ${theme.size.m} ${theme.size.l};
`}
>
{title}