extracting custom css to constant

replacing hook by redux selector

x-pack/plugins/security_solution/public/timelines/components/bottom_bar/index.test.tsx

@@ -10,10 +10,8 @@ import { render } from '@testing-library/react';
 import { TestProviders } from '../../../common/mock/test_providers';
 import { timelineActions } from '../../store';
 import { TimelineBottomBar } from '.';
-import { useTimelineTitle } from '../../hooks/use_timeline_title';
 import { TimelineId } from '../../../../common/types';
 
-jest.mock('../../hooks/use_timeline_title');
 jest.mock('react-redux', () => {
   const origin = jest.requireActual('react-redux');
   return {
@@ -24,8 +22,6 @@ jest.mock('react-redux', () => {
 
 describe('TimelineBottomBar', () => {
   test('should render all components for bottom bar', () => {
-    (useTimelineTitle as jest.Mock).mockReturnValue('title');
-
     const { getByTestId } = render(
       <TestProviders>
         <TimelineBottomBar show={false} timelineId={TimelineId.test} />
@@ -39,8 +35,6 @@ describe('TimelineBottomBar', () => {
   });
 
   test('should not render the event count badge if timeline is open', () => {
-    (useTimelineTitle as jest.Mock).mockReturnValue('title');
-
     const { queryByTestId } = render(
       <TestProviders>
         <TimelineBottomBar show={true} timelineId={TimelineId.test} />

x-pack/plugins/security_solution/public/timelines/components/bottom_bar/index.tsx

@@ -6,10 +6,11 @@
  */
 import React, { useCallback } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiPanel } from '@elastic/eui';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { i18n } from '@kbn/i18n';
+import type { State } from '../../../common/store';
+import { selectTitleByTimelineById } from '../../store/selectors';
 import { AddTimelineButton } from '../flyout/add_timeline_button';
-import { useTimelineTitle } from '../../hooks/use_timeline_title';
 import { timelineActions } from '../../store';
 import { TimelineSaveStatus } from '../save_status';
 import { AddToFavoritesButton } from '../timeline/properties/helpers';
@@ -43,7 +44,7 @@ export const TimelineBottomBar = React.memo<TimelineBottomBarProps>(({ show, tim
     [dispatch, timelineId]
   );
 
-  const title = useTimelineTitle({ timelineId });
+  const title = useSelector((state: State) => selectTitleByTimelineById(state, timelineId));
 
   return (
     <EuiPanel borderRadius="none" data-test-subj="timeline-bottom-bar">

x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx

@@ -13,14 +13,12 @@ import {
   EuiButtonIcon,
   EuiText,
 } from '@elastic/eui';
-import { css } from '@emotion/react';
 import React, { useCallback, useMemo } from 'react';
 import { isEmpty, get, pick } from 'lodash/fp';
 import { useDispatch, useSelector } from 'react-redux';
-import styled from 'styled-components';
 import { getEsQueryConfig } from '@kbn/data-plugin/common';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
-import { useTimelineTitle } from '../../../hooks/use_timeline_title';
+import { selectTitleByTimelineById } from '../../../store/selectors';
 import { createHistoryEntry } from '../../../../common/utils/global_query_string/helpers';
 import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
 import { timelineActions, timelineSelectors } from '../../../store';
@@ -40,9 +38,8 @@ interface FlyoutHeaderPanelProps {
   timelineId: string;
 }
 
-const FlyoutHeaderPanelContentFlexGroupContainer = styled(EuiFlexGroup)`
-  overflow-x: auto;
-`;
+const whiteSpaceNoWrapCSS = { 'white-space': 'nowrap' };
+const autoOverflowXCSS = { 'overflow-x': 'auto' };
 
 const TimelinePanel = euiStyled(EuiPanel)<{ $isOpen?: boolean }>`
   backgroundColor: ${(props) => props.theme.eui.euiColorEmptyShade};
@@ -57,7 +54,7 @@ const FlyoutHeaderPanelComponent: React.FC<FlyoutHeaderPanelProps> = ({ timeline
   const { uiSettings } = useKibana().services;
   const esQueryConfig = useMemo(() => getEsQueryConfig(uiSettings), [uiSettings]);
 
-  const title = useTimelineTitle({ timelineId });
+  const title = useSelector((state: State) => selectTitleByTimelineById(state, timelineId));
 
   const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
   const { activeTab, dataProviders, kqlQuery, timelineType, show, filters, kqlMode } =
@@ -114,12 +111,13 @@ const FlyoutHeaderPanelComponent: React.FC<FlyoutHeaderPanelProps> = ({ timeline
       data-test-subj="timeline-flyout-header-panel"
       data-show={show}
     >
-      <FlyoutHeaderPanelContentFlexGroupContainer
+      <EuiFlexGroup
         className="eui-scrollBar"
         alignItems="center"
         gutterSize="s"
         responsive={false}
         justifyContent="spaceBetween"
+        css={autoOverflowXCSS}
       >
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
@@ -132,13 +130,7 @@ const FlyoutHeaderPanelComponent: React.FC<FlyoutHeaderPanelProps> = ({ timeline
               <AddToFavoritesButton timelineId={timelineId} compact />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiText
-                grow={false}
-                data-test-subj="timeline-title"
-                css={css`
-                  white-space: nowrap;
-                `}
-              >
+              <EuiText grow={false} data-test-subj="timeline-title" css={whiteSpaceNoWrapCSS}>
                 <h3>{title}</h3>
               </EuiText>
             </EuiFlexItem>
@@ -175,7 +167,7 @@ const FlyoutHeaderPanelComponent: React.FC<FlyoutHeaderPanelProps> = ({ timeline
             </EuiFlexGroup>
           </EuiFlexItem>
         )}
-      </FlyoutHeaderPanelContentFlexGroupContainer>
+      </EuiFlexGroup>
     </TimelinePanel>
   );
 };

x-pack/plugins/security_solution/public/timelines/store/selectors.ts

@@ -6,13 +6,18 @@
  */
 
 import { createSelector } from 'reselect';
+import { isEmpty } from 'lodash/fp';
+import {
+  UNTITLED_TEMPLATE,
+  UNTITLED_TIMELINE,
+} from '../components/timeline/properties/translations';
 import { timelineSelectors } from '.';
 import { TimelineTabs } from '../../../common/types';
 import type { State } from '../../common/store/types';
 
 import type { TimelineModel } from './model';
 import type { InsertTimeline, TimelineById } from './types';
-import { TimelineStatus } from '../../../common/api/timeline';
+import { TimelineStatus, TimelineType } from '../../../common/api/timeline';
 
 export const getTimelineShowStatusByIdSelector = () =>
   createSelector(timelineSelectors.selectTimeline, (timeline) => ({
@@ -23,19 +28,22 @@ export const getTimelineShowStatusByIdSelector = () =>
     changed: timeline?.changed ?? false,
   }));
 
-const selectTimelineById = (state: State): TimelineById => state.timeline.timelineById;
+// deprecated
+const timelineByIdState = (state: State): TimelineById => state.timeline.timelineById;
 
 const selectCallOutUnauthorizedMsg = (state: State): boolean =>
   state.timeline.showCallOutUnauthorizedMsg;
 
+// deprecated, prefer using selectTimelineById below
 export const selectTimeline = (state: State, timelineId: string): TimelineModel =>
   state.timeline.timelineById[timelineId];
 
 export const selectInsertTimeline = (state: State): InsertTimeline | null =>
   state.timeline.insertTimeline;
 
+// deprecated, prefer using selectTimelineById below
 export const timelineByIdSelector = createSelector(
-  selectTimelineById,
+  timelineByIdState,
   (timelineById) => timelineById
 );
 
@@ -69,3 +77,45 @@ export const getKqlFilterKuerySelector = () =>
 
 export const dataProviderVisibilitySelector = () =>
   createSelector(selectTimeline, (timeline) => timeline.isDataProviderVisible);
+
+/**
+ * Selector that returns the timelineById slice of state
+ */
+export const selectTimelineById = createSelector(
+  (state: State) => state.timeline.timelineById,
+  (state: State, timelineId: string) => timelineId,
+  (timelineById, timelineId) => timelineById[timelineId]
+);
+
+/**
+ * Selector that returns the timeline saved title.
+ */
+const selectTimelineTitle = createSelector(selectTimelineById, (timeline) => timeline?.title);
+
+/**
+ * Selector that returns the timeline type.
+ */
+const selectTimelineTimelineType = createSelector(
+  selectTimelineById,
+  (timeline) => timeline?.timelineType
+);
+
+/**
+ * Selector that returns the title of a timeline.
+ * If the timeline has been saved, it will return the saved title.
+ * If timeline is in template mode, it will return the default 'Untitled template' value;
+ * If none of the above, it will return the default 'Untitled timeline' value.
+ */
+export const selectTitleByTimelineById = createSelector(
+  selectTimelineTitle,
+  selectTimelineTimelineType,
+  (savedTitle, timelineType): string => {
+    if (!isEmpty(savedTitle)) {
+      return savedTitle;
+    }
+    if (timelineType === TimelineType.template) {
+      return UNTITLED_TEMPLATE;
+    }
+    return UNTITLED_TIMELINE;
+  }
+);