[Cloud Security] Patch fix for Column label on Cloud Security Data ta…

…ble (#186425)

## Summary
<img width="1478" alt="Screenshot 2024-06-18 at 6 10 05 PM"
src="https://github.com/elastic/kibana/assets/8703149/f095591d-f0ee-41bd-8b7d-07880bcf61d9">

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
<img width="741" alt="Screenshot 2024-06-19 at 9 16 06 AM"
src="https://github.com/elastic/kibana/assets/8703149/df1ec765-89de-4f43-a723-daf9558af135">

This patch fixes that issues

Related to #184295

(cherry picked from commit 7304484)

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<UnifiedDataTableSettings>(
+  const [persistedSettings, setPersistedSettings] = useLocalStorage<UnifiedDataTableSettings>(
     `${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<DataTableRecord | undefined>(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}
         />
       </div>
     </CellActionsProvider>

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';

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';