[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

@@ -49,7 +49,14 @@ describe('CaseView actions', () => {
   it('clicking trash toggles modal', () => {
     const wrapper = mount(
       <TestProviders>
-        <Actions caseData={basicCase} currentExternalIncident={null} />
+        <Actions
+          allCasesNavigation={{
+            href: 'all-cases-href',
+            onClick: jest.fn(),
+          }}
+          caseData={basicCase}
+          currentExternalIncident={null}
+        />
       </TestProviders>
     );
 
@@ -67,7 +74,14 @@ describe('CaseView actions', () => {
     }));
     const wrapper = mount(
       <TestProviders>
-        <Actions caseData={basicCase} currentExternalIncident={null} />
+        <Actions
+          allCasesNavigation={{
+            href: 'all-cases-href',
+            onClick: jest.fn(),
+          }}
+          caseData={basicCase}
+          currentExternalIncident={null}
+        />
       </TestProviders>
     );
 
@@ -82,6 +96,10 @@ describe('CaseView actions', () => {
     const wrapper = mount(
       <TestProviders>
         <Actions
+          allCasesNavigation={{
+            href: 'all-cases-href',
+            onClick: jest.fn(),
+          }}
           caseData={basicCase}
           currentExternalIncident={{
             ...basicPush,

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: jest.fn(),
+    },
     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>
+    }
+  />
+);