pr changes

elastic · Feb 13, 2020 · e595f8a · e595f8a
1 parent bb7ec0b
commit e595f8a
Show file tree

Hide file tree

Showing 36 changed files with 152 additions and 146 deletions.
diff --git a/x-pack/legacy/plugins/siem/public/containers/case/use_get_cases.tsx b/x-pack/legacy/plugins/siem/public/containers/case/use_get_cases.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Dispatch, SetStateAction, useEffect, useReducer, useRef, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useReducer, useState } from 'react';
 
 import {
   DEFAULT_TABLE_ACTIVE_PAGE,
@@ -22,6 +22,7 @@ import { errorToToaster } from '../../components/ml/api/error_to_toaster';
 import { useStateToaster } from '../../components/toasters';
 import * as i18n from './translations';
 import { getCases } from './api';
+import { useDidMountEffect } from '../../utils/use_did_mount';
 
 export interface UseGetCasesState {
   data: AllCases;
@@ -81,15 +82,6 @@ const dataFetchReducer = (state: UseGetCasesState, action: Action): UseGetCasesS
   }
 };
 
-function useDidUpdateEffect(fn: () => void, inputs: unknown[]) {
-  const didUpdateRef = useRef(false);
-
-  useEffect(() => {
-    if (didUpdateRef.current) fn();
-    else didUpdateRef.current = true;
-  }, inputs);
-}
-
 const initialData: AllCases = {
   page: 0,
   per_page: 0,
@@ -120,11 +112,11 @@ export const useGetCases = (): [
   const [filterQuery, setFilters] = useState(state.filterOptions as FilterOptions);
   const [, dispatchToaster] = useStateToaster();
 
-  useDidUpdateEffect(() => {
+  useDidMountEffect(() => {
     dispatch({ type: UPDATE_QUERY_PARAMS, payload: queryParams });
   }, [queryParams]);
 
-  useDidUpdateEffect(() => {
+  useDidMountEffect(() => {
     dispatch({ type: UPDATE_FILTER_OPTIONS, payload: filterQuery });
   }, [filterQuery]);
 

diff --git a/x-pack/legacy/plugins/siem/public/containers/case/use_post_case.tsx b/x-pack/legacy/plugins/siem/public/containers/case/use_post_case.tsx
@@ -78,7 +78,7 @@ export const usePostCase = (): [NewCaseState, Dispatch<SetStateAction<NewCase>>]
   }, [formData]);
 
   useEffect(() => {
-    const fetchData = async () => {
+    const postCase = async () => {
       dispatch({ type: FETCH_INIT });
       try {
         const dataWithoutIsNew = state.data;
@@ -91,7 +91,7 @@ export const usePostCase = (): [NewCaseState, Dispatch<SetStateAction<NewCase>>]
       }
     };
     if (state.data.isNew) {
-      fetchData();
+      postCase();
     }
   }, [state.data.isNew]);
   return [state, setFormData];

diff --git a/x-pack/legacy/plugins/siem/public/containers/case/use_update_case.tsx b/x-pack/legacy/plugins/siem/public/containers/case/use_update_case.tsx
@@ -93,7 +93,7 @@ export const useUpdateCase = (
   };
 
   useEffect(() => {
-    const fetchData = async (updateKey: keyof Case) => {
+    const updateData = async (updateKey: keyof Case) => {
       dispatch({ type: FETCH_INIT });
       try {
         const response = await updateCaseProperty(caseId, { [updateKey]: state.data[updateKey] });
@@ -104,7 +104,7 @@ export const useUpdateCase = (
       }
     };
     if (state.updateKey) {
-      fetchData(state.updateKey);
+      updateData(state.updateKey);
     }
   }, [state.updateKey]);
 

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/case.tsx b/x-pack/legacy/plugins/siem/public/pages/case/case.tsx
@@ -14,18 +14,16 @@ import { SpyRoute } from '../../utils/route/spy_routes';
 import * as i18n from './translations';
 import { getCreateCaseUrl } from '../../components/link_to';
 
+const badgeOptions = {
+  beta: true,
+  text: i18n.PAGE_BADGE_LABEL,
+  tooltip: i18n.PAGE_BADGE_TOOLTIP,
+};
+
 export const CasesPage = React.memo(() => (
   <>
     <WrapperPage>
-      <HeaderPage
-        badgeOptions={{
-          beta: true,
-          text: i18n.PAGE_BADGE_LABEL,
-          tooltip: i18n.PAGE_BADGE_TOOLTIP,
-        }}
-        subtitle={i18n.PAGE_SUBTITLE}
-        title={i18n.PAGE_TITLE}
-      >
+      <HeaderPage badgeOptions={badgeOptions} subtitle={i18n.PAGE_SUBTITLE} title={i18n.PAGE_TITLE}>
         <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap={true}>
           <EuiButton fill href={getCreateCaseUrl()} iconType="plusInCircle">
             {i18n.CREATE_TITLE}

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/case_details.tsx b/x-pack/legacy/plugins/siem/public/pages/case/case_details.tsx
@@ -5,19 +5,22 @@
  */
 
 import React from 'react';
+import { useParams } from 'react-router-dom';
 
 import { CaseView } from './components/case_view';
 import { SpyRoute } from '../../utils/route/spy_routes';
 
-interface Props {
-  caseId: string;
-}
-
-export const CaseDetailsPage = React.memo(({ caseId }: Props) => (
-  <>
-    <CaseView caseId={caseId} />
-    <SpyRoute />
-  </>
-));
+export const CaseDetailsPage = React.memo(() => {
+  const { detailName: caseId } = useParams();
+  if (!caseId) {
+    return null;
+  }
+  return (
+    <>
+      <CaseView caseId={caseId} />
+      <SpyRoute />
+    </>
+  );
+});
 
 CaseDetailsPage.displayName = 'CaseDetailsPage';
diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   EuiBasicTable,
   EuiButton,
@@ -42,7 +42,7 @@ export const AllCases = React.memo(() => {
 
   const tableOnChangeCallback = useCallback(
     ({ page, sort }: EuiBasicTableOnChange) => {
-      let newQueryParams = {};
+      let newQueryParams = queryParams;
       if (sort) {
         let newSort;
         switch (sort.field) {
@@ -80,7 +80,18 @@ export const AllCases = React.memo(() => {
     (newFilterOptions: Partial<FilterOptions>) => {
       setFilters({ ...filterOptions, ...newFilterOptions });
     },
-    [setFilters]
+    [filterOptions, setFilters]
+  );
+
+  const memoizedGetCasesColumns = useMemo(() => getCasesColumns(), []);
+  const memoizedPagination = useMemo(
+    () => ({
+      pageIndex: queryParams.page - 1,
+      pageSize: queryParams.perPage,
+      totalItemCount: data.total,
+      pageSizeOptions: [5, 10, 20, 50, 100, 200, 300],
+    }),
+    [data, queryParams]
   );
 
   const sorting: EuiTableSortingType<Case> = {
@@ -108,7 +119,7 @@ export const AllCases = React.memo(() => {
             </UtilityBarSection>
           </UtilityBar>
           <EuiBasicTable
-            columns={getCasesColumns()}
+            columns={memoizedGetCasesColumns}
             itemId="id"
             items={data.cases}
             noItemsMessage={
@@ -124,12 +135,7 @@ export const AllCases = React.memo(() => {
               />
             }
             onChange={tableOnChangeCallback}
-            pagination={{
-              pageIndex: queryParams.page - 1,
-              pageSize: queryParams.perPage,
-              totalItemCount: data.total,
-              pageSizeOptions: [5, 10, 20, 50, 100, 200, 300],
-            }}
+            pagination={memoizedPagination}
             sorting={sorting}
           />
         </>

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/table_filters.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/table_filters.tsx
@@ -4,13 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { EuiFieldSearch, EuiFilterGroup, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import * as i18n from './translations';
 
 import { FilterOptions } from '../../../../containers/case/types';
 import { useGetTags } from '../../../../containers/case/use_get_tags';
+import { useDidMountEffect } from '../../../../utils/use_did_mount';
 import { TagsFilterPopover } from '../../../../pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover';
 
 interface Initial {
@@ -33,15 +34,13 @@ const CasesTableFiltersComponent = ({
   onFilterChanged,
   initial = { search: '', tags: [] },
 }: CasesTableFiltersProps) => {
-  const didMountRef = useRef(false);
   const [search, setSearch] = useState(initial.search);
   const [selectedTags, setSelectedTags] = useState(initial.tags);
   const [{ isLoading, data }] = useGetTags();
 
   // Propagate filter changes to parent
-  useEffect(() => {
-    if (didMountRef.current) onFilterChanged({ search, tags: selectedTags });
-    else didMountRef.current = true;
+  useDidMountEffect(() => {
+    onFilterChanged({ search, tags: selectedTags });
   }, [search, selectedTags]);
 
   const handleOnSearch = useCallback(searchString => setSearch(searchString.trim()), [setSearch]);

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/case_view/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/case_view/index.tsx
@@ -49,12 +49,6 @@ const MyDescriptionList = styled(EuiDescriptionList)`
 
 const MyWrapper = styled(WrapperPage)`
   padding-bottom: 0;
-  // ${({ theme }) => css`
-  //   @media only screen and (min-width: ${theme.eui.euiBreakpoints.l}) {
-  //     margin: 0 auto;
-  //     width: 85%;
-  //   }
-  // `}
 `;
 const BackgroundWrapper = styled.div`
   ${({ theme }) => css`
@@ -118,6 +112,11 @@ export const Cases = React.memo<CasesProps>(({ caseId, initialData, isLoading })
     [dispatchUpdateCaseProperty, title]
   );
 
+  const onSetIsCaseOpen = useCallback(() => setIsCaseOpen(!isCaseOpen), [
+    isCaseOpen,
+    setIsCaseOpen,
+  ]);
+
   useEffect(() => {
     const caseState = isCaseOpen ? 'open' : 'closed';
     if (data.state !== caseState) {
@@ -127,6 +126,8 @@ export const Cases = React.memo<CasesProps>(({ caseId, initialData, isLoading })
       });
     }
   }, [isCaseOpen]);
+
+  // TO DO refactor each of these const's into their own components
   const propertyActions = [
     {
       iconType: 'documentEdit',
@@ -252,7 +253,7 @@ export const Cases = React.memo<CasesProps>(({ caseId, initialData, isLoading })
                   <EuiButtonToggle
                     label={isCaseOpen ? 'Close case' : 'Reopen case'}
                     iconType={isCaseOpen ? 'checkInCircleFilled' : 'magnet'}
-                    onChange={() => setIsCaseOpen(!isCaseOpen)}
+                    onChange={onSetIsCaseOpen}
                     isSelected={isCaseOpen}
                   />
                 </EuiFlexItem>

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/create/index.tsx
@@ -14,7 +14,7 @@ import {
 } from '@elastic/eui';
 import styled from 'styled-components';
 import { Redirect } from 'react-router-dom';
-import { Field, Form, getUseField, useForm } from '../shared_imports';
+import { Field, Form, getUseField, useForm } from '../../../shared_imports';
 import { NewCase } from '../../../../containers/case/types';
 import { usePostCase } from '../../../../containers/case/use_post_case';
 import { schema } from './schema';

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/create/schema.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/create/schema.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { FIELD_TYPES, fieldValidators, FormSchema } from '../shared_imports';
+import { FIELD_TYPES, fieldValidators, FormSchema } from '../../../shared_imports';
 import { OptionalFieldLabel } from './optional_field_label';
 import * as i18n from '../../translations';
 

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/index.tsx
@@ -17,7 +17,7 @@ import {
 } from '@elastic/eui';
 import styled, { css } from 'styled-components';
 import * as i18n from '../../translations';
-import { Form, useForm } from '../shared_imports';
+import { Form, useForm } from '../../../shared_imports';
 import { schema } from './schema';
 import { CommonUseField } from '../create';
 
@@ -57,6 +57,11 @@ export const TagList = React.memo(({ tags, isEditTags, iconAction }: TagListProp
       iconAction.onClick(false);
     }
   }, [form]);
+
+  const onActionClick = useCallback(
+    (cb: (b: boolean) => void, onClickBool: boolean) => cb(onClickBool),
+    [iconAction]
+  );
   return (
     <EuiText>
       <EuiFlexGroup alignItems="center" gutterSize="xs" justifyContent="spaceBetween">
@@ -68,16 +73,14 @@ export const TagList = React.memo(({ tags, isEditTags, iconAction }: TagListProp
             <EuiButtonIcon
               aria-label={iconAction['aria-label']}
               iconType={iconAction.iconType}
-              onClick={() => iconAction.onClick(true)}
+              onClick={() => onActionClick(iconAction.onClick, true)}
             />
           </EuiFlexItem>
         )}
       </EuiFlexGroup>
       <EuiHorizontalRule margin="xs" />
       <MyFlexGroup gutterSize="xs">
-        {tags.length === 0 && !isEditTags && (
-          <p>{`No tags are currently assigned to this case.`}</p>
-        )}
+        {tags.length === 0 && !isEditTags && <p>{i18n.NO_TAGS}</p>}
         {tags.length > 0 &&
           !isEditTags &&
           tags.map((tag, key) => (
@@ -108,7 +111,7 @@ export const TagList = React.memo(({ tags, isEditTags, iconAction }: TagListProp
               </EuiButton>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty onClick={() => iconAction.onClick(false)}>
+              <EuiButtonEmpty onClick={() => onActionClick(iconAction.onClick, false)}>
                 {i18n.CANCEL}
               </EuiButtonEmpty>
             </EuiFlexItem>

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/schema.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/tag_list/schema.tsx
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { FormSchema } from '../shared_imports';
+import { FormSchema } from '../../../shared_imports';
 import { schema as createSchema } from '../create/schema';
 
 export const schema: FormSchema = {

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/create_case.tsx b/x-pack/legacy/plugins/siem/public/pages/case/create_case.tsx
@@ -13,21 +13,19 @@ import { HeaderPage } from '../../components/header_page';
 import * as i18n from './translations';
 import { getCaseUrl } from '../../components/link_to';
 
+const backOptions = {
+  href: getCaseUrl(),
+  text: i18n.BACK_TO_ALL,
+};
+const badgeOptions = {
+  beta: true,
+  text: i18n.PAGE_BADGE_LABEL,
+  tooltip: i18n.PAGE_BADGE_TOOLTIP,
+};
 export const CreateCasePage = React.memo(() => (
   <>
     <WrapperPage>
-      <HeaderPage
-        backOptions={{
-          href: getCaseUrl(),
-          text: i18n.BACK_TO_ALL,
-        }}
-        badgeOptions={{
-          beta: true,
-          text: i18n.PAGE_BADGE_LABEL,
-          tooltip: i18n.PAGE_BADGE_TOOLTIP,
-        }}
-        title={i18n.CREATE_TITLE}
-      />
+      <HeaderPage backOptions={backOptions} badgeOptions={badgeOptions} title={i18n.CREATE_TITLE} />
       <Create />
     </WrapperPage>
     <SpyRoute />