From 67895dbb6bbb442595637a7558234659eb21312b Mon Sep 17 00:00:00 2001
From: Carlos Crespo <crespocarlos@users.noreply.github.com>
Date: Fri, 29 Sep 2023 16:37:17 +0200
Subject: [PATCH] [Infra UI] Fix tests cases that verify the node details page
 title and square color (#167624)

fixes https://github.com/elastic/kibana/issues/167071

## Summary

This PR fixes the infra home_page tests.

There were two things failing:

- Node details page title assert: replaced `retryForTime` with `retry`
- The waffle node color asserts: After this change
https://github.com/elastic/kibana/issues/161754, the `sort nodes by
descending value` and `sort nodes by ascending value` weren't able to
capture the color attribute, due to it being missing in the html
element. After adding it back, I did a small refactor on the
`NodeSquare` component, for readability reasons.

https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/3260
---
 .../components/waffle/node_square.tsx         | 276 ++++++++++--------
 .../test/functional/apps/infra/home_page.ts   |   7 +-
 2 files changed, 154 insertions(+), 129 deletions(-)

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx
index cb97b563af929..826fdc42066be 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx
@@ -14,77 +14,143 @@ import { css } from '@emotion/react';
 import { euiThemeVars } from '@kbn/ui-theme';
 import { DispatchWithOptionalAction } from '../../../../../hooks/use_boolean';
 
-const SquareTextContentStyles = (color: string) => `
-  text-align: center;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1 0 auto;
-  color: ${readableColor(color)};
-`;
-const styles = {
-  nodeContainerSmall: (color: string) => `
-    cursor: pointer;
-    position: relative;
-    background-color: ${darken(0.1, color)};
-    border-radius: 3px;
-    margin: 2px;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  `,
-  valueInner: `
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    line-height: 1.2em;
-    align-items: center;
-    align-content: center;
-    padding: 1em;
-    overflow: hidden;
-    flex-wrap: wrap;
-    width: 100%;
-    border: none;
-    &:focus {
-      outline: none !important;
-      border: ${euiThemeVars.euiFocusRingSize} solid ${euiThemeVars.euiFocusRingColor};
-      box-shadow: none;
-    }
-  `,
-  squareOuter: (color: string) => `
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    bottom: 4px;
-    right: 4px;
-    background-color: ${darken(0.1, color)};
-    border-radius: 3px;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  `,
-  squareInner: (color: string) => `
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 2px;
-    left: 0;
-    border-radius: 3px;
-    background-color: ${color};
-  `,
-  label: (color: string) => `
-    font-size: 0.7em;
-    margin-bottom: 0.7em;
-    ${SquareTextContentStyles(color)}
-  `,
-  value: (color: string) => `
-    font-weight: bold;
-    font-size: 0.9em;
-    line-height: 1.2em;
-    ${SquareTextContentStyles(color)}
-  `,
+type NodeProps<T = HTMLDivElement> = React.DetailedHTMLProps<React.HTMLAttributes<T>, T> & {
+  'data-test-subj'?: string;
 };
 
+const SquareContent = ({
+  children,
+  css: contentStyle,
+  ...props
+}: NodeProps & { color: string }) => (
+  <div
+    css={css`
+      text-align: center;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1 0 auto;
+      color: ${readableColor(props.color)};
+    `}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+const NodeContainer = ({ children, ...props }: NodeProps) => (
+  <div
+    css={css`
+      position: relative;
+      cursor: pointer;
+    `}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+const NodeContainerSmall = ({ children, ...props }: NodeProps & { color: string }) => (
+  <div
+    css={css`
+      cursor: pointer;
+      position: relative;
+      background-color: ${darken(0.1, props.color)};
+      border-radius: 3px;
+      margin: 2px;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+    `}
+    {...props}
+  >
+    {children}
+  </div>
+);
+const ValueInner = ({ children, ...props }: NodeProps<HTMLButtonElement>) => (
+  <button
+    css={css`
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      line-height: 1.2em;
+      align-items: center;
+      align-content: center;
+      padding: 1em;
+      overflow: hidden;
+      flex-wrap: wrap;
+      width: 100%;
+      border: none;
+      &:focus {
+        outline: none !important;
+        border: ${euiThemeVars.euiFocusRingSize} solid ${euiThemeVars.euiFocusRingColor};
+        box-shadow: none;
+      }
+    `}
+    {...props}
+  >
+    {children}
+  </button>
+);
+const SquareOuter = ({ children, ...props }: NodeProps & { color: string }) => (
+  <div
+    css={css`
+      position: absolute;
+      top: 4px;
+      left: 4px;
+      bottom: 4px;
+      right: 4px;
+      background-color: ${darken(0.1, props.color)};
+      border-radius: 3px;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+    `}
+    {...props}
+  >
+    {children}
+  </div>
+);
+const SquareInner = ({ children, ...props }: NodeProps & { color: string }) => (
+  <div
+    css={css`
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 2px;
+      left: 0;
+      border-radius: 3px;
+      background-color: ${props.color};
+    `}
+    {...props}
+  >
+    {children}
+  </div>
+);
+const Label = ({ children, ...props }: NodeProps & { color: string }) => (
+  <SquareContent
+    css={css`
+      font-size: 0.7em;
+      margin-bottom: 0.7em;
+    `}
+    {...props}
+  >
+    {children}
+  </SquareContent>
+);
+const Value = ({ children, ...props }: NodeProps & { color: string }) => (
+  <SquareContent
+    css={css`
+      font-weight: bold;
+      font-size: 0.9em;
+      line-height: 1.2em;
+    `}
+    {...props}
+  >
+    {children}
+  </SquareContent>
+);
+
 export const NodeSquare = ({
   squareSize,
   togglePopover,
@@ -113,11 +179,7 @@ export const NodeSquare = ({
   const style: CSSProperties | undefined = showBorder ? { border: 'solid 4px #000' } : undefined;
 
   return valueMode || ellipsisMode ? (
-    <div
-      css={css`
-        position: relative;
-        cursor: pointer;
-      `}
+    <NodeContainer
       data-test-subj="nodeContainer"
       style={{ width: squareSize || 0, height: squareSize || 0 }}
       onClick={togglePopover}
@@ -127,65 +189,29 @@ export const NodeSquare = ({
       onMouseLeave={hideToolTip}
       className="buttonContainer"
     >
-      <div
-        css={css`
-          ${styles.squareOuter(color)}
-        `}
-        style={style}
-      >
-        <div
-          css={css`
-            ${styles.squareInner(color)}
-          `}
-        >
+      <SquareOuter color={color} style={style}>
+        <SquareInner color={color}>
           {valueMode ? (
-            <button
-              css={css`
-                ${styles.valueInner}
-              `}
-              aria-label={nodeAriaLabel}
-            >
-              <div
-                css={css`
-                  ${styles.label(color)}
-                `}
-                data-test-subj="nodeName"
-              >
+            <ValueInner aria-label={nodeAriaLabel}>
+              <Label data-test-subj="nodeName" color={color}>
                 {nodeName}
-              </div>
-              <div
-                css={css`
-                  ${styles.value(color)}
-                `}
-                data-test-subj="nodeValue"
-              >
+              </Label>
+              <Value data-test-subj="nodeValue" color={color}>
                 {value}
-              </div>
-            </button>
+              </Value>
+            </ValueInner>
           ) : (
             ellipsisMode && (
-              <button
-                css={css`
-                  ${styles.valueInner}
-                `}
-                aria-label={nodeAriaLabel}
-              >
-                <div
-                  css={css`
-                    ${styles.label(color)}
-                  `}
-                >
-                  ...
-                </div>
-              </button>
+              <ValueInner aria-label={nodeAriaLabel}>
+                <Label color={color}>...</Label>
+              </ValueInner>
             )
           )}
-        </div>
-      </div>
-    </div>
+        </SquareInner>
+      </SquareOuter>
+    </NodeContainer>
   ) : (
-    <div
-      css={styles.nodeContainerSmall(color)}
+    <NodeContainerSmall
       data-test-subj="nodeContainer"
       style={{ width: squareSize || 0, height: squareSize || 0, ...style }}
       onClick={togglePopover}
diff --git a/x-pack/test/functional/apps/infra/home_page.ts b/x-pack/test/functional/apps/infra/home_page.ts
index 80ae3d2a59b8b..e3fccf35090e2 100644
--- a/x-pack/test/functional/apps/infra/home_page.ts
+++ b/x-pack/test/functional/apps/infra/home_page.ts
@@ -38,8 +38,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       return !!currentUrl.match(path);
     });
 
-  // Failing: See https://github.com/elastic/kibana/issues/167071
-  describe.skip('Home page', function () {
+  describe('Home page', function () {
     this.tags('includeFirefox');
     before(async () => {
       await kibanaServer.savedObjects.cleanStandardList();
@@ -318,7 +317,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
           await pageObjects.infraHome.clickOnFirstNode();
           await pageObjects.infraHome.clickOnNodeDetailsFlyoutOpenAsPage();
 
-          await retry.tryForTime(3 * 1000, async () => {
+          await retry.try(async () => {
             const documentTitle = await browser.getTitle();
             expect(documentTitle).to.contain(
               'demo-stack-redis-01 - Infrastructure - Observability - Elastic'
@@ -334,7 +333,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
           await pageObjects.infraHome.clickOnFirstNode();
           await pageObjects.infraHome.clickOnGoToNodeDetails();
 
-          await retry.tryForTime(3 * 1000, async () => {
+          await retry.try(async () => {
             const documentTitle = await browser.getTitle();
             expect(documentTitle).to.contain('pod-0 - Infrastructure - Observability - Elastic');
           });