[Observability] [Cases] Cases in the observability app

x-pack/plugins/cases/public/components/all_cases/all_cases_generic.tsx

@@ -62,9 +62,11 @@ interface AllCasesGenericProps {
  caseDetailsNavigation?: CasesNavigation<CaseDetailsHrefSchema, 'configurable'>; // if not passed, case name is not displayed as a link (Formerly dependant on isSelectorView)
  configureCasesNavigation?: CasesNavigation; // if not passed, header with nav is not displayed (Formerly dependant on isSelectorView)
  createCaseNavigation: CasesNavigation;
+ disableAlerts?: boolean;
  hiddenStatuses?: CaseStatusWithAllStatus[];
  isSelectorView?: boolean;
  onRowClick?: (theCase?: Case | SubCase) => void;
+ showTitle?: boolean;
  updateCase?: (newCase: Case) => void;
  userCanCrud: boolean;
 }
@@ -75,9 +77,11 @@ export const AllCasesGeneric = React.memo<AllCasesGenericProps>(
  caseDetailsNavigation,
  configureCasesNavigation,
  createCaseNavigation,
+ disableAlerts,
  hiddenStatuses = [],
  isSelectorView,
  onRowClick,
+ showTitle,
  updateCase,
  userCanCrud,
  }) => {
@@ -190,6 +194,7 @@ export const AllCasesGeneric = React.memo<AllCasesGenericProps>(
 
  const columns = useCasesColumns({
  caseDetailsNavigation,
+ disableAlerts,
  dispatchUpdateCaseProperty,
  filterStatus: filterOptions.status,
  handleIsLoading,
@@ -271,6 +276,7 @@ export const AllCasesGeneric = React.memo<AllCasesGenericProps>(
  createCaseNavigation={createCaseNavigation}
  configureCasesNavigation={configureCasesNavigation}
  refresh={refresh}
+ showTitle={showTitle}
  userCanCrud={userCanCrud}
  />
  )}

x-pack/plugins/cases/public/components/all_cases/columns.tsx

@@ -55,6 +55,7 @@ const renderStringField = (field: string, dataTestSubj: string) =>
 
 export interface GetCasesColumn {
  caseDetailsNavigation?: CasesNavigation<CaseDetailsHrefSchema, 'configurable'>;
+ disableAlerts?: boolean;
  dispatchUpdateCaseProperty: (u: UpdateCase) => void;
  filterStatus: string;
  handleIsLoading: (a: boolean) => void;
@@ -64,6 +65,7 @@ export interface GetCasesColumn {
 }
 export const useCasesColumns = ({
  caseDetailsNavigation,
+ disableAlerts = false,
  dispatchUpdateCaseProperty,
  filterStatus,
  handleIsLoading,
@@ -203,15 +205,19 @@ export const useCasesColumns = ({
  },
  truncateText: true,
  },
- {
- align: RIGHT_ALIGNMENT,
- field: 'totalAlerts',
- name: ALERTS,
- render: (totalAlerts: Case['totalAlerts']) =>
- totalAlerts != null
- ? renderStringField(`${totalAlerts}`, `case-table-column-alertsCount`)
- : getEmptyTagValue(),
- },
+ ...(!disableAlerts
+ ? [
+ {
+ align: RIGHT_ALIGNMENT,
+ field: 'totalAlerts',
+ name: ALERTS,
+ render: (totalAlerts: Case['totalAlerts']) =>
+ totalAlerts != null
+ ? renderStringField(`${totalAlerts}`, `case-table-column-alertsCount`)
+ : getEmptyTagValue(),
+ },
+ ]
+ : []),
  {
  align: RIGHT_ALIGNMENT,
  field: 'totalComment',

x-pack/plugins/cases/public/components/all_cases/header.tsx

@@ -20,6 +20,7 @@ interface OwnProps {
  configureCasesNavigation: CasesNavigation;
  createCaseNavigation: CasesNavigation;
  refresh: number;
+ showTitle?: boolean;
  userCanCrud: boolean;
 }
 
@@ -40,9 +41,10 @@ export const CasesTableHeader: FunctionComponent<Props> = ({
  configureCasesNavigation,
  createCaseNavigation,
  refresh,
+ showTitle = true,
  userCanCrud,
 }) => (
- <CaseHeaderPage title={i18n.PAGE_TITLE}>
+ <CaseHeaderPage title={showTitle ? i18n.PAGE_TITLE : ''}>
  <EuiFlexGroup
  alignItems="center"
  gutterSize="m"

x-pack/plugins/cases/public/components/all_cases/index.tsx

@@ -14,6 +14,8 @@ export interface AllCasesProps extends Owner {
  caseDetailsNavigation: CasesNavigation<CaseDetailsHrefSchema, 'configurable'>; // if not passed, case name is not displayed as a link (Formerly dependant on isSelector)
  configureCasesNavigation: CasesNavigation; // if not passed, header with nav is not displayed (Formerly dependant on isSelector)
  createCaseNavigation: CasesNavigation;
+ disableAlerts?: boolean;
+ showTitle?: boolean;
  userCanCrud: boolean;
 }
 

x-pack/plugins/cases/public/components/case_action_bar/actions.test.tsx

@@ -26,7 +26,14 @@ jest.mock('react-router-dom', () => {
  }),
  };
 });
-
+const defaultProps = {
+ allCasesNavigation: {
+ href: 'all-cases-href',
+ onClick: () => {},
+ },
+ caseData: basicCase,
+ currentExternalIncident: null,
+};
 describe('CaseView actions', () => {
  const handleOnDeleteConfirm = jest.fn();
  const handleToggleModal = jest.fn();
@@ -49,7 +56,7 @@ describe('CaseView actions', () => {
  it('clicking trash toggles modal', () => {
  const wrapper = mount(
  <TestProviders>
- <Actions caseData={basicCase} currentExternalIncident={null} />
+ <Actions {...defaultProps} />
  </TestProviders>
  );
 
@@ -67,7 +74,7 @@ describe('CaseView actions', () => {
  }));
  const wrapper = mount(
  <TestProviders>
- <Actions caseData={basicCase} currentExternalIncident={null} />
+ <Actions {...defaultProps} />
  </TestProviders>
  );
 
@@ -82,7 +89,7 @@ describe('CaseView actions', () => {
  const wrapper = mount(
  <TestProviders>
  <Actions
- caseData={basicCase}
+ {...defaultProps}
  currentExternalIncident={{
  ...basicPush,
  firstPushIndex: 5,

x-pack/plugins/cases/public/components/case_action_bar/actions.tsx

@@ -7,26 +7,27 @@
 
 import { isEmpty } from 'lodash/fp';
 import React, { useMemo } from 'react';
-import { useHistory } from 'react-router-dom';
 import * as i18n from '../case_view/translations';
 import { useDeleteCases } from '../../containers/use_delete_cases';
 import { ConfirmDeleteCaseModal } from '../confirm_delete_case';
 import { PropertyActions } from '../property_actions';
-import { Case } from '../../containers/types';
+import { Case } from '../../../common';
 import { CaseService } from '../../containers/use_get_case_user_actions';
+import { CasesNavigation } from '../links';
 
 interface CaseViewActions {
+ allCasesNavigation: CasesNavigation;
  caseData: Case;
  currentExternalIncident: CaseService | null;
  disabled?: boolean;
 }
 
 const ActionsComponent: React.FC<CaseViewActions> = ({
+ allCasesNavigation,
  caseData,
  currentExternalIncident,
  disabled = false,
 }) => {
- const history = useHistory();
  // Delete case
  const {
  handleToggleModal,
@@ -57,7 +58,7 @@ const ActionsComponent: React.FC<CaseViewActions> = ({
  );
 
  if (isDeleted) {
- history.push('/');
+ allCasesNavigation.onClick(({ preventDefault: () => null } as unknown) as MouseEvent);
  return null;
  }
  return (

x-pack/plugins/cases/public/components/case_action_bar/index.test.tsx

@@ -16,7 +16,12 @@ describe('CaseActionBar', () => {
  const onRefresh = jest.fn();
  const onUpdateField = jest.fn();
  const defaultProps = {
+ allCasesNavigation: {
+ href: 'all-cases-href',
+ onClick: () => {},
+ },
  caseData: basicCase,
+ isAlerting: true,
  isLoading: false,
  onRefresh,
  onUpdateField,

x-pack/plugins/cases/public/components/case_action_bar/index.tsx

@@ -16,16 +16,16 @@ import {
  EuiFlexItem,
  EuiIconTip,
 } from '@elastic/eui';
-import { CaseStatuses, CaseType } from '../../../common';
+import { Case, CaseStatuses, CaseType } from '../../../common';
 import * as i18n from '../case_view/translations';
 import { FormattedRelativePreferenceDate } from '../formatted_date';
 import { Actions } from './actions';
-import { Case } from '../../containers/types';
 import { CaseService } from '../../containers/use_get_case_user_actions';
 import { StatusContextMenu } from './status_context_menu';
 import { getStatusDate, getStatusTitle } from './helpers';
 import { SyncAlertsSwitch } from '../case_settings/sync_alerts_switch';
 import { OnUpdateFields } from '../case_view';
+import { CasesNavigation } from '../links';
 
 const MyDescriptionList = styled(EuiDescriptionList)`
  ${({ theme }) => css`
@@ -37,17 +37,21 @@ const MyDescriptionList = styled(EuiDescriptionList)`
 `;
 
 interface CaseActionBarProps {
+ allCasesNavigation: CasesNavigation;
  caseData: Case;
  currentExternalIncident: CaseService | null;
  disabled?: boolean;
+ isAlerting: boolean;
  isLoading: boolean;
  onRefresh: () => void;
  onUpdateField: (args: OnUpdateFields) => void;
 }
 const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
+ allCasesNavigation,
  caseData,
  currentExternalIncident,
  disabled = false,
+ isAlerting,
  isLoading,
  onRefresh,
  onUpdateField,
@@ -104,32 +108,35 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
  <EuiFlexItem grow={false}>
  <EuiDescriptionList compressed>
  <EuiFlexGroup gutterSize="l" alignItems="center">
- <EuiFlexItem>
- <EuiDescriptionListTitle>
- <EuiFlexGroup component="span" alignItems="center" gutterSize="xs">
- <EuiFlexItem grow={false}>
- <span>{i18n.SYNC_ALERTS}</span>
- </EuiFlexItem>
- <EuiFlexItem grow={false}>
- <EuiIconTip content={i18n.SYNC_ALERTS_HELP} />
- </EuiFlexItem>
- </EuiFlexGroup>
- </EuiDescriptionListTitle>
- <EuiDescriptionListDescription>
- <SyncAlertsSwitch
- disabled={disabled || isLoading}
- isSynced={caseData.settings.syncAlerts}
- onSwitchChange={onSyncAlertsChanged}
- />
- </EuiDescriptionListDescription>
- </EuiFlexItem>
+ {isAlerting && (
+ <EuiFlexItem>
+ <EuiDescriptionListTitle>
+ <EuiFlexGroup component="span" alignItems="center" gutterSize="xs">
+ <EuiFlexItem grow={false}>
+ <span>{i18n.SYNC_ALERTS}</span>
+ </EuiFlexItem>
+ <EuiFlexItem grow={false}>
+ <EuiIconTip content={i18n.SYNC_ALERTS_HELP} />
+ </EuiFlexItem>
+ </EuiFlexGroup>
+ </EuiDescriptionListTitle>
+ <EuiDescriptionListDescription>
+ <SyncAlertsSwitch
+ disabled={disabled || isLoading}
+ isSynced={caseData.settings.syncAlerts}
+ onSwitchChange={onSyncAlertsChanged}
+ />
+ </EuiDescriptionListDescription>
+ </EuiFlexItem>
+ )}
  <EuiFlexItem>
  <EuiButtonEmpty data-test-subj="case-refresh" iconType="refresh" onClick={onRefresh}>
  {i18n.CASE_REFRESH}
  </EuiButtonEmpty>
  </EuiFlexItem>
  <EuiFlexItem grow={false} data-test-subj="case-view-actions">
  <Actions
+ allCasesNavigation={allCasesNavigation}
  caseData={caseData}
  currentExternalIncident={currentExternalIncident}
  disabled={disabled}

x-pack/plugins/cases/public/components/case_view/does_not_exist.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { EuiEmptyPrompt, EuiButton } from '@elastic/eui';
+import * as i18n from './translations';
+import { CasesNavigation } from '../links';
+interface Props {
+ allCasesNavigation: CasesNavigation;
+ caseId: string;
+}
+export const DoesNotExist = ({ allCasesNavigation, caseId }: Props) => (
+ <EuiEmptyPrompt
+ // @ts-ignore remove once https://github.com/elastic/eui/issues/4850 is resolved
+ iconColor={null}
+ iconType="addDataApp"
+ title={<h2>{i18n.DOES_NOT_EXIST_TITLE}</h2>}
+ titleSize="xs"
+ body={<p>{i18n.DOES_NOT_EXIST_DESCRIPTION(caseId)}</p>}
+ actions={
+ <EuiButton onClick={allCasesNavigation.onClick} size="s" color="primary" fill>
+ {i18n.DOES_NOT_EXIST_BUTTON}
+ </EuiButton>
+ }
+ />
+);