[Observability] Fixes border shadow and other enhancements (#102072)

* [Observability] Fixes border shadow and other enhancements

* Update x-pack/plugins/observability/public/components/app/section/index.tsx

Co-authored-by: Cauê Marcondes <55978943+cauemarcondes@users.noreply.github.com>

* [Observability] Remove unused import and formatting

Co-authored-by: Cauê Marcondes <55978943+cauemarcondes@users.noreply.github.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Casper Hübertz 2021-06-15 10:12:45 +02:00 committed by GitHub
parent e418a895c3
commit 92b6535df2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -5,7 +5,7 @@
* 2.0. * 2.0.
*/ */
import { EuiAccordion, EuiLink, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui'; import { EuiAccordion, EuiPanel, EuiSpacer, EuiTitle, EuiButton } from '@elastic/eui';
import React from 'react'; import React from 'react';
import { ErrorPanel } from './error_panel'; import { ErrorPanel } from './error_panel';
import { usePluginContext } from '../../../hooks/use_plugin_context'; import { usePluginContext } from '../../../hooks/use_plugin_context';
@ -25,36 +25,29 @@ interface Props {
export function SectionContainer({ title, appLink, children, hasError }: Props) { export function SectionContainer({ title, appLink, children, hasError }: Props) {
const { core } = usePluginContext(); const { core } = usePluginContext();
return ( return (
<EuiAccordion <EuiPanel>
initialIsOpen <EuiAccordion
id={title} initialIsOpen
buttonContentClassName="accordion-button" id={title}
buttonContent={ buttonContentClassName="accordion-button"
<EuiTitle size="s"> buttonContent={
<h5>{title}</h5> <EuiTitle size="s">
</EuiTitle> <h5>{title}</h5>
} </EuiTitle>
extraAction={ }
appLink?.href && ( extraAction={
<EuiLink href={core.http.basePath.prepend(appLink.href)}> appLink?.href && (
<EuiText size="s">{appLink.label}</EuiText> <EuiButton href={core.http.basePath.prepend(appLink.href)}>{appLink.label}</EuiButton>
</EuiLink> )
) }
} >
> <>
<> <EuiSpacer size="s" />
<EuiSpacer size="s" /> <EuiPanel hasShadow={false} paddingSize="s">
<EuiPanel hasShadow> {hasError ? <ErrorPanel /> : <>{children}</>}
{hasError ? ( </EuiPanel>
<ErrorPanel /> </>
) : ( </EuiAccordion>
<> </EuiPanel>
<EuiSpacer size="s" />
{children}
</>
)}
</EuiPanel>
</>
</EuiAccordion>
); );
} }