From 69edee5b75f59ad1b0aa3e462ac34931f29a80db Mon Sep 17 00:00:00 2001
From: Matthias Wilhelm <matthias.wilhelm@elastic.co>
Date: Tue, 20 Apr 2021 05:56:18 +0200
Subject: [PATCH] [Discover] Display toast when adding columns and filters from
 document flyout (#97270)

---
 .../discover_grid/discover_grid_flyout.tsx    | 20 +++++++++++---
 .../components/table/table.test.tsx           |  2 +-
 .../components/table/table_row.tsx            |  6 ++++-
 .../table/table_row_btn_toggle_column.tsx     | 10 +++++--
 .../apps/discover/_data_grid_doc_table.ts     | 26 +++++++++++++++++++
 5 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx b/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx
index f31399793c0d..389412789104 100644
--- a/src/plugins/discover/public/application/components/discover_grid/discover_grid_flyout.tsx
+++ b/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>
diff --git a/src/plugins/discover/public/application/components/table/table.test.tsx b/src/plugins/discover/public/application/components/table/table.test.tsx
index 8997c1d13a47..7539f29c1ec9 100644
--- a/src/plugins/discover/public/application/components/table/table.test.tsx
+++ b/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;
diff --git a/src/plugins/discover/public/application/components/table/table_row.tsx b/src/plugins/discover/public/application/components/table/table_row.tsx
index 5c6ae49770bc..e8977fda8576 100644
--- a/src/plugins/discover/public/application/components/table/table_row.tsx
+++ b/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}
diff --git a/src/plugins/discover/public/application/components/table/table_row_btn_toggle_column.tsx b/src/plugins/discover/public/application/components/table/table_row_btn_toggle_column.tsx
index 042a9970d3a8..cd5f73d47b1a 100644
--- a/src/plugins/discover/public/application/components/table/table_row_btn_toggle_column.tsx
+++ b/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'}
       />
diff --git a/test/functional/apps/discover/_data_grid_doc_table.ts b/test/functional/apps/discover/_data_grid_doc_table.ts
index 5499f0250eb7..f8406f4c8a8a 100644
--- a/test/functional/apps/discover/_data_grid_doc_table.ts
+++ b/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 () {