[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/markdown/index.test.tsx

@@ -126,6 +126,17 @@ describe('Markdown', () => {
       ).toHaveProperty('href', 'https://google.com/');
     });
 
+    test('it does NOT render the href if links are disabled', () => {
+      const wrapper = mount(<Markdown disableLinks={true} raw={markdownWithLink} />);
+
+      expect(
+        wrapper
+          .find('[data-test-subj="markdown-link"]')
+          .first()
+          .getDOMNode()
+      ).not.toHaveProperty('href');
+    });
+
     test('it opens links in a new tab via target="_blank"', () => {
       const wrapper = mount(<Markdown raw={markdownWithLink} />);
 

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

@@ -26,51 +26,53 @@ const REL_NOFOLLOW = 'nofollow';
 /** prevents the browser from sending the current address as referrer via the Referer HTTP header */
 const REL_NOREFERRER = 'noreferrer';
 
-export const Markdown = React.memo<{ raw?: string; size?: 'xs' | 's' | 'm' }>(
-  ({ raw, size = 's' }) => {
-    const markdownRenderers = {
-      root: ({ children }: { children: React.ReactNode[] }) => (
-        <EuiText data-test-subj="markdown-root" grow={true} size={size}>
+export const Markdown = React.memo<{
+  disableLinks?: boolean;
+  raw?: string;
+  size?: 'xs' | 's' | 'm';
+}>(({ disableLinks = false, raw, size = 's' }) => {
+  const markdownRenderers = {
+    root: ({ children }: { children: React.ReactNode[] }) => (
+      <EuiText data-test-subj="markdown-root" grow={true} size={size}>
+        {children}
+      </EuiText>
+    ),
+    table: ({ children }: { children: React.ReactNode[] }) => (
+      <table data-test-subj="markdown-table" className="euiTable euiTable--responsive">
+        {children}
+      </table>
+    ),
+    tableHead: ({ children }: { children: React.ReactNode[] }) => (
+      <TableHeader data-test-subj="markdown-table-header">{children}</TableHeader>
+    ),
+    tableRow: ({ children }: { children: React.ReactNode[] }) => (
+      <EuiTableRow data-test-subj="markdown-table-row">{children}</EuiTableRow>
+    ),
+    tableCell: ({ children }: { children: React.ReactNode[] }) => (
+      <EuiTableRowCell data-test-subj="markdown-table-cell">{children}</EuiTableRowCell>
+    ),
+    link: ({ children, href }: { children: React.ReactNode[]; href?: string }) => (
+      <EuiToolTip content={href}>
+        <EuiLink
+          href={disableLinks ? undefined : href}
+          data-test-subj="markdown-link"
+          rel={`${REL_NOOPENER} ${REL_NOFOLLOW} ${REL_NOREFERRER}`}
+          target="_blank"
+        >
           {children}
-        </EuiText>
-      ),
-      table: ({ children }: { children: React.ReactNode[] }) => (
-        <table data-test-subj="markdown-table" className="euiTable euiTable--responsive">
-          {children}
-        </table>
-      ),
-      tableHead: ({ children }: { children: React.ReactNode[] }) => (
-        <TableHeader data-test-subj="markdown-table-header">{children}</TableHeader>
-      ),
-      tableRow: ({ children }: { children: React.ReactNode[] }) => (
-        <EuiTableRow data-test-subj="markdown-table-row">{children}</EuiTableRow>
-      ),
-      tableCell: ({ children }: { children: React.ReactNode[] }) => (
-        <EuiTableRowCell data-test-subj="markdown-table-cell">{children}</EuiTableRowCell>
-      ),
-      link: ({ children, href }: { children: React.ReactNode[]; href?: string }) => (
-        <EuiToolTip content={href}>
-          <EuiLink
-            href={href}
-            data-test-subj="markdown-link"
-            rel={`${REL_NOOPENER} ${REL_NOFOLLOW} ${REL_NOREFERRER}`}
-            target="_blank"
-          >
-            {children}
-          </EuiLink>
-        </EuiToolTip>
-      ),
-    };
+        </EuiLink>
+      </EuiToolTip>
+    ),
+  };
 
-    return (
-      <ReactMarkdown
-        data-test-subj="markdown"
-        linkTarget="_blank"
-        renderers={markdownRenderers}
-        source={raw}
-      />
-    );
-  }
-);
+  return (
+    <ReactMarkdown
+      data-test-subj="markdown"
+      linkTarget="_blank"
+      renderers={markdownRenderers}
+      source={raw}
+    />
+  );
+});
 
 Markdown.displayName = 'Markdown';

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);