From 6b730bcf5a330a63b75ee605d5e70ca1a322dc2d Mon Sep 17 00:00:00 2001 From: Rickyanto Ang Date: Thu, 20 Jun 2024 08:30:19 -0700 Subject: [PATCH] [Cloud Security] Patch fix for Column label on Cloud Security Data table (#186425) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Screenshot 2024-06-18 at 6 10 05 PM Currently we have an issue where if user already has localStorageKey from previous version where we still use Update for our Column Label and then proceed to upgrading to version where we no longer use that, the column name in Findings table will show field name (it shows resource.id instead of Resource ID) also because we changed the logic and not allow users to change the column headers in the data grid, option to **edit data view field** is removed for Cloud Security Table Screenshot 2024-06-19 at 9 16 06 AM This patch fixes that issues Related to #184295 (cherry picked from commit 7304484cf4f160b92d477f85b59815d8d0c56986) --- .../cloud_security_data_table.tsx | 45 ++++++++++++------- .../pages/findings.ts | 8 ---- .../pages/vulnerabilities.ts | 8 ---- 3 files changed, 30 insertions(+), 31 deletions(-) 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';