[8.11] [Watcher] Fix sorting on JSX headers (#170085) (#170142)

# Backport

This will backport the following commits from `main` to `8.11`:
- [[Watcher] Fix sorting on JSX headers
(#170085)](https://github.com/elastic/kibana/pull/170085)

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

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

<!--BACKPORT [{"author":{"name":"Brad
White","email":"Ikuni17@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-10-30T15:34:43Z","message":"[Watcher]
Fix sorting on JSX headers (#170085)\n\n## Summary\r\nCloses
#164126\r\n\r\nEUI in memory tables need to have stable headers between
renders to sort\r\nproperly when the header is a JSX
element\r\n([Docs](https://eui.elastic.co/#/tabular-content/in-memory-tables)).\r\nThis
PR stabilizes the headers for `WatchListPage` only. I noticed
there\r\nwere some other columns which likely have the same issue in
Watcher, but\r\nI'm unsure how far reaching these changes need to be.
Reading through\r\nthe issue @ElenaStoeva mentions changing the sorting
anyways, so a quick\r\nfix seems more
appropriate.\r\n\r\n\r\n![Untitled](7d79c576-58b8-4ef5-a713-b87a3c52ea19)\r\n\r\n\r\n##
Release Note\r\nFixed issue where certain columns in the Watcher table
were not
sorting\r\nproperly.","sha":"540e6c0acb1b357e4f309091b27a6bdc24bf04c0","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","backport:prev-minor","v8.12.0"],"number":170085,"url":"https://github.com/elastic/kibana/pull/170085","mergeCommit":{"message":"[Watcher]
Fix sorting on JSX headers (#170085)\n\n## Summary\r\nCloses
#164126\r\n\r\nEUI in memory tables need to have stable headers between
renders to sort\r\nproperly when the header is a JSX
element\r\n([Docs](https://eui.elastic.co/#/tabular-content/in-memory-tables)).\r\nThis
PR stabilizes the headers for `WatchListPage` only. I noticed
there\r\nwere some other columns which likely have the same issue in
Watcher, but\r\nI'm unsure how far reaching these changes need to be.
Reading through\r\nthe issue @ElenaStoeva mentions changing the sorting
anyways, so a quick\r\nfix seems more
appropriate.\r\n\r\n\r\n![Untitled](7d79c576-58b8-4ef5-a713-b87a3c52ea19)\r\n\r\n\r\n##
Release Note\r\nFixed issue where certain columns in the Watcher table
were not
sorting\r\nproperly.","sha":"540e6c0acb1b357e4f309091b27a6bdc24bf04c0"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/170085","number":170085,"mergeCommit":{"message":"[Watcher]
Fix sorting on JSX headers (#170085)\n\n## Summary\r\nCloses
#164126\r\n\r\nEUI in memory tables need to have stable headers between
renders to sort\r\nproperly when the header is a JSX
element\r\n([Docs](https://eui.elastic.co/#/tabular-content/in-memory-tables)).\r\nThis
PR stabilizes the headers for `WatchListPage` only. I noticed
there\r\nwere some other columns which likely have the same issue in
Watcher, but\r\nI'm unsure how far reaching these changes need to be.
Reading through\r\nthe issue @ElenaStoeva mentions changing the sorting
anyways, so a quick\r\nfix seems more
appropriate.\r\n\r\n\r\n![Untitled](7d79c576-58b8-4ef5-a713-b87a3c52ea19)\r\n\r\n\r\n##
Release Note\r\nFixed issue where certain columns in the Watcher table
were not
sorting\r\nproperly.","sha":"540e6c0acb1b357e4f309091b27a6bdc24bf04c0"}}]}]
BACKPORT-->

Co-authored-by: Brad White <Ikuni17@users.noreply.github.com>

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,
       },