github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-28 11:05:39 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Security Solution] expandable flyout - fix footer not always visible (#167074)

Browse source
This commit is contained in:
Philippe Oberti 2023-09-28 00:01:28 +02:00 • committed by GitHub
parent c84248c87d
commit 90a8b32393
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 30 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/kbn-expandable-flyout/src/components/left_section.tsx
View file

@ -6,7 +6,7 @@
* Side Public License, v 1. * Side Public License, v 1.
*/ */
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { EuiFlexItem } from '@elastic/eui';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { LEFT_SECTION } from './test_ids'; import { LEFT_SECTION } from './test_ids';
@ -26,12 +26,12 @@ interface LeftSectionProps {
*/ */
export const LeftSection: React.FC<LeftSectionProps> = ({ component, width }: LeftSectionProps) => { export const LeftSection: React.FC<LeftSectionProps> = ({ component, width }: LeftSectionProps) => {
const style = useMemo<React.CSSProperties>( const style = useMemo<React.CSSProperties>(
() => ({ height: '100%', width: `${width * 100}%`, overflowY: 'scroll' }), () => ({ height: '100%', width: `${width * 100}%` }),
[width] [width]
); );
return ( return (
<EuiFlexItem grow data-test-subj={LEFT_SECTION} style={style}> <EuiFlexItem grow data-test-subj={LEFT_SECTION} style={style}>
<EuiFlexGroup direction="column">{component}</EuiFlexGroup> {component}
</EuiFlexItem> </EuiFlexItem>
); );
}; };

6
packages/kbn-expandable-flyout/src/components/right_section.tsx
View file

@ -6,7 +6,7 @@
* Side Public License, v 1. * Side Public License, v 1.
*/ */
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { EuiFlexItem } from '@elastic/eui';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { RIGHT_SECTION } from './test_ids'; import { RIGHT_SECTION } from './test_ids';
@ -29,13 +29,13 @@ export const RightSection: React.FC<RightSectionProps> = ({
width, width,
}: RightSectionProps) => { }: RightSectionProps) => {
const style = useMemo<React.CSSProperties>( const style = useMemo<React.CSSProperties>(
() => ({ height: '100%', width: `${width * 100}%`, overflowY: 'scroll' }), () => ({ height: '100%', width: `${width * 100}%` }),
[width] [width]
); );
return ( return (
<EuiFlexItem grow={false} style={style} data-test-subj={RIGHT_SECTION}> <EuiFlexItem grow={false} style={style} data-test-subj={RIGHT_SECTION}>
<EuiFlexGroup direction="column">{component}</EuiFlexGroup> {component}
</EuiFlexItem> </EuiFlexItem>
); );
}; };

13
x-pack/plugins/security_solution/public/flyout/left/content.tsx
View file

@ -5,9 +5,10 @@
* 2.0. * 2.0.
*/ */
import { EuiFlyoutBody } from '@elastic/eui'; import { EuiFlyoutBody, useEuiBackgroundColor } from '@elastic/eui';
import type { VFC } from 'react'; import type { VFC } from 'react';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { css } from '@emotion/react';
import type { LeftPanelPaths } from '.'; import type { LeftPanelPaths } from '.';
import { tabs } from './tabs'; import { tabs } from './tabs';
@ -27,7 +28,15 @@ export const PanelContent: VFC<PanelContentProps> = ({ selectedTabId }) => {
return tabs.filter((tab) => tab.visible).find((tab) => tab.id === selectedTabId)?.content; return tabs.filter((tab) => tab.visible).find((tab) => tab.id === selectedTabId)?.content;
}, [selectedTabId]); }, [selectedTabId]);
return <EuiFlyoutBody>{selectedTabContent}</EuiFlyoutBody>; return (
<EuiFlyoutBody
css={css`
background-color: ${useEuiBackgroundColor('subdued')};
`}
>
{selectedTabContent}
</EuiFlyoutBody>
);
}; };
PanelContent.displayName = 'PanelContent'; PanelContent.displayName = 'PanelContent';

13
x-pack/plugins/security_solution/public/flyout/left/header.tsx
View file

@ -5,7 +5,7 @@
* 2.0. * 2.0.
*/ */
import { EuiFlyoutHeader, EuiTab, EuiTabs } from '@elastic/eui'; import { EuiFlyoutHeader, EuiTab, EuiTabs, useEuiBackgroundColor } from '@elastic/eui';
import type { VFC } from 'react'; import type { VFC } from 'react';
import React, { memo } from 'react'; import React, { memo } from 'react';
import { css } from '@emotion/react'; import { css } from '@emotion/react';
@ -44,14 +44,15 @@ export const PanelHeader: VFC<PanelHeaderProps> = memo(({ selectedTabId, setSele
)); ));
return ( return (
<EuiFlyoutHeader hasBorder> <EuiFlyoutHeader
<EuiTabs hasBorder
size="l"
expand
css={css` css={css`
margin-bottom: -25px; background-color: ${useEuiBackgroundColor('subdued')};
padding-bottom: 0 !important;
border-block-end: none !important;
`} `}
> >
<EuiTabs size="l" expand>
{renderTabs} {renderTabs}
</EuiTabs> </EuiTabs>
</EuiFlyoutHeader> </EuiFlyoutHeader>

11
x-pack/plugins/security_solution/public/flyout/left/index.tsx
View file

@ -7,8 +7,6 @@
import type { FC } from 'react'; import type { FC } from 'react';
import React, { memo, useMemo } from 'react'; import React, { memo, useMemo } from 'react';
import { useEuiBackgroundColor } from '@elastic/eui';
import { css } from '@emotion/react';
import type { FlyoutPanelProps, PanelPath } from '@kbn/expandable-flyout'; import type { FlyoutPanelProps, PanelPath } from '@kbn/expandable-flyout';
import { useExpandableFlyoutContext } from '@kbn/expandable-flyout'; import { useExpandableFlyoutContext } from '@kbn/expandable-flyout';
import { PanelHeader } from './header'; import { PanelHeader } from './header';
@ -60,15 +58,10 @@ export const LeftPanel: FC<Partial<LeftPanelProps>> = memo(({ path }) => {
}; };
return ( return (
<div <>
css={css`
height: 100%;
background: ${useEuiBackgroundColor('subdued')};
`}
>
<PanelHeader selectedTabId={selectedTabId} setSelectedTabId={setSelectedTabId} /> <PanelHeader selectedTabId={selectedTabId} setSelectedTabId={setSelectedTabId} />
<PanelContent selectedTabId={selectedTabId} /> <PanelContent selectedTabId={selectedTabId} />
</div> </>
); );
}); });

7
x-pack/plugins/security_solution/public/flyout/right/header.tsx
View file

@ -49,12 +49,7 @@ export const PanelHeader: VFC<PanelHeaderProps> = memo(
)); ));
return ( return (
<EuiFlyoutHeader <EuiFlyoutHeader hasBorder>
hasBorder
css={css`
margin-bottom: ${flyoutIsExpandable ? '-24px' : '0px'};
`}
>
{flyoutIsExpandable && ( {flyoutIsExpandable && (
<div <div
// moving the buttons up in the header // moving the buttons up in the header