[Security Solution][Timeline] Fix timeline styling and createFrom beh…

x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts

@@ -306,6 +306,203 @@ describe('helpers', () => {
         width: 1100,
       });
     });
+
+    test('if duplicates and timeline.timelineType is not matching with outcome timelineType it should return draft with empty title', () => {
+      const timeline = {
+        savedObjectId: 'savedObject-1',
+        title: 'Awesome Timeline',
+        version: '1',
+        status: TimelineStatus.active,
+        timelineType: TimelineType.default,
+      };
+
+      const newTimeline = defaultTimelineToTimelineModel(timeline, false, TimelineType.template);
+      expect(newTimeline).toEqual({
+        columns: [
+          {
+            columnHeaderType: 'not-filtered',
+            id: '@timestamp',
+            width: 190,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'message',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'event.category',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'event.action',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'host.name',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'source.ip',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'destination.ip',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'user.name',
+            width: 180,
+          },
+        ],
+        dataProviders: [],
+        dateRange: { start: '2020-07-07T08:20:18.966Z', end: '2020-07-08T08:20:18.966Z' },
+        description: '',
+        deletedEventIds: [],
+        eventIdToNoteIds: {},
+        eventType: 'all',
+        excludedRowRendererIds: [],
+        filters: [],
+        highlightedDropAndProviderId: '',
+        historyIds: [],
+        id: 'savedObject-1',
+        isFavorite: false,
+        isLive: false,
+        isSelectAllChecked: false,
+        isLoading: false,
+        isSaving: false,
+        itemsPerPage: 25,
+        itemsPerPageOptions: [10, 25, 50, 100],
+        kqlMode: 'filter',
+        kqlQuery: {
+          filterQuery: null,
+          filterQueryDraft: null,
+        },
+        loadingEventIds: [],
+        noteIds: [],
+        pinnedEventIds: {},
+        pinnedEventsSaveObject: {},
+        savedObjectId: 'savedObject-1',
+        selectedEventIds: {},
+        show: false,
+        showCheckboxes: false,
+        sort: {
+          columnId: '@timestamp',
+          sortDirection: 'desc',
+        },
+        status: TimelineStatus.draft,
+        title: '',
+        timelineType: TimelineType.template,
+        templateTimelineId: null,
+        templateTimelineVersion: null,
+        version: '1',
+        width: 1100,
+      });
+    });
+
+    test('if duplicates and timeline.timelineType is not matching with outcome timelineType it should return draft with empty title template', () => {
+      const timeline = {
+        savedObjectId: 'savedObject-1',
+        title: 'Awesome Template',
+        version: '1',
+        status: TimelineStatus.active,
+        timelineType: TimelineType.template,
+      };
+
+      const newTimeline = defaultTimelineToTimelineModel(timeline, false, TimelineType.default);
+      expect(newTimeline).toEqual({
+        columns: [
+          {
+            columnHeaderType: 'not-filtered',
+            id: '@timestamp',
+            width: 190,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'message',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'event.category',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'event.action',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'host.name',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'source.ip',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'destination.ip',
+            width: 180,
+          },
+          {
+            columnHeaderType: 'not-filtered',
+            id: 'user.name',
+            width: 180,
+          },
+        ],
+        dataProviders: [],
+        dateRange: { start: '2020-07-07T08:20:18.966Z', end: '2020-07-08T08:20:18.966Z' },
+        description: '',
+        deletedEventIds: [],
+        eventIdToNoteIds: {},
+        eventType: 'all',
+        excludedRowRendererIds: [],
+        filters: [],
+        highlightedDropAndProviderId: '',
+        historyIds: [],
+        id: 'savedObject-1',
+        isFavorite: false,
+        isLive: false,
+        isSelectAllChecked: false,
+        isLoading: false,
+        isSaving: false,
+        itemsPerPage: 25,
+        itemsPerPageOptions: [10, 25, 50, 100],
+        kqlMode: 'filter',
+        kqlQuery: {
+          filterQuery: null,
+          filterQueryDraft: null,
+        },
+        loadingEventIds: [],
+        noteIds: [],
+        pinnedEventIds: {},
+        pinnedEventsSaveObject: {},
+        savedObjectId: 'savedObject-1',
+        selectedEventIds: {},
+        show: false,
+        showCheckboxes: false,
+        sort: {
+          columnId: '@timestamp',
+          sortDirection: 'desc',
+        },
+        status: TimelineStatus.draft,
+        title: '',
+        timelineType: TimelineType.default,
+        templateTimelineId: null,
+        templateTimelineVersion: null,
+        version: '1',
+        width: 1100,
+      });
+    });
+
     test('if columns are null, we should get the default columns', () => {
       const timeline = {
         savedObjectId: 'savedObject-1',

x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts

@@ -13,6 +13,7 @@ import { Action } from 'typescript-fsa';
 import uuid from 'uuid';
 import { Dispatch } from 'redux';
 import deepMerge from 'deepmerge';
+import { reducer } from 'recompose';
 import { oneTimelineQuery } from '../../containers/one/index.gql_query';
 import {
   TimelineResult,
@@ -212,6 +213,28 @@ const getDataProviders = (
   return dataProviders;
 };
 
+export const getTimelineTitle = (
+  timeline: TimelineResult,
+  duplicate: boolean,
+  timelineType?: TimelineType
+) => {
+  const isCreateFromAction = timeline.timelineType !== timelineType;
+  if (isCreateFromAction) return '';
+
+  return duplicate ? `${timeline.title} - Duplicate` : timeline.title || '';
+};
+
+export const getTimelineStatus = (
+  timeline: TimelineResult,
+  duplicate: boolean,
+  timelineType?: TimelineType
+) => {
+  const isCreateTimelineFromAction = timeline.timelineType !== timelineType;
+  if (isCreateTimelineFromAction) return TimelineStatus.draft;
+
+  return duplicate ? TimelineStatus.active : timeline.status;
+};
+
 // eslint-disable-next-line complexity
 export const defaultTimelineToTimelineModel = (
   timeline: TimelineResult,
@@ -234,11 +257,11 @@ export const defaultTimelineToTimelineModel = (
     pinnedEventIds: setPinnedEventIds(duplicate, timeline.pinnedEventIds),
     pinnedEventsSaveObject: setPinnedEventsSaveObject(duplicate, timeline.pinnedEventsSaveObject),
     id: duplicate ? '' : timeline.savedObjectId,
-    status: duplicate ? TimelineStatus.active : timeline.status,
+    status: getTimelineStatus(timeline, duplicate, timelineType),
     savedObjectId: duplicate ? null : timeline.savedObjectId,
     version: duplicate ? null : timeline.version,
     timelineType: timelineType ?? timeline.timelineType,
-    title: duplicate ? `${timeline.title} - Duplicate` : timeline.title || '',
+    title: getTimelineTitle(timeline, duplicate, timelineType),
     templateTimelineId: getTemplateTimelineId(timeline, duplicate, timelineType),
     templateTimelineVersion: duplicate && isTemplate ? 1 : timeline.templateTimelineVersion,
   };

x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.tsx

@@ -183,7 +183,6 @@ export const OpenTimeline = React.memo<OpenTimelineProps>(
         />
 
         <EuiPanel className={OPEN_TIMELINE_CLASS_NAME}>
-          <EuiSpacer size="m" />
           {!!timelineFilter && timelineFilter}
           <SearchRow
             data-test-subj="search-row"

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

@@ -22,7 +22,7 @@ export interface OpenTimelineModalProps {
 }
 
 const DEFAULT_SEARCH_RESULTS_PER_PAGE = 10;
-const OPEN_TIMELINE_MODAL_WIDTH = 1000; // px
+const OPEN_TIMELINE_MODAL_WIDTH = 1100; // px
 
 export const OpenTimelineModal = React.memo<OpenTimelineModalProps>(
   ({ hideActions = [], modalTitle, onClose, onOpen }) => {

x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx

@@ -79,43 +79,43 @@ export const OpenTimelineModalBody = memo<OpenTimelineProps>(
               selectedTimelinesCount={selectedItems.length}
               title={title}
             />
-            <>
-              <SearchRow
-                data-test-subj="search-row"
-                favoriteCount={favoriteCount}
-                onlyFavorites={onlyFavorites}
-                onQueryChange={onQueryChange}
-                onToggleOnlyFavorites={onToggleOnlyFavorites}
-                query=""
-                timelineType={timelineType}
-              >
-                {SearchRowContent}
-              </SearchRow>
-            </>
           </HeaderContainer>
         </EuiModalHeader>
 
         <EuiModalBody>
-          <TimelinesTable
-            actionTimelineToShow={actionsToShow}
-            data-test-subj="timelines-table"
-            deleteTimelines={deleteTimelines}
-            defaultPageSize={defaultPageSize}
-            loading={isLoading}
-            itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
-            onOpenTimeline={onOpenTimeline}
-            onSelectionChange={onSelectionChange}
-            onTableChange={onTableChange}
-            onToggleShowNotes={onToggleShowNotes}
-            pageIndex={pageIndex}
-            pageSize={pageSize}
-            searchResults={searchResults}
-            showExtendedColumns={false}
-            sortDirection={sortDirection}
-            sortField={sortField}
-            timelineType={timelineType}
-            totalSearchResultsCount={totalSearchResultsCount}
-          />
+          <>
+            <SearchRow
+              data-test-subj="search-row"
+              favoriteCount={favoriteCount}
+              onlyFavorites={onlyFavorites}
+              onQueryChange={onQueryChange}
+              onToggleOnlyFavorites={onToggleOnlyFavorites}
+              query=""
+              timelineType={timelineType}
+            >
+              {SearchRowContent}
+            </SearchRow>
+            <TimelinesTable
+              actionTimelineToShow={actionsToShow}
+              data-test-subj="timelines-table"
+              deleteTimelines={deleteTimelines}
+              defaultPageSize={defaultPageSize}
+              loading={isLoading}
+              itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
+              onOpenTimeline={onOpenTimeline}
+              onSelectionChange={onSelectionChange}
+              onTableChange={onTableChange}
+              onToggleShowNotes={onToggleShowNotes}
+              pageIndex={pageIndex}
+              pageSize={pageSize}
+              searchResults={searchResults}
+              showExtendedColumns={false}
+              sortDirection={sortDirection}
+              sortField={sortField}
+              timelineType={timelineType}
+              totalSearchResultsCount={totalSearchResultsCount}
+            />
+          </>
         </EuiModalBody>
       </>
     );

x-pack/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_status.tsx

@@ -33,9 +33,7 @@ export const useTimelineStatus = ({
   templateTimelineFilter: JSX.Element[] | null;
   installPrepackagedTimelines: () => void;
 } => {
-  const [selectedTab, setSelectedTab] = useState<TemplateTimelineTypeLiteralWithNull>(
-    TemplateTimelineType.elastic
-  );
+  const [selectedTab, setSelectedTab] = useState<TemplateTimelineTypeLiteralWithNull>(null);
   const isTemplateFilterEnabled = useMemo(() => timelineType === TimelineType.template, [
     timelineType,
   ]);

x-pack/plugins/security_solution/public/timelines/components/timeline/styles.tsx

@@ -258,8 +258,7 @@ export const EventsTdContent = styled.div.attrs(({ className }) => ({
       ? `${width}px`
       : '100%'}; /* Using width: 100% instead of flex: 1 and max-width: 100% for IE11 */
 
-  > button.euiButtonIcon,
-  > .euiToolTipAnchor > button.euiButtonIcon {
+  button.euiButtonIcon {
     margin-left: ${({ theme }) => `-${theme.eui.paddingSizes.xs}`};
   }
 `;