update property actions incident

Author: stephmilovic

x-pack/plugins/siem/public/containers/case/use_get_case_user_actions.tsx

@@ -14,7 +14,7 @@ import { CaseExternalService, CaseUserActions, ElasticUser } from './types';
 import { convertToCamelCase, parseString } from './utils';
 import { CaseFullExternalService } from '../../../../case/common/api/cases';
 
-interface CaseService extends CaseExternalService {
+export interface CaseService extends CaseExternalService {
   firstPushIndex: number;
   lastPushIndex: number;
   commentsToUpdate: string[];

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

@@ -20,6 +20,7 @@ import * as i18n from '../case_view/translations';
 import { FormattedRelativePreferenceDate } from '../../../../components/formatted_date';
 import { CaseViewActions } from '../case_view/actions';
 import { Case } from '../../../../containers/case/types';
+import { CaseService } from '../../../../containers/case/use_get_case_user_actions';
 
 const MyDescriptionList = styled(EuiDescriptionList)`
   ${({ theme }) => css`
@@ -35,6 +36,7 @@ interface CaseStatusProps {
   badgeColor: string;
   buttonLabel: string;
   caseData: Case;
+  currentExternalIncident: CaseService | null;
   disabled?: boolean;
   icon: string;
   isLoading: boolean;
@@ -50,6 +52,7 @@ const CaseStatusComp: React.FC<CaseStatusProps> = ({
   badgeColor,
   buttonLabel,
   caseData,
+  currentExternalIncident,
   disabled = false,
   icon,
   isLoading,
@@ -100,7 +103,11 @@ const CaseStatusComp: React.FC<CaseStatusProps> = ({
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <CaseViewActions caseData={caseData} disabled={disabled} />
+          <CaseViewActions
+            caseData={caseData}
+            currentExternalIncident={currentExternalIncident}
+            disabled={disabled}
+          />
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlexItem>

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

@@ -13,13 +13,19 @@ import { ConfirmDeleteCaseModal } from '../confirm_delete_case';
 import { SiemPageName } from '../../../home/types';
 import { PropertyActions } from '../property_actions';
 import { Case } from '../../../../containers/case/types';
+import { CaseService } from '../../../../containers/case/use_get_case_user_actions';
 
 interface CaseViewActions {
   caseData: Case;
+  currentExternalIncident: CaseService | null;
   disabled?: boolean;
 }
 
-const CaseViewActionsComponent: React.FC<CaseViewActions> = ({ caseData, disabled = false }) => {
+const CaseViewActionsComponent: React.FC<CaseViewActions> = ({
+  caseData,
+  currentExternalIncident,
+  disabled = false,
+}) => {
   // Delete case
   const {
     handleToggleModal,
@@ -48,17 +54,17 @@ const CaseViewActionsComponent: React.FC<CaseViewActions> = ({ caseData, disable
         label: i18n.DELETE_CASE,
         onClick: handleToggleModal,
       },
-      ...(caseData.externalService != null && !isEmpty(caseData.externalService?.externalUrl)
+      ...(currentExternalIncident != null && !isEmpty(currentExternalIncident?.externalUrl)
         ? [
             {
               iconType: 'popout',
-              label: i18n.VIEW_INCIDENT(caseData.externalService?.externalTitle ?? ''),
-              onClick: () => window.open(caseData.externalService?.externalUrl, '_blank'),
+              label: i18n.VIEW_INCIDENT(currentExternalIncident?.externalTitle ?? ''),
+              onClick: () => window.open(currentExternalIncident?.externalUrl, '_blank'),
             },
           ]
         : []),
     ],
-    [disabled, handleToggleModal, caseData]
+    [disabled, handleToggleModal, currentExternalIncident]
   );
 
   if (isDeleted) {

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

@@ -164,6 +164,11 @@ export const CaseComponent = React.memo<CaseProps>(
       () => connectors.find(c => c.id === caseData.connectorId)?.name ?? 'none',
       [connectors, caseData.connectorId]
     );
+
+    const currentExternalIncident = useMemo(() => {
+      return caseServices[caseData.connectorId];
+    }, [caseServices, caseData.connectorId]);
+
     const { pushButton, pushCallouts } = usePushToService({
       caseConnectorId: caseData.connectorId,
       caseConnectorName,
@@ -254,6 +259,7 @@ export const CaseComponent = React.memo<CaseProps>(
             title={caseData.title}
           >
             <CaseStatus
+              currentExternalIncident={currentExternalIncident}
               caseData={caseData}
               disabled={!userCanCrud}
               isLoading={isLoading && updateKey === 'status'}