## [SIEM] Overview: Recent cases widget

Implements the new `Recent cases` widget on the Overview page.

Recent cases shows the last 3 recently created cases, per the following animated gif:

![recent-cases](https://user-images.githubusercontent.com/4459398/77357982-ae550a80-6d0e-11ea-90d0-62fa5407eea5.gif)

### Markdown case descriptions

Markdown case descriptions are rendered, per the following animated gif:

![markdown-description](https://user-images.githubusercontent.com/4459398/77358163-f7a55a00-6d0e-11ea-8b85-dd4b3ff093ee.gif)

### My recently reported cases

My recently reported cases filters the widget to show only cases created by the logged-in user, per the following animated gif:

![my-recent-cases](https://user-images.githubusercontent.com/4459398/77358223-14419200-6d0f-11ea-8e4a-25cd55fdfc44.gif)

### No cases state

A message welcoming the user to create a case is displayed when no cases exist, per the following screenshot:

![no-cases-created](https://user-images.githubusercontent.com/4459398/77358338-4ce16b80-6d0f-11ea-98d3-5de1be19a935.png)

### Other changes

- [x] Case-related links were updated to ensure URL state parameters, e.g. global date selection, carry-over as the user navigates through case views
- [x] Recent timelines was updated to only show the last 3 recent timelines (down from 5)
- [x] All sidebar widgets have slightly more compact spacing

Tested in:
* Chrome `80.0.3987.149`
* Firefox `74.0`
* Safari `13.0.5`

x-pack/legacy/plugins/siem/public/components/link_to/redirect_to_case.tsx

@@ -6,6 +6,7 @@
 
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
+import { appendSearch } from './helpers';
 import { RedirectWrapper } from './redirect_wrapper';
 import { SiemPageName } from '../../pages/home/types';
 
@@ -30,7 +31,11 @@ export const RedirectToConfigureCasesPage = () => (
 
 const baseCaseUrl = `#/link-to/${SiemPageName.case}`;
 
-export const getCaseUrl = () => baseCaseUrl;
-export const getCaseDetailsUrl = (detailName: string) => `${baseCaseUrl}/${detailName}`;
-export const getCreateCaseUrl = () => `${baseCaseUrl}/create`;
-export const getConfigureCasesUrl = () => `${baseCaseUrl}/configure`;
+export const getCaseUrl = (search: string | null) =>
+  `${baseCaseUrl}${appendSearch(search ?? undefined)}`;
+export const getCaseDetailsUrl = ({ id, search }: { id: string; search: string | null }) =>
+  `${baseCaseUrl}/${encodeURIComponent(id)}${appendSearch(search ?? undefined)}`;
+export const getCreateCaseUrl = (search: string | null) =>
+  `${baseCaseUrl}/create${appendSearch(search ?? undefined)}`;
+export const getConfigureCasesUrl = (search: string | null) =>
+  `${baseCaseUrl}/configure${appendSearch(search ?? undefined)}`;

x-pack/legacy/plugins/siem/public/components/links/index.tsx

@@ -26,6 +26,8 @@ import { IP_REPUTATION_LINKS_SETTING } from '../../../common/constants';
 import * as i18n from '../page/network/ip_overview/translations';
 import { isUrlInvalid } from '../../pages/detection_engine/rules/components/step_about_rule/helpers';
 import { ExternalLinkIcon } from '../external_link_icon';
+import { navTabs } from '../../pages/home/home_navigations';
+import { useGetUrlSearch } from '../navigation/use_get_url_search';
 
 export const DEFAULT_NUMBER_OF_LINK = 5;
 
@@ -89,20 +91,26 @@ export const IPDetailsLink = React.memo(IPDetailsLinkComponent);
 const CaseDetailsLinkComponent: React.FC<{ children?: React.ReactNode; detailName: string }> = ({
   children,
   detailName,
-}) => (
-  <EuiLink
-    href={getCaseDetailsUrl(encodeURIComponent(detailName))}
-    data-test-subj="case-details-link"
-  >
-    {children ? children : detailName}
-  </EuiLink>
-);
+}) => {
+  const search = useGetUrlSearch(navTabs.case);
+
+  return (
+    <EuiLink
+      href={getCaseDetailsUrl({ id: detailName, search })}
+      data-test-subj="case-details-link"
+    >
+      {children ? children : detailName}
+    </EuiLink>
+  );
+};
 export const CaseDetailsLink = React.memo(CaseDetailsLinkComponent);
 CaseDetailsLink.displayName = 'CaseDetailsLink';
 
-export const CreateCaseLink = React.memo<{ children: React.ReactNode }>(({ children }) => (
-  <EuiLink href={getCreateCaseUrl()}>{children}</EuiLink>
-));
+export const CreateCaseLink = React.memo<{ children: React.ReactNode }>(({ children }) => {
+  const search = useGetUrlSearch(navTabs.case);
+
+  return <EuiLink href={getCreateCaseUrl(search)}>{children}</EuiLink>;
+});
 
 CreateCaseLink.displayName = 'CreateCaseLink';
 

x-pack/legacy/plugins/siem/public/components/navigation/breadcrumbs/index.ts

@@ -107,7 +107,22 @@ export const getBreadcrumbsForRoute = (
     ];
   }
   if (isCaseRoutes(spyState) && object.navTabs) {
-    return [...siemRootBreadcrumb, ...getCaseDetailsBreadcrumbs(spyState)];
+    const tempNav: SearchNavTab = { urlKey: 'case', isDetailPage: false };
+    let urlStateKeys = [getOr(tempNav, spyState.pageName, object.navTabs)];
+    if (spyState.tabName != null) {
+      urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)];
+    }
+
+    return [
+      ...siemRootBreadcrumb,
+      ...getCaseDetailsBreadcrumbs(
+        spyState,
+        urlStateKeys.reduce(
+          (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
+          []
+        )
+      ),
+    ];
   }
   if (
     spyState != null &&

x-pack/legacy/plugins/siem/public/components/news_feed/news_feed.tsx

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiSpacer } from '@elastic/eui';
 import React from 'react';
 
 import { LoadingPlaceholders } from '../page/overview/loading_placeholders';
@@ -30,12 +29,7 @@ const NewsFeedComponent: React.FC<Props> = ({ news }) => (
     ) : news.length === 0 ? (
       <NoNews />
     ) : (
-      news.map((n: NewsItem) => (
-        <React.Fragment key={n.hash}>
-          <Post newsItem={n} />
-          <EuiSpacer size="l" />
-        </React.Fragment>
-      ))
+      news.map((n: NewsItem) => <Post key={n.hash} newsItem={n} />)
     )}
   </>
 );

