mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 10:40:07 -04:00
Upgrade EUI to v102.3.0 (#222149)
`102.2.0` ⏩ `102.3.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes >[!IMPORTANT] This release contains the visual refresh updates for buttons ⏹️ 💅 These have already been available for QA ahead of time on [this PR](https://github.com/elastic/kibana/pull/220093). 1. **EUI changes**: Adds all Visual Refresh related EUI changes on button components: - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiButtonGroup` - `EuiFilterGroup`/`EuiFilterButton` 2. **EUI button component API updates:** Updates instances of `EuiFilterButton` usages that were missing `isSelected` prop or that should use the new `isToggle` prop to ensure the expected visual and semantic output as toggle button. <details><summary><b>Examples of new toggle filter buttons</b></summary> | before | after | |---|---| |  |  | |  |  | |  |  | </details> 3. **Custom styling updates:** Updates custom styling overrides on EUI button components in selected **high-visibility places** (discover, dashboard, lens) to ensure expected Visual Refresh output. (This is a first iteration step to ensure expected design. In the future we want to replace custom buttons with proper EUI components) <details><summary><b>Updated custom button styling</b></summary> | Solution/Area | After | |---|---| | Discover(classic) |  | | Discover(ES/QL) |  | | Dashboard(Create Visualization) |  | | Maps: Aligned map toolbar button hover |  | </details> ## Package updates ### `@elastic/eui` ## [`v102.3.0`](https://github.com/elastic/eui/releases/v102.3.0) - Added support for `focusTrapProps.returnFocus` on `EuiFlyout` ([#8716](https://github.com/elastic/eui/pull/8716)) - Updated `EuiDataGridToolbarControl` hover styles by removing text-decoration and changing the badge background-color to ensure enough contrast ([#8670](https://github.com/elastic/eui/pull/8670)) - Added prop `isToggle` on `EuiFilterButton` to switch between regular and toggle button ([#8652](https://github.com/elastic/eui/pull/8652)) - Updated `hasActiveFilters` on `EuiFilterButton` to only control highlighting filters, not a visual selected state ([#8652](https://github.com/elastic/eui/pull/8652)) - Updated `EuiFilterButton` to ensure `isSelected` prop applies both semantic and visual states ([#8652](https://github.com/elastic/eui/pull/8652)) - Updated visual styling of `EuiButtonGroup`, `EuiFilterGroup` and `EuiFilterButton` ([#8652](https://github.com/elastic/eui/pull/8652)) - Updated `EuiNotificationBadge` border radius to `2px` ([#8652](https://github.com/elastic/eui/pull/8652)) - Updated `EuiBreadcrumbs` text color for `type="application"` ([#8652](https://github.com/elastic/eui/pull/8652)) - Added new `refresh` design variant for button components: ([#8595](https://github.com/elastic/eui/pull/8595)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - Added `flags.buttonVariant` with value `classic` to `euiThemeAmsterdam` ([#8595](https://github.com/elastic/eui/pull/8595)) - Added new button background component tokens to Amsterdam theme: ([#8595](https://github.com/elastic/eui/pull/8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` **Bug fixes** - Fixed an issue with `EuiDataGrid` where navigating cells with simultaneous key presses would result in a crash in React 18 legacy mode ([#8698](https://github.com/elastic/eui/pull/8698)) **Accessibility** - Improved the accessibility experience of `EuiMarkdownEditorFooter` by fixing the ARIA attributes of the `syntax help` modal. ([#8702](https://github.com/elastic/eui/pull/8702)) ### `@elastic/eui-theme-borealis` ## [`v1.1.0`](https://github.com/elastic/eui/releases/v1.1.0) - Added token `filterButtonBadgeBackgroundHover` ([#8652](https://github.com/elastic/eui/pull/8652)) - Updated values for tokens `buttonGroupFocusColor` and `buttonGroupBackgroundDisabledSelected` ([#8652](https://github.com/elastic/eui/pull/8652)) - Added `flags.buttonVariant` with value `refresh` to `euiThemeBorealis` ([#8595](https://github.com/elastic/eui/pull/8595)) - Added new button background component tokens: ([#8595](https://github.com/elastic/eui/pull/8595)) - `background{color}Hover` - `background{color}Active` - `backgroundFilled{color}Hover` - `backgroundFilled{color}Active` - `backgroundEmpty{color}Hover` - `backgroundEmpty{color}Active` - Updated `backgroundLightText` token value to `shade120` ([#8595](https://github.com/elastic/eui/pull/8595)) --------- Co-authored-by: “jeramysoucy” <jeramy.soucy@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Lene Gadewoll
GitHub
parent
f84731707e
commit
b2d1075032
73 changed files with 385 additions and 200 deletions
|
|
@ -130,6 +130,7 @@ export const PopoverDemo: FunctionComponent = () => {
|
|||
<EuiFilterButton
|
||||
iconType="arrowDown"
|
||||
numFilters={options2.length}
|
||||
isSelected={isOpen2}
|
||||
hasActiveFilters={selectedOptions2.length > 0}
|
||||
numActiveFilters={selectedOptions2.length}
|
||||
onClick={() => setIsOpen2((value) => !value)}
|
||||
|
|
|
|||
|
|
@ -126,9 +126,9 @@
|
|||
"@elastic/ecs": "^8.11.5",
|
||||
"@elastic/elasticsearch": "9.0.2",
|
||||
"@elastic/ems-client": "8.6.3",
|
||||
"@elastic/eui": "102.2.0",
|
||||
"@elastic/eui-amsterdam": "npm:@elastic/eui@102.2.0-amsterdam.0",
|
||||
"@elastic/eui-theme-borealis": "1.0.0",
|
||||
"@elastic/eui": "102.3.0",
|
||||
"@elastic/eui-amsterdam": "npm:@elastic/eui@102.3.0-amsterdam.0",
|
||||
"@elastic/eui-theme-borealis": "1.1.0",
|
||||
"@elastic/filesaver": "1.1.2",
|
||||
"@elastic/monaco-esql": "^3.1.1",
|
||||
"@elastic/node-crypto": "^1.2.3",
|
||||
|
|
|
|||
|
|
@ -88,11 +88,11 @@ 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.6.3': ['Elastic License 2.0'],
|
||||
'@elastic/eui@102.2.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
|
||||
'@elastic/eui-amsterdam@102.2.0-amsterdam.0': [
|
||||
'@elastic/eui@102.3.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
|
||||
'@elastic/eui-amsterdam@102.3.0-amsterdam.0': [
|
||||
'Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0',
|
||||
],
|
||||
'@elastic/eui-theme-borealis@1.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
|
||||
'@elastic/eui-theme-borealis@1.1.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.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
|
||||
'@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@ export function QueryHistoryAction({
|
|||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
color="primary"
|
||||
flush="both"
|
||||
onClick={toggleHistory}
|
||||
css={css`
|
||||
padding-inline: 0;
|
||||
|
|
|
|||
|
|
@ -195,6 +195,7 @@ export function TableSortSelect({
|
|||
<EuiFilterButton
|
||||
iconType="arrowDown"
|
||||
iconSide="right"
|
||||
isSelected={isPopoverOpen}
|
||||
onClick={togglePopOver}
|
||||
data-test-subj="tableSortSelectBtn"
|
||||
grow
|
||||
|
|
|
|||
|
|
@ -126,6 +126,7 @@ export const TagFilterPanel: FC<{}> = ({}) => {
|
|||
iconSide="right"
|
||||
onClick={onFilterButtonClick}
|
||||
data-test-subj="tagFilterPopoverButton"
|
||||
isSelected={isPopoverOpen}
|
||||
hasActiveFilters={totalActiveFilters > 0}
|
||||
numActiveFilters={totalActiveFilters}
|
||||
grow
|
||||
|
|
|
|||
|
|
@ -106,6 +106,7 @@ export const UserFilterPanel: FC<{}> = () => {
|
|||
iconSide="right"
|
||||
data-test-subj="userFilterPopoverButton"
|
||||
onClick={() => setPopoverOpen(!isPopoverOpen)}
|
||||
isSelected={isPopoverOpen}
|
||||
hasActiveFilters={selectedUsers.length > 0}
|
||||
numActiveFilters={selectedUsers.length}
|
||||
grow
|
||||
|
|
|
|||
|
|
@ -1,39 +1,37 @@
|
|||
.unifiedDataTableToolbar {
|
||||
padding: $euiSizeS $euiSizeS $euiSizeXS;
|
||||
|
||||
.unifiedDataTableToolbarControlButton .euiDataGridToolbarControl {
|
||||
block-size: $euiSizeXL;
|
||||
border: $euiBorderThin;
|
||||
border-radius: $euiBorderRadiusSmall;
|
||||
transition: transform $euiAnimSpeedNormal ease-in-out;
|
||||
.unifiedDataTableToolbarControlButton {
|
||||
.euiDataGridToolbarControl {
|
||||
block-size: $euiSizeXL;
|
||||
border: $euiBorderWidthThin solid $euiFormBorderColor;
|
||||
border-radius: $euiBorderRadiusSmall;
|
||||
|
||||
// making the icons larger than the default size
|
||||
& svg {
|
||||
inline-size: $euiSize;
|
||||
block-size: $euiSize;
|
||||
}
|
||||
|
||||
// cancel default background changes
|
||||
&:active, &:focus {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// add toolbar control animation
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
// making the icons larger than the default size
|
||||
& svg {
|
||||
inline-size: $euiSize;
|
||||
block-size: $euiSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unifiedDataTableToolbarControlGroup {
|
||||
box-shadow: inset 0 0 0 $euiBorderWidthThin $euiBorderColor;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: $euiBorderRadiusSmall;
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
flex-direction: row;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: $euiBorderWidthThin solid $euiColorBorderBasePlain;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
& .unifiedDataTableToolbarControlButton .euiDataGridToolbarControl {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
|
|
@ -48,6 +46,7 @@
|
|||
.unifiedDataTableToolbarControlIconButton .euiToolTipAnchor .euiButtonIcon {
|
||||
inline-size: $euiSizeXL;
|
||||
block-size: $euiSizeXL;
|
||||
border-radius: inherit;
|
||||
|
||||
// cancel default behaviour
|
||||
&:hover, &:active, &:focus {
|
||||
|
|
@ -58,7 +57,7 @@
|
|||
}
|
||||
|
||||
.unifiedDataTableToolbarControlIconButton + .unifiedDataTableToolbarControlIconButton {
|
||||
border-inline-start: $euiBorderThin;
|
||||
border-inline-start: $euiBorderWidthThin solid $euiColorBorderBasePlain;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ describe('Unified data table cell rendering', function () {
|
|||
/>
|
||||
);
|
||||
expect(component.html()).toMatchInlineSnapshot(
|
||||
`"<div data-test-subj=\\"dataTableExpandCellActionPopover\\" class=\\"euiFlexGroup css-1h68cm-euiFlexGroup-none-flexStart-stretch-row\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><span class=\\"unifiedDataTable__cellPopoverValue eui-textBreakWord\\"><span>100</span></span></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonIcon css-wprskz-euiButtonIcon-xs-empty-primary\\" type=\\"button\\" aria-label=\\"Close popover\\" data-test-subj=\\"docTableClosePopover\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div>"`
|
||||
`"<div data-test-subj=\\"dataTableExpandCellActionPopover\\" class=\\"euiFlexGroup css-1h68cm-euiFlexGroup-none-flexStart-stretch-row\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><span class=\\"unifiedDataTable__cellPopoverValue eui-textBreakWord\\"><span>100</span></span></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonIcon css-6m8561-euiButtonIcon-xs-empty-primary\\" type=\\"button\\" aria-label=\\"Close popover\\" data-test-subj=\\"docTableClosePopover\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div>"`
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -180,7 +180,7 @@ describe('Unified data table cell rendering', function () {
|
|||
/>
|
||||
);
|
||||
expect(component.html()).toMatchInlineSnapshot(
|
||||
`"<div data-test-subj=\\"dataTableExpandCellActionPopover\\" class=\\"euiFlexGroup css-1h68cm-euiFlexGroup-none-flexStart-stretch-row\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><span class=\\"unifiedDataTable__cellPopoverValue eui-textBreakWord\\"><span>100</span></span></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonIcon css-wprskz-euiButtonIcon-xs-empty-primary\\" type=\\"button\\" aria-label=\\"Close popover\\" data-test-subj=\\"docTableClosePopover\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div>"`
|
||||
`"<div data-test-subj=\\"dataTableExpandCellActionPopover\\" class=\\"euiFlexGroup css-1h68cm-euiFlexGroup-none-flexStart-stretch-row\\"><div class=\\"euiFlexItem css-9sbomz-euiFlexItem-grow-1\\"><span class=\\"unifiedDataTable__cellPopoverValue eui-textBreakWord\\"><span>100</span></span></div><div class=\\"euiFlexItem css-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonIcon css-6m8561-euiButtonIcon-xs-empty-primary\\" type=\\"button\\" aria-label=\\"Close popover\\" data-test-subj=\\"docTableClosePopover\\"><span data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div>"`
|
||||
);
|
||||
findTestSubject(component, 'docTableClosePopover').simulate('click');
|
||||
expect(closePopoverMockFn).toHaveBeenCalledTimes(1);
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@ import { stubLogstashDataView as dataView } from '@kbn/data-views-plugin/common/
|
|||
import { coreMock } from '@kbn/core/public/mocks';
|
||||
import { type DataViewField } from '@kbn/data-views-plugin/common';
|
||||
import { FieldTypeFilter, type FieldTypeFilterProps } from './field_type_filter';
|
||||
import { render, screen, within } from '@testing-library/react';
|
||||
import { screen, within } from '@testing-library/react';
|
||||
import { render } from '@elastic/eui/lib/test/rtl';
|
||||
import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
|
||||
import { userEvent } from '@testing-library/user-event';
|
||||
|
||||
|
|
|
|||
|
|
@ -29,6 +29,9 @@ import {
|
|||
useEuiTheme,
|
||||
EuiTitle,
|
||||
useGeneratedHtmlId,
|
||||
logicalCSS,
|
||||
UseEuiTheme,
|
||||
mathWithUnits,
|
||||
} from '@elastic/eui';
|
||||
import type { CoreStart } from '@kbn/core-lifecycle-browser';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
|
|
@ -49,7 +52,22 @@ const EQUAL_HEIGHT_OFFSET = 2; // to avoid changes in the header's height after
|
|||
const popoverTitleStyle = css`
|
||||
padding: ${EQUAL_HEIGHT_OFFSET}px 0;
|
||||
`;
|
||||
const filterButtonStyle = css`
|
||||
|
||||
const filterPopoverStyle = ({ euiTheme }: UseEuiTheme) => css`
|
||||
.euiFilterButton__wrapper {
|
||||
${logicalCSS('left', `-${euiTheme.size.s}`)}
|
||||
${logicalCSS('min-width', '0')}
|
||||
${logicalCSS('width', `calc(100% + ${mathWithUnits(euiTheme.size.s, (x) => x * 2)})`)}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const filterButtonStyle = ({ euiTheme }: UseEuiTheme) => css`
|
||||
padding: 0;
|
||||
|
||||
&,
|
||||
& .euiFilterButton__text {
|
||||
min-width: 0;
|
||||
|
|
@ -166,12 +184,13 @@ export function FieldTypeFilter<T extends FieldListItem = DataViewField>({
|
|||
display="block"
|
||||
isOpen={isOpen}
|
||||
closePopover={() => setIsOpen(false)}
|
||||
css={filterPopoverStyle}
|
||||
button={
|
||||
<EuiFilterButton
|
||||
aria-label={i18n.translate('unifiedFieldList.fieldTypeFilter.filterByTypeAriaLabel', {
|
||||
defaultMessage: 'Filter by type',
|
||||
})}
|
||||
color="primary"
|
||||
color="text"
|
||||
isSelected={isOpen}
|
||||
numFilters={selectedFieldTypes.length}
|
||||
hasActiveFilters={!!selectedFieldTypes.length}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { stubLogstashDataView as dataView } from '@kbn/data-views-plugin/common/data_view.stub';
|
||||
import { EuiText, EuiLoadingSpinner } from '@elastic/eui';
|
||||
import { EuiText, EuiLoadingSpinner, EuiThemeProvider } from '@elastic/eui';
|
||||
import { mountWithIntl } from '@kbn/test-jest-helpers';
|
||||
import { DataViewField } from '@kbn/data-views-plugin/common';
|
||||
import { ReactWrapper } from 'enzyme';
|
||||
|
|
@ -22,7 +22,8 @@ import { ExistenceFetchStatus } from '../../types';
|
|||
import { FieldsAccordion } from './fields_accordion';
|
||||
import { NoFieldsCallout } from './no_fields_callout';
|
||||
import { useGroupedFields, type GroupedFieldsParams } from '../../hooks/use_grouped_fields';
|
||||
import { render, screen, within } from '@testing-library/react';
|
||||
import { screen, within } from '@testing-library/react';
|
||||
import { render } from '@elastic/eui/lib/test/rtl';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
jest.mock('lodash', () => {
|
||||
|
|
@ -99,6 +100,9 @@ describe('UnifiedFieldList FieldListGrouped + useGroupedFields()', () => {
|
|||
render(<Wrapper hookParams={hookParams} listProps={listProps} />);
|
||||
}
|
||||
|
||||
const mountComponent = async (component: React.ReactElement) =>
|
||||
await mountWithIntl(<EuiThemeProvider>{component}</EuiThemeProvider>);
|
||||
|
||||
async function mountGroupedList({ listProps, hookParams }: WrapperProps): Promise<ReactWrapper> {
|
||||
const Wrapper: React.FC<WrapperProps> = (props) => {
|
||||
const {
|
||||
|
|
@ -110,10 +114,10 @@ describe('UnifiedFieldList FieldListGrouped + useGroupedFields()', () => {
|
|||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<EuiThemeProvider>
|
||||
<FieldListFilters {...fieldListFiltersProps} />
|
||||
<FieldListGrouped {...props.listProps} fieldGroups={fieldGroups} />
|
||||
</>
|
||||
</EuiThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -128,8 +132,8 @@ describe('UnifiedFieldList FieldListGrouped + useGroupedFields()', () => {
|
|||
return wrapper!;
|
||||
}
|
||||
|
||||
it('renders correctly in empty state', () => {
|
||||
const wrapper = mountWithIntl(
|
||||
it('renders correctly in empty state', async () => {
|
||||
const wrapper = await mountComponent(
|
||||
<FieldListGrouped
|
||||
{...defaultProps}
|
||||
fieldGroups={{}}
|
||||
|
|
|
|||
|
|
@ -304,7 +304,7 @@ export const UserProfilesSelectable = <Option extends UserProfileWithAvatar | nu
|
|||
|
||||
onChange(values);
|
||||
}}
|
||||
style={{ maxHeight: height }}
|
||||
css={{ maxHeight: height }}
|
||||
singleSelection={singleSelection}
|
||||
searchable
|
||||
searchProps={{
|
||||
|
|
@ -383,12 +383,7 @@ export const UserProfilesSelectable = <Option extends UserProfileWithAvatar | nu
|
|||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
{selectedCount ? (
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
flush="right"
|
||||
onClick={() => onChange?.([])}
|
||||
style={{ height: '1rem' }}
|
||||
>
|
||||
<EuiButtonEmpty size="xs" flush="right" onClick={() => onChange?.([])}>
|
||||
{clearButtonLabel ?? (
|
||||
<FormattedMessage
|
||||
id="userProfileComponents.userProfilesSelectable.clearButtonLabel"
|
||||
|
|
|
|||
|
|
@ -10,18 +10,20 @@
|
|||
import { UseEuiTheme } from '@elastic/eui';
|
||||
|
||||
export const IconButtonGroupStyles = ({ euiTheme }: UseEuiTheme) => {
|
||||
const border = `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain} !important`;
|
||||
|
||||
return {
|
||||
button: {
|
||||
'&.euiButtonGroupButton': {
|
||||
backgroundColor: euiTheme.colors.emptyShade,
|
||||
border: `${euiTheme.border.thin} !important`,
|
||||
border,
|
||||
borderRight: 'none !important',
|
||||
'&:first-of-type': {
|
||||
borderTopLeftRadius: `${euiTheme.border.radius.medium} !important`,
|
||||
borderBottomLeftRadius: `${euiTheme.border.radius.medium} !important`,
|
||||
},
|
||||
'&:last-of-type': {
|
||||
borderRight: `${euiTheme.border.thin} !important`,
|
||||
borderRight: border,
|
||||
borderTopRightRadius: `${euiTheme.border.radius.medium} !important`,
|
||||
borderBottomRightRadius: `${euiTheme.border.radius.medium} !important`,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -15,17 +15,24 @@ export const fontWeightDefinitions = (euiTheme: UseEuiTheme['euiTheme']) => ({
|
|||
});
|
||||
|
||||
export const ToolbarButtonStyles = ({ euiTheme }: UseEuiTheme) => {
|
||||
const isAmsterdam = euiTheme.themeName === 'EUI_THEME_AMSTERDAM';
|
||||
|
||||
return {
|
||||
default: {
|
||||
// style declaration carried over from https://github.com/elastic/kibana/blob/v8.10.4/src/plugins/kibana_react/public/toolbar_button/toolbar_button.scss
|
||||
// informed by issue https://github.com/elastic/eui/issues/4730
|
||||
borderStyle: 'solid',
|
||||
border: euiTheme.border.thin,
|
||||
borderColor: euiTheme.border.color,
|
||||
},
|
||||
default: isAmsterdam
|
||||
? {
|
||||
// style declaration carried over from https://github.com/elastic/kibana/blob/v8.10.4/src/plugins/kibana_react/public/toolbar_button/toolbar_button.scss
|
||||
// informed by issue https://github.com/elastic/eui/issues/4730
|
||||
borderStyle: 'solid',
|
||||
border: euiTheme.border.thin,
|
||||
borderColor: euiTheme.border.color,
|
||||
}
|
||||
: {
|
||||
// manual border override to ensure disabled buttons have a border to align with EuiButtonGroup styles
|
||||
border: `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}`,
|
||||
},
|
||||
emptyButton: {
|
||||
backgroundColor: euiTheme.colors.backgroundBasePlain,
|
||||
border: `${euiTheme.border.thin}`,
|
||||
border: `${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}`,
|
||||
color: `${euiTheme.colors.textParagraph}`,
|
||||
},
|
||||
buttonPositions: {
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ describe('<ToolbarPopover />', () => {
|
|||
const component = mountWithIntl(<ToolbarPopover label="test" children={() => !isOpen} />);
|
||||
const button = component.find('EuiButton');
|
||||
expect(button).toHaveStyleRule('background-color', '#FFFFFF');
|
||||
expect(button).toHaveStyleRule('border', '1px solid #E3E8F2');
|
||||
expect(button).toHaveStyleRule('border', '1px solid #CAD3E2');
|
||||
expect(button).toHaveStyleRule('color', '#1D2A3E');
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -2,4 +2,4 @@
|
|||
|
||||
exports[`VisLegend Component Legend closed should match the snapshot 1`] = `"<div class=\\"visLegend\\"><button type=\\"button\\" class=\\"visLegend__toggle kbn-resetFocusState\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"false\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\" title=\\"Toggle legend\\"><span data-euiicon-type=\\"list\\" color=\\"text\\"></span></button></div>"`;
|
||||
|
||||
exports[`VisLegend Component Legend open should match the snapshot 1`] = `"<div class=\\"visLegend\\"><button type=\\"button\\" class=\\"visLegend__toggle kbn-resetFocusState visLegend__toggle--isOpen\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"true\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\" title=\\"Toggle legend\\"><span data-euiicon-type=\\"list\\" color=\\"text\\"></span></button><ul class=\\"visLegend__list\\" id=\\"legendId\\"><li class=\\"visLegend__value\\"><div class=\\"euiPopover css-bvzum9-euiPopover-block\\"><button class=\\"euiButtonEmpty visLegend__button css-1eiq4rd-euiButtonDisplay-euiButtonEmpty-xs-empty-text-flush-left\\" type=\\"button\\" data-label=\\"A\\" title=\\"A\\" aria-label=\\"A, toggle options\\" data-test-subj=\\"legend-A\\"><span class=\\"euiButtonEmpty__content css-cf8eum-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\"><span data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></span><span class=\\"visLegend__valueTitle\\">A</span></span></span></button></div></li><li class=\\"visLegend__value\\"><div class=\\"euiPopover css-bvzum9-euiPopover-block\\"><button class=\\"euiButtonEmpty visLegend__button css-1eiq4rd-euiButtonDisplay-euiButtonEmpty-xs-empty-text-flush-left\\" type=\\"button\\" data-label=\\"B\\" title=\\"B\\" aria-label=\\"B, toggle options\\" data-test-subj=\\"legend-B\\"><span class=\\"euiButtonEmpty__content css-cf8eum-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\"><span data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></span><span class=\\"visLegend__valueTitle\\">B</span></span></span></button></div></li></ul></div>"`;
|
||||
exports[`VisLegend Component Legend open should match the snapshot 1`] = `"<div class=\\"visLegend\\"><button type=\\"button\\" class=\\"visLegend__toggle kbn-resetFocusState visLegend__toggle--isOpen\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"true\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\" title=\\"Toggle legend\\"><span data-euiicon-type=\\"list\\" color=\\"text\\"></span></button><ul class=\\"visLegend__list\\" id=\\"legendId\\"><li class=\\"visLegend__value\\"><div class=\\"euiPopover css-bvzum9-euiPopover-block\\"><button class=\\"euiButtonEmpty visLegend__button css-1t7pnba-euiButtonDisplay-euiButtonEmpty-xs-empty-text-flush-left\\" type=\\"button\\" data-label=\\"A\\" title=\\"A\\" aria-label=\\"A, toggle options\\" data-test-subj=\\"legend-A\\"><span class=\\"euiButtonEmpty__content css-1lhgt31-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\"><span data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></span><span class=\\"visLegend__valueTitle\\">A</span></span></span></button></div></li><li class=\\"visLegend__value\\"><div class=\\"euiPopover css-bvzum9-euiPopover-block\\"><button class=\\"euiButtonEmpty visLegend__button css-1t7pnba-euiButtonDisplay-euiButtonEmpty-xs-empty-text-flush-left\\" type=\\"button\\" data-label=\\"B\\" title=\\"B\\" aria-label=\\"B, toggle options\\" data-test-subj=\\"legend-B\\"><span class=\\"euiButtonEmpty__content css-1lhgt31-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\"><span data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></span><span class=\\"visLegend__valueTitle\\">B</span></span></span></button></div></li></ul></div>"`;
|
||||
|
|
|
|||
|
|
@ -70,6 +70,23 @@ const optionListControlStyles = {
|
|||
borderStartStartRadius: '0 !important',
|
||||
},
|
||||
}),
|
||||
/* additional custom overrides due to unexpected component usage;
|
||||
open issue: https://github.com/elastic/eui-private/issues/270 */
|
||||
filterGroup: css`
|
||||
/* prevents duplicate border due to nested filterGroup */
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.euiFilterButton__wrapper {
|
||||
padding: 0;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
export const OptionsListControl = ({
|
||||
|
|
@ -215,6 +232,7 @@ export const OptionsListControl = ({
|
|||
fullWidth
|
||||
compressed={isCompressed(componentApi)}
|
||||
className={controlPanelClassName}
|
||||
css={optionListControlStyles.filterGroup}
|
||||
>
|
||||
<EuiInputPopover
|
||||
id={popoverId}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export function FieldTypeFilter({
|
|||
{...buttonProps}
|
||||
data-test-subj="toggleFieldFilterButton"
|
||||
iconType="arrowDown"
|
||||
isSelected={fieldTypesValue.length > 0}
|
||||
isSelected={isPopoverOpen}
|
||||
numFilters={0}
|
||||
hasActiveFilters={fieldTypesValue.length > 0}
|
||||
numActiveFilters={fieldTypesValue.length}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { screen } from '@testing-library/react';
|
||||
import { render } from '@elastic/eui/lib/test/rtl';
|
||||
import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
|
||||
import { buildDataTableRecord } from '@kbn/discover-utils';
|
||||
import { createStubDataView } from '@kbn/data-views-plugin/common/data_view.stub';
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@ export const changeDataViewStyles = ({
|
|||
return {
|
||||
trigger: {
|
||||
maxWidth: fullWidth ? undefined : MIN_WIDTH,
|
||||
border: theme.border.thin,
|
||||
backgroundColor: theme.colors.backgroundBasePlain,
|
||||
border: `${theme.border.width.thin} solid ${theme.colors.borderBasePlain}`,
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -285,7 +285,7 @@ export function ChangeDataView({
|
|||
padding: 11px;
|
||||
border-radius: ${euiTheme.border.radius.small} 0 0 ${euiTheme.border.radius.small};
|
||||
background-color: ${euiTheme.colors.lightestShade};
|
||||
border: ${euiTheme.border.thin};
|
||||
border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain};
|
||||
border-right: 0;
|
||||
`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,17 @@
|
|||
.kbnFilterButtonGroup {
|
||||
position: relative;
|
||||
height: $euiFormControlHeight;
|
||||
background-color: $euiFormInputGroupLabelBackground;
|
||||
border-radius: $euiFormControlBorderRadius;
|
||||
box-shadow: 0 0 1px inset rgba($euiFormBorderOpaqueColor, .4);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: $euiBorderWidthThin solid $euiFormBorderColor;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Targets any interactable elements
|
||||
*:enabled {
|
||||
|
|
|
|||
|
|
@ -641,7 +641,10 @@ export const QueryBarTopRow = React.memo(
|
|||
timeRangeForSuggestionsOverride={props.timeRangeForSuggestionsOverride}
|
||||
filtersForSuggestions={props.filtersForSuggestions}
|
||||
onFiltersUpdated={props.onFiltersUpdated}
|
||||
buttonProps={{ size: shouldShowDatePickerAsBadge() ? 's' : 'm', display: 'empty' }}
|
||||
buttonProps={{
|
||||
size: shouldShowDatePickerAsBadge() ? 's' : 'm',
|
||||
display: 'empty',
|
||||
}}
|
||||
isDisabled={props.isDisabled}
|
||||
suggestionsAbstraction={props.suggestionsAbstraction}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -270,7 +270,7 @@ export class FeatureTable extends Component<Props, State> {
|
|||
);
|
||||
|
||||
const extraAction = (
|
||||
<EuiText style={{ maxWidth: 200 }} size={'xs'} data-test-subj="reservedFeatureDescription">
|
||||
<EuiText css={{ maxWidth: 200 }} size={'xs'} data-test-subj="reservedFeatureDescription">
|
||||
{feature.reserved.description}
|
||||
</EuiText>
|
||||
);
|
||||
|
|
@ -353,7 +353,7 @@ export class FeatureTable extends Component<Props, State> {
|
|||
featureName: feature.name,
|
||||
},
|
||||
})}
|
||||
style={{
|
||||
css={{
|
||||
minWidth: 200,
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -36,10 +36,9 @@ export const TokenField: FunctionComponent<TokenFieldProps> = ({ value, ...props
|
|||
defaultMessage: 'Token',
|
||||
})}
|
||||
value={value}
|
||||
style={{
|
||||
css={{
|
||||
fontFamily: euiThemeVars.euiCodeFontFamily,
|
||||
fontSize: euiThemeVars.euiFontSizeXS,
|
||||
backgroundColor: 'transparent',
|
||||
}}
|
||||
onFocus={(event) => event.currentTarget.select()}
|
||||
readOnly
|
||||
|
|
@ -53,7 +52,6 @@ export const TokenField: FunctionComponent<TokenFieldProps> = ({ value, ...props
|
|||
})}
|
||||
iconType="copyClipboard"
|
||||
color="accentSecondary"
|
||||
style={{ backgroundColor: 'transparent' }}
|
||||
onClick={copyText}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -84,6 +84,7 @@ export const FieldTypesHelpPopover: FC<{
|
|||
const helpButton = (
|
||||
<EuiFilterButton
|
||||
grow={false}
|
||||
isSelected={isHelpOpen}
|
||||
onClick={onHelpClick}
|
||||
data-test-subj="fieldTypesHelpButton"
|
||||
className="dataVisualizerFieldTypesHelp__button"
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ export const StatusFilter: React.FC<RuleStatusFilterProps> = React.memo(
|
|||
<EuiFilterButton
|
||||
data-test-subj="status-filter-button"
|
||||
iconType="arrowDown"
|
||||
isSelected={isPopoverOpen}
|
||||
hasActiveFilters={selectedStatus.length > 0}
|
||||
numActiveFilters={selectedStatus.length}
|
||||
numFilters={selectedStatus.length}
|
||||
|
|
|
|||
|
|
@ -50,6 +50,8 @@ export const FilterActivity = React.memo<FilterActivityProps>(
|
|||
`}
|
||||
grow={false}
|
||||
onClick={() => handleFilterChange('all')}
|
||||
isToggle
|
||||
isSelected={type === 'all'}
|
||||
hasActiveFilters={type === 'all'}
|
||||
numFilters={userActionsStats && userActionsStats.total > 0 ? userActionsStats.total : 0}
|
||||
isLoading={isLoading}
|
||||
|
|
@ -62,6 +64,8 @@ export const FilterActivity = React.memo<FilterActivityProps>(
|
|||
<EuiFilterButton
|
||||
withNext
|
||||
grow={false}
|
||||
isToggle
|
||||
isSelected={type === 'user'}
|
||||
hasActiveFilters={type === 'user'}
|
||||
numFilters={
|
||||
userActionsStats && userActionsStats.totalComments > 0
|
||||
|
|
@ -76,6 +80,8 @@ export const FilterActivity = React.memo<FilterActivityProps>(
|
|||
{i18n.COMMENTS}
|
||||
</EuiFilterButton>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={type === 'action'}
|
||||
hasActiveFilters={type === 'action'}
|
||||
numFilters={
|
||||
userActionsStats && userActionsStats.totalOtherActions > 0
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { EuiHeaderLink } from '@elastic/eui';
|
||||
import { EuiButtonEmpty } from '@elastic/eui';
|
||||
import {
|
||||
DATA_QUALITY_DETAILS_LOCATOR_ID,
|
||||
DataQualityDetailsLocatorParams,
|
||||
|
|
@ -41,15 +41,16 @@ export const DatasetQualityDetailsLink = React.memo(
|
|||
});
|
||||
|
||||
return (
|
||||
<EuiHeaderLink
|
||||
<EuiButtonEmpty
|
||||
{...datasetQualityLinkDetailsProps}
|
||||
color="primary"
|
||||
data-test-subj={`datasetQualityTableDetailsLink-${dataStream}`}
|
||||
target="_blank"
|
||||
size="xs"
|
||||
flush="both"
|
||||
>
|
||||
{children}
|
||||
</EuiHeaderLink>
|
||||
</EuiButtonEmpty>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -152,6 +152,8 @@ export const PlatformSelector: React.FunctionComponent<Props> = ({
|
|||
{VISIBLE_PLATFORM_OPTIONS.map((option) => (
|
||||
<EuiFilterButton
|
||||
key={option.id}
|
||||
isToggle
|
||||
isSelected={platform === option.id}
|
||||
hasActiveFilters={platform === option.id}
|
||||
onClick={() => setPlatform(option.id)}
|
||||
data-test-subj={option['data-test-subj']}
|
||||
|
|
|
|||
|
|
@ -541,13 +541,22 @@ export const DetailsPageMappingsContent: FunctionComponent<{
|
|||
)}
|
||||
onClick={onToggleChange}
|
||||
>
|
||||
<EuiFilterButton hasActiveFilters={!isJSONVisible} withNext>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={!isJSONVisible}
|
||||
hasActiveFilters={!isJSONVisible}
|
||||
withNext
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.idxMgmt.indexDetails.mappings.tableView"
|
||||
defaultMessage="List"
|
||||
/>
|
||||
</EuiFilterButton>
|
||||
<EuiFilterButton hasActiveFilters={isJSONVisible}>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={isJSONVisible}
|
||||
hasActiveFilters={isJSONVisible}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.idxMgmt.indexDetails.mappings.json"
|
||||
defaultMessage="JSON"
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@ import type { DatatableColumn } from '@kbn/expressions-plugin/public';
|
|||
import { coreMock } from '@kbn/core/public/mocks';
|
||||
import { uiActionsPluginMock } from '@kbn/ui-actions-plugin/public/mocks';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render, screen, within } from '@testing-library/react';
|
||||
import { screen, within } from '@testing-library/react';
|
||||
import { render } from '@elastic/eui/lib/test/rtl';
|
||||
|
||||
import { type TextBasedDataPanelProps, TextBasedDataPanel } from './datapanel';
|
||||
import type { TextBasedPrivateState } from '../types';
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ const toolbarButtonStyles = (euiThemeContext: UseEuiTheme) => {
|
|||
min-width: 0;
|
||||
border-width: ${euiTheme.border.width.thin};
|
||||
border-style: solid;
|
||||
border-color: ${euiTheme.border.color}; // Lighten the border color for all states
|
||||
border-color: ${euiTheme.colors.borderBasePlain}; // Lighten the border color for all states
|
||||
|
||||
// Override background color for non-disabled buttons
|
||||
&:not(:disabled) {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
transition: background $euiAnimSpeedNormal ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: transparentize($euiColorDarkShade, .9);
|
||||
background-color: lightOrDarkTheme(rgba($euiColorTextPrimary, .08), rgba($euiColorPlainLight, .12));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ export function FitToData(props: Props) {
|
|||
iconType="expand"
|
||||
aria-label={label}
|
||||
title={title}
|
||||
color="text"
|
||||
display={props.autoFitToDataBounds ? 'fill' : 'empty'}
|
||||
/>
|
||||
</EuiPanel>
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ export const EntityFilter: FC<CustomComponentProps> = React.memo(({ query, onCha
|
|||
iconType="arrowDown"
|
||||
iconSide="right"
|
||||
onClick={setIsOpen.bind(null, (prev) => !prev)}
|
||||
isSelected={isOpen}
|
||||
hasActiveFilters={hasActiveFilters}
|
||||
numActiveFilters={hasActiveFilters ? selectedOptions.length : undefined}
|
||||
grow
|
||||
|
|
|
|||
|
|
@ -609,7 +609,7 @@ function UserAvatarEditor({
|
|||
</FormRow>
|
||||
) : (
|
||||
<EuiFlexGroup responsive={false}>
|
||||
<EuiFlexItem grow={false} style={{ width: 64 }}>
|
||||
<EuiFlexItem grow={false} css={{ width: 64 }}>
|
||||
<FormRow
|
||||
label={
|
||||
<FormLabel for="data.avatar.initials">
|
||||
|
|
@ -657,7 +657,7 @@ function UserAvatarEditor({
|
|||
onClick={() => formik.setFieldValue('data.avatar.color', getRandomColor())}
|
||||
size="xs"
|
||||
flush="right"
|
||||
style={{ height: euiTheme.base }}
|
||||
css={{ height: euiTheme.base }}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.security.accountManagement.userProfile.randomizeButton"
|
||||
|
|
@ -791,7 +791,7 @@ const UserRoles: FunctionComponent<UserRoleProps> = ({ user }) => {
|
|||
<EuiBadgeGroup
|
||||
gutterSize="xs"
|
||||
data-test-subj="remainingRoles"
|
||||
style={{
|
||||
css={{
|
||||
maxWidth: '200px',
|
||||
}}
|
||||
>
|
||||
|
|
@ -1081,7 +1081,7 @@ export const SaveChangesBottomBar: FunctionComponent = () => {
|
|||
const { count } = useFormChangesContext();
|
||||
|
||||
return (
|
||||
<EuiFlexGroup alignItems="center" style={{ width: '100%' }} responsive={false}>
|
||||
<EuiFlexGroup alignItems="center" css={{ width: '100%' }} responsive={false}>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup responsive={false} gutterSize="xs">
|
||||
<EuiFlexItem grow={false}>
|
||||
|
|
|
|||
|
|
@ -389,6 +389,8 @@ export const TypesFilterButton: FunctionComponent<CustomComponentProps> = ({ que
|
|||
<EuiFilterButton
|
||||
iconType="user"
|
||||
iconSide="left"
|
||||
isToggle
|
||||
isSelected={filters.type === 'rest'}
|
||||
hasActiveFilters={filters.type === 'rest'}
|
||||
onClick={() => {
|
||||
onFilterChange({ ...filters, type: filters.type === 'rest' ? undefined : 'rest' });
|
||||
|
|
@ -412,6 +414,8 @@ export const TypesFilterButton: FunctionComponent<CustomComponentProps> = ({ que
|
|||
<EuiFilterButton
|
||||
iconType="cluster"
|
||||
iconSide="left"
|
||||
isToggle
|
||||
isSelected={filters.type === 'cross_cluster'}
|
||||
hasActiveFilters={filters.type === 'cross_cluster'}
|
||||
onClick={() => {
|
||||
onFilterChange({
|
||||
|
|
@ -438,6 +442,8 @@ export const TypesFilterButton: FunctionComponent<CustomComponentProps> = ({ que
|
|||
<EuiFilterButton
|
||||
iconType="gear"
|
||||
iconSide="left"
|
||||
isToggle
|
||||
isSelected={filters.type === 'managed'}
|
||||
hasActiveFilters={filters.type === 'managed'}
|
||||
onClick={() => {
|
||||
onFilterChange({
|
||||
|
|
@ -476,6 +482,8 @@ export const ExpiredFilterButton: FunctionComponent<CustomComponentProps> = ({
|
|||
return (
|
||||
<>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={filters.expired === false}
|
||||
hasActiveFilters={filters.expired === false}
|
||||
onClick={() => {
|
||||
if (filters.expired === false) {
|
||||
|
|
@ -493,6 +501,8 @@ export const ExpiredFilterButton: FunctionComponent<CustomComponentProps> = ({
|
|||
/>
|
||||
</EuiFilterButton>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={filters.expired === true}
|
||||
hasActiveFilters={filters.expired === true}
|
||||
onClick={() => {
|
||||
if (filters.expired === true) {
|
||||
|
|
|
|||
|
|
@ -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=\\"/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/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-14j2cxa-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-j6zf49-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1oc2fb7-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt eui-dnzkgr-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical\\"><div class=\\"euiEmptyPrompt__main eui-1s4ogs-euiEmptyPrompt__main-vertical-l\\"><div class=\\"euiEmptyPrompt__icon eui-1ysd0i8-euiEmptyPrompt__icon-vertical\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content eui-1cebog9-euiEmptyPrompt__content-vertical\\"><h2 class=\\"euiTitle eui-f3huy-euiTitle-m\\">We hit an authentication error</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1ph7xy0-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-1rkti4c-euiFlexGroup-m-center-center-column-euiEmptyPrompt__actions-vertical\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" class=\\"euiButton eui-ez3yru-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"logInButton\\"><span class=\\"eui-cf8eum-euiButtonDisplayContent\\">Log in</span></a></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=\\"/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/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-14j2cxa-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-j6zf49-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1oc2fb7-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt eui-dnzkgr-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical\\"><div class=\\"euiEmptyPrompt__main eui-1s4ogs-euiEmptyPrompt__main-vertical-l\\"><div class=\\"euiEmptyPrompt__icon eui-1ysd0i8-euiEmptyPrompt__icon-vertical\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content eui-1cebog9-euiEmptyPrompt__content-vertical\\"><h2 class=\\"euiTitle eui-f3huy-euiTitle-m\\">We hit an authentication error</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1ph7xy0-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-1rkti4c-euiFlexGroup-m-center-center-column-euiEmptyPrompt__actions-vertical\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" class=\\"euiButton eui-lm9iyu-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"logInButton\\"><span class=\\"eui-1lhgt31-euiButtonDisplayContent\\">Log in</span></a></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=\\"/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/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-14j2cxa-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-j6zf49-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1oc2fb7-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt eui-dnzkgr-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical\\"><div class=\\"euiEmptyPrompt__main eui-1s4ogs-euiEmptyPrompt__main-vertical-l\\"><div class=\\"euiEmptyPrompt__icon eui-1ysd0i8-euiEmptyPrompt__icon-vertical\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content eui-1cebog9-euiEmptyPrompt__content-vertical\\"><h2 class=\\"euiTitle eui-f3huy-euiTitle-m\\">We hit an authentication error</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1ph7xy0-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-1rkti4c-euiFlexGroup-m-center-center-column-euiEmptyPrompt__actions-vertical\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" class=\\"euiButton eui-ez3yru-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"logInButton\\"><span class=\\"eui-cf8eum-euiButtonDisplayContent\\">Log in</span></a></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=\\"/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/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-14j2cxa-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-j6zf49-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1oc2fb7-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt eui-dnzkgr-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical\\"><div class=\\"euiEmptyPrompt__main eui-1s4ogs-euiEmptyPrompt__main-vertical-l\\"><div class=\\"euiEmptyPrompt__icon eui-1ysd0i8-euiEmptyPrompt__icon-vertical\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content eui-1cebog9-euiEmptyPrompt__content-vertical\\"><h2 class=\\"euiTitle eui-f3huy-euiTitle-m\\">We hit an authentication error</h2><div class=\\"euiSpacer euiSpacer--m eui-jv9za2-euiSpacer-m\\"></div><div class=\\"euiText eui-1ph7xy0-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-1rkti4c-euiFlexGroup-m-center-center-column-euiEmptyPrompt__actions-vertical\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" class=\\"euiButton eui-lm9iyu-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"logInButton\\"><span class=\\"eui-1lhgt31-euiButtonDisplayContent\\">Log in</span></a></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=\\"/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/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-14j2cxa-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-j6zf49-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1oc2fb7-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt eui-dnzkgr-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical\\"><div class=\\"euiEmptyPrompt__main eui-1s4ogs-euiEmptyPrompt__main-vertical-l\\"><div class=\\"euiEmptyPrompt__icon eui-1ysd0i8-euiEmptyPrompt__icon-vertical\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content eui-1cebog9-euiEmptyPrompt__content-vertical\\"><h2 class=\\"euiTitle eui-f3huy-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-1ph7xy0-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-1rkti4c-euiFlexGroup-m-center-center-column-euiEmptyPrompt__actions-vertical\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/path/to/logout\\" rel=\\"noreferrer\\" class=\\"euiButton eui-ez3yru-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"eui-cf8eum-euiButtonDisplayContent\\">Log in as different user</span></a></div><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonEmpty eui-1y378bv-euiButtonDisplay-euiButtonEmpty-m-empty-primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonEmpty__content eui-cf8eum-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\">Go back</span></span></button></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=\\"/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/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-14j2cxa-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-j6zf49-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1oc2fb7-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt eui-dnzkgr-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical\\"><div class=\\"euiEmptyPrompt__main eui-1s4ogs-euiEmptyPrompt__main-vertical-l\\"><div class=\\"euiEmptyPrompt__icon eui-1ysd0i8-euiEmptyPrompt__icon-vertical\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content eui-1cebog9-euiEmptyPrompt__content-vertical\\"><h2 class=\\"euiTitle eui-f3huy-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-1ph7xy0-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-1rkti4c-euiFlexGroup-m-center-center-column-euiEmptyPrompt__actions-vertical\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/path/to/logout\\" rel=\\"noreferrer\\" class=\\"euiButton eui-lm9iyu-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"eui-1lhgt31-euiButtonDisplayContent\\">Log in as different user</span></a></div><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonEmpty eui-hb1eud-euiButtonDisplay-euiButtonEmpty-m-empty-primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonEmpty__content eui-1lhgt31-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\">Go back</span></span></button></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=\\"/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/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-14j2cxa-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-j6zf49-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1oc2fb7-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt eui-dnzkgr-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical\\"><div class=\\"euiEmptyPrompt__main eui-1s4ogs-euiEmptyPrompt__main-vertical-l\\"><div class=\\"euiEmptyPrompt__icon eui-1ysd0i8-euiEmptyPrompt__icon-vertical\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content eui-1cebog9-euiEmptyPrompt__content-vertical\\"><h2 class=\\"euiTitle eui-f3huy-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-1ph7xy0-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-1rkti4c-euiFlexGroup-m-center-center-column-euiEmptyPrompt__actions-vertical\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/path/to/logout\\" rel=\\"noreferrer\\" class=\\"euiButton eui-ez3yru-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"eui-cf8eum-euiButtonDisplayContent\\">Log in as different user</span></a></div><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonEmpty eui-1y378bv-euiButtonDisplay-euiButtonEmpty-m-empty-primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonEmpty__content eui-cf8eum-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\">Go back</span></span></button></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=\\"/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/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-14j2cxa-euiPageOuter-row-grow\\"><main id=\\"EuiPageTemplateInner_generated-id\\" class=\\"eui-nq554q-euiPageInner\\"><section class=\\"eui-j6zf49-euiPageSection-grow-l-center-transparent\\"><div class=\\"eui-1oc2fb7-euiPageSection__content-l-center\\"><div class=\\"euiPanel euiPanel--plain euiEmptyPrompt eui-dnzkgr-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical\\"><div class=\\"euiEmptyPrompt__main eui-1s4ogs-euiEmptyPrompt__main-vertical-l\\"><div class=\\"euiEmptyPrompt__icon eui-1ysd0i8-euiEmptyPrompt__icon-vertical\\"><span data-euiicon-type=\\"warning\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content eui-1cebog9-euiEmptyPrompt__content-vertical\\"><h2 class=\\"euiTitle eui-f3huy-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-1ph7xy0-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-1rkti4c-euiFlexGroup-m-center-center-column-euiEmptyPrompt__actions-vertical\\"><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><a href=\\"/path/to/logout\\" rel=\\"noreferrer\\" class=\\"euiButton eui-lm9iyu-euiButtonDisplay-m-defaultMinWidth-fill-primary\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"eui-1lhgt31-euiButtonDisplayContent\\">Log in as different user</span></a></div><div class=\\"euiFlexItem eui-kpsrin-euiFlexItem-growZero\\"><button class=\\"euiButtonEmpty eui-hb1eud-euiButtonDisplay-euiButtonEmpty-m-empty-primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonEmpty__content eui-1lhgt31-euiButtonDisplayContent\\"><span class=\\"eui-textTruncate euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></div></div></section></main></div></body></html>"`;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
|
||||
import { EuiButton, useEuiTheme } from '@elastic/eui';
|
||||
import { css } from '@emotion/react';
|
||||
import type { CSSProperties } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import type { ApplicationStart, Capabilities } from '@kbn/core/public';
|
||||
|
|
@ -16,7 +15,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
|
|||
interface Props {
|
||||
isDisabled?: boolean;
|
||||
size?: 's' | 'm';
|
||||
style?: CSSProperties;
|
||||
fullWidth?: boolean;
|
||||
onClick?: () => void;
|
||||
capabilities: Capabilities;
|
||||
navigateToApp: ApplicationStart['navigateToApp'];
|
||||
|
|
@ -25,7 +24,7 @@ interface Props {
|
|||
export const ManageSpacesButton: React.FC<Props> = ({
|
||||
isDisabled,
|
||||
size,
|
||||
style,
|
||||
fullWidth,
|
||||
onClick,
|
||||
capabilities,
|
||||
navigateToApp,
|
||||
|
|
@ -48,12 +47,15 @@ export const ManageSpacesButton: React.FC<Props> = ({
|
|||
size={size || 's'}
|
||||
isDisabled={isDisabled}
|
||||
onClick={navigateToManageSpaces}
|
||||
style={style}
|
||||
data-test-subj="manageSpaces"
|
||||
css={css`
|
||||
margin: ${euiTheme.size.m};
|
||||
width: calc(100% - ${euiTheme.size.m} * 2);
|
||||
`}
|
||||
css={
|
||||
fullWidth
|
||||
? { width: `100%` }
|
||||
: css`
|
||||
margin: ${euiTheme.size.m};
|
||||
width: calc(100% - ${euiTheme.size.m} * 2);
|
||||
`
|
||||
}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.spaces.manageSpacesButton.manageSpacesButtonLabel"
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ export const SpacesDescription: FC<Props> = (props: Props) => {
|
|||
>
|
||||
<ManageSpacesButton
|
||||
size="s"
|
||||
style={{ width: `100%` }}
|
||||
fullWidth
|
||||
onClick={props.onClickManageSpaceBtn}
|
||||
capabilities={props.capabilities}
|
||||
navigateToApp={props.navigateToApp}
|
||||
|
|
|
|||
|
|
@ -107,22 +107,14 @@ export const SpaceListInternal = ({
|
|||
|
||||
if (displayLimit && authorizedSpaceTargets.length > displayLimit) {
|
||||
button = isExpanded ? (
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={() => setIsExpanded(false)}
|
||||
style={{ alignSelf: 'center' }}
|
||||
>
|
||||
<EuiButtonEmpty size="xs" onClick={() => setIsExpanded(false)}>
|
||||
<FormattedMessage
|
||||
id="xpack.spaces.spaceList.showLessSpacesLink"
|
||||
defaultMessage="show less"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
) : (
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={() => setIsExpanded(true)}
|
||||
style={{ alignSelf: 'center' }}
|
||||
>
|
||||
<EuiButtonEmpty size="xs" onClick={() => setIsExpanded(true)}>
|
||||
<FormattedMessage
|
||||
id="xpack.spaces.spaceList.showMoreSpacesLink"
|
||||
defaultMessage="+{count} more"
|
||||
|
|
|
|||
|
|
@ -80,6 +80,8 @@ const OutcomeControls = () => {
|
|||
);
|
||||
|
||||
const getFilterButtonPropsFor = (filter: PreviewDocsFilterOption) => ({
|
||||
isToggle: previewDocsFilter === filter,
|
||||
isSelected: previewDocsFilter === filter,
|
||||
hasActiveFilters: previewDocsFilter === filter,
|
||||
onClick: () => changePreviewDocsFilter(filter),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@ export const EventLogListStatusFilter = (props: EventLogListStatusFilterProps) =
|
|||
<EuiFilterButton
|
||||
data-test-subj="eventLogStatusFilterButton"
|
||||
iconType="arrowDown"
|
||||
isSelected={isPopoverOpen}
|
||||
hasActiveFilters={selectedOptions.length > 0}
|
||||
numActiveFilters={selectedOptions.length}
|
||||
numFilters={selectedOptions.length}
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ export const ActionTypeFilter: React.FunctionComponent<ActionTypeFilterProps> =
|
|||
button={
|
||||
<EuiFilterButton
|
||||
iconType="arrowDown"
|
||||
isSelected={isPopoverOpen}
|
||||
hasActiveFilters={filters.length > 0}
|
||||
numActiveFilters={filters.length}
|
||||
numFilters={filters.length}
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@ export const RuleExecutionStatusFilter: React.FunctionComponent<RuleExecutionSta
|
|||
button={
|
||||
<EuiFilterButton
|
||||
iconType="arrowDown"
|
||||
isSelected={isPopoverOpen}
|
||||
hasActiveFilters={selectedValues.length > 0}
|
||||
numActiveFilters={selectedValues.length}
|
||||
numFilters={selectedValues.length}
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@ export const RuleLastRunOutcomeFilter: React.FunctionComponent<RuleLastRunOutcom
|
|||
button={
|
||||
<EuiFilterButton
|
||||
iconType="arrowDown"
|
||||
isSelected={isPopoverOpen}
|
||||
hasActiveFilters={selectedOutcomes.length > 0}
|
||||
numActiveFilters={selectedOutcomes.length}
|
||||
numFilters={selectedOutcomes.length}
|
||||
|
|
|
|||
|
|
@ -105,6 +105,7 @@ export const RuleStatusFilter = (props: RuleStatusFilterProps) => {
|
|||
<EuiFilterButton
|
||||
data-test-subj={buttonDataTestSubj}
|
||||
iconType="arrowDown"
|
||||
isSelected={isPopoverOpen}
|
||||
hasActiveFilters={selectedStatuses.length > 0}
|
||||
numActiveFilters={selectedStatuses.length}
|
||||
numFilters={selectedStatuses.length}
|
||||
|
|
|
|||
|
|
@ -69,10 +69,12 @@ const OptionWrapper = memo(
|
|||
|
||||
const RuleTagFilterPopoverButton = memo(
|
||||
({
|
||||
isSelected,
|
||||
selectedTags,
|
||||
onClosePopover,
|
||||
buttonDataTestSubj,
|
||||
}: {
|
||||
isSelected: boolean;
|
||||
selectedTags: string[];
|
||||
onClosePopover: () => void;
|
||||
buttonDataTestSubj?: string;
|
||||
|
|
@ -81,6 +83,7 @@ const RuleTagFilterPopoverButton = memo(
|
|||
<EuiFilterButton
|
||||
data-test-subj={buttonDataTestSubj}
|
||||
iconType="arrowDown"
|
||||
isSelected={isSelected}
|
||||
hasActiveFilters={selectedTags.length > 0}
|
||||
numActiveFilters={selectedTags.length}
|
||||
numFilters={selectedTags.length}
|
||||
|
|
@ -282,6 +285,7 @@ export const RuleTagFilter = memo((props: RuleTagFilterProps) => {
|
|||
closePopover={onClosePopover}
|
||||
button={
|
||||
<RuleTagFilterPopoverButton
|
||||
isSelected={isPopoverOpen}
|
||||
selectedTags={selectedTags}
|
||||
onClosePopover={onClosePopover}
|
||||
buttonDataTestSubj={buttonDataTestSubj}
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ export const TypeFilter: React.FunctionComponent<TypeFilterProps> = ({
|
|||
button={
|
||||
<EuiFilterButton
|
||||
iconType="arrowDown"
|
||||
isSelected={isPopoverOpen}
|
||||
hasActiveFilters={filters.length > 0}
|
||||
numActiveFilters={filters.length}
|
||||
numFilters={filters.length}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,11 @@ export function FilterExpanded(props: FilterProps) {
|
|||
return (
|
||||
<EuiPopover
|
||||
button={
|
||||
<EuiFilterButton onClick={() => setIsOpen((prevState) => !prevState)} iconType="arrowDown">
|
||||
<EuiFilterButton
|
||||
onClick={() => setIsOpen((prevState) => !prevState)}
|
||||
iconType="arrowDown"
|
||||
isSelected={isOpen}
|
||||
>
|
||||
{props.label}
|
||||
</EuiFilterButton>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,12 @@ export function LabelsFieldFilter(props: FilterProps) {
|
|||
};
|
||||
|
||||
const button = (
|
||||
<EuiFilterButton iconType="arrowDown" iconSide="right" onClick={onButtonClick}>
|
||||
<EuiFilterButton
|
||||
iconType="arrowDown"
|
||||
iconSide="right"
|
||||
isSelected={isPopoverOpen}
|
||||
onClick={onButtonClick}
|
||||
>
|
||||
{LABELS_LABEL}
|
||||
</EuiFilterButton>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -136,6 +136,7 @@ export function FieldValueSelection({
|
|||
defaultMessage: 'expands filter group for {label} filter',
|
||||
values: { label },
|
||||
})}
|
||||
isSelected={isPopoverOpen || forceOpen}
|
||||
hasActiveFilters={numOfFilters > 0}
|
||||
iconType="arrowDown"
|
||||
numActiveFilters={numOfFilters}
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@ export const FilterStatusButton = ({
|
|||
return (
|
||||
<EuiFilterButton
|
||||
data-test-subj={dataTestSubj}
|
||||
isToggle
|
||||
isSelected={isActive}
|
||||
hasActiveFilters={isActive}
|
||||
isDisabled={isDisabled}
|
||||
onClick={() => {
|
||||
|
|
|
|||
|
|
@ -158,6 +158,8 @@ export const WaterfallFilter = ({
|
|||
<EuiFilterGroup>
|
||||
{MIME_FILTERS.map(({ label, mimeType }) => (
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={activeFilters.includes(mimeType)}
|
||||
hasActiveFilters={activeFilters.includes(mimeType)}
|
||||
onClick={() => toggleFilters(mimeType)}
|
||||
key={label}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,28 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`FilterStatusButton renders without errors for valid props 1`] = `
|
||||
<button
|
||||
class="euiButtonEmpty euiFilterButton euiFilterButton-hasActiveFilters emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-withNext-hasActiveFilters"
|
||||
data-test-subj="foo"
|
||||
type="button"
|
||||
<div
|
||||
class="euiFilterButton__wrapper css-nbqv3o-wrapper-withNext-hasToggle"
|
||||
>
|
||||
<span
|
||||
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
|
||||
<button
|
||||
aria-pressed="true"
|
||||
class="euiButtonGroupButton euiButtonGroupButton-isSelected euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-fill-text-euiFilterButton-hasActiveFilters-toggle"
|
||||
data-test-subj="foo"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="euiFilterButton__text emotion-euiFilterButton__text"
|
||||
data-text="Up"
|
||||
title="Up"
|
||||
class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed-euiFilterButton__content"
|
||||
>
|
||||
Up
|
||||
<span
|
||||
class="euiFilterButton__text emotion-euiFilterButton__text"
|
||||
data-text="Up"
|
||||
title="Up"
|
||||
>
|
||||
Up
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`FilterStatusButton shallow renders without errors for valid props 1`] = `
|
||||
|
|
|
|||
|
|
@ -4,57 +4,72 @@ exports[`StatusFilterComponent renders without errors for valid props 1`] = `
|
|||
<div
|
||||
class="euiFilterGroup emotion-euiFilterGroup-uncompressed"
|
||||
>
|
||||
<button
|
||||
class="euiButtonEmpty euiFilterButton euiFilterButton-hasActiveFilters emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-withNext-hasActiveFilters"
|
||||
data-test-subj="xpack.synthetics.filterBar.filterStatusAll"
|
||||
type="button"
|
||||
<div
|
||||
class="euiFilterButton__wrapper css-nbqv3o-wrapper-withNext-hasToggle"
|
||||
>
|
||||
<span
|
||||
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
|
||||
<button
|
||||
aria-pressed="true"
|
||||
class="euiButtonGroupButton euiButtonGroupButton-isSelected euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-fill-text-euiFilterButton-hasActiveFilters-toggle"
|
||||
data-test-subj="xpack.synthetics.filterBar.filterStatusAll"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="euiFilterButton__text emotion-euiFilterButton__text"
|
||||
data-text="All"
|
||||
title="All"
|
||||
class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed-euiFilterButton__content"
|
||||
>
|
||||
All
|
||||
<span
|
||||
class="euiFilterButton__text emotion-euiFilterButton__text"
|
||||
data-text="All"
|
||||
title="All"
|
||||
>
|
||||
All
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-withNext"
|
||||
data-test-subj="xpack.synthetics.filterBar.filterStatusUp"
|
||||
type="button"
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="euiFilterButton__wrapper css-nbqv3o-wrapper-withNext-hasToggle"
|
||||
>
|
||||
<span
|
||||
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
|
||||
<button
|
||||
aria-pressed="false"
|
||||
class="euiButtonGroupButton euiFilterButton euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text-euiFilterButton-toggle"
|
||||
data-test-subj="xpack.synthetics.filterBar.filterStatusUp"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="euiFilterButton__text emotion-euiFilterButton__text"
|
||||
data-text="Up"
|
||||
title="Up"
|
||||
class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed-euiFilterButton__content"
|
||||
>
|
||||
Up
|
||||
<span
|
||||
class="euiFilterButton__text emotion-euiFilterButton__text"
|
||||
data-text="Up"
|
||||
title="Up"
|
||||
>
|
||||
Up
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton"
|
||||
data-test-subj="xpack.synthetics.filterBar.filterStatusDown"
|
||||
type="button"
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="euiFilterButton__wrapper css-10m1aro-wrapper-hasToggle"
|
||||
>
|
||||
<span
|
||||
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
|
||||
<button
|
||||
aria-pressed="false"
|
||||
class="euiButtonGroupButton euiFilterButton euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text-euiFilterButton-toggle"
|
||||
data-test-subj="xpack.synthetics.filterBar.filterStatusDown"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="euiFilterButton__text emotion-euiFilterButton__text"
|
||||
data-text="Down"
|
||||
title="Down"
|
||||
class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed-euiFilterButton__content"
|
||||
>
|
||||
Down
|
||||
<span
|
||||
class="euiFilterButton__text emotion-euiFilterButton__text"
|
||||
data-text="Down"
|
||||
title="Down"
|
||||
>
|
||||
Down
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -31,6 +31,8 @@ export const FilterStatusButton = ({
|
|||
return (
|
||||
<EuiFilterButton
|
||||
data-test-subj={dataTestSubj}
|
||||
isToggle
|
||||
isSelected={isActive}
|
||||
hasActiveFilters={isActive}
|
||||
isDisabled={isDisabled}
|
||||
onClick={() => {
|
||||
|
|
|
|||
|
|
@ -126,6 +126,8 @@ export const HistoricalResultsComponent: FC<Props> = ({ indexName }) => {
|
|||
aria-label={FILTER_RESULTS_BY_OUTCOME}
|
||||
>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={isShowAll}
|
||||
hasActiveFilters={isShowAll}
|
||||
role="radio"
|
||||
data-test-subj="historicalResultsOutcomeFilterAll"
|
||||
|
|
@ -135,6 +137,8 @@ export const HistoricalResultsComponent: FC<Props> = ({ indexName }) => {
|
|||
{ALL}
|
||||
</EuiFilterButton>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={isShowPass}
|
||||
hasActiveFilters={isShowPass}
|
||||
role="radio"
|
||||
data-test-subj="historicalResultsOutcomeFilterPass"
|
||||
|
|
@ -144,6 +148,8 @@ export const HistoricalResultsComponent: FC<Props> = ({ indexName }) => {
|
|||
{PASS}
|
||||
</EuiFilterButton>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={isShowFail}
|
||||
hasActiveFilters={isShowFail}
|
||||
role="radio"
|
||||
data-test-subj="historicalResultsOutcomeFilterFail"
|
||||
|
|
|
|||
|
|
@ -157,6 +157,8 @@ export const RulesTableHeader = ({
|
|||
<EuiFilterGroup>
|
||||
<EuiFilterButton
|
||||
withNext
|
||||
isToggle
|
||||
isSelected={enabledDisabledItemsFilterState === 'enabled'}
|
||||
hasActiveFilters={enabledDisabledItemsFilterState === 'enabled'}
|
||||
onClick={toggleEnabledRulesFilter}
|
||||
data-test-subj={RULES_TABLE_HEADER_TEST_SUBJ.RULES_ENABLED_FILTER}
|
||||
|
|
@ -167,6 +169,8 @@ export const RulesTableHeader = ({
|
|||
/>
|
||||
</EuiFilterButton>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={enabledDisabledItemsFilterState === 'enabled'}
|
||||
hasActiveFilters={enabledDisabledItemsFilterState === 'disabled'}
|
||||
onClick={toggleDisabledRulesFilter}
|
||||
data-test-subj={RULES_TABLE_HEADER_TEST_SUBJ.RULES_DISABLED_FILTER}
|
||||
|
|
|
|||
|
|
@ -86,6 +86,8 @@ export const JobsTableFiltersComponent = ({
|
|||
<EuiFlexItem grow={false}>
|
||||
<EuiFilterGroup>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={showElasticJobs}
|
||||
hasActiveFilters={showElasticJobs}
|
||||
onClick={handleElasticJobsClick}
|
||||
data-test-subj="show-elastic-jobs-filter-button"
|
||||
|
|
@ -94,6 +96,8 @@ export const JobsTableFiltersComponent = ({
|
|||
{i18n.SHOW_ELASTIC_JOBS}
|
||||
</EuiFilterButton>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={showCustomJobs}
|
||||
hasActiveFilters={showCustomJobs}
|
||||
onClick={handleCustomJobsClick}
|
||||
data-test-subj="show-custom-jobs-filter-button"
|
||||
|
|
|
|||
|
|
@ -138,6 +138,8 @@ export const RulesWithGapsOverviewPanel = () => {
|
|||
<EuiFlexItem grow={false}>
|
||||
<EuiFilterGroup>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={showRulesWithGaps}
|
||||
hasActiveFilters={showRulesWithGaps}
|
||||
onClick={handleShowRulesWithGapsFilterButtonClick}
|
||||
iconType={showRulesWithGaps ? `checkInCircleFilled` : undefined}
|
||||
|
|
|
|||
|
|
@ -120,6 +120,8 @@ const RulesTableFiltersComponent = () => {
|
|||
<EuiFlexItem grow={false}>
|
||||
<EuiFilterGroup>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={showElasticRules}
|
||||
hasActiveFilters={showElasticRules}
|
||||
onClick={handleElasticRulesClick}
|
||||
data-test-subj="showElasticRulesFilterButton"
|
||||
|
|
@ -129,6 +131,8 @@ const RulesTableFiltersComponent = () => {
|
|||
{rulesPrebuiltInstalledCount != null ? ` (${rulesPrebuiltInstalledCount ?? ''})` : ''}
|
||||
</EuiFilterButton>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={showCustomRules}
|
||||
hasActiveFilters={showCustomRules}
|
||||
onClick={handleCustomRulesClick}
|
||||
data-test-subj="showCustomRulesFilterButton"
|
||||
|
|
@ -142,6 +146,8 @@ const RulesTableFiltersComponent = () => {
|
|||
<EuiFlexItem grow={false}>
|
||||
<EuiFilterGroup>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={enabled === true}
|
||||
hasActiveFilters={enabled === true}
|
||||
onClick={handleShowEnabledRulesClick}
|
||||
data-test-subj="showEnabledRulesFilterButton"
|
||||
|
|
@ -150,6 +156,8 @@ const RulesTableFiltersComponent = () => {
|
|||
{i18n.ENABLED_RULES}
|
||||
</EuiFilterButton>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={enabled === false}
|
||||
hasActiveFilters={enabled === false}
|
||||
onClick={handleShowDisabledRulesClick}
|
||||
data-test-subj="showDisabledRulesFilterButton"
|
||||
|
|
|
|||
|
|
@ -76,12 +76,16 @@ const CoverageOverviewFiltersPanelComponent = () => {
|
|||
<EuiFilterGroup>
|
||||
<EuiFilterButton
|
||||
withNext
|
||||
isToggle
|
||||
isSelected={!showExpandedCells}
|
||||
hasActiveFilters={!showExpandedCells}
|
||||
onClick={handleCollapseCellsFilterClick}
|
||||
>
|
||||
{i18n.COLLAPSE_CELLS_FILTER_BUTTON}
|
||||
</EuiFilterButton>
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={showExpandedCells}
|
||||
hasActiveFilters={showExpandedCells}
|
||||
onClick={handleExpandCellsFilterClick}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -4,39 +4,49 @@ exports[`Select Flow Direction rendering it renders the basic group button for u
|
|||
<div
|
||||
class="euiFilterGroup emotion-euiFilterGroup-uncompressed"
|
||||
>
|
||||
<button
|
||||
class="euiButtonEmpty euiFilterButton euiFilterButton-hasActiveFilters emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-withNext-hasActiveFilters"
|
||||
data-test-subj="uniDirectional"
|
||||
type="button"
|
||||
<div
|
||||
class="euiFilterButton__wrapper css-nbqv3o-wrapper-withNext-hasToggle"
|
||||
>
|
||||
<span
|
||||
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
|
||||
<button
|
||||
aria-pressed="true"
|
||||
class="euiButtonGroupButton euiButtonGroupButton-isSelected euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-fill-text-euiFilterButton-hasActiveFilters-toggle"
|
||||
data-test-subj="uniDirectional"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="euiFilterButton__text emotion-euiFilterButton__text"
|
||||
data-text="Unidirectional"
|
||||
title="Unidirectional"
|
||||
class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed-euiFilterButton__content"
|
||||
>
|
||||
Unidirectional
|
||||
<span
|
||||
class="euiFilterButton__text emotion-euiFilterButton__text"
|
||||
data-text="Unidirectional"
|
||||
title="Unidirectional"
|
||||
>
|
||||
Unidirectional
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton"
|
||||
data-test-subj="biDirectional"
|
||||
type="button"
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="euiFilterButton__wrapper css-10m1aro-wrapper-hasToggle"
|
||||
>
|
||||
<span
|
||||
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
|
||||
<button
|
||||
aria-pressed="false"
|
||||
class="euiButtonGroupButton euiFilterButton euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text-euiFilterButton-toggle"
|
||||
data-test-subj="biDirectional"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="euiFilterButton__text emotion-euiFilterButton__text"
|
||||
data-text="Bidirectional"
|
||||
title="Bidirectional"
|
||||
class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed-euiFilterButton__content"
|
||||
>
|
||||
Bidirectional
|
||||
<span
|
||||
class="euiFilterButton__text emotion-euiFilterButton__text"
|
||||
data-text="Bidirectional"
|
||||
title="Bidirectional"
|
||||
>
|
||||
Bidirectional
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -20,6 +20,8 @@ export const FlowDirectionSelect = React.memo<Props>(({ onChangeDirection, selec
|
|||
<EuiFilterGroup>
|
||||
<EuiFilterButton
|
||||
withNext
|
||||
isToggle
|
||||
isSelected={selectedDirection === FlowDirection.uniDirectional}
|
||||
hasActiveFilters={selectedDirection === FlowDirection.uniDirectional}
|
||||
onClick={() => onChangeDirection(FlowDirection.uniDirectional)}
|
||||
data-test-subj={FlowDirection.uniDirectional}
|
||||
|
|
@ -28,6 +30,8 @@ export const FlowDirectionSelect = React.memo<Props>(({ onChangeDirection, selec
|
|||
</EuiFilterButton>
|
||||
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={selectedDirection === FlowDirection.biDirectional}
|
||||
hasActiveFilters={selectedDirection === FlowDirection.biDirectional}
|
||||
onClick={() => onChangeDirection(FlowDirection.biDirectional)}
|
||||
data-test-subj={FlowDirection.biDirectional}
|
||||
|
|
|
|||
|
|
@ -79,6 +79,8 @@ export const SearchRow = React.memo<Props>(
|
|||
<>
|
||||
<EuiFilterButton
|
||||
data-test-subj="only-favorites-toggle"
|
||||
isToggle
|
||||
isSelected={onlyFavorites}
|
||||
hasActiveFilters={onlyFavorites}
|
||||
onClick={onToggleOnlyFavorites}
|
||||
numFilters={favoriteCount ?? undefined}
|
||||
|
|
|
|||
|
|
@ -93,6 +93,8 @@ export const useTimelineStatus = ({
|
|||
return isTemplateFilterEnabled
|
||||
? filters.map((tab: TemplateTimelineFilter) => (
|
||||
<EuiFilterButton
|
||||
isToggle
|
||||
isSelected={tab.id === templateTimelineType}
|
||||
hasActiveFilters={tab.id === templateTimelineType}
|
||||
key={`template-timeline-filter-${tab.id}`}
|
||||
numFilters={tab.count}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,9 @@ export function SloUiCommonServiceProvider({ getService }: FtrProviderContext) {
|
|||
async clickOverviewMode() {
|
||||
await retry.tryForTime(60 * 1000, async () => {
|
||||
await this.assertOverviewModeSelectorExists();
|
||||
await testSubjects.click(OVERVIEW_MODE_SELECTOR);
|
||||
const wrapper = await testSubjects.find(OVERVIEW_MODE_SELECTOR);
|
||||
const button = await testSubjects.findDescendant('groups', wrapper);
|
||||
await button.click();
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
36
yarn.lock
36
yarn.lock
|
|
@ -2169,12 +2169,12 @@
|
|||
resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-1.0.0.tgz#2db728692ab1f13e08826a65c2adb180c3962195"
|
||||
integrity sha512-2CZ8w5+vJgruqWm5XEA1KENX+ZYAjMfkRyJtXafq4/jXIFLYCWqqAAWmVgrbY+DufLr405Zf8718L7Rp39TMEg==
|
||||
|
||||
"@elastic/eui-amsterdam@npm:@elastic/eui@102.2.0-amsterdam.0":
|
||||
version "102.2.0-amsterdam.0"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-102.2.0-amsterdam.0.tgz#f520caecd95e1054de6b8e21d67f76768ae0b345"
|
||||
integrity sha512-VqZAac9KHMaPS8yFaibSvD/j2+5/F2/smXrVXIOoTZb7EfK7Fg0UVJOzRdlLon+4W0gHaHvijbe2q8lmym7q6A==
|
||||
"@elastic/eui-amsterdam@npm:@elastic/eui@102.3.0-amsterdam.0":
|
||||
version "102.3.0-amsterdam.0"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-102.3.0-amsterdam.0.tgz#c7cf10b8746d949ca3ce395429b282e8265b9f78"
|
||||
integrity sha512-G1W09aeOWldHwPkkJJ9/42q7+z5N9cr/oNESVW1wZ/FunYJt0FUIxqTj3QbpzK3B/qdCaW+Xe4wOyoW5Zad04Q==
|
||||
dependencies:
|
||||
"@elastic/eui-theme-common" "1.0.0"
|
||||
"@elastic/eui-theme-common" "1.1.0"
|
||||
"@elastic/prismjs-esql" "^1.1.0"
|
||||
"@hello-pangea/dnd" "^16.6.0"
|
||||
"@types/lodash" "^4.14.202"
|
||||
|
|
@ -2210,26 +2210,26 @@
|
|||
uuid "^8.3.0"
|
||||
vfile "^4.2.1"
|
||||
|
||||
"@elastic/eui-theme-borealis@1.0.0":
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-1.0.0.tgz#f85679d2d72dfc43a620241cbf4161d4e4e81841"
|
||||
integrity sha512-Zf3ZX5siUhF+TNOdP0FZ3PNEpVmfe3DDXFm5biAKFlGp4e5yrR1FKPYOzkOdJtPWlOoNaedawnALXNVjp1UH8w==
|
||||
"@elastic/eui-theme-borealis@1.1.0":
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-1.1.0.tgz#36cea288aa5238987d72601725653734a4db789f"
|
||||
integrity sha512-sm5wxrDPv/vul/37AAFmj9GfeAyA55+DWYQPI3k79hu6/Dcsp53Kdwaxh4BgFuNjfAAtMbmPkpBIOJMGSCeW1w==
|
||||
|
||||
"@elastic/eui-theme-common@1.0.0":
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-1.0.0.tgz#c5e7b7597c4ebe71fc533b18458415a14a93794d"
|
||||
integrity sha512-9+P21npVm05OmFr0OPkA5DSdts9teOo/OEotbJFAVkqBLkNf+Eevv6q89B8eQ6r383RnVwTl7vBzb6M9PnULJg==
|
||||
"@elastic/eui-theme-common@1.1.0":
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui-theme-common/-/eui-theme-common-1.1.0.tgz#952d98faf5a6afab50f126cd6eca980966317a1d"
|
||||
integrity sha512-WI+hkJcPdX82a7Y7LGIkHnC80X4O8YwjjzgwEHngsuMXKuFUkCs9JFru1adzg+mF0TAseUjE+V5PvNWlrm8J3g==
|
||||
dependencies:
|
||||
"@types/lodash" "^4.14.202"
|
||||
chroma-js "^2.4.2"
|
||||
lodash "^4.17.21"
|
||||
|
||||
"@elastic/eui@102.2.0":
|
||||
version "102.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-102.2.0.tgz#cba90fece1afa78686fd51ba9fa5fd019fd0c6a0"
|
||||
integrity sha512-ksFQ66kKtftvcaEuHuzI7vI6CSDeet9QU5nkBDOl18QuoA3VyeGzX4ISranWj+Gyk22SGn2K9BEudXSVkoDBWg==
|
||||
"@elastic/eui@102.3.0":
|
||||
version "102.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-102.3.0.tgz#8bdeceb229d6987874ac32ec0db6e34d74bae0c9"
|
||||
integrity sha512-U0WOGkKaiYc42t6d+42RYnFJD6p03pHheM8H8t2sr+fmsnd6sMzEwkng+xiTZrUGSvtqmw1ltbJXdK31J5EwdQ==
|
||||
dependencies:
|
||||
"@elastic/eui-theme-common" "1.0.0"
|
||||
"@elastic/eui-theme-common" "1.1.0"
|
||||
"@elastic/prismjs-esql" "^1.1.0"
|
||||
"@hello-pangea/dnd" "^16.6.0"
|
||||
"@types/lodash" "^4.14.202"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue