From 3f52ff6fceddbce0d538dce410e734b2131b4eb3 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter.rafelsberger@elastic.co>
Date: Wed, 3 May 2023 12:22:39 +0200
Subject: [PATCH] [ML] Transforms/DFA: Render EuiDataGrad for more than 0 rows.
 (#156403)

Fixes the React dev mode warning "Warning: Can't perform a React state
update on an unmounted component." by only rendering `EuiDataGrid` if
there's more than 0 rows.
---
 .../components/data_grid/data_grid.tsx        | 136 +++++++++---------
 1 file changed, 69 insertions(+), 67 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx b/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx
index 8a290ee186a98..9d5422be1256d 100644
--- a/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx
+++ b/x-pack/plugins/ml/public/application/components/data_grid/data_grid.tsx
@@ -346,74 +346,76 @@ export const DataGrid: FC<Props> = memo(
             <EuiSpacer size="m" />
           </div>
         )}
-        <EuiMutationObserver
-          observerOptions={{ subtree: true, attributes: true, childList: true }}
-          onMutation={onMutation}
-        >
-          {(mutationRef) => (
-            <div css={cssOverride} ref={mutationRef}>
-              <EuiDataGrid
-                aria-label={isWithHeader(props) ? props.title : ''}
-                columns={columnsWithCharts.map((c) => {
-                  c.initialWidth = 165;
-                  return c;
-                })}
-                columnVisibility={{ visibleColumns, setVisibleColumns }}
-                trailingControlColumns={trailingControlColumns}
-                gridStyle={euiDataGridStyle}
-                rowCount={rowCount}
-                renderCellValue={renderCellValue}
-                renderCellPopover={renderCellPopover}
-                sorting={{ columns: sortingColumns, onSort }}
-                toolbarVisibility={{
-                  ...euiDataGridToolbarSettings,
-                  ...(chartsButtonVisible
-                    ? {
-                        additionalControls: (
-                          <EuiToolTip
-                            content={i18n.translate(
-                              'xpack.ml.dataGrid.histogramButtonToolTipContent',
-                              {
-                                defaultMessage:
-                                  'Queries run to fetch histogram chart data will use a sample size per shard of {samplerShardSize} documents.',
-                                values: {
-                                  samplerShardSize: DEFAULT_SAMPLER_SHARD_SIZE,
-                                },
-                              }
-                            )}
-                          >
-                            <EuiButtonEmpty
-                              aria-pressed={chartsVisible === true}
-                              className={`euiDataGrid__controlBtn${
-                                chartsVisible === true ? ' euiDataGrid__controlBtn--active' : ''
-                              }`}
-                              data-test-subj={`${dataTestSubj}HistogramButton`}
-                              size="xs"
-                              iconType="visBarVertical"
-                              color="text"
-                              onClick={toggleChartVisibility}
-                              disabled={chartsVisible === undefined}
+        {rowCount > 0 && (
+          <EuiMutationObserver
+            observerOptions={{ subtree: true, attributes: true, childList: true }}
+            onMutation={onMutation}
+          >
+            {(mutationRef) => (
+              <div css={cssOverride} ref={mutationRef}>
+                <EuiDataGrid
+                  aria-label={isWithHeader(props) ? props.title : ''}
+                  columns={columnsWithCharts.map((c) => {
+                    c.initialWidth = 165;
+                    return c;
+                  })}
+                  columnVisibility={{ visibleColumns, setVisibleColumns }}
+                  trailingControlColumns={trailingControlColumns}
+                  gridStyle={euiDataGridStyle}
+                  rowCount={rowCount}
+                  renderCellValue={renderCellValue}
+                  renderCellPopover={renderCellPopover}
+                  sorting={{ columns: sortingColumns, onSort }}
+                  toolbarVisibility={{
+                    ...euiDataGridToolbarSettings,
+                    ...(chartsButtonVisible
+                      ? {
+                          additionalControls: (
+                            <EuiToolTip
+                              content={i18n.translate(
+                                'xpack.ml.dataGrid.histogramButtonToolTipContent',
+                                {
+                                  defaultMessage:
+                                    'Queries run to fetch histogram chart data will use a sample size per shard of {samplerShardSize} documents.',
+                                  values: {
+                                    samplerShardSize: DEFAULT_SAMPLER_SHARD_SIZE,
+                                  },
+                                }
+                              )}
                             >
-                              <FormattedMessage
-                                id="xpack.ml.dataGrid.histogramButtonText"
-                                defaultMessage="Histogram charts"
-                              />
-                            </EuiButtonEmpty>
-                          </EuiToolTip>
-                        ),
-                      }
-                    : {}),
-                }}
-                pagination={{
-                  ...pagination,
-                  pageSizeOptions: [5, 10, 25],
-                  onChangeItemsPerPage,
-                  onChangePage,
-                }}
-              />
-            </div>
-          )}
-        </EuiMutationObserver>
+                              <EuiButtonEmpty
+                                aria-pressed={chartsVisible === true}
+                                className={`euiDataGrid__controlBtn${
+                                  chartsVisible === true ? ' euiDataGrid__controlBtn--active' : ''
+                                }`}
+                                data-test-subj={`${dataTestSubj}HistogramButton`}
+                                size="xs"
+                                iconType="visBarVertical"
+                                color="text"
+                                onClick={toggleChartVisibility}
+                                disabled={chartsVisible === undefined}
+                              >
+                                <FormattedMessage
+                                  id="xpack.ml.dataGrid.histogramButtonText"
+                                  defaultMessage="Histogram charts"
+                                />
+                              </EuiButtonEmpty>
+                            </EuiToolTip>
+                          ),
+                        }
+                      : {}),
+                  }}
+                  pagination={{
+                    ...pagination,
+                    pageSizeOptions: [5, 10, 25],
+                    onChangeItemsPerPage,
+                    onChangePage,
+                  }}
+                />
+              </div>
+            )}
+          </EuiMutationObserver>
+        )}
       </div>
     );
   },