[Fleet][EUI Visual Refresh] Replace hardcoded colors with tokens (#20…

…4717) ## Summary Closes #202003 This PR replaces hardcoded custom colours with EUI tokens. Found occurrences in Fleet plugin codebase: - hex colours (`#[A-Fa-f0-9]{6}`) - colour names (`red`, `green`...). - [x] Agent activity flyout - [x] Multiple hardcoded colours changed to semantic tokens - [x] Missing security requirements page - [x] Border colour - [x] Multisteps integration installation - [x] There was an old styling polyfill that looks like it can be removed, the result is visually very similar. Note that [the proposal to introduce numberless steps was rejected based on accessibility concerns](elastic/eui#5836 (comment)). - [x] Agent donut chart - [x] Legacy component no longer in use - removed - [x] Quickstart package card styling - [x] Card border colour (cf. implementation in #179573) Not covered: - [Test custom space in Cypress test](https://github.com/elastic/kibana/blob/6cd2cd6cf83fcf18b7ab66ac3f38f11ab9d69f8a/x-pack/plugins/fleet/cypress/tasks/spaces.ts#L26) - [Mock useEuiTheme in Jest test](https://github.com/elastic/kibana/blob/6cd2cd6cf83fcf18b7ab66ac3f38f11ab9d69f8a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/installation_status.test.tsx#L26) - [Story](https://github.com/elastic/kibana/blob/6cd2cd6cf83fcf18b7ab66ac3f38f11ab9d69f8a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/integration_preference.stories.tsx#L24) - [Custom tag colours](https://github.com/elastic/kibana/blob/6cd2cd6cf83fcf18b7ab66ac3f38f11ab9d69f8a/x-pack/plugins/fleet/server/services/epm/kibana/assets/tag_assets.ts#L36-L57): note that these are defined in the backend. ## Screenshots Note: I'm struggling to test the integrations quick start (tested the colour by manually applying it on the normal Integrations page), any advice on this would be welcome. ### Before (`main` branch), Amsterdam theme Agent activity flyout, showing in progress and error activity items: <img width="800" alt="agent-activity-1-amsterdam-main" src="https://github.com/user-attachments/assets/853dd496-415d-46f0-b3e0-c8e1bd0de574" /> Agent activity flyout, showing a successful activity item: <img width="800" alt="agent-activity-2-amsterdam-main" src="https://github.com/user-attachments/assets/dfa16c8c-cb3d-49e1-857f-b4ed2f658ad0" /> Missing security requirements page: <img width="1919" alt="es-requirements-amsterdam-main" src="https://github.com/user-attachments/assets/c029aa06-9326-4489-8e12-e26516e612d4" /> Multisteps integration installation (step 1): <img width="1919" alt="multisteps-1-amsterdam-main" src="https://github.com/user-attachments/assets/942a8e4f-6ed0-4498-a192-34fb4a319e37" /> Multisteps integration installation (step 2): <img width="1919" alt="multisteps-2-amsterdam-main" src="https://github.com/user-attachments/assets/c1976c63-08cc-4a91-b8c0-8ae73cb4afda" /> For reference, the old agent donut chard component: ![old-fleet-ui](https://github.com/user-attachments/assets/6b309d8a-5417-45cb-bb6c-58d1d88009f5) ### After #### Amsterdam Agent activity flyout, showing in progress and error activity items: <img width="800" alt="agent-activity-1-amsterdam-branch" src="https://github.com/user-attachments/assets/6765c849-e4bd-4744-b108-2bdc3337ffa6" /> Agent activity flyout, showing a successful activity item: <img width="800" alt="agent-activity-2-amsterdam-branch" src="https://github.com/user-attachments/assets/29d7ef48-16f5-40f2-9686-2d1a7f8e5737" /> Missing security requirements page: <img width="1918" alt="es-requirements-amsterdam-branch" src="https://github.com/user-attachments/assets/372807ad-41cb-4945-8300-eaba15a40db4" /> Multisteps integration installation (step 1): <img width="1918" alt="multisteps-1-amsterdam-branch" src="https://github.com/user-attachments/assets/41c566f0-200b-4cd6-a579-cc50292f4a56" /> Multisteps integration installation (step 2): <img width="1918" alt="multisteps-2-amsterdam-branch" src="https://github.com/user-attachments/assets/647ef4a8-d190-4a84-8a8c-07973cd600f8" /> #### Borealis Agent activity flyout, showing in progress and error activity items: <img width="800" alt="agent-activity-1-borealis-branch" src="https://github.com/user-attachments/assets/1e9cbd66-82de-48ca-9550-e226c808c3e5" /> Agent activity flyout, showing a successful activity item: <img width="800" alt="agent-activity-2-borealis-branch" src="https://github.com/user-attachments/assets/690792f5-8c8f-4665-ba2d-72a087be8bae" /> Missing security requirements page: <img width="1918" alt="es-requirements-borealis-branch" src="https://github.com/user-attachments/assets/a65bd707-2374-440b-9730-b48e8730edca" /> Multisteps integration installation (step 1): <img width="1918" alt="multisteps-1-borealis-branch" src="https://github.com/user-attachments/assets/ef0e8b99-3bf5-4da1-8b72-731741c6d322" /> Multisteps integration installation (step 2): <img width="1918" alt="multisteps-2-borealis-branch" src="https://github.com/user-attachments/assets/a4901126-7686-420e-b13d-9f0c63aa71c9" />
elastic · Dec 18, 2024 · f709e08 · f709e08
1 parent 96af6fa
commit f709e08
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 145 deletions.
diff --git a/..._policy/create_package_policy_page/multi_page_layout/components/horizontal_page_steps.tsx b/..._policy/create_package_policy_page/multi_page_layout/components/horizontal_page_steps.tsx
@@ -7,31 +7,7 @@
 import React from 'react';
 import { EuiStepsHorizontal } from '@elastic/eui';
 import type { EuiStepsHorizontalProps } from '@elastic/eui';
