[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)](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 <rickyangwyn@gmail.com>
2025-04-24 17:59:23 -04:00 · 2024-06-20 22:27:21 +02:00 · 2024-06-20 22:27:21 +02:00 · 876a76b4ff
commit 876a76b4ff
parent db83390d0b
4 changed files with 35 additions and 35 deletions
--- 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,
--- 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<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>
--- 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';
--- 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';