From 876a76b4ff3bb5656955ff8e4053e5c8ad5f7937 Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Thu, 20 Jun 2024 22:27:21 +0200 Subject: [PATCH] [8.14] [Cloud Security] Patch fix for Column label on Cloud Security Data table (#186425) (#186545) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Backport This will backport the following commits from `main` to `8.14`: - [[Cloud Security] Patch fix for Column label on Cloud Security Data table (#186425)](https://github.com/elastic/kibana/pull/186425) ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) --------- Co-authored-by: Rickyanto Ang --- .../src/components/data_table.tsx | 9 ++-- .../cloud_security_data_table.tsx | 45 ++++++++++++------- .../pages/findings.ts | 8 ---- .../pages/vulnerabilities.ts | 8 ---- 4 files changed, 35 insertions(+), 35 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index 799b950b558bc..d0b00ef0cbd21 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -265,7 +265,7 @@ export interface UnifiedDataTableProps { theme: ThemeServiceStart; fieldFormats: FieldFormatsStart; uiSettings: IUiSettingsClient; - dataViewFieldEditor: DataViewFieldEditorStart; + dataViewFieldEditor?: DataViewFieldEditorStart; toastNotifications: ToastsStart; storage: Storage; data: DataPublicPluginStart; @@ -625,7 +625,7 @@ export const UnifiedDataTable = ({ () => onFieldEdited ? (fieldName: string) => { - closeFieldEditor.current = services.dataViewFieldEditor.openEditor({ + closeFieldEditor.current = services?.dataViewFieldEditor?.openEditor({ ctx: { dataView, }, @@ -636,7 +636,7 @@ export const UnifiedDataTable = ({ }); } : undefined, - [dataView, onFieldEdited, services.dataViewFieldEditor] + [dataView, onFieldEdited, services?.dataViewFieldEditor] ); const timeFieldName = dataView.timeFieldName; @@ -730,7 +730,8 @@ export const UnifiedDataTable = ({ uiSettings, toastNotifications, }, - hasEditDataViewPermission: () => dataViewFieldEditor.userPermissions.editIndexPattern(), + hasEditDataViewPermission: () => + Boolean(dataViewFieldEditor?.userPermissions?.editIndexPattern()), valueToStringConverter, onFilter, editField, diff --git a/x-pack/plugins/cloud_security_posture/public/components/cloud_security_data_table/cloud_security_data_table.tsx b/x-pack/plugins/cloud_security_posture/public/components/cloud_security_data_table/cloud_security_data_table.tsx index 6df2ddf51fcbd..2c8946710f806 100644 --- a/x-pack/plugins/cloud_security_posture/public/components/cloud_security_data_table/cloud_security_data_table.tsx +++ b/x-pack/plugins/cloud_security_posture/public/components/cloud_security_data_table/cloud_security_data_table.tsx @@ -5,7 +5,12 @@ * 2.0. */ import React, { useState, useMemo } from 'react'; -import { UnifiedDataTableSettings, useColumns } from '@kbn/unified-data-table'; +import _ from 'lodash'; +import { + UnifiedDataTableSettings, + UnifiedDataTableSettingsColumn, + useColumns, +} from '@kbn/unified-data-table'; import { UnifiedDataTable, DataLoadingState } from '@kbn/unified-data-table'; import { CellActionsProvider } from '@kbn/cell-actions'; import { SHOW_MULTIFIELDS, SORT_DEFAULT_ORDER_SETTING } from '@kbn/discover-utils'; @@ -111,20 +116,34 @@ export const CloudSecurityDataTable = ({ columnsLocalStorageKey, defaultColumns.map((c) => c.id) ); - const [settings, setSettings] = useLocalStorage( + const [persistedSettings, setPersistedSettings] = useLocalStorage( `${columnsLocalStorageKey}:settings`, { - columns: defaultColumns.reduce((prev, curr) => { - const columnDefaultSettings = curr.width - ? { width: curr.width, display: columnHeaders?.[curr.id] } - : { display: columnHeaders?.[curr.id] }; - const newColumn = { [curr.id]: columnDefaultSettings }; - return { ...prev, ...newColumn }; + columns: defaultColumns.reduce((columnSettings, column) => { + const columnDefaultSettings = column.width ? { width: column.width } : {}; + const newColumn = { [column.id]: columnDefaultSettings }; + return { ...columnSettings, ...newColumn }; }, {} as UnifiedDataTableSettings['columns']), } ); - const { dataView, dataViewIsRefetching, dataViewRefetch } = useDataViewContext(); + const settings = useMemo(() => { + return { + columns: Object.keys(persistedSettings?.columns as UnifiedDataTableSettings).reduce( + (columnSettings, columnId) => { + const newColumn: UnifiedDataTableSettingsColumn = { + ..._.pick(persistedSettings?.columns?.[columnId], ['width']), + display: columnHeaders?.[columnId], + }; + + return { ...columnSettings, [columnId]: newColumn }; + }, + {} as UnifiedDataTableSettings['columns'] + ), + }; + }, [persistedSettings, columnHeaders]); + + const { dataView, dataViewIsRefetching } = useDataViewContext(); const [expandedDoc, setExpandedDoc] = useState(undefined); @@ -142,7 +161,6 @@ export const CloudSecurityDataTable = ({ fieldFormats, toastNotifications, storage, - dataViewFieldEditor, } = useKibana().services; const styles = useStyles(); @@ -157,7 +175,6 @@ export const CloudSecurityDataTable = ({ toastNotifications, storage, data, - dataViewFieldEditor, }; const { @@ -197,14 +214,13 @@ export const CloudSecurityDataTable = ({ ); const onResize = (colSettings: { columnId: string; width: number }) => { - const grid = settings || {}; + const grid = persistedSettings || {}; const newColumns = { ...(grid.columns || {}) }; newColumns[colSettings.columnId] = { width: Math.round(colSettings.width), - display: columnHeaders?.[colSettings.columnId], }; const newGrid = { ...grid, columns: newColumns }; - setSettings(newGrid); + setPersistedSettings(newGrid); }; const externalCustomRenderers = useMemo(() => { @@ -290,7 +306,6 @@ export const CloudSecurityDataTable = ({ gridStyleOverride={gridStyle} rowLineHeightOverride="24px" controlColumnIds={controlColumnIds} - onFieldEdited={dataViewRefetch} /> diff --git a/x-pack/test/cloud_security_posture_functional/pages/findings.ts b/x-pack/test/cloud_security_posture_functional/pages/findings.ts index f599648d0c2de..8c26c5e65733c 100644 --- a/x-pack/test/cloud_security_posture_functional/pages/findings.ts +++ b/x-pack/test/cloud_security_posture_functional/pages/findings.ts @@ -236,14 +236,6 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { }); }); - describe('DataTable features', () => { - it('Edit data view field option is Enabled', async () => { - await latestFindingsTable.toggleEditDataViewFieldsOption('result.evaluation'); - expect(await testSubjects.find('gridEditFieldButton')).to.be.ok(); - await latestFindingsTable.toggleEditDataViewFieldsOption('result.evaluation'); - }); - }); - describe('Findings - Fields selector', () => { const CSP_FIELDS_SELECTOR_MODAL = 'cloudSecurityFieldsSelectorModal'; const CSP_FIELDS_SELECTOR_OPEN_BUTTON = 'cloudSecurityFieldsSelectorOpenButton'; diff --git a/x-pack/test/cloud_security_posture_functional/pages/vulnerabilities.ts b/x-pack/test/cloud_security_posture_functional/pages/vulnerabilities.ts index 2bd81951f5ca1..4123ec73807e3 100644 --- a/x-pack/test/cloud_security_posture_functional/pages/vulnerabilities.ts +++ b/x-pack/test/cloud_security_posture_functional/pages/vulnerabilities.ts @@ -93,14 +93,6 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { }); }); - describe('DataTable features', () => { - it('Edit data view field option is Enabled', async () => { - await latestVulnerabilitiesTable.toggleEditDataViewFieldsOption('vulnerability.id'); - expect(await testSubjects.find('gridEditFieldButton')).to.be.ok(); - await latestVulnerabilitiesTable.toggleEditDataViewFieldsOption('vulnerability.id'); - }); - }); - describe('Vulnerabilities - Fields selector', () => { const CSP_FIELDS_SELECTOR_MODAL = 'cloudSecurityFieldsSelectorModal'; const CSP_FIELDS_SELECTOR_OPEN_BUTTON = 'cloudSecurityFieldsSelectorOpenButton';