x-pack/legacy/plugins/siem/public/components/news_feed/post/index.tsx

@@ -45,6 +45,7 @@ export const Post = React.memo<{ newsItem: NewsItem }>(({ newsItem }) => {
           <PreferenceFormattedP1DTDate value={publishOn} />
           <EuiSpacer size="s" />
           <div>{description}</div>
+          <EuiSpacer size="l" />
         </EuiText>
       </EuiFlexItem>
 

x-pack/legacy/plugins/siem/public/components/recent_cases/filters/index.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiButtonGroup, EuiButtonGroupOption } from '@elastic/eui';
+import React, { useMemo } from 'react';
+
+import { FilterMode } from '../types';
+
+import * as i18n from '../translations';
+
+const MY_RECENTLY_REPORTED_ID = 'myRecentlyReported';
+
+const toggleButtonIcons: EuiButtonGroupOption[] = [
+  {
+    id: 'recentlyCreated',
+    label: i18n.RECENTLY_CREATED_CASES,
+    iconType: 'folderExclamation',
+  },
+  {
+    id: MY_RECENTLY_REPORTED_ID,
+    label: i18n.MY_RECENTLY_REPORTED_CASES,
+    iconType: 'reporter',
+  },
+];
+
+export const Filters = React.memo<{
+  filterBy: FilterMode;
+  setFilterBy: (filterBy: FilterMode) => void;
+  showMyRecentlyReported: boolean;
+}>(({ filterBy, setFilterBy, showMyRecentlyReported }) => {
+  const options = useMemo(
+    () =>
+      showMyRecentlyReported
+        ? toggleButtonIcons
+        : toggleButtonIcons.filter(x => x.id !== MY_RECENTLY_REPORTED_ID),
+    [showMyRecentlyReported]
+  );
+
+  return (
+    <EuiButtonGroup
+      options={options}
+      idSelected={filterBy}
+      onChange={f => {
+        setFilterBy(f as FilterMode);
+      }}
+      isIconOnly
+    />
+  );
+});
+
+Filters.displayName = 'Filters';

x-pack/legacy/plugins/siem/public/components/recent_cases/index.tsx

@@ -0,0 +1,75 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiHorizontalRule, EuiLink, EuiText } from '@elastic/eui';
+import React, { useEffect, useMemo, useRef } from 'react';
+
+import { FilterOptions, QueryParams } from '../../containers/case/types';
+import { DEFAULT_QUERY_PARAMS, useGetCases } from '../../containers/case/use_get_cases';
+import { getCaseUrl } from '../link_to/redirect_to_case';
+import { useGetUrlSearch } from '../navigation/use_get_url_search';
+import { LoadingPlaceholders } from '../page/overview/loading_placeholders';
+import { navTabs } from '../../pages/home/home_navigations';
+
+import { NoCases } from './no_cases';
+import { RecentCases } from './recent_cases';
+import * as i18n from './translations';
+
+const usePrevious = (value: FilterOptions) => {
+  const ref = useRef();
+  useEffect(() => {
+    (ref.current as unknown) = value;
+  });
+  return ref.current;
+};
+
+const MAX_CASES_TO_SHOW = 3;
+
+const queryParams: QueryParams = {
+  ...DEFAULT_QUERY_PARAMS,
+  perPage: MAX_CASES_TO_SHOW,
+};
+
+const StatefulRecentCasesComponent = React.memo(
+  ({ filterOptions }: { filterOptions: FilterOptions }) => {
+    const previousFilterOptions = usePrevious(filterOptions);
+    const { data, loading, setFilters } = useGetCases(queryParams);
+    const isLoadingCases = useMemo(
+      () => loading.indexOf('cases') > -1 || loading.indexOf('caseUpdate') > -1,
+      [loading]
+    );
+    const search = useGetUrlSearch(navTabs.case);
+    const allCasesLink = useMemo(
+      () => <EuiLink href={getCaseUrl(search)}>{i18n.VIEW_ALL_CASES}</EuiLink>,
+      [search]
+    );
+
+    useEffect(() => {
+      if (previousFilterOptions !== undefined && previousFilterOptions !== filterOptions) {
+        setFilters(filterOptions);
+      }
+    }, [previousFilterOptions, filterOptions, setFilters]);
+
+    return (
+      <EuiText color="subdued" size="s">
+        {isLoadingCases ? (
+          <LoadingPlaceholders lines={2} placeholders={3} />
+        ) : !isLoadingCases && data.cases.length === 0 ? (
+          <NoCases />
+        ) : (
+          <RecentCases cases={data.cases} />
+        )}
+
+        <EuiHorizontalRule margin="s" />
+        <EuiText size="xs">{allCasesLink}</EuiText>
+      </EuiText>
+    );
+  }
+);
+
+StatefulRecentCasesComponent.displayName = 'StatefulRecentCasesComponent';
+
+export const StatefulRecentCases = React.memo(StatefulRecentCasesComponent);

