Skip to content

Commit 0eed62b

Browse files
semdkibanamachine
semd
and
kibanamachine
committed
[RAC] [TGrid] Field Browser migrated to modal (#106541)
* tGid header using EuiDataGrid * useFetchIndex migrated and column_headers refactor * removed useless mock * add badges translations * i18n translations keys fixed * code format * filter default columns not present in field browser * reset button to initial columns * cleaning * dependencies moved * fix functional test with missing data service * remove unused code (unrelated) * fieldBrowser integration with security solutions timeline * lint and translations cleaned * timeline toolbar removed for merge & some test fixes * type fix * type fixes * timeline static default colums * limit size temporary increase * limit size temporary increase * field browser migrated to modal * field browser header remaned to search * commented code removed * toolbar index removed * security solutions field browser button custom styles * bring back FieldsBrowserContainer * UI fixes Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
1 parent 8ca78ee commit 0eed62b

20 files changed

Lines changed: 390 additions & 592 deletions

File tree

‎x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/header_actions.tsx‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,24 @@ const SortingColumnsContainer = styled.div`
5151
}
5252
`;
5353

54+
const FieldBrowserContainer = styled.div`
55+
.euiToolTipAnchor {
56+
.euiButtonContent {
57+
padding: ${({ theme }) => `0 ${theme.eui.paddingSizes.xs}`};
58+
}
59+
button {
60+
color: ${({ theme }) => theme.eui.euiColorPrimary};
61+
}
62+
.euiButtonContent__icon {
63+
width: 16px;
64+
height: 16px;
65+
}
66+
.euiButtonEmpty__text {
67+
display: none;
68+
}
69+
}
70+
`;
71+
5472
const ActionsContainer = styled.div`
5573
align-items: center;
5674
display: flex;
@@ -160,11 +178,13 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = ({
160178
)}
161179

162180
<EventsTh role="button">
163-
{timelinesUi.getFieldBrowser({
164-
browserFields,
165-
columnHeaders,
166-
timelineId,
167-
})}
181+
<FieldBrowserContainer>
182+
{timelinesUi.getFieldBrowser({
183+
browserFields,
184+
columnHeaders,
185+
timelineId,
186+
})}
187+
</FieldBrowserContainer>
168188
</EventsTh>
169189

170190
<EventsTh role="button">

‎x-pack/plugins/timelines/public/components/fields_browser/index.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,17 @@ import { Provider } from 'react-redux';
1111
import { I18nProvider } from '@kbn/i18n/react';
1212
import type { FieldBrowserProps } from '../t_grid/toolbar/fields_browser/types';
1313
import { StatefulFieldsBrowser } from '../t_grid/toolbar/fields_browser';
14-
import {
15-
FIELD_BROWSER_WIDTH,
16-
FIELD_BROWSER_HEIGHT,
17-
} from '../t_grid/toolbar/fields_browser/helpers';
14+
export type { FieldBrowserProps } from '../t_grid/toolbar/fields_browser/types';
1815

1916
const EMPTY_BROWSER_FIELDS = {};
20-
export type FieldBrowserWrappedProps = Omit<FieldBrowserProps, 'width' | 'height'> & {
21-
width?: FieldBrowserProps['width'];
22-
height?: FieldBrowserProps['height'];
23-
};
24-
export type FieldBrowserWrappedComponentProps = FieldBrowserWrappedProps & {
17+
18+
export type FieldBrowserWrappedComponentProps = FieldBrowserProps & {
2519
store: Store;
2620
};
2721

2822
export const FieldBrowserWrappedComponent = (props: FieldBrowserWrappedComponentProps) => {
2923
const { store, ...restProps } = props;
3024
const fieldsBrowseProps = {
31-
width: FIELD_BROWSER_WIDTH,
32-
height: FIELD_BROWSER_HEIGHT,
3325
...restProps,
3426
browserFields: restProps.browserFields ?? EMPTY_BROWSER_FIELDS,
3527
};

‎x-pack/plugins/timelines/public/components/t_grid/body/index.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ import { StatefulFieldsBrowser, tGridActions } from '../../../';
3737
import { TGridModel, tGridSelectors, TimelineState } from '../../../store/t_grid';
3838
import { useDeepEqualSelector } from '../../../hooks/use_selector';
3939
import { RowAction } from './row_action';
40-
import { FIELD_BROWSER_HEIGHT, FIELD_BROWSER_WIDTH } from '../toolbar/fields_browser/helpers';
4140
import * as i18n from './translations';
4241

4342
interface OwnProps {
@@ -221,8 +220,6 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
221220
{
222221
<StatefulFieldsBrowser
223222
data-test-subj="field-browser"
224-
height={FIELD_BROWSER_HEIGHT}
225-
width={FIELD_BROWSER_WIDTH}
226223
browserFields={browserFields}
227224
timelineId={id}
228225
columnHeaders={columnHeaders}

‎x-pack/plugins/timelines/public/components/t_grid/toolbar/fields_browser/categories_pane.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ import { CATEGORIES_PANE_CLASS_NAME, TABLE_HEIGHT } from './helpers';
2121
import * as i18n from './translations';
2222

2323
const CategoryNames = styled.div<{ height: number; width: number }>`
24+
${({ width }) => `width: ${width}px`};
2425
${({ height }) => `height: ${height}px`};
25-
overflow: auto;
26+
overflow-y: hidden;
2627
padding: 5px;
27-
${({ width }) => `width: ${width}px`};
2828
thead {
2929
display: none;
3030
}
@@ -88,12 +88,13 @@ export const CategoriesPane = React.memo<Props>(
8888
<CategoryNames
8989
className={`${CATEGORIES_PANE_CLASS_NAME} euiTable--compressed`}
9090
data-test-subj="categories-container"
91-
height={TABLE_HEIGHT}
9291
onKeyDown={onKeyDown}
9392
ref={containerElement}
9493
width={width}
94+
height={TABLE_HEIGHT}
9595
>
9696
<EuiInMemoryTable
97+
className="eui-yScroll"
9798
columns={getCategoryColumns({
9899
filteredBrowserFields,
99100
onCategorySelected,

‎x-pack/plugins/timelines/public/components/t_grid/toolbar/fields_browser/category.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,8 @@ import * as i18n from './translations';
2626

2727
const TableContainer = styled.div<{ height: number; width: number }>`
2828
${({ height }) => `height: ${height}px`};
29-
overflow-x: hidden;
30-
overflow-y: auto;
3129
${({ width }) => `width: ${width}px`};
30+
overflow: hidden;
3231
`;
3332

3433
TableContainer.displayName = 'TableContainer';
@@ -97,7 +96,7 @@ export const Category = React.memo<Props>(
9796
width={width}
9897
>
9998
<EuiInMemoryTable
100-
className={CATEGORY_TABLE_CLASS_NAME}
99+
className={`${CATEGORY_TABLE_CLASS_NAME} eui-yScroll`}
101100
items={fieldItemsWithRowindex}
102101
columns={columns}
103102
pagination={false}

0 commit comments

Comments
 (0)