[RAC] Makes selection of existing cases more intentional (#117683)

* Adds footer buttons to add to case modal dialog * Uses a button to select a case * Augments props passed to cases table columns * Removes unused i18n strings * Removes unnecessary default argument * Updates all cases unit test * Restores cancel button in cases modal * Updates Cypress test * Formats translation file * UX review feedback * UX review feedback: cancel button * Review feedback Co-authored-by: Kibana Machine <[email protected]>
elastic · Nov 11, 2021 · c0eb21b · c0eb21b
1 parent 643241d
commit c0eb21b
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 35 deletions.
diff --git a/x-pack/plugins/cases/public/components/all_cases/all_cases_generic.tsx b/x-pack/plugins/cases/public/components/all_cases/all_cases_generic.tsx
@@ -7,7 +7,7 @@
 
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { EuiProgress, EuiBasicTable, EuiTableSelectionType } from '@elastic/eui';
-import { difference, head, isEmpty, memoize } from 'lodash/fp';
+import { difference, head, isEmpty } from 'lodash/fp';
 import styled, { css } from 'styled-components';
 import classnames from 'classnames';
 
@@ -17,7 +17,6 @@ import {
   CaseType,
   CommentRequestAlertType,
   CaseStatusWithAllStatus,
-  CommentType,
   FilterOptions,
   SortFieldCase,
   SubCase,
@@ -207,6 +206,10 @@ export const AllCasesGeneric = React.memo<AllCasesGenericProps>(
       isSelectorView: !!isSelectorView,
       userCanCrud,
       connectors,
+      onRowClick,
+      alertData,
+      postComment,
+      updateCase,
     });
 
     const itemIdToExpandedRowMap = useMemo(
@@ -241,32 +244,11 @@ export const AllCasesGeneric = React.memo<AllCasesGenericProps>(
     const isDataEmpty = useMemo(() => data.total === 0, [data]);
 
     const tableRowProps = useCallback(
-      (theCase: Case) => {
-        const onTableRowClick = memoize(async () => {
-          if (alertData != null) {
-            await postComment({
-              caseId: theCase.id,
-              data: {
-                type: CommentType.alert,
-                ...alertData,
-              },
-              updateCase,
-            });
-          }
-          if (onRowClick) {
-            onRowClick(theCase);
-          }
-        });
-
-        return {
-          'data-test-subj': `cases-table-row-${theCase.id}`,
-          className: classnames({ isDisabled: theCase.type === CaseType.collection }),
-          ...(isSelectorView && theCase.type !== CaseType.collection
-            ? { onClick: onTableRowClick }
-            : {}),
-        };
-      },
-      [isSelectorView, alertData, onRowClick, postComment, updateCase]
+      (theCase: Case) => ({
+        'data-test-subj': `cases-table-row-${theCase.id}`,
+        className: classnames({ isDisabled: theCase.type === CaseType.collection }),
+      }),
+      []
     );
 
     return (

diff --git a/x-pack/plugins/cases/public/components/all_cases/columns.tsx b/x-pack/plugins/cases/public/components/all_cases/columns.tsx
@@ -10,6 +10,7 @@ import {
   EuiAvatar,
   EuiBadgeGroup,
   EuiBadge,
+  EuiButton,
   EuiLink,
   EuiTableActionsColumnType,
   EuiTableComputedColumnType,
@@ -24,6 +25,8 @@ import styled from 'styled-components';
 import {
   CaseStatuses,
   CaseType,
+  CommentType,
+  CommentRequestAlertType,
   DeleteCase,
   Case,
   SubCase,
@@ -43,6 +46,7 @@ import { useKibana } from '../../common/lib/kibana';
 import { StatusContextMenu } from '../case_action_bar/status_context_menu';
 import { TruncatedText } from '../truncated_text';
 import { getConnectorIcon } from '../utils';
+import { PostComment } from '../../containers/use_post_comment';
 
 export type CasesColumns =
   | EuiTableActionsColumnType<Case>
@@ -75,6 +79,10 @@ export interface GetCasesColumn {
   isSelectorView: boolean;
   userCanCrud: boolean;
   connectors?: ActionConnector[];
+  onRowClick?: (theCase: Case) => void;
+  alertData?: Omit<CommentRequestAlertType, 'type'>;
+  postComment?: (args: PostComment) => Promise<void>;
+  updateCase?: (newCase: Case) => void;
 }
 export const useCasesColumns = ({
   caseDetailsNavigation,
@@ -87,6 +95,10 @@ export const useCasesColumns = ({
   isSelectorView,
   userCanCrud,
   connectors = [],
+  onRowClick,
+  alertData,
+  postComment,
+  updateCase,
 }: GetCasesColumn): CasesColumns[] => {
   // Delete case
   const {
@@ -132,6 +144,25 @@ export const useCasesColumns = ({
     [toggleDeleteModal]
   );
 
+  const assignCaseAction = useCallback(
+    async (theCase: Case) => {
+      if (alertData != null) {
+        await postComment?.({
+          caseId: theCase.id,
+          data: {
+            type: CommentType.alert,
+            ...alertData,
+          },
+          updateCase,
+        });
+      }
+      if (onRowClick) {
+        onRowClick(theCase);
+      }
+    },
+    [alertData, onRowClick, postComment, updateCase]
+  );
+
   useEffect(() => {
     handleIsLoading(isDeleting || isLoadingCases.indexOf('caseUpdate') > -1);
   }, [handleIsLoading, isDeleting, isLoadingCases]);
@@ -281,6 +312,30 @@ export const useCasesColumns = ({
         return getEmptyTagValue();
       },
     },
+    ...(isSelectorView
+      ? [
+          {
+            align: RIGHT_ALIGNMENT,
+            render: (theCase: Case) => {
+              if (theCase.id != null) {
+                return (
+                  <EuiButton
+                    data-test-subj={`cases-table-row-select-${theCase.id}`}
+                    onClick={() => {
+                      assignCaseAction(theCase);
+                    }}
+                    size="s"
+                    fill={true}
+                  >
+                    {i18n.SELECT}
+                  </EuiButton>
+                );
+              }
+              return getEmptyTagValue();
+            },
+          },
+        ]
+      : []),
     ...(!isSelectorView
       ? [
           {

diff --git a/x-pack/plugins/cases/public/components/all_cases/index.test.tsx b/x-pack/plugins/cases/public/components/all_cases/index.test.tsx
@@ -749,7 +749,7 @@ describe('AllCasesGeneric', () => {
         />
       </TestProviders>
     );
-    wrapper.find('[data-test-subj="cases-table-row-1"]').first().simulate('click');
+    wrapper.find('[data-test-subj="cases-table-row-select-1"]').first().simulate('click');
     await waitFor(() => {
       expect(onRowClick).toHaveBeenCalledWith({
         closedAt: null,

diff --git a/x-pack/plugins/cases/public/components/all_cases/selector_modal/index.tsx b/x-pack/plugins/cases/public/components/all_cases/selector_modal/index.tsx
@@ -6,7 +6,14 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { EuiModal, EuiModalBody, EuiModalHeader, EuiModalHeaderTitle } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+} from '@elastic/eui';
 import styled from 'styled-components';
 import {
   Case,
@@ -76,6 +83,11 @@ const AllCasesSelectorModalComponent: React.FC<AllCasesSelectorModalProps> = ({
           updateCase={updateCase}
         />
       </EuiModalBody>
+      <EuiModalFooter>
+        <EuiButton color="text" onClick={closeModal}>
+          {i18n.CANCEL}
+        </EuiButton>
+      </EuiModalFooter>
     </Modal>
   ) : null;
 };

diff --git a/x-pack/plugins/cases/public/components/all_cases/translations.ts b/x-pack/plugins/cases/public/components/all_cases/translations.ts
@@ -75,6 +75,10 @@ export const DELETE = i18n.translate('xpack.cases.caseTable.delete', {
   defaultMessage: 'Delete',
 });
 
+export const SELECT = i18n.translate('xpack.cases.caseTable.select', {
+  defaultMessage: 'Select',
+});
+
 export const REQUIRES_UPDATE = i18n.translate('xpack.cases.caseTable.requiresUpdate', {
   defaultMessage: ' requires update',
 });

diff --git a/x-pack/plugins/cases/public/containers/use_post_comment.tsx b/x-pack/plugins/cases/public/containers/use_post_comment.tsx
@@ -41,7 +41,7 @@ const dataFetchReducer = (state: NewCommentState, action: Action): NewCommentSta
   }
 };
 
-interface PostComment {
+export interface PostComment {
   caseId: string;
   data: CommentRequest;
   updateCase?: (newCase: Case) => void;

diff --git a/x-pack/plugins/security_solution/cypress/screens/timeline.ts b/x-pack/plugins/security_solution/cypress/screens/timeline.ts
@@ -20,8 +20,8 @@ export const ATTACH_TIMELINE_TO_EXISTING_CASE_ICON =
 
 export const BULK_ACTIONS = '[data-test-subj="utility-bar-action-button"]';
 
-export const CASE = (id: string) => {
-  return `[data-test-subj="cases-table-row-${id}"]`;
+export const SELECT_CASE = (id: string) => {
+  return `[data-test-subj="cases-table-row-select-${id}"]`;
 };
 
 export const CELL = '[data-test-subj="statefulCell"]';

diff --git a/x-pack/plugins/security_solution/cypress/tasks/timeline.ts b/x-pack/plugins/security_solution/cypress/tasks/timeline.ts
@@ -17,7 +17,6 @@ import {
   ATTACH_TIMELINE_TO_CASE_BUTTON,
   ATTACH_TIMELINE_TO_EXISTING_CASE_ICON,
   ATTACH_TIMELINE_TO_NEW_CASE_ICON,
-  CASE,
   CLOSE_TIMELINE_BTN,
   COMBO_BOX,
   COMBO_BOX_INPUT,
@@ -35,6 +34,7 @@ import {
   RESET_FIELDS,
   SAVE_FILTER_BTN,
   SEARCH_OR_FILTER_CONTAINER,
+  SELECT_CASE,
   SERVER_SIDE_EVENT_COUNT,
   STAR_ICON,
   TIMELINE_CHANGES_IN_PROGRESS,
@@ -346,7 +346,7 @@ export const resetFields = () => {
 };
 
 export const selectCase = (caseId: string) => {
-  cy.get(CASE(caseId)).click();
+  cy.get(SELECT_CASE(caseId)).click();
 };
 
 export const waitForTimelineChanges = () => {