x-pack/legacy/plugins/siem/public/components/recent_cases/no_cases/index.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiLink } from '@elastic/eui';
+import React, { useMemo } from 'react';
+
+import { getCreateCaseUrl } from '../../link_to/redirect_to_case';
+import { useGetUrlSearch } from '../../navigation/use_get_url_search';
+import { navTabs } from '../../../pages/home/home_navigations';
+
+import * as i18n from '../translations';
+
+const NoCasesComponent = () => {
+  const urlSearch = useGetUrlSearch(navTabs.case);
+  const newCaseLink = useMemo(
+    () => <EuiLink href={getCreateCaseUrl(urlSearch)}>{` ${i18n.START_A_NEW_CASE}`}</EuiLink>,
+    [urlSearch]
+  );
+
+  return (
+    <>
+      <span>{i18n.NO_CASES}</span>
+      {newCaseLink}
+      {'!'}
+    </>
+  );
+};
+
+NoCasesComponent.displayName = 'NoCasesComponent';
+
+export const NoCases = React.memo(NoCasesComponent);

x-pack/legacy/plugins/siem/public/components/recent_cases/recent_cases.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
+import React from 'react';
+import styled from 'styled-components';
+
+import { Case } from '../../containers/case/types';
+import { getCaseDetailsUrl } from '../link_to/redirect_to_case';
+import { Markdown } from '../markdown';
+import { useGetUrlSearch } from '../navigation/use_get_url_search';
+import { navTabs } from '../../pages/home/home_navigations';
+import { IconWithCount } from '../recent_timelines/counts';
+
+import * as i18n from './translations';
+
+const MarkdownContainer = styled.div`
+  max-height: 150px;
+  overflow-y: auto;
+  width: 300px;
+`;
+
+const RecentCasesComponent = ({ cases }: { cases: Case[] }) => {
+  const search = useGetUrlSearch(navTabs.case);
+
+  return (
+    <>
+      {cases.map((c, i) => (
+        <EuiFlexGroup key={c.id} gutterSize="none" justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiText size="s">
+              <EuiLink href={getCaseDetailsUrl({ id: c.id, search })}>{c.title}</EuiLink>
+            </EuiText>
+
+            <IconWithCount
+              count={c.commentIds.length}
+              icon={'editorComment'}
+              tooltip={i18n.COMMENTS}
+            />
+            {c.description && c.description.length && (
+              <MarkdownContainer>
+                <EuiText color="subdued" size="xs">
+                  <Markdown raw={c.description} />
+                </EuiText>
+              </MarkdownContainer>
+            )}
+            {i !== cases.length - 1 && <EuiSpacer size="l" />}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      ))}
+    </>
+  );
+};
+
+RecentCasesComponent.displayName = 'RecentCasesComponent';
+
+export const RecentCases = React.memo(RecentCasesComponent);

