[8.7] [Discover] Remove table column after that field was deleted (#150980) (#151684)

# Backport

This will backport the following commits from `main` to `8.7`:
- [[Discover] Remove table column after that field was deleted
(#150980)](https://github.com/elastic/kibana/pull/150980)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Julia
Rechkunova","email":"julia.rechkunova@elastic.co"},"sourceCommit":{"committedDate":"2023-02-21T10:50:27Z","message":"[Discover]
Remove table column after that field was deleted (#150980)\n\nCloses
https://github.com/elastic/kibana/issues/150958\r\nCloses
https://github.com/elastic/kibana/issues/151531\r\n\r\n##
Summary\r\n\r\nThis PR removes the field from table and sidebar after it
was added as a\r\ncolumn but deleted in the end.\r\n\r\nSteps for
testing:\r\n- Create a runtime field\r\n- Add to the table\r\n- Delete
the field and observe that it is removed from the table
and\r\nsidebar.","sha":"406e6c06d187a07b4c2377644e693e43c40d05f2","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Discover","release_note:fix","Team:DataDiscovery","backport:prev-minor","v8.8.0"],"number":150980,"url":"https://github.com/elastic/kibana/pull/150980","mergeCommit":{"message":"[Discover]
Remove table column after that field was deleted (#150980)\n\nCloses
https://github.com/elastic/kibana/issues/150958\r\nCloses
https://github.com/elastic/kibana/issues/151531\r\n\r\n##
Summary\r\n\r\nThis PR removes the field from table and sidebar after it
was added as a\r\ncolumn but deleted in the end.\r\n\r\nSteps for
testing:\r\n- Create a runtime field\r\n- Add to the table\r\n- Delete
the field and observe that it is removed from the table
and\r\nsidebar.","sha":"406e6c06d187a07b4c2377644e693e43c40d05f2"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/150980","number":150980,"mergeCommit":{"message":"[Discover]
Remove table column after that field was deleted (#150980)\n\nCloses
https://github.com/elastic/kibana/issues/150958\r\nCloses
https://github.com/elastic/kibana/issues/151531\r\n\r\n##
Summary\r\n\r\nThis PR removes the field from table and sidebar after it
was added as a\r\ncolumn but deleted in the end.\r\n\r\nSteps for
testing:\r\n- Create a runtime field\r\n- Add to the table\r\n- Delete
the field and observe that it is removed from the table
and\r\nsidebar.","sha":"406e6c06d187a07b4c2377644e693e43c40d05f2"}}]}]
BACKPORT-->

Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>

src/plugins/discover/public/application/main/components/layout/discover_layout.tsx

@@ -156,12 +156,18 @@ export function DiscoverLayout({
     [filterManager, dataView, dataViews, trackUiMetric, capabilities]
   );
 
-  const onFieldEdited = useCallback(async () => {
-    if (!dataView.isPersisted()) {
-      await updateAdHocDataViewId(dataView);
-    }
-    stateContainer.dataState.refetch$.next('reset');
-  }, [dataView, stateContainer, updateAdHocDataViewId]);
+  const onFieldEdited = useCallback(
+    async ({ removedFieldName }: { removedFieldName?: string } = {}) => {
+      if (removedFieldName && currentColumns.includes(removedFieldName)) {
+        onRemoveColumn(removedFieldName);
+      }
+      if (!dataView.isPersisted()) {
+        await updateAdHocDataViewId(dataView);
+      }
+      stateContainer.dataState.refetch$.next('reset');
+    },
+    [dataView, stateContainer, updateAdHocDataViewId, currentColumns, onRemoveColumn]
+  );
 
   const onDisableFilters = useCallback(() => {
     const disabledFilters = filterManager

src/plugins/discover/public/application/main/components/sidebar/discover_field.tsx

@@ -232,7 +232,7 @@ export interface DiscoverFieldProps {
    */
   onAddFilter?: (field: DataViewField | string, value: unknown, type: '+' | '-') => void;
   /**
-   * Callback to remove/deselect a the field
+   * Callback to remove a field column from the table
    * @param fieldName
    */
   onRemoveField: (fieldName: string) => void;

src/plugins/discover/public/application/main/components/sidebar/discover_sidebar.tsx

@@ -173,7 +173,7 @@ export function DiscoverSidebarComponent({
               },
               fieldName,
               onDelete: async () => {
-                await onFieldEdited();
+                await onFieldEdited({ removedFieldName: fieldName });
               },
             });
             if (setFieldEditorRef) {

src/plugins/discover/public/application/main/components/sidebar/discover_sidebar_responsive.tsx

@@ -79,7 +79,7 @@ export interface DiscoverSidebarResponsiveProps {
    */
   onChangeDataView: (id: string) => void;
   /**
-   * Callback function when removing a field
+   * Callback to remove a field column from the table
    * @param fieldName
    */
   onRemoveField: (fieldName: string) => void;
@@ -100,7 +100,7 @@ export interface DiscoverSidebarResponsiveProps {
   /**
    * callback to execute on edit runtime field
    */
-  onFieldEdited: () => Promise<void>;
+  onFieldEdited: (options?: { removedFieldName?: string }) => Promise<void>;
   /**
    * callback to execute on create dataview
    */

test/functional/apps/discover/group1/_sidebar.ts

@@ -26,6 +26,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const filterBar = getService('filterBar');
   const fieldEditor = getService('fieldEditor');
   const retry = getService('retry');
+  const dataGrid = getService('dataGrid');
   const INITIAL_FIELD_LIST_SUMMARY = '53 available fields. 0 empty fields. 3 meta fields.';
 
   describe('discover sidebar', function describeIndexTests() {
@@ -715,6 +716,40 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
           'test/functional/fixtures/es_archiver/index_pattern_without_timefield'
         );
       });
+
+      it('should remove the table column after a field was deleted', async () => {
+        const newField = '_test_field_and_column_removal';
+        await PageObjects.discover.addRuntimeField(newField, `emit("hi there")`);
+
+        await retry.waitFor('form to close', async () => {
+          return !(await testSubjects.exists('fieldEditor'));
+        });
+
+        await PageObjects.header.waitUntilLoadingHasFinished();
+        await PageObjects.discover.waitUntilSidebarHasLoaded();
+
+        let selectedFields = await PageObjects.discover.getSidebarSectionFieldNames('selected');
+        expect(selectedFields.includes(newField)).to.be(false);
+        expect(await dataGrid.getHeaderFields()).to.eql(['@timestamp', 'Document']);
+
+        await PageObjects.discover.clickFieldListItemAdd(newField);
+        await PageObjects.header.waitUntilLoadingHasFinished();
+        await PageObjects.discover.waitUntilSidebarHasLoaded();
+
+        selectedFields = await PageObjects.discover.getSidebarSectionFieldNames('selected');
+        expect(selectedFields.includes(newField)).to.be(true);
+        expect(await dataGrid.getHeaderFields()).to.eql(['@timestamp', newField]);
+
+        await PageObjects.discover.removeField(newField);
+        await PageObjects.header.waitUntilLoadingHasFinished();
+        await PageObjects.discover.waitUntilSidebarHasLoaded();
+
+        await retry.waitFor('sidebar to update', async () => {
+          return !(await PageObjects.discover.getAllFieldNames()).includes(newField);
+        });
+
+        expect(await dataGrid.getHeaderFields()).to.eql(['@timestamp', 'Document']);
+      });
     });
   });
 }