reorg case view

x-pack/legacy/plugins/siem/public/containers/case/use_update_case.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useReducer, useCallback } from 'react';
-
+import { cloneDeep } from 'lodash/fp';
 import { CaseRequest } from '../../../../../../plugins/case/common/api';
 import { errorToToaster, useStateToaster } from '../../components/toasters';
 
@@ -47,7 +47,7 @@ const dataFetchReducer = (state: NewCaseState, action: Action): NewCaseState =>
         ...state,
         isLoading: false,
         isError: false,
-        caseData: action.payload,
+        caseData: cloneDeep(action.payload),
         updateKey: null,
       };
     case 'FETCH_FAILURE':

x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/translations.ts

@@ -60,9 +60,3 @@ export const CLOSED = i18n.translate('xpack.siem.case.caseTable.closed', {
 export const DELETE = i18n.translate('xpack.siem.case.caseTable.delete', {
   defaultMessage: 'Delete',
 });
-export const REOPEN_CASE = i18n.translate('xpack.siem.case.caseTable.reopenCase', {
-  defaultMessage: 'Reopen case',
-});
-export const CLOSE_CASE = i18n.translate('xpack.siem.case.caseTable.closeCase', {
-  defaultMessage: 'Close case',
-});

x-pack/legacy/plugins/siem/public/pages/case/components/case_status/index.tsx

@@ -0,0 +1,105 @@
+/*
+ * 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 React, { useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import {
+  EuiBadge,
+  EuiButtonToggle,
+  EuiDescriptionList,
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
+import * as i18n from '../case_view/translations';
+import { FormattedRelativePreferenceDate } from '../../../../components/formatted_date';
+import { CaseViewActions } from '../case_view/actions';
+
+const MyDescriptionList = styled(EuiDescriptionList)`
+  ${({ theme }) => css`
+    & {
+      padding-right: ${theme.eui.euiSizeL};
+      border-right: ${theme.eui.euiBorderThin};
+    }
+  `}
+`;
+
+interface CaseStatusProps {
+  'data-test-subj': string;
+  badgeColor: string;
+  buttonLabel: string;
+  caseId: string;
+  caseTitle: string;
+  icon: string;
+  isLoading: boolean;
+  isSelected: boolean;
+  status: string;
+  title: string;
+  toggleStatusCase: (status: string) => void;
+  value: string | null;
+}
+const CaseStatusComp: React.FC<CaseStatusProps> = ({
+  'data-test-subj': dataTestSubj,
+  badgeColor,
+  buttonLabel,
+  caseId,
+  caseTitle,
+  icon,
+  isLoading,
+  isSelected,
+  status,
+  title,
+  toggleStatusCase,
+  value,
+}) => {
+  const onChange = useCallback(e => toggleStatusCase(e.target.checked ? 'closed' : 'open'), [
+    toggleStatusCase,
+  ]);
+  return (
+    <EuiFlexGroup gutterSize="l" justifyContent="flexEnd">
+      <EuiFlexItem grow={false}>
+        <MyDescriptionList compressed>
+          <EuiFlexGroup>
+            <EuiFlexItem grow={false}>
+              <EuiDescriptionListTitle>{i18n.STATUS}</EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                <EuiBadge color={badgeColor} data-test-subj="case-view-status">
+                  {status}
+                </EuiBadge>
+              </EuiDescriptionListDescription>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiDescriptionListTitle>{title}</EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                <FormattedRelativePreferenceDate data-test-subj={dataTestSubj} value={value} />
+              </EuiDescriptionListDescription>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </MyDescriptionList>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup gutterSize="l" alignItems="center">
+          <EuiFlexItem>
+            <EuiButtonToggle
+              data-test-subj="toggle-case-status"
+              iconType={icon}
+              isLoading={isLoading}
+              isSelected={isSelected}
+              label={buttonLabel}
+              onChange={onChange}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <CaseViewActions caseId={caseId} caseTitle={caseTitle} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+export const CaseStatus = React.memo(CaseStatusComp);

x-pack/legacy/plugins/siem/public/pages/case/components/case_view/actions.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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 React, { useMemo } from 'react';
+
+import { Redirect } from 'react-router-dom';
+import * as i18n from './translations';
+import { useDeleteCases } from '../../../../containers/case/use_delete_cases';
+import { ConfirmDeleteCaseModal } from '../confirm_delete_case';
+import { SiemPageName } from '../../../home/types';
+import { PropertyActions } from '../property_actions';
+
+interface CaseViewActions {
+  caseId: string;
+  caseTitle: string;
+}
+
+const CaseViewActionsComponent: React.FC<CaseViewActions> = ({ caseId, caseTitle }) => {
+  // Delete case
+  const {
+    handleToggleModal,
+    handleOnDeleteConfirm,
+    isDeleted,
+    isDisplayConfirmDeleteModal,
+  } = useDeleteCases();
+
+  const confirmDeleteModal = useMemo(
+    () => (
+      <ConfirmDeleteCaseModal
+        caseTitle={caseTitle}
+        isModalVisible={isDisplayConfirmDeleteModal}
+        isPlural={false}
+        onCancel={handleToggleModal}
+        onConfirm={handleOnDeleteConfirm.bind(null, [caseId])}
+      />
+    ),
+    [isDisplayConfirmDeleteModal]
+  );
+  // TO DO refactor each of these const's into their own components
+  const propertyActions = [
+    {
+      iconType: 'trash',
+      label: i18n.DELETE_CASE,
+      onClick: handleToggleModal,
+    },
+    {
+      iconType: 'popout',
+      label: 'View ServiceNow incident',
+      onClick: () => null,
+    },
+    {
+      iconType: 'importAction',
+      label: 'Update ServiceNow incident',
+      onClick: () => null,
+    },
+  ];
+
+  if (isDeleted) {
+    return <Redirect to={`/${SiemPageName.case}`} />;
+  }
+  return (
+    <>
+      <PropertyActions propertyActions={propertyActions} />
+      {confirmDeleteModal}
+    </>
+  );
+};
+
+export const CaseViewActions = React.memo(CaseViewActionsComponent);

x-pack/legacy/plugins/siem/public/pages/case/components/case_view/index.test.tsx

@@ -107,7 +107,7 @@ describe('CaseView ', () => {
 
     wrapper
       .find('input[data-test-subj="toggle-case-status"]')
-      .simulate('change', { target: { value: false } });
+      .simulate('change', { target: { value: true } });
 
     expect(updateCaseProperty).toBeCalledWith({
       updateKey: 'status',