[8.x] [Security Solution][Notes] - updating colors for the save timel…

…ine callouts (elastic#194749) (elastic#194771)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security Solution][Notes] - updating colors for the save timeline
callouts (elastic#194749)](elastic#194749)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Philippe
Oberti","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-02T22:29:02Z","message":"[Security
Solution][Notes] - updating colors for the save timeline callouts
(elastic#194749)","sha":"af537141965eacf424389413877134e3b6b7d449","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["backport","release_note:skip","v9.0.0","Team:Threat
Hunting:Investigations","v8.16.0"],"title":"[Security Solution][Notes] -
updating colors for the save timeline
callouts","number":194749,"url":"https://github.com/elastic/kibana/pull/194749","mergeCommit":{"message":"[Security
Solution][Notes] - updating colors for the save timeline callouts
(elastic#194749)","sha":"af537141965eacf424389413877134e3b6b7d449"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194749","number":194749,"mergeCommit":{"message":"[Security
Solution][Notes] - updating colors for the save timeline callouts
(elastic#194749)","sha":"af537141965eacf424389413877134e3b6b7d449"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Philippe Oberti <[email protected]>

x-pack/plugins/security_solution/public/flyout/document_details/left/components/attach_to_active_timeline.test.tsx

@@ -15,11 +15,17 @@ import {
 import { AttachToActiveTimeline } from './attach_to_active_timeline';
 import { createMockStore, mockGlobalState, TestProviders } from '../../../../common/mock';
 import { TimelineId } from '../../../../../common/types';
+import { useUserPrivileges } from '../../../../common/components/user_privileges';
+
+jest.mock('../../../../common/components/user_privileges');
 
 const mockSetAttachToTimeline = jest.fn();
 
 describe('AttachToActiveTimeline', () => {
   it('should render the component for an unsaved timeline', () => {
+    (useUserPrivileges as jest.Mock).mockReturnValue({
+      kibanaSecuritySolutionsPrivileges: { crud: true },
+    });
     const mockStore = createMockStore({
       ...mockGlobalState,
       timeline: {
@@ -43,14 +49,15 @@ describe('AttachToActiveTimeline', () => {
     );
 
     expect(getByTestId(SAVE_TIMELINE_BUTTON_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(SAVE_TIMELINE_BUTTON_TEST_ID)).toHaveStyle('background-color: #FEC514');
+    expect(getByTestId(SAVE_TIMELINE_BUTTON_TEST_ID)).toHaveTextContent('Save timeline');
     expect(queryByTestId(ATTACH_TO_TIMELINE_CHECKBOX_TEST_ID)).not.toBeInTheDocument();
-
+    expect(getByTestId(ATTACH_TO_TIMELINE_CALLOUT_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(ATTACH_TO_TIMELINE_CALLOUT_TEST_ID)).toHaveClass('euiCallOut--warning');
     expect(getByText('Attach to timeline')).toBeInTheDocument();
     expect(
       getByText('Before attaching a note to the timeline, you need to save the timeline first.')
     ).toBeInTheDocument();
-
-    expect(getByTestId(ATTACH_TO_TIMELINE_CALLOUT_TEST_ID)).toBeInTheDocument();
   });
 
   it('should render the saved timeline texts in the callout', () => {
@@ -76,13 +83,15 @@ describe('AttachToActiveTimeline', () => {
         />
       </TestProviders>
     );
-    expect(getByTestId(ATTACH_TO_TIMELINE_CHECKBOX_TEST_ID)).toBeInTheDocument();
+
     expect(queryByTestId(SAVE_TIMELINE_BUTTON_TEST_ID)).not.toBeInTheDocument();
+    expect(getByTestId(ATTACH_TO_TIMELINE_CHECKBOX_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(ATTACH_TO_TIMELINE_CALLOUT_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(ATTACH_TO_TIMELINE_CALLOUT_TEST_ID)).toHaveClass('euiCallOut--primary');
     expect(getByText('Attach to timeline')).toBeInTheDocument();
     expect(
       getByText('You can associate the newly created note to the active timeline.')
     ).toBeInTheDocument();
-    expect(getByTestId(ATTACH_TO_TIMELINE_CALLOUT_TEST_ID)).toBeInTheDocument();
   });
 
   it('should call the callback when user click on the checkbox', () => {

x-pack/plugins/security_solution/public/flyout/document_details/left/components/attach_to_active_timeline.tsx

@@ -93,7 +93,7 @@ export const AttachToActiveTimeline = memo(
     return (
       <EuiCallOut
         title={ATTACH_TO_TIMELINE_CALLOUT_TITLE}
-        color={'primary'}
+        color={isTimelineSaved ? 'primary' : 'warning'}
         iconType="iInCircle"
         data-test-subj={ATTACH_TO_TIMELINE_CALLOUT_TEST_ID}
         css={css`
@@ -120,6 +120,7 @@ export const AttachToActiveTimeline = memo(
               <SaveTimelineButton
                 timelineId={TimelineId.active}
                 buttonText={SAVE_TIMELINE_BUTTON}
+                buttonColor="warning"
                 data-test-subj={SAVE_TIMELINE_BUTTON_TEST_ID}
               />
             )}

x-pack/plugins/security_solution/public/timelines/components/modal/actions/save_timeline_button.test.tsx

@@ -58,11 +58,12 @@ describe('SaveTimelineButton', () => {
 
     expect(getByTestId('timeline-modal-save-timeline')).toBeInTheDocument();
     expect(getByText('Save')).toBeInTheDocument();
+    expect(getByTestId('timeline-modal-save-timeline')).toHaveStyle('background-color: #07C');
 
     expect(queryByTestId('save-timeline-modal')).not.toBeInTheDocument();
   });
 
-  it('should override the default text in the button', async () => {
+  it('should override the default text and color of the button', async () => {
     (useUserPrivileges as jest.Mock).mockReturnValue({
       kibanaSecuritySolutionsPrivileges: { crud: true },
     });
@@ -73,14 +74,20 @@ describe('SaveTimelineButton', () => {
     });
     (useCreateTimeline as jest.Mock).mockReturnValue({});
 
-    const { getByText, queryByText } = render(
+    const { getByTestId, getByText, queryByText } = render(
       <TestProviders>
-        <SaveTimelineButton timelineId="timeline-1" buttonText={'TEST'} />
+        <SaveTimelineButton
+          timelineId="timeline-1"
+          buttonText="TEST"
+          buttonColor="warning"
+          data-test-subj={'TEST_ID'}
+        />
       </TestProviders>
     );
 
     expect(queryByText('Save')).not.toBeInTheDocument();
     expect(getByText('TEST')).toBeInTheDocument();
+    expect(getByTestId('TEST_ID')).toHaveStyle('background-color: #FEC514');
   });
 
   it('should open the timeline save modal', async () => {

x-pack/plugins/security_solution/public/timelines/components/modal/actions/save_timeline_button.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, { useCallback, useState } from 'react';
+import type { EuiButtonProps } from '@elastic/eui';
 import { EuiButton, EuiToolTip } from '@elastic/eui';
 import { useSelector } from 'react-redux';
 import { TimelineStatusEnum } from '../../../../../common/api/timeline';
@@ -25,6 +26,10 @@ export interface SaveTimelineButtonProps {
    * Ability to customize the text of the button
    */
   buttonText?: string;
+  /**
+   * Ability to customize the color of the button
+   */
+  buttonColor?: EuiButtonProps['color'];
   /**
    * Optional data-test-subj value
    */
@@ -39,6 +44,7 @@ export const SaveTimelineButton = React.memo<SaveTimelineButtonProps>(
   ({
     timelineId,
     buttonText = i18n.SAVE,
+    buttonColor = 'primary',
     'data-test-subj': dataTestSubj = 'timeline-modal-save-timeline',
   }) => {
     const [showEditTimelineOverlay, setShowEditTimelineOverlay] = useState<boolean>(false);
@@ -72,6 +78,7 @@ export const SaveTimelineButton = React.memo<SaveTimelineButtonProps>(
             id={TIMELINE_TOUR_CONFIG_ANCHORS.SAVE_TIMELINE}
             fill
             size="s"
+            color={buttonColor}
             iconType="save"
             isLoading={isSaving}
             disabled={!canSaveTimeline}

x-pack/plugins/security_solution/public/timelines/components/notes/save_timeline.test.tsx

@@ -11,9 +11,16 @@ import { SaveTimelineCallout } from './save_timeline';
 import { SAVE_TIMELINE_BUTTON_TEST_ID, SAVE_TIMELINE_CALLOUT_TEST_ID } from './test_ids';
 import { createMockStore, mockGlobalState, TestProviders } from '../../../common/mock';
 import { TimelineId } from '../../../../common/types';
+import { useUserPrivileges } from '../../../common/components/user_privileges';
+
+jest.mock('../../../common/components/user_privileges');
 
 describe('SaveTimelineCallout', () => {
   it('should render the callout and save components', () => {
+    (useUserPrivileges as jest.Mock).mockReturnValue({
+      kibanaSecuritySolutionsPrivileges: { crud: true },
+    });
+
     const mockStore = createMockStore({
       ...mockGlobalState,
       timeline: {
@@ -33,11 +40,13 @@ describe('SaveTimelineCallout', () => {
       </TestProviders>
     );
 
+    expect(getByTestId(SAVE_TIMELINE_BUTTON_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(SAVE_TIMELINE_BUTTON_TEST_ID)).toHaveStyle('background-color: #BD271E');
+    expect(getByTestId(SAVE_TIMELINE_BUTTON_TEST_ID)).toHaveTextContent('Save timeline');
     expect(getByTestId(SAVE_TIMELINE_CALLOUT_TEST_ID)).toBeInTheDocument();
     expect(getAllByText('Save timeline')).toHaveLength(2);
     expect(
       getByText('You need to save your timeline before creating notes for it.')
     ).toBeInTheDocument();
-    expect(getByTestId(SAVE_TIMELINE_BUTTON_TEST_ID)).toBeInTheDocument();
   });
 });

x-pack/plugins/security_solution/public/timelines/components/notes/save_timeline.tsx

@@ -39,7 +39,7 @@ export const SaveTimelineCallout = memo(() => {
   return (
     <EuiCallOut
       title={SAVE_TIMELINE_CALLOUT_TITLE}
-      color="warning"
+      color="danger"
       iconType="iInCircle"
       data-test-subj={SAVE_TIMELINE_CALLOUT_TEST_ID}
       css={css`
@@ -54,6 +54,7 @@ export const SaveTimelineCallout = memo(() => {
           <SaveTimelineButton
             timelineId={TimelineId.active}
             buttonText={SAVE_TIMELINE_BUTTON}
+            buttonColor="danger"
             data-test-subj={SAVE_TIMELINE_BUTTON_TEST_ID}
           />
         </EuiFlexItem>