[Discover] Display toast when adding columns and filters from document flyout (#97270)

src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx

@@ -178,15 +178,29 @@ export function DiscoverGridFlyout({
             indexPattern={indexPattern}
             filter={(mapping, value, mode) => {
               onFilter(mapping, value, mode);
-              onClose();
+              services.toastNotifications.addSuccess(
+                i18n.translate('discover.grid.flyout.toastFilterAdded', {
+                  defaultMessage: `Filter was added`,
+                })
+              );
             }}
             onRemoveColumn={(columnName: string) => {
               onRemoveColumn(columnName);
-              onClose();
+              services.toastNotifications.addSuccess(
+                i18n.translate('discover.grid.flyout.toastColumnRemoved', {
+                  defaultMessage: `Column '{columnName}' was removed`,
+                  values: { columnName },
+                })
+              );
             }}
             onAddColumn={(columnName: string) => {
               onAddColumn(columnName);
-              onClose();
+              services.toastNotifications.addSuccess(
+                i18n.translate('discover.grid.flyout.toastColumnAdded', {
+                  defaultMessage: `Column '{columnName}' was added`,
+                  values: { columnName },
+                })
+              );
             }}
           />
         </EuiFlyoutBody>

src/plugins/discover/public/application/components/table/table.test.tsx

@@ -155,7 +155,7 @@ describe('DocViewTable at Discover', () => {
       const elementExist = check[element];
 
       if (typeof elementExist === 'boolean') {
-        const btn = findTestSubject(rowComponent, element);
+        const btn = findTestSubject(rowComponent, element, '^=');
 
         it(`renders ${element} for '${check._property}' correctly`, () => {
           const disabled = btn.length ? btn.props().disabled : true;

src/plugins/discover/public/application/components/table/table_row.tsx

@@ -65,7 +65,11 @@ export function DocViewTableRow({
             onClick={() => onFilter(fieldMapping, valueRaw, '-')}
           />
           {typeof onToggleColumn === 'function' && (
-            <DocViewTableRowBtnToggleColumn active={isColumnActive} onClick={onToggleColumn} />
+            <DocViewTableRowBtnToggleColumn
+              active={isColumnActive}
+              onClick={onToggleColumn}
+              fieldname={String(key)}
+            />
           )}
           <DocViewTableRowBtnFilterExists
             disabled={!fieldMapping || !fieldMapping.filterable}

src/plugins/discover/public/application/components/table/table_row_btn_toggle_column.tsx

@@ -15,9 +15,15 @@ export interface Props {
   active: boolean;
   disabled?: boolean;
   onClick: () => void;
+  fieldname: string;
 }
 
-export function DocViewTableRowBtnToggleColumn({ onClick, active, disabled = false }: Props) {
+export function DocViewTableRowBtnToggleColumn({
+  onClick,
+  active,
+  disabled = false,
+  fieldname = '',
+}: Props) {
   if (disabled) {
     return (
       <EuiButtonIcon
@@ -48,7 +54,7 @@ export function DocViewTableRowBtnToggleColumn({ onClick, active, disabled = fal
         aria-pressed={active}
         onClick={onClick}
         className="kbnDocViewer__actionButton"
-        data-test-subj="toggleColumnButton"
+        data-test-subj={`toggleColumnButton_${fieldname}`}
         iconType={'listAdd'}
         iconSize={'s'}
       />

test/functional/apps/discover/_data_grid_doc_table.ts

@@ -22,6 +22,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     defaultIndex: 'logstash-*',
     'doc_table:legacy': false,
   };
+  const testSubjects = getService('testSubjects');
 
   describe('discover data grid doc table', function describeIndexTests() {
     before(async function () {
@@ -102,6 +103,31 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
           await dataGrid.closeFlyout();
         });
       });
+
+      it('should show allow adding columns from the detail panel', async function () {
+        await retry.try(async function () {
+          await dataGrid.clickRowToggle({ isAnchorRow: false, rowIndex: rowToInspect - 1 });
+
+          // add columns
+          const fields = ['_id', '_index', 'agent'];
+          for (const field of fields) {
+            await testSubjects.click(`toggleColumnButton_${field}`);
+          }
+
+          const headerWithFields = await dataGrid.getHeaderFields();
+          expect(headerWithFields.join(' ')).to.contain(fields.join(' '));
+
+          // remove columns
+          for (const field of fields) {
+            await testSubjects.click(`toggleColumnButton_${field}`);
+          }
+
+          const headerWithoutFields = await dataGrid.getHeaderFields();
+          expect(headerWithoutFields.join(' ')).not.to.contain(fields.join(' '));
+
+          await dataGrid.closeFlyout();
+        });
+      });
     });
 
     describe('add and remove columns', function () {