-import styled from 'styled-components';
 
-// polyfill until https://github.com/elastic/eui/discussions/5836 implemented
-const NumberlessHorizontalSteps = styled(EuiStepsHorizontal)`
-  .euiStepNumber {
-    color: transparent;
-    width: 16px;
-    height: 16px;
-    outline-color: #07c;
-  }
-  .euiStepHorizontal::before {
-    width: calc(50% - 8px);
-    top: 32px;
-  }
-  .euiStepHorizontal::after {
-    width: calc(50% - 8px);
-    top: 32px;
-  }
-  .euiStepHorizontal {
-    padding: 25px 16px 16px;
-  }
-  .euiStepHorizontal[data-step-status='incomplete'] .euiStepHorizontal__title {
-    color: #69707d;
-  }
-`;
 const getStepStatus = (currentStep: number, stepIndex: number, currentStepComplete: boolean) => {
   if (currentStep === stepIndex) {
     if (currentStepComplete) return 'complete';
@@ -58,5 +34,5 @@ export const PageSteps: React.FC<{
     };
   }) as EuiStepsHorizontalProps['steps'];
 
-  return <NumberlessHorizontalSteps steps={steps} />;
+  return <EuiStepsHorizontal size="xs" steps={steps} />;
 };
diff --git a/.../fleet/sections/agents/agent_list_page/components/agent_activity_flyout/activity_item.tsx b/.../fleet/sections/agents/agent_list_page/components/agent_activity_flyout/activity_item.tsx
@@ -16,25 +16,22 @@ import {
   EuiText,
   EuiPanel,
   EuiSpacer,
+  useEuiTheme,
 } from '@elastic/eui';
 
 import type { ActionStatus } from '../../../../../types';
 
 import { ViewErrors } from '../view_errors';
 
