[8.14] [Cloud Security] Patch fix for Column label on Cloud Security …

…Data table (#186425) (#186545) # 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)](#186425)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  --------- Co-authored-by: Rickyanto Ang <[email protected]>
elastic · Jun 20, 2024 · 876a76b · 876a76b
1 parent db83390
commit 876a76b
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 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
@@ -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/...ecurity_posture/public/components/cloud_security_data_table/cloud_security_data_table.tsx b/...ecurity_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>

diff --git 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
@@ -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';