[ILM] Remove euiThemeVars and remapping colors for Borealis (#204449)

Part of #203664 ## Summary This PR addresses the changes for Borealis theme that are related to the ILM plugin. That means get rid of `euiThemeVars` in Boreales in favor of `useEuiTheme` colors and remapping the colors for ILM status. It also eliminates the use of ` _behindText` values in Borealis. This remapping is a mid-term solution since the Vis color palette is not been using here as this is not their intended use. In the future, probably a separate palette will be created. <img width="1387" alt="Screenshot 2024-12-16 at 17 20 54" src="https://github.com/user-attachments/assets/1bc82a7d-27cc-47cb-bc35-45f8feb7360a" /> <img width="743" alt="Screenshot 2024-12-16 at 17 20 40" src="https://github.com/user-attachments/assets/ca5b4b4e-2809-42e6-abc0-fa87493df0e1" /> <img width="1330" alt="Screenshot 2024-12-16 at 17 19 42" src="https://github.com/user-attachments/assets/8ebc252c-07dc-4efa-b13d-4f9fadb3366b" /> <img width="753" alt="Screenshot 2024-12-16 at 17 19 58" src="https://github.com/user-attachments/assets/eff5c360-c9dd-4a96-ac7a-e8b1059937eb" /> --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Matthew Kime <[email protected]>
elastic · Jan 8, 2025 · aa64895 · aa64895
1 parent c6501da
commit aa64895
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 83 deletions.
diff --git a/...e/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap b/...e/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
diff --git a/...ins/private/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap b/...ins/private/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap
diff --git a/..._management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss b/..._management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss
@@ -6,31 +6,14 @@
   align-items: center;
   border-radius: 50%;
   background-color: $euiColorLightestShade;
+
   &--disabled {
     width: $euiSize;
     height: $euiSize;
     margin: $euiSizeS;
   }
+
   &--delete {
     background-color: $euiColorLightShade;
   }
-  &__inner--hot {
-    fill: $euiColorVis9_behindText;
-  }
-  &__inner--warm {
-    fill: $euiColorVis5_behindText;
-  }
-  &__inner--cold {
-    fill: $euiColorVis1_behindText;
-  }
-  &__inner--frozen {
-    fill: $euiColorVis4_behindText;
-  }
-  &__inner--delete {
-    fill: $euiColorDarkShade;
-  }
-
-  &__inner--disabled {
-    fill: $euiColorMediumShade;
-  }
 }