x-pack/legacy/plugins/siem/public/components/recent_cases/translations.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const COMMENTS = i18n.translate('xpack.siem.recentCases.commentsTooltip', {
+  defaultMessage: 'Comments',
+});
+
+export const MY_RECENTLY_REPORTED_CASES = i18n.translate(
+  'xpack.siem.overview.myRecentlyReportedCasesButtonLabel',
+  {
+    defaultMessage: 'My recently reported cases',
+  }
+);
+
+export const NO_CASES = i18n.translate('xpack.siem.recentCases.noCasesMessage', {
+  defaultMessage: 'No cases have been created yet. Put your detective hat on and',
+});
+
+export const RECENTLY_CREATED_CASES = i18n.translate(
+  'xpack.siem.overview.recentlyCreatedCasesButtonLabel',
+  {
+    defaultMessage: 'Recently created cases',
+  }
+);
+
+export const START_A_NEW_CASE = i18n.translate('xpack.siem.recentCases.startNewCaseLink', {
+  defaultMessage: 'start a new case',
+});
+
+export const VIEW_ALL_CASES = i18n.translate('xpack.siem.recentCases.viewAllCasesLink', {
+  defaultMessage: 'View all cases',
+});

x-pack/legacy/plugins/siem/public/components/recent_cases/types.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export type FilterMode = 'recentlyCreated' | 'myRecentlyReported';