-import {
-  formattedTime,
-  getAction,
-  inProgressDescription,
-  inProgressTitle,
-  inProgressTitleColor,
-} from './helpers';
+import { formattedTime, getAction, inProgressDescription, inProgressTitle } from './helpers';
 import { ViewAgentsButton } from './view_agents_button';
 
 export const ActivityItem: React.FunctionComponent<{
   action: ActionStatus;
   onClickViewAgents: (action: ActionStatus) => void;
 }> = ({ action, onClickViewAgents }) => {
+  const theme = useEuiTheme();
+
   const completeTitle =
     action.type === 'POLICY_CHANGE' && action.nbAgentsActioned === 0 ? (
       <EuiText>
@@ -104,18 +101,21 @@ export const ActivityItem: React.FunctionComponent<{
     IN_PROGRESS: {
       icon: <EuiLoadingSpinner size="m" />,
       title: <EuiText>{inProgressTitle(action)}</EuiText>,
-      titleColor: inProgressTitleColor,
+      titleColor: theme.euiTheme.colors.textPrimary,
       description: <EuiText color="subdued">{inProgressDescription(action.creationTime)}</EuiText>,
     },
     ROLLOUT_PASSED: {
       icon:
         action.nbAgentsFailed > 0 ? (
-          <EuiIcon size="m" type="warning" color="red" />
+          <EuiIcon size="m" type="warning" color="danger" />
         ) : (
-          <EuiIcon size="m" type="checkInCircleFilled" color="green" />
+          <EuiIcon size="m" type="checkInCircleFilled" color="success" />
         ),
       title: completeTitle,
-      titleColor: action.nbAgentsFailed > 0 ? 'red' : 'green',
+      titleColor:
+        action.nbAgentsFailed > 0
+          ? theme.euiTheme.colors.textDanger
+          : theme.euiTheme.colors.textSuccess,
       description:
         action.nbAgentsFailed > 0 ? (
           failedDescription
@@ -124,9 +124,9 @@ export const ActivityItem: React.FunctionComponent<{
         ),
     },
     COMPLETE: {
-      icon: <EuiIcon size="m" type="checkInCircleFilled" color="green" />,
+      icon: <EuiIcon size="m" type="checkInCircleFilled" color="success" />,
       title: completeTitle,
-      titleColor: 'green',
+      titleColor: theme.euiTheme.colors.textSuccess,
       description:
         action.type === 'POLICY_REASSIGN' && action.newPolicyId ? (
           <EuiText color="subdued">
@@ -160,14 +160,14 @@ export const ActivityItem: React.FunctionComponent<{
         ),
     },
     FAILED: {
-      icon: <EuiIcon size="m" type="warning" color="red" />,
+      icon: <EuiIcon size="m" type="warning" color="danger" />,
       title: completeTitle,
-      titleColor: 'red',
+      titleColor: theme.euiTheme.colors.textDanger,
       description: failedDescription,
     },
     CANCELLED: {
-      icon: <EuiIcon size="m" type="warning" color="grey" />,
-      titleColor: 'grey',
+      icon: <EuiIcon size="m" type="warning" color="subdued" />,
+      titleColor: theme.euiTheme.colors.textSubdued,
       title: (
         <EuiText>
           <FormattedMessage
@@ -192,8 +192,8 @@ export const ActivityItem: React.FunctionComponent<{
       ),
     },
     EXPIRED: {
-      icon: <EuiIcon size="m" type="warning" color="grey" />,
-      titleColor: 'grey',
+      icon: <EuiIcon size="m" type="warning" color="subdued" />,
+      titleColor: theme.euiTheme.colors.textSubdued,
       title: (
         <EuiText>
           <FormattedMessage

diff --git a/...ations/fleet/sections/agents/agent_list_page/components/agent_activity_flyout/helpers.tsx b/...ations/fleet/sections/agents/agent_list_page/components/agent_activity_flyout/helpers.tsx
@@ -10,8 +10,6 @@ import { FormattedDate, FormattedMessage, FormattedTime } from '@kbn/i18n-react'
 
 import type { ActionStatus } from '../../../../../types';
 
-export const inProgressTitleColor = '#0077CC';
-
 const actionNames: {
   [key: string]: { inProgressText: string; completedText: string; cancelledText: string };
 } = {

diff --git a/...ts/agent_list_page/components/agent_activity_flyout/upgrade_in_progress_activity_item.tsx b/...ts/agent_list_page/components/agent_activity_flyout/upgrade_in_progress_activity_item.tsx
@@ -15,19 +15,15 @@ import {
   EuiPanel,
   EuiButton,
   EuiLink,
+  useEuiTheme,
 } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import type { ActionStatus } from '../../../../../types';
 import { useStartServices } from '../../../../../hooks';
 
-import {
-  formattedTime,
-  inProgressDescription,
-  inProgressTitle,
-  inProgressTitleColor,
-} from './helpers';
+import { formattedTime, inProgressDescription, inProgressTitle } from './helpers';
 import { ViewAgentsButton } from './view_agents_button';
 
 export const UpgradeInProgressActivityItem: React.FunctionComponent<{
@@ -36,6 +32,8 @@ export const UpgradeInProgressActivityItem: React.FunctionComponent<{
   onClickViewAgents: (action: ActionStatus) => void;
 }> = ({ action, abortUpgrade, onClickViewAgents }) => {
   const { docLinks } = useStartServices();
+  const theme = useEuiTheme();
+
   const [isAborting, setIsAborting] = useState(false);
   const onClickAbortUpgrade = useCallback(async () => {
     try {
@@ -69,7 +67,10 @@ export const UpgradeInProgressActivityItem: React.FunctionComponent<{
               {isScheduled ? <EuiIcon type="clock" /> : <EuiLoadingSpinner size="m" />}
             </EuiFlexItem>
             <EuiFlexItem>
-              <EuiText color={inProgressTitleColor} data-test-subj="upgradeInProgressTitle">
+              <EuiText
+                color={theme.euiTheme.colors.textPrimary}
+                data-test-subj="upgradeInProgressTitle"
+              >
                 {isScheduled && action.startTime ? (
                   <FormattedMessage
                     id="xpack.fleet.agentActivityFlyout.scheduleTitle"

diff --git a/...leet/public/applications/fleet/sections/agents/agent_list_page/components/view_errors.tsx b/...leet/public/applications/fleet/sections/agents/agent_list_page/components/view_errors.tsx
@@ -8,7 +8,7 @@
 import styled from 'styled-components';
 import React from 'react';
 import type { EuiBasicTableProps } from '@elastic/eui';
-import { EuiAccordion, EuiToolTip, EuiText, EuiBasicTable } from '@elastic/eui';
+import { EuiAccordion, EuiToolTip, EuiText, EuiBasicTable, useEuiTheme } from '@elastic/eui';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import moment from 'moment';
 
@@ -33,6 +33,7 @@ const TruncatedEuiText = styled(EuiText)`
 
 export const ViewErrors: React.FunctionComponent<{ action: ActionStatus }> = ({ action }) => {
   const coreStart = useStartServices();
+  const theme = useEuiTheme();
 
   const getLogsButton = (agentId: string, timestamp: string) => {
     const start = moment(timestamp).subtract(5, 'm').toISOString();
@@ -70,7 +71,11 @@ export const ViewErrors: React.FunctionComponent<{ action: ActionStatus }> = ({
       }),
       render: (error: string) => (
         <EuiToolTip content={error}>
-          <TruncatedEuiText size="s" color="red" data-test-subj="errorText">
+          <TruncatedEuiText
+            size="s"
+            color={theme.euiTheme.colors.textDanger}
+            data-test-subj="errorText"
+          >
             {error}
           </TruncatedEuiText>
         </EuiToolTip>

diff --git a/...ublic/applications/fleet/sections/agents/agent_requirements_page/es_requirements_page.tsx b/...ublic/applications/fleet/sections/agents/agent_requirements_page/es_requirements_page.tsx
@@ -20,9 +20,10 @@ import {
   EuiCode,
   EuiCodeBlock,
   EuiLink,
+  useEuiTheme,
 } from '@elastic/eui';
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import { WithoutHeaderLayout } from '../../../layouts';
 import type { GetFleetStatusResponse } from '../../../types';
@@ -50,20 +51,21 @@ export const RequirementItem: React.FunctionComponent<{
   );
 };
 
-const borderColor = '#d3dae6';
-
-const StyledPageBody = styled(EuiPageBody)`
-  border: 1px solid ${borderColor};
-  border-radius: 5px;
-`;
-
 export const MissingESRequirementsPage: React.FunctionComponent<{
   missingRequirements: GetFleetStatusResponse['missing_requirements'];
 }> = ({ missingRequirements }) => {
   const { docLinks } = useStartServices();
+  const theme = useEuiTheme();
+
   return (
     <WithoutHeaderLayout>
-      <StyledPageBody restrictWidth={820}>
+      <EuiPageBody
+        restrictWidth={820}
+        css={css`
+          border: ${theme.euiTheme.border.thin}};
+          border-radius: 5px;
+        `}
+      >
         <EuiPageSection color="transparent">
           <EuiCallOut
             title={i18n.translate('xpack.fleet.setupPage.missingRequirementsCalloutTitle', {
@@ -150,7 +152,7 @@ xpack.security.authc.api_key.enabled: true`}
             }}
           />
         </EuiPageSection>
-      </StyledPageBody>
+      </EuiPageBody>
     </WithoutHeaderLayout>
   );
 };
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/donut_chart.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/donut_chart.tsx