diff --git a/...e_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.tsx b/...e_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.tsx
@@ -6,21 +6,37 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { EuiIcon } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { euiThemeVars } from '@kbn/ui-theme';
+import { EuiIcon, useEuiTheme } from '@elastic/eui';
 import { Phases } from '../../../../../../common/types';
 import './phase_icon.scss';
 interface Props {
   enabled: boolean;
   phase: string & keyof Phases;
 }
 export const PhaseIcon: FunctionComponent<Props> = ({ enabled, phase }) => {
+  const { euiTheme } = useEuiTheme();
+
+  const isBorealis = euiTheme.themeName === 'EUI_THEME_BOREALIS';
+
+  const phaseIconColors = {
+    hot: isBorealis ? euiTheme.colors.vis.euiColorVis6 : euiThemeVars.euiColorVis9_behindText,
+    warm: isBorealis ? euiTheme.colors.vis.euiColorVis9 : euiThemeVars.euiColorVis5_behindText,
+    cold: isBorealis ? euiTheme.colors.vis.euiColorVis2 : euiThemeVars.euiColorVis1_behindText,
+    frozen: euiTheme.colors.vis.euiColorVis4,
+    delete: euiTheme.colors.darkShade,
+  };
+
   return (
     <div
       className={`ilmPhaseIcon ilmPhaseIcon--${phase} ${enabled ? '' : 'ilmPhaseIcon--disabled'}`}
     >
       {enabled ? (
         <EuiIcon
-          className={`ilmPhaseIcon__inner--${phase}`}
+          css={css`
+            fill: ${phaseIconColors[phase]};
+          `}
           type={phase === 'delete' ? 'trash' : 'checkInCircleFilled'}
           size={phase === 'delete' ? 'm' : 'l'}
         />

diff --git a/...ycle_management/public/application/sections/edit_policy/components/timeline/timeline.scss b/...ycle_management/public/application/sections/edit_policy/components/timeline/timeline.scss
@@ -60,33 +60,17 @@ $ilmTimelineBarHeight: $euiSizeS;
 
   &__hotPhase {
     width: var(--ilm-timeline-hot-phase-width);
-
-    &__colorBar {
-      background-color: $euiColorVis9;
-    }
   }
 
   &__warmPhase {
     width: var(--ilm-timeline-warm-phase-width);
-
-    &__colorBar {
-      background-color: $euiColorVis5;
-    }
   }
 
   &__coldPhase {
     width: var(--ilm-timeline-cold-phase-width);
-
-    &__colorBar {
-      background-color: $euiColorVis1;
-    }
   }
 
   &__frozenPhase {
     width: var(--ilm-timeline-frozen-phase-width);
-
-    &__colorBar {
-      background-color: $euiColorVis4;
-    }
   }
 }
diff --git a/...cycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx b/...cycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx
@@ -5,11 +5,21 @@
  * 2.0.
  */
 
+/** @jsx jsx */
+// Needed for for testing out the css prop feature. See: https://emotion.sh/docs/css-prop#jsx-pragma
+import { css, jsx } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import React, { FunctionComponent, memo } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiText, EuiIconTip } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  EuiText,
+  EuiIconTip,
+  useEuiTheme,
+} from '@elastic/eui';
 
 import { useKibana } from '../../../../../shared_imports';
 
@@ -135,6 +145,17 @@ export const Timeline: FunctionComponent<Props> = memo(
         : undefined,
     };
 
+    const { euiTheme } = useEuiTheme();
+
+    const isBorealis = euiTheme.themeName === 'EUI_THEME_BOREALIS';
+
+    const timelineIconColors = {
+      hot: isBorealis ? euiTheme.colors.vis.euiColorVis6 : euiTheme.colors.vis.euiColorVis9,
+      warm: isBorealis ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.vis.euiColorVis5,
+      cold: isBorealis ? euiTheme.colors.vis.euiColorVis2 : euiTheme.colors.vis.euiColorVis1,
+      frozen: euiTheme.colors.vis.euiColorVis4,
+    };
+
     const phaseAgeInMilliseconds = calculateRelativeFromAbsoluteMilliseconds(absoluteTimings);
 
     const widths = calculateWidths(phaseAgeInMilliseconds);
@@ -188,7 +209,12 @@ export const Timeline: FunctionComponent<Props> = memo(
                     data-test-subj="ilmTimelinePhase-hot"
                     className="ilmTimeline__phasesContainer__phase ilmTimeline__hotPhase"
                   >
-                    <div className="ilmTimeline__colorBar ilmTimeline__hotPhase__colorBar" />
+                    <div
+                      className={`ilmTimeline__colorBar `}
+                      css={css`
+                        background-color: ${timelineIconColors.hot};
+                      `}
+                    />
                     <TimelinePhaseText
                       phaseName={i18nTexts.hotPhase}
                       durationInPhase={getDurationInPhaseContent('hot')}
@@ -199,7 +225,12 @@ export const Timeline: FunctionComponent<Props> = memo(
                       data-test-subj="ilmTimelinePhase-warm"
                       className="ilmTimeline__phasesContainer__phase ilmTimeline__warmPhase"
                     >
-                      <div className="ilmTimeline__colorBar ilmTimeline__warmPhase__colorBar" />
+                      <div
+                        className={`ilmTimeline__colorBar`}
+                        css={css`
+                          background-color: ${timelineIconColors.warm};
+                        `}
+                      />
                       <TimelinePhaseText
                         phaseName={i18nTexts.warmPhase}
                         durationInPhase={getDurationInPhaseContent('warm')}
@@ -211,7 +242,12 @@ export const Timeline: FunctionComponent<Props> = memo(
                       data-test-subj="ilmTimelinePhase-cold"
                       className="ilmTimeline__phasesContainer__phase ilmTimeline__coldPhase"
                     >
-                      <div className="ilmTimeline__colorBar ilmTimeline__coldPhase__colorBar" />
+                      <div
+                        className={`ilmTimeline__colorBar`}
+                        css={css`
+                          background-color: ${timelineIconColors.cold};
+                        `}
+                      />
                       <TimelinePhaseText
                         phaseName={i18nTexts.coldPhase}
                         durationInPhase={getDurationInPhaseContent('cold')}
@@ -223,7 +259,12 @@ export const Timeline: FunctionComponent<Props> = memo(
                       data-test-subj="ilmTimelinePhase-frozen"
                       className="ilmTimeline__phasesContainer__phase ilmTimeline__frozenPhase"
                     >
-                      <div className="ilmTimeline__colorBar ilmTimeline__frozenPhase__colorBar" />
+                      <div
+                        className="ilmTimeline__colorBar"
+                        css={css`
+                          background-color: ${timelineIconColors.frozen};
+                        `}
+                      />
                       <TimelinePhaseText
                         phaseName={i18nTexts.frozenPhase}
                         durationInPhase={getDurationInPhaseContent('frozen')}

diff --git a/...ycle_management/public/application/sections/policy_list/policy_flyout/phase_indicator.tsx b/...ycle_management/public/application/sections/policy_list/policy_flyout/phase_indicator.tsx
@@ -7,17 +7,23 @@
 
 import React from 'react';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { useEuiTheme } from '@elastic/eui';
 import type { Phase } from '../../../../../common/types';
 
-const phaseToIndicatorColors = {
-  hot: euiThemeVars.euiColorVis9,
-  warm: euiThemeVars.euiColorVis5,
-  cold: euiThemeVars.euiColorVis1,
-  frozen: euiThemeVars.euiColorVis4,
-  delete: euiThemeVars.euiColorLightShade,
-};
 export const PhaseIndicator = ({ phase }: { phase: Phase }) => {
+  const { euiTheme } = useEuiTheme();
+
+  const isBorealis = euiTheme.themeName === 'EUI_THEME_BOREALIS';
+
+  // Changing the mappings for the phases in Borealis as a mid-term solution. See https://github.com/elastic/kibana/issues/203664#issuecomment-2536593361.
+  const phaseToIndicatorColors = {
+    hot: isBorealis ? euiTheme.colors.vis.euiColorVis6 : euiTheme.colors.vis.euiColorVis9,
+    warm: isBorealis ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.vis.euiColorVis5,
+    cold: isBorealis ? euiTheme.colors.vis.euiColorVis2 : euiTheme.colors.vis.euiColorVis1,
+    frozen: euiTheme.colors.vis.euiColorVis4,
+    delete: euiTheme.colors.lightShade,
+  };
+
   return (
     <div
       css={css`

diff --git a/...ifecycle_management/public/extend_index_management/components/index_lifecycle_summary.tsx b/...ifecycle_management/public/extend_index_management/components/index_lifecycle_summary.tsx
@@ -22,38 +22,14 @@ import {
   EuiBadgeProps,
   EuiBadge,
   EuiCode,
+  useEuiTheme,
 } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-theme';
 
 import { ApplicationStart } from '@kbn/core/public';
 import { Index, IndexDetailsTab } from '@kbn/index-management-shared-types';
 import { IlmExplainLifecycleLifecycleExplainManaged } from '@elastic/elasticsearch/lib/api/types';
 import { Phase } from '../../../common/types';
 import { getPolicyEditPath } from '../../application/services/navigation';
-
-const phaseToBadgeMapping: Record<Phase, { color: EuiBadgeProps['color']; label: string }> = {
-  hot: {
-    color: euiThemeVars.euiColorVis9,
-    label: 'Hot',
-  },
-  warm: {
-    color: euiThemeVars.euiColorVis5,
-    label: 'Warm',
-  },
-  cold: {
-    color: euiThemeVars.euiColorVis1,
-    label: 'Cold',
-  },
-  frozen: {
-    color: euiThemeVars.euiColorVis4,
-    label: 'Frozen',
-  },
-  delete: {
-    color: 'default',
-    label: 'Delete',
-  },
-};
-
 interface Props {
   index: Index;
   getUrlForApp: ApplicationStart['getUrlForApp'];
@@ -64,6 +40,34 @@ export const IndexLifecycleSummary: FunctionComponent<Props> = ({ index, getUrlF
   // only ILM managed indices render the ILM tab
   const ilm = ilmData as IlmExplainLifecycleLifecycleExplainManaged;
 
+  const { euiTheme } = useEuiTheme();
+
+  const isBorealis = euiTheme.themeName === 'EUI_THEME_BOREALIS';
+
+  // Changing the mappings for the phases in Borealis as a mid-term solution. See https://github.com/elastic/kibana/issues/203664#issuecomment-2536593361.
+  const phaseToBadgeMapping: Record<Phase, { color: EuiBadgeProps['color']; label: string }> = {
+    hot: {
+      color: isBorealis ? euiTheme.colors.vis.euiColorVis6 : euiTheme.colors.vis.euiColorVis9,
+      label: 'Hot',
+    },
+    warm: {
+      color: isBorealis ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.vis.euiColorVis5,
+      label: 'Warm',
+    },
+    cold: {
+      color: isBorealis ? euiTheme.colors.vis.euiColorVis2 : euiTheme.colors.vis.euiColorVis1,
+      label: 'Cold',
+    },
+    frozen: {
+      color: euiTheme.colors.vis.euiColorVis4,
+      label: 'Frozen',
+    },
+    delete: {
+      color: 'default',
+      label: 'Delete',
+    },
+  };
+
   // if ilm.phase is an unexpected value, then display a default badge
   const phaseBadgeConfig = phaseToBadgeMapping[ilm.phase as Phase] ?? {
     color: 'default',

diff --git a/x-pack/platform/plugins/private/index_lifecycle_management/tsconfig.json b/x-pack/platform/plugins/private/index_lifecycle_management/tsconfig.json
@@ -35,13 +35,13 @@
     "@kbn/core-http-browser",
     "@kbn/config-schema",
     "@kbn/shared-ux-router",
-    "@kbn/ui-theme",
     "@kbn/shared-ux-link-redirect-app",
     "@kbn/index-management-shared-types",
     "@kbn/react-kibana-context-render",
     "@kbn/unsaved-changes-prompt",
     "@kbn/shared-ux-table-persist",
     "@kbn/index-lifecycle-management-common-shared",
+    "@kbn/ui-theme",
   ],
   "exclude": [
     "target/**/*",