Skip to content

Commit

Permalink
Design PR
Browse files Browse the repository at this point in the history 
- Changed Field Filters component (once again)
- Fixed some overflows of accordions
  • Loading branch information
cchaos committed Jun 11, 2020
1 parent d8e3cec commit d13b2bc
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 94 deletions.
17 changes: 7 additions & 10 deletions x-pack/plugins/lens/public/indexpattern_datasource/_datapanel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,6 @@
line-height: $euiSizeXXL;
}

.lnsInnerIndexPatternDataPanel__filterWrapper {
flex-grow: 0;
}

/**
* 1. Don't cut off the shadow of the field items
*/
Expand All @@ -39,13 +35,12 @@
top: 0;
left: $euiSize; /* 1 */
right: $euiSizeXS; /* 1 */
}

.lnsInnerIndexPatternDataPanel__filterButton {
width: 100%;
color: $euiColorPrimary;
padding-left: $euiSizeS;
padding-right: $euiSizeS;
/* EUI-TODO: Allow passing a classname to this component */
.euiAccordion__childWrapper {
// Quick fix for making sure the shadow and focus rings are visible outside the accordion bounds
padding: $euiSizeXS;
}
}

.lnsInnerIndexPatternDataPanel__textField {
Expand All @@ -54,7 +49,9 @@
}

.lnsInnerIndexPatternDataPanel__filterType {
font-size: $euiFontSizeS;
padding: $euiSizeS;
border-bottom: 1px solid $euiColorLightestShade;
}

.lnsInnerIndexPatternDataPanel__filterTypeInner {
Expand Down
159 changes: 75 additions & 84 deletions x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,23 @@
import { uniq, indexBy } from 'lodash';
import React, { useState, useEffect, memo, useCallback } from 'react';
import {
// @ts-ignore
EuiHighlight,
EuiFlexGroup,
EuiFlexItem,
EuiContextMenuPanel,
EuiContextMenuItem,
EuiContextMenuPanelProps,
EuiPopover,
EuiPopoverTitle,
EuiButton,
EuiText,
EuiCallOut,
EuiFormControlLayout,
EuiNotificationBadge,
EuiSpacer,
EuiFormLabel,
EuiAccordion,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { DataPublicPluginStart } from 'src/plugins/data/public';
import { EuiFilterGroup, EuiFilterButton } from '@elastic/eui';
import { DatasourceDataPanelProps, DataType, StateSetter } from '../types';
import { ChildDragDropProvider, DragContextState } from '../drag_drop';
import { FieldItem } from './field_item';
Expand Down Expand Up @@ -293,7 +290,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
direction="column"
responsive={false}
>
<EuiFlexItem grow={null}>
<EuiFlexItem grow={false}>
<div className="lnsInnerIndexPatternDataPanel__header">
<ChangeIndexPattern
data-test-subj="indexPattern-switcher"
Expand All @@ -312,44 +309,70 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
/>
</div>
</EuiFlexItem>
<EuiFlexItem>
<div className="lnsInnerIndexPatternDataPanel__filtersWrapper">
<EuiFlexItem grow={false}>
<EuiFormControlLayout
icon="search"
fullWidth
clear={{
title: i18n.translate('xpack.lens.indexPatterns.clearFiltersLabel', {
defaultMessage: 'Clear name and type filters',
}),
'aria-label': i18n.translate('xpack.lens.indexPatterns.clearFiltersLabel', {
defaultMessage: 'Clear name and type filters',
}),
onClick: () => {
trackUiEvent('indexpattern_filters_cleared');
clearLocalState();
},
}}
>
<input
className="euiFieldText euiFieldText--fullWidth lnsInnerIndexPatternDataPanel__textField"
data-test-subj="lnsIndexPatternFieldSearch"
placeholder={i18n.translate('xpack.lens.indexPatterns.filterByNameLabel', {
defaultMessage: 'Search field names',
description: 'Search the list of fields in the index pattern for the provided text',
})}
value={localState.nameFilter}
onChange={(e) => {
setLocalState({ ...localState, nameFilter: e.target.value });
}}
aria-label={i18n.translate('xpack.lens.indexPatterns.filterByNameAriaLabel', {
defaultMessage: 'Search fields',
})}
/>
</EuiFormControlLayout>

<EuiSpacer size="xs" />

<EuiFilterGroup>
<EuiPopover
id="dataPanelTypeFilter"
panelClassName="euiFilterGroup__popoverPanel"
panelPaddingSize="none"
anchorPosition="rightDown"
anchorPosition="rightUp"
display="block"
isOpen={localState.isTypeFilterOpen}
closePopover={() => setLocalState(() => ({ ...localState, isTypeFilterOpen: false }))}
button={
<EuiFlexItem grow={true}>
<EuiButton
data-test-subj="lnsIndexPatternFiltersToggle"
size="s"
onClick={() => {
setLocalState((s) => ({
...s,
isTypeFilterOpen: !localState.isTypeFilterOpen,
}));
}}
>
{localState.typeFilter.length ? (
<>
{fieldFiltersLabel}{' '}
<EuiNotificationBadge size="m">
{localState.typeFilter.length}
</EuiNotificationBadge>
</>
) : (
fieldFiltersLabel
)}
</EuiButton>
<EuiSpacer size="xs" />
</EuiFlexItem>
<EuiFilterButton
iconType="arrowDown"
isSelected={localState.isTypeFilterOpen}
numFilters={localState.typeFilter.length}
hasActiveFilters={localState.typeFilter.length ? true : false}
numActiveFilters={localState.typeFilter.length}
data-test-subj="lnsIndexPatternFiltersToggle"
onClick={() => {
setLocalState((s) => ({
...s,
isTypeFilterOpen: !localState.isTypeFilterOpen,
}));
}}
>
{fieldFiltersLabel}
</EuiFilterButton>
}
>
<EuiPopoverTitle>{fieldFiltersLabel}</EuiPopoverTitle>
<FixedEuiContextMenuPanel
watchedItemProps={['icon', 'disabled']}
data-test-subj="lnsIndexPatternTypeFilterOptions"
Expand All @@ -376,43 +399,9 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
))}
/>
</EuiPopover>
</div>

