mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
Upgrade EUI to v88.2.0 (#165790)
Major changes in this PR:
## Removal of `.euiAccordionForm` classNames
EUI is moving away from providing global `classNames` styles for
components - where possible, we want to provide props as opposed to
styles. As part of our ongoing Emotion conversion, we have removed the
following `EuiAccordion`-specific classes:
- `.euiAccordionForm` (replaced with `borders="horizontal"`)
- `.euiAccordionForm__button` (replaced with `buttonProps={{
paddingSize: 'm' }}`)
- `.euiAccordionForm__title` styles - this was only removing text
underlines on hover. If still desired, re-add this behavior with custom
CSS.
- `.euiAccordionForm__extraAction` - there was 1 usage of this in Kibana
in Watcher, which was converted to one-off custom inline Emotion CSS
instead.
This change accounts for the first 3-4 commits in the PR. ⚠️ If your
team was one of the 4-5 teams affected by this change, we would greatly
appreciate your help QAing the UI and ensuring it looks as desired/the
same as before.
## Fixed `EuiHeader` affordance
The Sass `euiHeaderAffordForFixed` mixin has been deprecated and
replaced by a global `--euiFixedHeadersOffset` CSS variable. This
variable updates independently and dynamically based on the number of
fixed headers on the page, and is usable by both Sass and Emotion. All
underlying EUI components that need to account for fixed headers (such
as flyouts and page sidebars/templates) have been updated to consume
this new variable.
This change cleans up a great deal of Sass code, and is incidentally
extremely timely with serverless efforts (as serverless has only one
fixed header and the classic Kibana chrome has two).
This change constitutes a majority of the commits in this PR, which
involve removing various fixed Sass header variables and replacing them
with the new CSS variable. I strongly recommend [reviewing changes by
commit if
possible](https://github.com/elastic/kibana/pull/165790/commits) to see
any associated changes that make sense together with any of your touched
file(s). ⚠️ If your team was affected by this change (primarily due to
custom header layouts), your help would be greatly appreciated QAing
your app to ensure no UI regressions in that regard have occurred.
---
`v88.1.0`⏩ `v88.2.0`
## [`88.2.0`](https://github.com/elastic/eui/tree/v88.2.0)
- Added a new `EuiTextTruncate` component, which provides custom
truncation options beyond native CSS
([#7116](https://github.com/elastic/eui/pull/7116))
- Fixed-positioned `EuiHeader`s now set a global CSS
`--euiFixedHeadersOffset` variable, which updates dynamically based on
the number of fixed headers on the page.
([#7144](https://github.com/elastic/eui/pull/7144))
- `EuiFlyout`s now dynamically set their position, height, and mask
based on the number of fixed headers on the page.
([#7144](https://github.com/elastic/eui/pull/7144))
- Sticky-positioned `EuiPageSidebar`s now dynamically set their position
and height based on the number of fixed headers on the page. This can
still be overridden via the `sticky.offset` prop if needed.
([#7144](https://github.com/elastic/eui/pull/7144))
- `EuiPageTemplate` now dynamically offsets content from any fixed
headers on the page. This can still be overridden via the `offset` prop
if needed. ([#7144](https://github.com/elastic/eui/pull/7144))
- Updated `EuiAccordion` with a new `borders` prop
([#7154](https://github.com/elastic/eui/pull/7154))
- Updated `EuiAccordion` with a new `buttonProps.paddingSize` prop
([#7154](https://github.com/elastic/eui/pull/7154))
**Deprecations**
- Deprecated the Sass `euiHeaderAffordForFixed` mixin. Use the new
global CSS `var(--euiFixedHeadersOffset)` variable instead.
([#7144](https://github.com/elastic/eui/pull/7144))
**CSS-in-JS conversions**
- Except for generic CSS utilities, EUI is moving away from providing
global `classNames` that are component-specific. As part of this effort,
we have removed the following `EuiAccordion`-specific classes:
([#7154](https://github.com/elastic/eui/pull/7154))
- Removed `.euiAccordionForm` styles. Use the `borders="horizontal"`
prop instead
- Removed `.euiAccordionForm__button` styles. Use the `buttonProps={{
paddingSize: 'm' }}` prop instead
- Removed `.euiAccordionForm__extraAction` styles. Convert this to your
own custom CSS if necessary.
- Removed `.euiAccordionForm__title` styles. Convert this to your own
custom CSS if necessary.
---------
Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
This commit is contained in:
Cee Chen
GitHub
parent
fb5f8e379b
commit
51569b4c93
43 changed files with 162 additions and 268 deletions
|
|
@ -100,7 +100,7 @@
|
|||
"@elastic/datemath": "5.0.3",
|
||||
"@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1",
|
||||
"@elastic/ems-client": "8.4.0",
|
||||
"@elastic/eui": "88.1.0",
|
||||
"@elastic/eui": "88.2.0",
|
||||
"@elastic/filesaver": "1.1.2",
|
||||
"@elastic/node-crypto": "1.2.1",
|
||||
"@elastic/numeral": "^2.5.1",
|
||||
|
|
|
|||
|
|
@ -147,16 +147,15 @@ describe('start', () => {
|
|||
const promise = chrome.getBodyClasses$().pipe(toArray()).toPromise();
|
||||
service.stop();
|
||||
await expect(promise).resolves.toMatchInlineSnapshot(`
|
||||
Array [
|
||||
Array [
|
||||
"kbnBody",
|
||||
"kbnBody--classicLayout",
|
||||
"kbnBody--noHeaderBanner",
|
||||
"kbnBody--chromeHidden",
|
||||
"kbnVersion-1-2-3",
|
||||
],
|
||||
]
|
||||
`);
|
||||
Array [
|
||||
Array [
|
||||
"kbnBody",
|
||||
"kbnBody--noHeaderBanner",
|
||||
"kbnBody--chromeHidden",
|
||||
"kbnVersion-1-2-3",
|
||||
],
|
||||
]
|
||||
`);
|
||||
});
|
||||
|
||||
it('strips off "snapshot" from the kibana version if present', async () => {
|
||||
|
|
@ -166,16 +165,15 @@ describe('start', () => {
|
|||
const promise = chrome.getBodyClasses$().pipe(toArray()).toPromise();
|
||||
service.stop();
|
||||
await expect(promise).resolves.toMatchInlineSnapshot(`
|
||||
Array [
|
||||
Array [
|
||||
"kbnBody",
|
||||
"kbnBody--classicLayout",
|
||||
"kbnBody--noHeaderBanner",
|
||||
"kbnBody--chromeHidden",
|
||||
"kbnVersion-8-0-0",
|
||||
],
|
||||
]
|
||||
`);
|
||||
Array [
|
||||
Array [
|
||||
"kbnBody",
|
||||
"kbnBody--noHeaderBanner",
|
||||
"kbnBody--chromeHidden",
|
||||
"kbnVersion-8-0-0",
|
||||
],
|
||||
]
|
||||
`);
|
||||
});
|
||||
|
||||
it('does not add legacy browser warning if browser supports CSP', async () => {
|
||||
|
|
|
|||
|
|
@ -207,7 +207,6 @@ export class ChromeService {
|
|||
map(([headerBanner, isVisible, chromeStyle]) => {
|
||||
return [
|
||||
'kbnBody',
|
||||
chromeStyle === 'project' ? 'kbnBody--projectLayout' : 'kbnBody--classicLayout',
|
||||
headerBanner ? 'kbnBody--hasHeaderBanner' : 'kbnBody--noHeaderBanner',
|
||||
isVisible ? 'kbnBody--chromeVisible' : 'kbnBody--chromeHidden',
|
||||
getKbnVersionClass(),
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ Array [
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-isCollapsible-light"
|
||||
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiAccordion-euiCollapsibleNavGroup-isCollapsible-light"
|
||||
data-test-subj="collapsibleNavGroup-recentlyViewed"
|
||||
>
|
||||
<div
|
||||
|
|
@ -223,7 +223,7 @@ Array [
|
|||
class="euiFlexItem kbnCollapsibleNav__solutions emotion-euiFlexItem-grow-1"
|
||||
>
|
||||
<div
|
||||
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-isCollapsible-none"
|
||||
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiAccordion-euiCollapsibleNavGroup-isCollapsible-none"
|
||||
data-test-subj="collapsibleNavGroup-kibana"
|
||||
>
|
||||
<div
|
||||
|
|
@ -355,7 +355,7 @@ Array [
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-isCollapsible-none"
|
||||
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiAccordion-euiCollapsibleNavGroup-isCollapsible-none"
|
||||
data-test-subj="collapsibleNavGroup-observability"
|
||||
>
|
||||
<div
|
||||
|
|
@ -470,7 +470,7 @@ Array [
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-isCollapsible-none"
|
||||
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiAccordion-euiCollapsibleNavGroup-isCollapsible-none"
|
||||
data-test-subj="collapsibleNavGroup-securitySolution"
|
||||
>
|
||||
<div
|
||||
|
|
@ -568,7 +568,7 @@ Array [
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-isCollapsible-none"
|
||||
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiAccordion-euiCollapsibleNavGroup-isCollapsible-none"
|
||||
data-test-subj="collapsibleNavGroup-management"
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ Array [
|
|||
<div
|
||||
class="euiHeader header__firstBar emotion-euiHeader-fixed-dark"
|
||||
data-fixed-header="true"
|
||||
style="inset-block-start: 0px;"
|
||||
>
|
||||
<div
|
||||
class="euiHeaderSection emotion-euiHeaderSection"
|
||||
|
|
@ -148,6 +149,7 @@ Array [
|
|||
<div
|
||||
class="euiHeader header__secondBar emotion-euiHeader-fixed-default"
|
||||
data-fixed-header="true"
|
||||
style="inset-block-start: 48px;"
|
||||
>
|
||||
<div
|
||||
class="euiHeaderSection emotion-euiHeaderSection"
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export const AppMenuBar = ({ headerActionMenuMounter }: AppMenuBarProps) => {
|
|||
/* fixates the elements position in the viewport, removes the element from the flow of the page */
|
||||
position: sticky;
|
||||
/* position below the primary fixed EuiHeader in the viewport */
|
||||
top: 48px;
|
||||
top: var(--euiFixedHeadersOffset, 0);
|
||||
`}
|
||||
>
|
||||
<HeaderActionMenu mounter={headerActionMenuMounter} />
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ Object {
|
|||
data-test-subj="ExceptionItemCardCommentsContainer"
|
||||
>
|
||||
<div
|
||||
class="euiAccordion"
|
||||
class="euiAccordion emotion-euiAccordion"
|
||||
data-test-subj="exceptionItemCardComments"
|
||||
>
|
||||
<div
|
||||
|
|
@ -209,7 +209,7 @@ Object {
|
|||
data-test-subj="ExceptionItemCardCommentsContainer"
|
||||
>
|
||||
<div
|
||||
class="euiAccordion"
|
||||
class="euiAccordion emotion-euiAccordion"
|
||||
data-test-subj="exceptionItemCardComments"
|
||||
>
|
||||
<div
|
||||
|
|
@ -404,7 +404,7 @@ Object {
|
|||
data-test-subj="ExceptionItemCardCommentsContainer"
|
||||
>
|
||||
<div
|
||||
class="euiAccordion euiAccordion-isOpen"
|
||||
class="euiAccordion euiAccordion-isOpen emotion-euiAccordion"
|
||||
data-test-subj="exceptionItemCardComments"
|
||||
>
|
||||
<div
|
||||
|
|
@ -542,7 +542,7 @@ Object {
|
|||
data-test-subj="ExceptionItemCardCommentsContainer"
|
||||
>
|
||||
<div
|
||||
class="euiAccordion euiAccordion-isOpen"
|
||||
class="euiAccordion euiAccordion-isOpen emotion-euiAccordion"
|
||||
data-test-subj="exceptionItemCardComments"
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ const DefaultGroupPanelRenderer = ({
|
|||
<div>
|
||||
<EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
|
||||
<EuiFlexItem grow={false} className="eui-textTruncate">
|
||||
<EuiTitle size="xs" className="euiAccordionForm__title">
|
||||
<EuiTitle size="xs">
|
||||
<h4 className="eui-textTruncate" title={title}>
|
||||
{title}
|
||||
</h4>
|
||||
|
|
|
|||
|
|
@ -66,7 +66,9 @@ exports[`KibanaPageTemplateInner page sidebar 1`] = `
|
|||
minHeight={0}
|
||||
offset={0}
|
||||
>
|
||||
<EuiPageSidebar>
|
||||
<EuiPageSidebar
|
||||
sticky={true}
|
||||
>
|
||||
Test
|
||||
</EuiPageSidebar>
|
||||
</_EuiPageTemplate>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import React, { FC, useEffect, useState } from 'react';
|
||||
import React, { FC } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { EuiPageTemplate } from '@elastic/eui';
|
||||
|
||||
|
|
@ -21,9 +21,6 @@ const getClasses = (template?: string, className?: string) => {
|
|||
);
|
||||
};
|
||||
|
||||
const KIBANA_CHROME_SELECTOR = '[data-test-subj="kibanaChrome"]';
|
||||
const HEADER_GLOBAL_NAV_SELECTOR = '[data-test-subj="headerGlobalNav"]';
|
||||
|
||||
/**
|
||||
* A thin wrapper around EuiPageTemplate with a few Kibana specific additions
|
||||
*/
|
||||
|
|
@ -38,18 +35,6 @@ export const KibanaPageTemplateInner: FC<Props> = ({
|
|||
}) => {
|
||||
let header;
|
||||
|
||||
const [offset, setOffset] = useState<number | undefined>();
|
||||
|
||||
useEffect(() => {
|
||||
const kibanaChrome = document.querySelector(KIBANA_CHROME_SELECTOR) as HTMLElement;
|
||||
if (kibanaChrome) {
|
||||
const kibanaChromeHeader = kibanaChrome.querySelector(
|
||||
HEADER_GLOBAL_NAV_SELECTOR
|
||||
) as HTMLElement;
|
||||
setOffset(kibanaChromeHeader?.offsetTop + kibanaChromeHeader?.offsetHeight);
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (isEmptyState && pageHeader && !children) {
|
||||
const { iconType, pageTitle, description, rightSideItems } = pageHeader;
|
||||
const title = pageTitle ? <h1>{pageTitle}</h1> : undefined;
|
||||
|
|
@ -70,9 +55,7 @@ export const KibanaPageTemplateInner: FC<Props> = ({
|
|||
let sideBar;
|
||||
if (pageSideBar) {
|
||||
const sideBarProps = { ...pageSideBarProps };
|
||||
if (offset) {
|
||||
sideBarProps.sticky = { offset };
|
||||
}
|
||||
sideBarProps.sticky = true;
|
||||
sideBar = <EuiPageTemplate.Sidebar {...sideBarProps}>{pageSideBar}</EuiPageTemplate.Sidebar>;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ exports[`WithSolutionNav renders wrapped component 1`] = `
|
|||
}
|
||||
pageSideBarProps={
|
||||
Object {
|
||||
"className": "css-c34ez9",
|
||||
"className": "kbnSolutionNav__sidebar css-c34ez9",
|
||||
"minWidth": undefined,
|
||||
"paddingSize": "none",
|
||||
}
|
||||
|
|
@ -112,7 +112,7 @@ exports[`WithSolutionNav with children 1`] = `
|
|||
}
|
||||
pageSideBarProps={
|
||||
Object {
|
||||
"className": "css-c34ez9",
|
||||
"className": "kbnSolutionNav__sidebar css-c34ez9",
|
||||
"minWidth": undefined,
|
||||
"paddingSize": "none",
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,9 +57,8 @@ export const withSolutionNav = <P extends TemplateProps>(WrappedComponent: Compo
|
|||
isMediumBreakpoint || (canBeCollapsed && isLargerBreakpoint && !isSideNavOpenOnDesktop);
|
||||
const withSolutionNavStyles = WithSolutionNavStyles(euiTheme);
|
||||
const sideBarClasses = classNames(
|
||||
{
|
||||
'kbnSolutionNav__sidebar--shrink': isSidebarShrunk,
|
||||
},
|
||||
'kbnSolutionNav__sidebar',
|
||||
{ 'kbnSolutionNav__sidebar--shrink': isSidebarShrunk },
|
||||
props.pageSideBarProps?.className,
|
||||
withSolutionNavStyles
|
||||
);
|
||||
|
|
|
|||
11
src/core/public/_css_variables.scss
Normal file
11
src/core/public/_css_variables.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
:root {
|
||||
// height of the header banner
|
||||
--kbnHeaderBannerHeight: #{$euiSizeXL};
|
||||
// total height of all fixed headers (when the banner is *not* present) inherited from EUI
|
||||
--kbnHeaderOffset: var(--euiFixedHeadersOffset, 0);
|
||||
// total height of everything when the banner is present
|
||||
--kbnHeaderOffsetWithBanner: calc(var(--kbnHeaderBannerHeight) + var(--kbnHeaderOffset));
|
||||
}
|
||||
|
||||
// Quick note: This shouldn't be mixed with Sass variable declarations,
|
||||
// as each import will cause :root to be re-declared unnecessarily
|
||||
|
|
@ -1,43 +1,6 @@
|
|||
@import './variables';
|
||||
|
||||
/* stylelint-disable-next-line length-zero-no-unit -- need consistent unit to sum them */
|
||||
@mixin kibanaFullBodyHeight($additionalOffset: 0px) {
|
||||
// default - header, no banner
|
||||
height: calc(100vh - #{$kbnHeaderOffset + $additionalOffset});
|
||||
|
||||
@at-root {
|
||||
// no header, no banner
|
||||
.kbnBody--chromeHidden & {
|
||||
height: calc(100vh - #{$additionalOffset});
|
||||
}
|
||||
// header, banner
|
||||
.kbnBody--hasHeaderBanner & {
|
||||
height: calc(100vh - #{$kbnHeaderOffsetWithBanner + $additionalOffset});
|
||||
}
|
||||
// no header, banner
|
||||
.kbnBody--chromeHidden.kbnBody--hasHeaderBanner & {
|
||||
height: calc(100vh - #{$kbnHeaderBannerHeight + $additionalOffset});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line length-zero-no-unit -- need consistent unit to sum them */
|
||||
@mixin kibanaFullBodyMinHeight($additionalOffset: 0px) {
|
||||
// default - header, no banner
|
||||
min-height: calc(100vh - #{$kbnHeaderOffset + $additionalOffset});
|
||||
|
||||
@at-root {
|
||||
// no header, no banner
|
||||
.kbnBody--chromeHidden & {
|
||||
min-height: calc(100vh - #{$additionalOffset});
|
||||
}
|
||||
// header, banner
|
||||
.kbnBody--hasHeaderBanner & {
|
||||
min-height: calc(100vh - #{$kbnHeaderOffsetWithBanner + $additionalOffset});
|
||||
}
|
||||
// no header, banner
|
||||
.kbnBody--chromeHidden.kbnBody--hasHeaderBanner & {
|
||||
min-height: calc(100vh - #{$kbnHeaderBannerHeight + $additionalOffset});
|
||||
}
|
||||
}
|
||||
@mixin kibanaFullBodyHeight($additionalOffset: 0) {
|
||||
// The `--euiFixedHeadersOffset` CSS variable is automatically updated by
|
||||
// styles/rendering/_base.scss, based on whether the Kibana chrome has a
|
||||
// header banner, and is visible or hidden
|
||||
height: calc(100vh - var(--euiFixedHeadersOffset, 0) - #{$additionalOffset});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
@import '@elastic/eui/src/global_styling/variables/header';
|
||||
|
||||
// height of the header banner
|
||||
$kbnHeaderBannerHeight: $euiSizeXL; // This value is also declared in `/x-pack/plugins/canvas/common/lib/constants.ts`
|
||||
// total height of the header (when the banner is *not* present)
|
||||
$kbnHeaderOffset: $euiHeaderHeightCompensation * 2;
|
||||
// total height of the header when the banner is present
|
||||
$kbnHeaderOffsetWithBanner: $kbnHeaderOffset + $kbnHeaderBannerHeight;
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
@import './variables';
|
||||
@import './css_variables';
|
||||
@import './mixins';
|
||||
@import './styles/index';
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: $kbnHeaderBannerHeight;
|
||||
height: var(--kbnHeaderBannerHeight);
|
||||
width: 100%;
|
||||
z-index: $euiZHeader;
|
||||
}
|
||||
|
|
@ -11,32 +11,3 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// overriding `top` positioning of the chrome headers
|
||||
.kbnBody--hasHeaderBanner .header__bars {
|
||||
.header__firstBar {
|
||||
top: $kbnHeaderBannerHeight;
|
||||
}
|
||||
.header__secondBar {
|
||||
top: $kbnHeaderBannerHeight + $euiHeaderHeightCompensation;
|
||||
}
|
||||
}
|
||||
|
||||
// overriding padding on the body element added by EUI
|
||||
.kbnBody.kbnBody--hasHeaderBanner.kbnBody--projectLayout.euiBody--headerIsFixed {
|
||||
padding-top: $kbnHeaderBannerHeight + $euiHeaderHeightCompensation;
|
||||
|
||||
// overriding `top` positioning of the project side nav, and flyouts
|
||||
// overriding `top` positioning of the project app menu toolbar
|
||||
&.euiBody--headerIsFixed .euiCollapsibleNav,
|
||||
&.euiBody--headerIsFixed:not(.euiDataGrid__restrictBody) .euiFlyout,
|
||||
.header__actionMenu {
|
||||
top: $kbnHeaderBannerHeight + $euiHeaderHeightCompensation;
|
||||
}
|
||||
|
||||
// overriding `height` calculation of the project side nav, and flyouts
|
||||
&.euiBody--headerIsFixed .euiCollapsibleNav,
|
||||
&.euiBody--headerIsFixed:not(.euiDataGrid__restrictBody) .euiFlyout {
|
||||
height: calc(100% - #{$kbnHeaderBannerHeight + $euiHeaderHeightCompensation});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import '../../variables';
|
||||
|
||||
@mixin flexParent($grow: 1, $shrink: 1, $basis: auto, $direction: column) {
|
||||
flex: $grow $shrink $basis;
|
||||
display: flex;
|
||||
|
|
@ -86,7 +84,7 @@
|
|||
|
||||
@at-root {
|
||||
.kbnBody--hasHeaderBanner & {
|
||||
top: $kbnHeaderBannerHeight;
|
||||
top: var(--kbnHeaderBannerHeight);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
top: var(--euiFixedHeadersOffset, 0);
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
|
@ -35,50 +35,30 @@
|
|||
position: relative; // This is temporary for apps that relied on this being present on `.application`
|
||||
}
|
||||
|
||||
@mixin kbnAffordForHeader($headerHeight) {
|
||||
@include euiHeaderAffordForFixed($headerHeight);
|
||||
|
||||
#securitySolutionStickyKQL,
|
||||
#app-fixed-viewport {
|
||||
top: $headerHeight;
|
||||
}
|
||||
|
||||
@include euiBreakpoint('xl', 'l') {
|
||||
.kbnStickyMenu {
|
||||
position: sticky;
|
||||
max-height: calc(100vh - #{$headerHeight + $euiSize});
|
||||
top: $headerHeight + $euiSize;
|
||||
}
|
||||
|
||||
.kbnSolutionNav__sidebar {
|
||||
position: sticky;
|
||||
max-height: calc(100vh - #{$headerHeight});
|
||||
top: $headerHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kbnBody {
|
||||
@include kbnAffordForHeader($kbnHeaderOffset);
|
||||
padding-top: var(--euiFixedHeadersOffset, 0);
|
||||
}
|
||||
|
||||
&.kbnBody--hasHeaderBanner {
|
||||
padding-top: $kbnHeaderBannerHeight;
|
||||
// Conditionally override :root CSS fixed header variable. Updating `--euiFixedHeadersOffset`
|
||||
// on the body will cause all child EUI components to automatically update their offsets
|
||||
|
||||
@include kbnAffordForHeader($kbnHeaderOffsetWithBanner);
|
||||
.kbnBody--hasHeaderBanner {
|
||||
--euiFixedHeadersOffset: var(--kbnHeaderOffsetWithBanner);
|
||||
|
||||
// Prevents banners from covering full screen data grids
|
||||
.euiDataGrid--fullScreen {
|
||||
height: calc(100vh - #{$kbnHeaderBannerHeight});
|
||||
top: $kbnHeaderBannerHeight;
|
||||
}
|
||||
// Offset fixed EuiHeaders by the top banner
|
||||
.euiHeader[data-fixed-header] {
|
||||
margin-top: var(--kbnHeaderBannerHeight);
|
||||
}
|
||||
&.kbnBody--chromeHidden {
|
||||
@include kbnAffordForHeader(0);
|
||||
}
|
||||
&.kbnBody--projectLayout {
|
||||
@include kbnAffordForHeader($euiHeaderHeightCompensation);
|
||||
}
|
||||
&.kbnBody--chromeHidden.kbnBody--hasHeaderBanner {
|
||||
@include kbnAffordForHeader($kbnHeaderBannerHeight);
|
||||
|
||||
// Prevent banners from covering full screen data grids
|
||||
.euiDataGrid--fullScreen {
|
||||
height: calc(100vh - var(--kbnHeaderBannerHeight));
|
||||
top: var(--kbnHeaderBannerHeight);
|
||||
}
|
||||
}
|
||||
.kbnBody--chromeHidden {
|
||||
--euiFixedHeadersOffset: 0;
|
||||
}
|
||||
.kbnBody--chromeHidden.kbnBody--hasHeaderBanner {
|
||||
--euiFixedHeadersOffset: var(--kbnHeaderBannerHeight);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = {
|
|||
'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
|
||||
'@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
|
||||
'@elastic/ems-client@8.4.0': ['Elastic License 2.0'],
|
||||
'@elastic/eui@88.1.0': ['SSPL-1.0 OR Elastic License 2.0'],
|
||||
'@elastic/eui@88.2.0': ['SSPL-1.0 OR Elastic License 2.0'],
|
||||
'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
|
||||
'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,24 +3,7 @@
|
|||
width: 100%;
|
||||
position: sticky;
|
||||
z-index: $euiZLevel2;
|
||||
top: var(--euiFixedHeadersOffset, 0);
|
||||
background: $euiPageBackgroundColor;
|
||||
}
|
||||
|
||||
&.kbnBody--noHeaderBanner {
|
||||
&.kbnBody--chromeVisible .dashboardTopNav {
|
||||
top: $kbnHeaderOffset;
|
||||
}
|
||||
&.kbnBody--chromeHidden .dashboardTopNav {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.kbnBody--hasHeaderBanner {
|
||||
&.kbnBody--chromeVisible .dashboardTopNav {
|
||||
top: $kbnHeaderOffsetWithBanner;
|
||||
}
|
||||
&.kbnBody--chromeHidden .dashboardTopNav {
|
||||
top: $kbnHeaderBannerHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ exports[`DashboardEmptyScreen renders correctly with edit mode 1`] = `
|
|||
<div
|
||||
class="euiPageTemplate dshEmptyPromptPageTemplate emotion-euiPageOuter-row-grow"
|
||||
data-test-subj="emptyDashboardWidget"
|
||||
style="min-block-size: 460px; padding-block-start: 0;"
|
||||
style="min-block-size: 460px; padding-block-start: var(--euiFixedHeadersOffset, 0);"
|
||||
>
|
||||
<main
|
||||
class="emotion-euiPageInner"
|
||||
|
|
@ -132,7 +132,7 @@ exports[`DashboardEmptyScreen renders correctly with readonly and edit mode 1`]
|
|||
<div
|
||||
class="euiPageTemplate dshEmptyPromptPageTemplate emotion-euiPageOuter-row-grow"
|
||||
data-test-subj="dashboardEmptyReadOnly"
|
||||
style="min-block-size: 460px; padding-block-start: 0;"
|
||||
style="min-block-size: 460px; padding-block-start: var(--euiFixedHeadersOffset, 0);"
|
||||
>
|
||||
<main
|
||||
class="emotion-euiPageInner"
|
||||
|
|
@ -206,7 +206,7 @@ exports[`DashboardEmptyScreen renders correctly with readonly mode 1`] = `
|
|||
<div
|
||||
class="euiPageTemplate dshEmptyPromptPageTemplate emotion-euiPageOuter-row-grow"
|
||||
data-test-subj="dashboardEmptyReadOnly"
|
||||
style="min-block-size: 460px; padding-block-start: 0;"
|
||||
style="min-block-size: 460px; padding-block-start: var(--euiFixedHeadersOffset, 0);"
|
||||
>
|
||||
<main
|
||||
class="emotion-euiPageInner"
|
||||
|
|
@ -280,7 +280,7 @@ exports[`DashboardEmptyScreen renders correctly with view mode 1`] = `
|
|||
<div
|
||||
class="euiPageTemplate dshEmptyPromptPageTemplate emotion-euiPageOuter-row-grow"
|
||||
data-test-subj="dashboardEmptyReadWrite"
|
||||
style="min-block-size: 460px; padding-block-start: 0;"
|
||||
style="min-block-size: 460px; padding-block-start: var(--euiFixedHeadersOffset, 0);"
|
||||
>
|
||||
<main
|
||||
class="emotion-euiPageInner"
|
||||
|
|
|
|||
|
|
@ -49,4 +49,3 @@ export const API_ROUTE_SHAREABLE_RUNTIME_DOWNLOAD = `/public/canvas/${SHAREABLE_
|
|||
export const CANVAS_EMBEDDABLE_CLASSNAME = `canvasEmbeddable`;
|
||||
export const CONTEXT_MENU_TOP_BORDER_CLASSNAME = 'canvasContextMenu--topBorder';
|
||||
export const API_ROUTE_FUNCTIONS = `${INTERNAL_API_ROUTE}/fns`;
|
||||
export const HEADER_BANNER_HEIGHT = 32; // This value is also declared in `/src/core/public/_variables.scss`
|
||||
|
|
|
|||
|
|
@ -5,16 +5,12 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { FC } from 'react';
|
||||
import React, { FC, useMemo } from 'react';
|
||||
import { css } from '@emotion/react';
|
||||
// @ts-expect-error
|
||||
import { WorkpadPage } from '../workpad_page';
|
||||
import { Fullscreen } from '../fullscreen';
|
||||
import {
|
||||
HEADER_BANNER_HEIGHT,
|
||||
WORKPAD_CANVAS_BUFFER,
|
||||
DEFAULT_WORKPAD_CSS,
|
||||
} from '../../../common/lib/constants';
|
||||
import { WORKPAD_CANVAS_BUFFER, DEFAULT_WORKPAD_CSS } from '../../../common/lib/constants';
|
||||
import { CommitFn, CanvasPage } from '../../../types';
|
||||
import { WorkpadShortcuts } from './workpad_shortcuts.component';
|
||||
|
||||
|
|
@ -71,7 +67,17 @@ export const Workpad: FC<Props> = ({
|
|||
zoomOut,
|
||||
zoomScale,
|
||||
}) => {
|
||||
const headerBannerOffset = hasHeaderBanner ? HEADER_BANNER_HEIGHT : 0;
|
||||
const headerBannerOffset = useMemo(() => {
|
||||
if (!hasHeaderBanner) return 0;
|
||||
if (typeof document === 'undefined') return 0;
|
||||
|
||||
// Get the banner height from the CSS variable value
|
||||
const headerHeightFromCSS = getComputedStyle(document.documentElement).getPropertyValue(
|
||||
'--kbnHeaderBannerHeight'
|
||||
);
|
||||
// Remove the CSS unit
|
||||
return parseInt(headerHeightFromCSS, 10);
|
||||
}, [hasHeaderBanner]);
|
||||
|
||||
const bufferStyle = {
|
||||
height: isFullscreen ? height : (height + 2 * WORKPAD_CANVAS_BUFFER) * zoomScale,
|
||||
|
|
|
|||
|
|
@ -77,8 +77,9 @@ export const SchemaErrorsAccordion: React.FC<Props> = ({
|
|||
<EuiAccordion
|
||||
key={fieldName}
|
||||
id={`schemaErrorAccordion-${fieldName}`}
|
||||
className="schemaErrorsAccordion euiAccordionForm"
|
||||
buttonClassName="euiAccordionForm__button"
|
||||
className="schemaErrorsAccordion"
|
||||
borders="horizontal"
|
||||
buttonProps={{ paddingSize: 'm' }}
|
||||
buttonContent={accordionHeader}
|
||||
>
|
||||
<EuiTable tableLayout="auto">
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ import { sortDatastreamsByDataset } from './sort_datastreams';
|
|||
|
||||
const ScrollAnchor = styled.div`
|
||||
display: none;
|
||||
scroll-margin-top: ${(props) => parseFloat(props.theme.eui.euiHeaderHeightCompensation) * 2}px;
|
||||
scroll-margin-top: var(--euiFixedHeadersOffset, 0);
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export const ControlsColumn = ({ controls, title }: ControlsColumnProps) => {
|
|||
);
|
||||
}
|
||||
return (
|
||||
<EuiFlexGroup direction="column" gutterSize="none" className="kbnStickyMenu">
|
||||
<EuiFlexGroup direction="column" gutterSize="none">
|
||||
{titleContent}
|
||||
{controls}
|
||||
</EuiFlexGroup>
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ export const PackageListGrid: FunctionComponent<Props> = ({
|
|||
gutterSize="xl"
|
||||
data-test-subj="epmList.integrationCards"
|
||||
>
|
||||
<EuiFlexItem data-test-subj="epmList.controlsSideColumn" grow={1} className="kbnStickyMenu">
|
||||
<EuiFlexItem data-test-subj="epmList.controlsSideColumn" grow={1}>
|
||||
<ControlsColumn controls={controls} title={title} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={5} data-test-subj="epmList.mainColumn" style={{ alignSelf: 'stretch' }}>
|
||||
|
|
|
|||
|
|
@ -12,12 +12,8 @@ import { EuiPage, EuiPageBody, EuiSpacer } from '@elastic/eui';
|
|||
export const Wrapper = styled.div`
|
||||
background-color: ${(props) => props.theme.eui.euiColorEmptyShade};
|
||||
|
||||
// HACK: Kibana introduces a div element around the app component that results in us
|
||||
// being unable to stretch this Wrapper to full height via flex: 1. This calc sets
|
||||
// the min height to the viewport size minus the height of the two global Kibana headers.
|
||||
min-height: calc(
|
||||
100vh - ${(props) => parseFloat(props.theme.eui.euiHeaderHeightCompensation) * 2}px
|
||||
);
|
||||
// Set the min height to the viewport size minus the height of any global Kibana headers
|
||||
min-height: calc(100vh - var(--euiFixedHeadersOffset, 0));
|
||||
`;
|
||||
|
||||
export const Page = styled(EuiPage)`
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ export function FlyoutContainer({
|
|||
ref={panelContainerRef}
|
||||
role="dialog"
|
||||
aria-labelledby="lnsDimensionContainerTitle"
|
||||
className="lnsDimensionContainer euiFlyout"
|
||||
className="lnsDimensionContainer"
|
||||
onAnimationEnd={() => {
|
||||
if (isOpen) {
|
||||
// EuiFocusTrap interferes with animating elements with absolute position:
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ exports[`ScreenCapturePanelContent properly renders a view with "canvas" layout
|
|||
style="width: auto; margin-left: -16px; margin-right: -16px;"
|
||||
/>
|
||||
<div
|
||||
class="euiAccordion"
|
||||
class="euiAccordion emotion-euiAccordion"
|
||||
data-test-subj="shareReportingAdvancedOptionsButton"
|
||||
>
|
||||
<div
|
||||
|
|
@ -288,7 +288,7 @@ exports[`ScreenCapturePanelContent properly renders a view with "print" layout o
|
|||
style="width: auto; margin-left: -16px; margin-right: -16px;"
|
||||
/>
|
||||
<div
|
||||
class="euiAccordion"
|
||||
class="euiAccordion emotion-euiAccordion"
|
||||
data-test-subj="shareReportingAdvancedOptionsButton"
|
||||
>
|
||||
<div
|
||||
|
|
@ -423,7 +423,7 @@ exports[`ScreenCapturePanelContent renders the default view properly 1`] = `
|
|||
style="width: auto; margin-left: -16px; margin-right: -16px;"
|
||||
/>
|
||||
<div
|
||||
class="euiAccordion"
|
||||
class="euiAccordion emotion-euiAccordion"
|
||||
data-test-subj="shareReportingAdvancedOptionsButton"
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`PromptPage renders as expected with additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/some/script1.js\\"></script><script src=\\"/mock-basepath/some/script2.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:0\\" class=\\"euiPageTemplate eui-cjgvy1-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-68douo-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1sghhs8-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge eui-12g67tv-euiPanel-m-plain-hasShadow\\"><div class=\\"euiEmptyPrompt__main\\"><div class=\\"euiEmptyPrompt__icon\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content\\"><div class=\\"euiEmptyPrompt__contentInner\\"><h2 class=\\"euiTitle eui-smz32e-euiTitle-m\\">Some Title</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1vwhzjf-euiText-m-euiTextColor-subdued\\"><div>Some Body</div></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-17kdkag-euiFlexGroup-m-center-center-column\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><span>Action#2</span></div></div></div></div></div></div></div></section></main></div></body></html>"`;
|
||||
exports[`PromptPage renders as expected with additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/some/script1.js\\"></script><script src=\\"/mock-basepath/some/script2.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:var(--euiFixedHeadersOffset, 0)\\" class=\\"euiPageTemplate eui-cjgvy1-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-68douo-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1sghhs8-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge eui-12g67tv-euiPanel-m-plain-hasShadow\\"><div class=\\"euiEmptyPrompt__main\\"><div class=\\"euiEmptyPrompt__icon\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content\\"><div class=\\"euiEmptyPrompt__contentInner\\"><h2 class=\\"euiTitle eui-smz32e-euiTitle-m\\">Some Title</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1vwhzjf-euiText-m-euiTextColor-subdued\\"><div>Some Body</div></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-17kdkag-euiFlexGroup-m-center-center-column\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><span>Action#2</span></div></div></div></div></div></div></div></section></main></div></body></html>"`;
|
||||
|
||||
exports[`PromptPage renders as expected without additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:0\\" class=\\"euiPageTemplate eui-cjgvy1-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-68douo-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1sghhs8-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge eui-12g67tv-euiPanel-m-plain-hasShadow\\"><div class=\\"euiEmptyPrompt__main\\"><div class=\\"euiEmptyPrompt__icon\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content\\"><div class=\\"euiEmptyPrompt__contentInner\\"><h2 class=\\"euiTitle eui-smz32e-euiTitle-m\\">Some Title</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1vwhzjf-euiText-m-euiTextColor-subdued\\"><div>Some Body</div></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-17kdkag-euiFlexGroup-m-center-center-column\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><span>Action#2</span></div></div></div></div></div></div></div></section></main></div></body></html>"`;
|
||||
exports[`PromptPage renders as expected without additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:var(--euiFixedHeadersOffset, 0)\\" class=\\"euiPageTemplate eui-cjgvy1-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-68douo-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1sghhs8-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge eui-12g67tv-euiPanel-m-plain-hasShadow\\"><div class=\\"euiEmptyPrompt__main\\"><div class=\\"euiEmptyPrompt__icon\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content\\"><div class=\\"euiEmptyPrompt__contentInner\\"><h2 class=\\"euiTitle eui-smz32e-euiTitle-m\\">Some Title</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1vwhzjf-euiText-m-euiTextColor-subdued\\"><div>Some Body</div></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-17kdkag-euiFlexGroup-m-center-center-column\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><span>Action#2</span></div></div></div></div></div></div></div></section></main></div></body></html>"`;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`UnauthenticatedPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:0\\" class=\\"euiPageTemplate eui-cjgvy1-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-68douo-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1sghhs8-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge eui-12g67tv-euiPanel-m-plain-hasShadow\\"><div class=\\"euiEmptyPrompt__main\\"><div class=\\"euiEmptyPrompt__icon\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content\\"><div class=\\"euiEmptyPrompt__contentInner\\"><h2 class=\\"euiTitle eui-smz32e-euiTitle-m\\">We hit an authentication error</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1vwhzjf-euiText-m-euiTextColor-subdued\\"><p>Try logging in again, and if the problem persists, contact your system administrator.</p></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-17kdkag-euiFlexGroup-m-center-center-column\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" class=\\"euiButton eui-8utmkn-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"logInButton\\"><span class=\\"eui-1bascr2-euiButtonDisplayContent\\">Log in</span></a></div></div></div></div></div></div></div></section></main></div></body></html>"`;
|
||||
exports[`UnauthenticatedPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:var(--euiFixedHeadersOffset, 0)\\" class=\\"euiPageTemplate eui-cjgvy1-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-68douo-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1sghhs8-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge eui-12g67tv-euiPanel-m-plain-hasShadow\\"><div class=\\"euiEmptyPrompt__main\\"><div class=\\"euiEmptyPrompt__icon\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content\\"><div class=\\"euiEmptyPrompt__contentInner\\"><h2 class=\\"euiTitle eui-smz32e-euiTitle-m\\">We hit an authentication error</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1vwhzjf-euiText-m-euiTextColor-subdued\\"><p>Try logging in again, and if the problem persists, contact your system administrator.</p></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-17kdkag-euiFlexGroup-m-center-center-column\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" class=\\"euiButton eui-8utmkn-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"logInButton\\"><span class=\\"eui-1bascr2-euiButtonDisplayContent\\">Log in</span></a></div></div></div></div></div></div></div></section></main></div></body></html>"`;
|
||||
|
||||
exports[`UnauthenticatedPage renders as expected with custom title 1`] = `"<html lang=\\"en\\"><head><title>My Company Name</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:0\\" class=\\"euiPageTemplate eui-cjgvy1-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-68douo-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1sghhs8-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge eui-12g67tv-euiPanel-m-plain-hasShadow\\"><div class=\\"euiEmptyPrompt__main\\"><div class=\\"euiEmptyPrompt__icon\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content\\"><div class=\\"euiEmptyPrompt__contentInner\\"><h2 class=\\"euiTitle eui-smz32e-euiTitle-m\\">We hit an authentication error</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1vwhzjf-euiText-m-euiTextColor-subdued\\"><p>Try logging in again, and if the problem persists, contact your system administrator.</p></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-17kdkag-euiFlexGroup-m-center-center-column\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" class=\\"euiButton eui-8utmkn-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"logInButton\\"><span class=\\"eui-1bascr2-euiButtonDisplayContent\\">Log in</span></a></div></div></div></div></div></div></div></section></main></div></body></html>"`;
|
||||
exports[`UnauthenticatedPage renders as expected with custom title 1`] = `"<html lang=\\"en\\"><head><title>My Company Name</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:var(--euiFixedHeadersOffset, 0)\\" class=\\"euiPageTemplate eui-cjgvy1-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-68douo-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1sghhs8-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge eui-12g67tv-euiPanel-m-plain-hasShadow\\"><div class=\\"euiEmptyPrompt__main\\"><div class=\\"euiEmptyPrompt__icon\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content\\"><div class=\\"euiEmptyPrompt__contentInner\\"><h2 class=\\"euiTitle eui-smz32e-euiTitle-m\\">We hit an authentication error</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1vwhzjf-euiText-m-euiTextColor-subdued\\"><p>Try logging in again, and if the problem persists, contact your system administrator.</p></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-17kdkag-euiFlexGroup-m-center-center-column\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" class=\\"euiButton eui-8utmkn-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"logInButton\\"><span class=\\"eui-1bascr2-euiButtonDisplayContent\\">Log in</span></a></div></div></div></div></div></div></div></section></main></div></body></html>"`;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ResetSessionPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/internal/security/reset_session_page.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:0\\" class=\\"euiPageTemplate eui-cjgvy1-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-68douo-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1sghhs8-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge eui-12g67tv-euiPanel-m-plain-hasShadow\\"><div class=\\"euiEmptyPrompt__main\\"><div class=\\"euiEmptyPrompt__icon\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content\\"><div class=\\"euiEmptyPrompt__contentInner\\"><h2 class=\\"euiTitle eui-smz32e-euiTitle-m\\">You do not have permission to access the requested page</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1vwhzjf-euiText-m-euiTextColor-subdued\\"><p>Either go back to the previous page or log in as a different user.</p></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-17kdkag-euiFlexGroup-m-center-center-column\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/path/to/logout\\" rel=\\"noreferrer\\" class=\\"euiButton eui-8utmkn-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"eui-1bascr2-euiButtonDisplayContent\\">Log in as different user</span></a></div><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonEmpty eui-9ywwuh-euiButtonDisplay-euiButtonEmpty-m-empty-primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonEmpty__content eui-1bascr2-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></div></div></div></section></main></div></body></html>"`;
|
||||
exports[`ResetSessionPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/internal/security/reset_session_page.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:var(--euiFixedHeadersOffset, 0)\\" class=\\"euiPageTemplate eui-cjgvy1-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-68douo-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1sghhs8-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge eui-12g67tv-euiPanel-m-plain-hasShadow\\"><div class=\\"euiEmptyPrompt__main\\"><div class=\\"euiEmptyPrompt__icon\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content\\"><div class=\\"euiEmptyPrompt__contentInner\\"><h2 class=\\"euiTitle eui-smz32e-euiTitle-m\\">You do not have permission to access the requested page</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1vwhzjf-euiText-m-euiTextColor-subdued\\"><p>Either go back to the previous page or log in as a different user.</p></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-17kdkag-euiFlexGroup-m-center-center-column\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/path/to/logout\\" rel=\\"noreferrer\\" class=\\"euiButton eui-8utmkn-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"eui-1bascr2-euiButtonDisplayContent\\">Log in as different user</span></a></div><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonEmpty eui-9ywwuh-euiButtonDisplay-euiButtonEmpty-m-empty-primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonEmpty__content eui-1bascr2-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></div></div></div></section></main></div></body></html>"`;
|
||||
|
||||
exports[`ResetSessionPage renders as expected with custom page title 1`] = `"<html lang=\\"en\\"><head><title>My Company Name</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/internal/security/reset_session_page.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:0\\" class=\\"euiPageTemplate eui-cjgvy1-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-68douo-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1sghhs8-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge eui-12g67tv-euiPanel-m-plain-hasShadow\\"><div class=\\"euiEmptyPrompt__main\\"><div class=\\"euiEmptyPrompt__icon\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content\\"><div class=\\"euiEmptyPrompt__contentInner\\"><h2 class=\\"euiTitle eui-smz32e-euiTitle-m\\">You do not have permission to access the requested page</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1vwhzjf-euiText-m-euiTextColor-subdued\\"><p>Either go back to the previous page or log in as a different user.</p></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-17kdkag-euiFlexGroup-m-center-center-column\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/path/to/logout\\" rel=\\"noreferrer\\" class=\\"euiButton eui-8utmkn-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"eui-1bascr2-euiButtonDisplayContent\\">Log in as different user</span></a></div><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonEmpty eui-9ywwuh-euiButtonDisplay-euiButtonEmpty-m-empty-primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonEmpty__content eui-1bascr2-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></div></div></div></section></main></div></body></html>"`;
|
||||
exports[`ResetSessionPage renders as expected with custom page title 1`] = `"<html lang=\\"en\\"><head><title>My Company Name</title><style></style><style data-emotion=\\"eui \\"></style></style><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/internal/security/reset_session_page.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div data-test-subj=\\"promptPage\\" style=\\"min-block-size:max(460px, 100vh);padding-block-start:var(--euiFixedHeadersOffset, 0)\\" class=\\"euiPageTemplate eui-cjgvy1-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-68douo-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1sghhs8-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge eui-12g67tv-euiPanel-m-plain-hasShadow\\"><div class=\\"euiEmptyPrompt__main\\"><div class=\\"euiEmptyPrompt__icon\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content\\"><div class=\\"euiEmptyPrompt__contentInner\\"><h2 class=\\"euiTitle eui-smz32e-euiTitle-m\\">You do not have permission to access the requested page</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1vwhzjf-euiText-m-euiTextColor-subdued\\"><p>Either go back to the previous page or log in as a different user.</p></div><div class=\\"euiSpacer euiSpacer--l eui-p2o3x6-euiSpacer-l\\"></div><div class=\\"euiFlexGroup euiEmptyPrompt__actions eui-17kdkag-euiFlexGroup-m-center-center-column\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/path/to/logout\\" rel=\\"noreferrer\\" class=\\"euiButton eui-8utmkn-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"eui-1bascr2-euiButtonDisplayContent\\">Log in as different user</span></a></div><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonEmpty eui-9ywwuh-euiButtonDisplay-euiButtonEmpty-m-empty-primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonEmpty__content eui-1bascr2-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></div></div></div></section></main></div></body></html>"`;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import { useGlobalHeaderPortal } from '../../../../common/hooks/use_global_heade
|
|||
const StyledStickyWrapper = styled.div`
|
||||
position: sticky;
|
||||
z-index: ${(props) => props.theme.eui.euiZHeaderBelowDataGrid};
|
||||
// TOP location is declared in src/public/rendering/_base.scss to keep in line with Kibana Chrome
|
||||
top: var(--euiFixedHeadersOffset, 0);
|
||||
`;
|
||||
|
||||
export const GlobalKQLHeader = React.memo(() => {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const AccordionTitleComponent: React.FC<AccordionTitleProps> = ({ name, title, t
|
|||
<RuleStatusIcon name={name} type={type} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiTitle size="s" className="euiAccordionForm__title">
|
||||
<EuiTitle size="s">
|
||||
<h6>{title}</h6>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
|
|
|
|||
|
|
@ -58,8 +58,8 @@ describe('When using the `ExecuteActionHostResponse` component', () => {
|
|||
|
||||
it('should show execute context accordion as `closed`', async () => {
|
||||
render();
|
||||
expect(renderResult.getByTestId('test-executeResponseOutput-context').className).toEqual(
|
||||
'euiAccordion'
|
||||
expect(renderResult.getByTestId('test-executeResponseOutput-context').className).not.toContain(
|
||||
'euiAccordion-isOpen'
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -24,11 +24,11 @@ const OverlayRootContainer = styled.div`
|
|||
position: fixed;
|
||||
overflow: hidden;
|
||||
|
||||
top: calc((${({ theme: { eui } }) => eui.euiHeaderHeightCompensation} * 2));
|
||||
top: var(--euiFixedHeadersOffset, 0);
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
height: calc(100% - ${({ theme: { eui } }) => eui.euiHeaderHeightCompensation} * 2);
|
||||
height: calc(100% - var(--euiFixedHeadersOffset, 0));
|
||||
width: 100%;
|
||||
|
||||
z-index: ${({ theme: { eui } }) => eui.euiZFlyout};
|
||||
|
|
@ -89,17 +89,6 @@ const PageOverlayGlobalStyles = createGlobalStyle<{ theme: EuiTheme }>`
|
|||
body.${PAGE_OVERLAY_DOCUMENT_BODY_FULLSCREEN_CLASSNAME} {
|
||||
${FULL_SCREEN_CONTENT_OVERRIDES_CSS_STYLESHEET}
|
||||
}
|
||||
|
||||
//-------------------------------------------------------------------------------------------
|
||||
// Style overrides for when Page Overlay is displayed in serverless project
|
||||
//-------------------------------------------------------------------------------------------
|
||||
// With serverless, there is 1 less header displayed, thus the display of the page overlay
|
||||
// need to be adjusted slightly so that it still display below the header
|
||||
//-------------------------------------------------------------------------------------------
|
||||
body.kbnBody.kbnBody--projectLayout:not(.${PAGE_OVERLAY_DOCUMENT_BODY_FULLSCREEN_CLASSNAME}) .${PAGE_OVERLAY_CSS_CLASSNAME} {
|
||||
top: ${({ theme: { eui } }) => eui.euiHeaderHeightCompensation};
|
||||
height: calc(100% - (${({ theme: { eui } }) => eui.euiHeaderHeightCompensation}));
|
||||
}
|
||||
`;
|
||||
|
||||
const setDocumentBodyOverlayIsVisible = () => {
|
||||
|
|
|
|||
|
|
@ -42,12 +42,12 @@ const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({
|
|||
<EuiPortal insert={{ sibling: !visible ? ref?.current : null, position: 'after' }}>
|
||||
<div
|
||||
aria-label={i18n.TIMELINE_DESCRIPTION}
|
||||
className="euiFlyout"
|
||||
data-test-subj="timeline-flyout"
|
||||
css={css`
|
||||
min-width: 150px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
height: inherit;
|
||||
bottom: 0;
|
||||
top: var(--euiFixedHeadersOffset, 0);
|
||||
left: 0;
|
||||
background: ${useEuiBackgroundColor('plain')};
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -72,8 +72,8 @@ export const BrowserTestRunResult = ({ expectPings, onDone, testRunId }: Props)
|
|||
key={'accordion-' + checkGroupId}
|
||||
id={'accordion-' + checkGroupId}
|
||||
element="fieldset"
|
||||
className="euiAccordionForm"
|
||||
buttonClassName="euiAccordionForm__button"
|
||||
borders="horizontal"
|
||||
buttonProps={{ paddingSize: 'm' }}
|
||||
buttonContent={getButtonContent(checkGroupResult)}
|
||||
paddingSize="s"
|
||||
data-test-subj="expandResults"
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
*/
|
||||
|
||||
import React, { Fragment, useContext, useState } from 'react';
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
import {
|
||||
EuiAccordion,
|
||||
|
|
@ -20,6 +21,8 @@ import {
|
|||
EuiLink,
|
||||
EuiText,
|
||||
EuiSpacer,
|
||||
useEuiTheme,
|
||||
euiCanAnimate,
|
||||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
|
|
@ -75,6 +78,7 @@ export const WatchActionsAccordion: React.FunctionComponent<Props> = ({
|
|||
settings,
|
||||
actionErrors,
|
||||
}) => {
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const {
|
||||
links: { watchActionsConfigurationMap },
|
||||
toasts,
|
||||
|
|
@ -96,8 +100,15 @@ export const WatchActionsAccordion: React.FunctionComponent<Props> = ({
|
|||
initialIsOpen={action.isNew || hasErrors} // If an action contains errors in edit mode, we want the accordion open so the user is aware
|
||||
key={action.id}
|
||||
id={action.id}
|
||||
className="euiAccordionForm"
|
||||
buttonContentClassName="euiAccordionForm__button"
|
||||
borders="horizontal"
|
||||
buttonProps={{
|
||||
paddingSize: 'm',
|
||||
css: css`
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
`,
|
||||
}}
|
||||
data-test-subj="watchActionAccordion"
|
||||
buttonContent={
|
||||
<EuiFlexGroup gutterSize="s" alignItems="center">
|
||||
|
|
@ -105,7 +116,7 @@ export const WatchActionsAccordion: React.FunctionComponent<Props> = ({
|
|||
<EuiIcon type={action.iconClass} size="m" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiTitle size="s" className="euiAccordionForm__title">
|
||||
<EuiTitle size="s">
|
||||
<h6>{action.typeName}</h6>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
|
|
@ -115,7 +126,18 @@ export const WatchActionsAccordion: React.FunctionComponent<Props> = ({
|
|||
<EuiButtonIcon
|
||||
iconType="cross"
|
||||
color="danger"
|
||||
className="euiAccordionForm__extraAction"
|
||||
css={css`
|
||||
opacity: 0;
|
||||
|
||||
&:focus,
|
||||
.euiAccordion:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
${euiCanAnimate} {
|
||||
transition: opacity ${euiTheme.animation.normal} ${euiTheme.animation.resistance};
|
||||
}
|
||||
`}
|
||||
aria-label={i18n.translate(
|
||||
'xpack.watcher.sections.watchEdit.threshold.accordion.deleteIconAriaLabel',
|
||||
{
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ export default function ({ getPageObjects, getService, updateBaselines }) {
|
|||
'flights_map',
|
||||
updateBaselines
|
||||
);
|
||||
expect(percentDifference).to.be.lessThan(0.02);
|
||||
expect(percentDifference).to.be.lessThan(0.022);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -138,7 +138,7 @@ export default function ({ getPageObjects, getService, updateBaselines }) {
|
|||
'web_logs_map',
|
||||
updateBaselines
|
||||
);
|
||||
expect(percentDifference).to.be.lessThan(0.02);
|
||||
expect(percentDifference).to.be.lessThan(0.031);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1596,10 +1596,10 @@
|
|||
resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
|
||||
integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
|
||||
|
||||
"@elastic/eui@88.1.0":
|
||||
version "88.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-88.1.0.tgz#0c10173fecd5812b035c349cc8a836fa198d1f59"
|
||||
integrity sha512-0irae9LLl9j2fc11FZePhioPAyus7YGpm0yoiKOnD5JqSskqRlmlmwPCYSIEYfxbwyibA4qrbt7kenJ7PTOt5g==
|
||||
"@elastic/eui@88.2.0":
|
||||
version "88.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-88.2.0.tgz#ba29775ceaca27b6c44300bcd58783acf720b420"
|
||||
integrity sha512-h756c4vB6lcyrf5bVZhLeaACWYh2t5Y8rxIX1/0BTQ4kJugBoSwSbSdGgW4G1tUa6hdYEsCzqvAQ2mI6LPSbbw==
|
||||
dependencies:
|
||||
"@hello-pangea/dnd" "^16.2.0"
|
||||
"@types/lodash" "^4.14.194"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue