[upgrade assistant] Borealis updates (elastic#205345)

## Summary Broken out from elastic#203664 Changes affect rendering of reindexing UI, specifically the progress indicators. Before - failed <img width="312" alt="failed" src="https://github.com/user-attachments/assets/b2444ac9-e2de-4103-9a44-b18877f5f609" /> canceled <img width="303" alt="canceled" src="https://github.com/user-attachments/assets/c1358f1e-14c1-4b1d-8870-f32d264e833f" /> paused <img width="307" alt="paused" src="https://github.com/user-attachments/assets/9731a466-fc79-41d1-94e1-da0500dbb1c4" /> completed <img width="312" alt="completed" src="https://github.com/user-attachments/assets/8d9c7037-dc33-4761-aac3-4b69d31fb72e" /> After failed <img width="307" alt="Screenshot 2025-01-01 at 9 42 57 PM" src="https://github.com/user-attachments/assets/54ad6a52-ffa4-4cc4-b19f-8620ff4754d1" /> canceled <img width="300" alt="Screenshot 2025-01-01 at 9 39 14 PM" src="https://github.com/user-attachments/assets/2dabb927-aed7-4e82-9a4c-3973ea6f8c36" /> paused <img width="299" alt="Screenshot 2025-01-01 at 9 38 22 PM" src="https://github.com/user-attachments/assets/4f359c42-ee1f-4708-a66b-d9eda7271a15" /> complete <img width="306" alt="Screenshot 2025-01-01 at 9 37 17 PM" src="https://github.com/user-attachments/assets/c330ee41-d401-4076-afa0-8ffb95d3a775" />
kibanamachine · Jan 6, 2025 · 3003d5c · 3003d5c
1 parent 211d4a6
commit 3003d5c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 20 deletions.
diff --git a/...plication/components/es_deprecations/deprecation_types/reindex/flyout/_step_progress.scss b/...plication/components/es_deprecations/deprecation_types/reindex/flyout/_step_progress.scss
@@ -11,25 +11,10 @@
   margin-right: $euiSizeM;
 }
 
-$stepStatusToCallOutColor: (
-  failed: $euiColorDanger,
-  complete: $euiColorSuccess,
-  paused: $euiColorWarning,
-  cancelled: $euiColorWarning,
-);
-
 .upgStepProgress__status--circle {
   text-align: center;
   border-radius: $euiSizeM;
   line-height: $euiSize - 2px;
-
-  @each $status, $callOutColor in $stepStatusToCallOutColor {
-    &-#{$status} {
-      $statusBg: tintOrShade($callOutColor, 90%, 70%);
-      color: shadeOrTint(makeHighContrastColor($callOutColor, $statusBg), 0, 20%);
-      background-color: $statusBg;
-    }
-  }
 }
 
 .upgStepProgress__title {

diff --git a/...application/components/es_deprecations/deprecation_types/reindex/flyout/step_progress.tsx b/...application/components/es_deprecations/deprecation_types/reindex/flyout/step_progress.tsx
@@ -8,38 +8,64 @@
 import classNames from 'classnames';
 import React, { Fragment, ReactNode } from 'react';
 
-import { EuiIcon, EuiLoadingSpinner } from '@elastic/eui';
+import { EuiIcon, EuiLoadingSpinner, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 import './_step_progress.scss';
 
 type STATUS = 'incomplete' | 'inProgress' | 'complete' | 'failed' | 'paused' | 'cancelled';
 
 const StepStatus: React.FunctionComponent<{ status: STATUS; idx: number }> = ({ status, idx }) => {
+  const { euiTheme } = useEuiTheme();
   if (status === 'incomplete') {
     return <span className="upgStepProgress__status">{idx + 1}.</span>;
   } else if (status === 'inProgress') {
     return <EuiLoadingSpinner size="m" className="upgStepProgress__status" />;
   } else if (status === 'complete') {
     return (
-      <span className="upgStepProgress__status upgStepProgress__status--circle upgStepProgress__status--circle-complete">
+      <span
+        className="upgStepProgress__status upgStepProgress__status--circle"
+        css={css`
+          color: ${euiTheme.colors.textSuccess};
+          background-color: ${euiTheme.colors.backgroundBaseSuccess};
+        `}
+      >
         <EuiIcon type="check" size="s" />
       </span>
     );
   } else if (status === 'paused') {
     return (
-      <span className="upgStepProgress__status upgStepProgress__status--circle upgStepProgress__status--circle-paused">
+      <span
+        className="upgStepProgress__status upgStepProgress__status--circle"
+        css={css`
+          color: ${euiTheme.colors.textWarning};
+          background-color: ${euiTheme.colors.backgroundBaseWarning};
+        `}
+      >
         <EuiIcon type="pause" size="s" />
       </span>
     );
   } else if (status === 'cancelled') {
     return (
-      <span className="upgStepProgress__status upgStepProgress__status--circle upgStepProgress__status--circle-cancelled">
+      <span
+        className="upgStepProgress__status upgStepProgress__status--circle"
+        css={css`
+          color: ${euiTheme.colors.textWarning};
+          background-color: ${euiTheme.colors.backgroundBaseWarning};
+        `}
+      >
         <EuiIcon type="cross" size="s" />
       </span>
     );
   } else if (status === 'failed') {
     return (
-      <span className="upgStepProgress__status upgStepProgress__status--circle upgStepProgress__status--circle-failed">
+      <span
+        className="upgStepProgress__status upgStepProgress__status--circle"
+        css={css`
+          color: ${euiTheme.colors.textDanger};
+          background-color: ${euiTheme.colors.backgroundBaseDanger};
+        `}
+      >
         <EuiIcon type="cross" size="s" />
       </span>
     );