<div className="lnsInnerIndexPatternDataPanel__filterWrapper">
<EuiFormControlLayout
icon="search"
fullWidth
clear={{
title: i18n.translate('xpack.lens.indexPatterns.clearFiltersLabel', {
defaultMessage: 'Clear name and type filters',
}),
'aria-label': i18n.translate('xpack.lens.indexPatterns.clearFiltersLabel', {
defaultMessage: 'Clear name and type filters',
}),
onClick: () => {
trackUiEvent('indexpattern_filters_cleared');
clearLocalState();
},
}}
>
<input
className="euiFieldText euiFieldText--fullWidth lnsInnerIndexPatternDataPanel__textField"
data-test-subj="lnsIndexPatternFieldSearch"
placeholder={i18n.translate('xpack.lens.indexPatterns.filterByNameLabel', {
defaultMessage: 'Search field names',
description:
'Search the list of fields in the index pattern for the provided text',
})}
value={localState.nameFilter}
onChange={(e) => {
setLocalState({ ...localState, nameFilter: e.target.value });
}}
aria-label={i18n.translate('xpack.lens.indexPatterns.filterByNameAriaLabel', {
defaultMessage: 'Search fields',
})}
/>
</EuiFormControlLayout>
</div>
</EuiFilterGroup>
</EuiFlexItem>
<EuiFlexItem>
<div
className="lnsInnerIndexPatternDataPanel__listWrapper"
ref={(el) => {
Expand Down Expand Up @@ -445,11 +434,13 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
initialIsOpen={true}
id="availableFieldsLabel"
buttonContent={
<EuiFormLabel>
{i18n.translate('xpack.lens.indexPattern.availableFieldsLabel', {
defaultMessage: 'Available fields',
})}
</EuiFormLabel>
<EuiText size="xs">
<strong>
{i18n.translate('xpack.lens.indexPattern.availableFieldsLabel', {
defaultMessage: 'Available fields',
})}
</strong>
</EuiText>
}
extraAction={
<EuiNotificationBadge
Expand Down Expand Up @@ -530,7 +521,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
{i18n.translate(
'xpack.lens.indexPatterns.noFields.fieldTypeFilterBullet',
{
defaultMessage: 'Changing the field type filters',
defaultMessage: 'Changing the field filters',
}
)}
</li>
Expand All @@ -556,11 +547,13 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
initialIsOpen={false}
id="emptyFieldsLabel"
buttonContent={
<EuiFormLabel>
{i18n.translate('xpack.lens.indexPattern.emptyFieldsLabel', {
defaultMessage: 'Empty fields',
})}
</EuiFormLabel>
<EuiText size="xs">
<strong>
{i18n.translate('xpack.lens.indexPattern.emptyFieldsLabel', {
defaultMessage: 'Empty fields',
})}
</strong>
</EuiText>
}
extraAction={
<EuiNotificationBadge
Expand Down Expand Up @@ -593,8 +586,6 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
);
})}
</EuiAccordion>

<EuiSpacer size="l" />
</div>
</div>
</EuiFlexItem>
Expand Down

0 comments on commit d13b2bc

Please sign in to comment.