From 540e6c0acb1b357e4f309091b27a6bdc24bf04c0 Mon Sep 17 00:00:00 2001
From: Brad White <Ikuni17@users.noreply.github.com>
Date: Mon, 30 Oct 2023 09:34:43 -0600
Subject: [PATCH] [Watcher] Fix sorting on JSX headers (#170085)

## Summary
Closes #164126

EUI in memory tables need to have stable headers between renders to sort
properly when the header is a JSX element
([Docs](https://eui.elastic.co/#/tabular-content/in-memory-tables)).
This PR stabilizes the headers for `WatchListPage` only. I noticed there
were some other columns which likely have the same issue in Watcher, but
I'm unsure how far reaching these changes need to be. Reading through
the issue @ElenaStoeva mentions changing the sorting anyways, so a quick
fix seems more appropriate.


![Untitled](https://github.com/elastic/kibana/assets/14021797/7d79c576-58b8-4ef5-a713-b87a3c52ea19)


## Release Note
Fixed issue where certain columns in the Watcher table were not sorting
properly.
---
 .../watch_list_page/watch_list_page.tsx       | 147 ++++++++++--------
 1 file changed, 78 insertions(+), 69 deletions(-)

diff --git a/x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx b/x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx
index 76a8328fb532a..37d73d0c8a25a 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx
@@ -47,6 +47,80 @@ import { goToCreateThresholdAlert, goToCreateAdvancedWatch } from '../../lib/nav
 import { useAppContext } from '../../app_context';
 import { PageError as GenericPageError } from '../../shared_imports';
 
+/*
+ * EuiMemoryTable relies on referential equality of a column's name field when sorting by that column.
+ * Therefore, we want the JSX elements preserved through renders.
+ */
+const stateColumnHeader = (
+  <EuiToolTip
+    content={i18n.translate('xpack.watcher.sections.watchList.watchTable.stateHeader.tooltipText', {
+      defaultMessage: 'Active, inactive, or error.',
+    })}
+  >
+    <span>
+      {i18n.translate('xpack.watcher.sections.watchList.watchTable.stateHeader', {
+        defaultMessage: 'State',
+      })}{' '}
+      <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
+    </span>
+  </EuiToolTip>
+);
+
+const conditionLastMetHeader = (
+  <EuiToolTip
+    content={i18n.translate(
+      'xpack.watcher.sections.watchList.watchTable.lastFiredHeader.tooltipText',
+      {
+        defaultMessage: `The last time the condition was met and action taken.`,
+      }
+    )}
+  >
+    <span>
+      {i18n.translate('xpack.watcher.sections.watchList.watchTable.lastFiredHeader', {
+        defaultMessage: 'Condition last met',
+      })}{' '}
+      <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
+    </span>
+  </EuiToolTip>
+);
+
+const lastCheckedHeader = (
+  <EuiToolTip
+    content={i18n.translate(
+      'xpack.watcher.sections.watchList.watchTable.lastTriggeredHeader.tooltipText',
+      {
+        defaultMessage: `The last time the condition was checked.`,
+      }
+    )}
+  >
+    <span>
+      {i18n.translate('xpack.watcher.sections.watchList.watchTable.lastTriggeredHeader', {
+        defaultMessage: 'Last checked',
+      })}{' '}
+      <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
+    </span>
+  </EuiToolTip>
+);
+
+const commentHeader = (
+  <EuiToolTip
+    content={i18n.translate(
+      'xpack.watcher.sections.watchList.watchTable.commentHeader.tooltipText',
+      {
+        defaultMessage:
+          'Whether any actions have been acknowledged, throttled, or failed to execute.',
+      }
+    )}
+  >
+    <span>
+      {i18n.translate('xpack.watcher.sections.watchList.watchTable.commentHeader', {
+        defaultMessage: 'Comment',
+      })}{' '}
+      <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
+    </span>
+  </EuiToolTip>
+);
+
 export const WatchListPage = () => {
   // hooks
   const {
@@ -273,46 +347,14 @@ export const WatchListPage = () => {
       },
       {
         field: 'watchStatus.state',
-        name: (
-          <EuiToolTip
-            content={i18n.translate(
-              'xpack.watcher.sections.watchList.watchTable.stateHeader.tooltipText',
-              {
-                defaultMessage: 'Active, inactive, or error.',
-              }
-            )}
-          >
-            <span>
-              {i18n.translate('xpack.watcher.sections.watchList.watchTable.stateHeader', {
-                defaultMessage: 'State',
-              })}{' '}
-              <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-            </span>
-          </EuiToolTip>
-        ),
+        name: stateColumnHeader,
         sortable: true,
         width: '130px',
         render: (state: string) => <WatchStateBadge state={state} />,
       },
       {
         field: 'watchStatus.lastMetCondition',
-        name: (
-          <EuiToolTip
-            content={i18n.translate(
-              'xpack.watcher.sections.watchList.watchTable.lastFiredHeader.tooltipText',
-              {
-                defaultMessage: `The last time the condition was met and action taken.`,
-              }
-            )}
-          >
-            <span>
-              {i18n.translate('xpack.watcher.sections.watchList.watchTable.lastFiredHeader', {
-                defaultMessage: 'Condition last met',
-              })}{' '}
-              <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-            </span>
-          </EuiToolTip>
-        ),
+        name: conditionLastMetHeader,
         sortable: true,
         truncateText: true,
         width: '160px',
@@ -322,23 +364,7 @@ export const WatchListPage = () => {
       },
       {
         field: 'watchStatus.lastChecked',
-        name: (
-          <EuiToolTip
-            content={i18n.translate(
-              'xpack.watcher.sections.watchList.watchTable.lastTriggeredHeader.tooltipText',
-              {
-                defaultMessage: `The last time the condition was checked.`,
-              }
-            )}
-          >
-            <span>
-              {i18n.translate('xpack.watcher.sections.watchList.watchTable.lastTriggeredHeader', {
-                defaultMessage: 'Last checked',
-              })}{' '}
-              <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-            </span>
-          </EuiToolTip>
-        ),
+        name: lastCheckedHeader,
         sortable: true,
         truncateText: true,
         width: '160px',
@@ -348,24 +374,7 @@ export const WatchListPage = () => {
       },
       {
         field: 'watchStatus.comment',
-        name: (
-          <EuiToolTip
-            content={i18n.translate(
-              'xpack.watcher.sections.watchList.watchTable.commentHeader.tooltipText',
-              {
-                defaultMessage:
-                  'Whether any actions have been acknowledged, throttled, or failed to execute.',
-              }
-            )}
-          >
-            <span>
-              {i18n.translate('xpack.watcher.sections.watchList.watchTable.commentHeader', {
-                defaultMessage: 'Comment',
-              })}{' '}
-              <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-            </span>
-          </EuiToolTip>
-        ),
+        name: commentHeader,
         sortable: true,
         truncateText: true,
       },