[SIEM] Overview: Recent cases widget

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,8 +31,14 @@ export const RedirectToConfigureCasesPage = () => (
 
 const baseCaseUrl = `#/link-to/${SiemPageName.case}`;
 
-export const getCaseUrl = () => baseCaseUrl;
-export const getCaseDetailsUrl = (detailName: string, search: string) =>
-  `${baseCaseUrl}/${detailName}${search}`;
-export const getCreateCaseUrl = (search: string) => `${baseCaseUrl}/create${search}`;
-export const getConfigureCasesUrl = (search: string) => `${baseCaseUrl}/configure${search}`;
+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) =>
+  `${baseCaseUrl}/configure${appendSearch(search ?? undefined)}`;

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

@@ -23,11 +23,11 @@ import {
 import { FlowTarget, FlowTargetSourceDest } from '../../graphql/types';
 import { useUiSetting$ } from '../../lib/kibana';
 import { IP_REPUTATION_LINKS_SETTING } from '../../../common/constants';
-import { navTabs } from '../../pages/home/home_navigations';
 import * as i18n from '../page/network/ip_overview/translations';
 import { isUrlInvalid } from '../../pages/detection_engine/rules/components/step_about_rule/helpers';
-import { useGetUrlSearch } from '../navigation/use_get_url_search';
 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;
 
@@ -92,10 +92,11 @@ const CaseDetailsLinkComponent: React.FC<{ children?: React.ReactNode; detailNam
   children,
   detailName,
 }) => {
-  const urlSearch = useGetUrlSearch(navTabs.case);
+  const search = useGetUrlSearch(navTabs.case);
+
   return (
     <EuiLink
-      href={getCaseDetailsUrl(encodeURIComponent(detailName), urlSearch)}
+      href={getCaseDetailsUrl({ id: detailName, search })}
       data-test-subj="case-details-link"
     >
       {children ? children : detailName}
@@ -106,8 +107,8 @@ export const CaseDetailsLink = React.memo(CaseDetailsLinkComponent);
 CaseDetailsLink.displayName = 'CaseDetailsLink';
 
 export const CreateCaseLink = React.memo<{ children: React.ReactNode }>(({ children }) => {
-  const urlSearch = useGetUrlSearch(navTabs.case);
-  return <EuiLink href={getCreateCaseUrl(urlSearch)}>{children}</EuiLink>;
+  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,51 @@
+/*
+ * 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, { useCallback, 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]
+  );
+  const onChange = useCallback(
+    (filterMode: string) => {
+      setFilterBy(filterMode as FilterMode);
+    },
+    [setFilterBy]
+  );
+
+  return <EuiButtonGroup options={options} idSelected={filterBy} onChange={onChange} isIconOnly />;
+});
+
+Filters.displayName = 'Filters';

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

@@ -0,0 +1,80 @@
+/*
+ * 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]);
+
+    const content = useMemo(
+      () =>
+        isLoadingCases ? (
+          <LoadingPlaceholders lines={2} placeholders={3} />
+        ) : !isLoadingCases && data.cases.length === 0 ? (
+          <NoCases />
+        ) : (
+          <RecentCases cases={data.cases} />
+        ),
+      [isLoadingCases, data]
+    );
+
+    return (
+      <EuiText color="subdued" size="s">
+        {content}
+        <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,56 @@
+/*
+ * 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.totalComment} 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';