Add external incident link to header

x-pack/plugins/observability_solution/investigate_app/public/components/investigation_edit_form/fields/external_incident_field.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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 { EuiFormRow, EuiFieldText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { InvestigationForm } from '../investigation_edit_form';
+
+const I18N_LABEL = i18n.translate(
+  'xpack.investigateApp.investigationEditForm.externalIncidentUrlLabel',
+  { defaultMessage: 'External incident URL' }
+);
+
+export function ExternalIncidentField() {
+  const { control, getFieldState } = useFormContext<InvestigationForm>();
+
+  return (
+    <EuiFormRow
+      fullWidth
+      isInvalid={getFieldState('externalIncidentUrl').invalid}
+      label={I18N_LABEL}
+    >
+      <Controller
+        name="externalIncidentUrl"
+        control={control}
+        rules={{ required: false }}
+        render={({ field: { ref, ...field }, fieldState }) => (
+          <EuiFieldText
+            {...field}
+            value={field.value || ''}
+            data-test-subj="investigateAppExternalIncidentFieldFieldText"
+            fullWidth
+            isInvalid={fieldState.invalid}
+            placeholder={I18N_LABEL}
+          />
+        )}
+      />
+    </EuiFormRow>
+  );
+}

x-pack/plugins/observability_solution/investigate_app/public/components/investigation_edit_form/form_helper.ts

@@ -0,0 +1,43 @@
+/*
+ * 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 { CreateInvestigationParams, UpdateInvestigationParams } from '@kbn/investigation-shared';
+import { v4 as uuidv4 } from 'uuid';
+import type { InvestigationForm } from './investigation_edit_form';
+
+export function toCreateInvestigationParams(data: InvestigationForm): CreateInvestigationParams {
+  return {
+    id: uuidv4(),
+    title: data.title,
+    params: {
+      timeRange: {
+        from: new Date(new Date().getTime() - 30 * 60 * 1000).getTime(),
+        to: new Date().getTime(),
+      },
+    },
+    tags: data.tags,
+    origin: {
+      type: 'blank',
+    },
+    externalIncidentUrl:
+      data.externalIncidentUrl && data.externalIncidentUrl.trim().length > 0
+        ? data.externalIncidentUrl
+        : null,
+  };
+}
+
+export function toUpdateInvestigationParams(data: InvestigationForm): UpdateInvestigationParams {
+  return {
+    title: data.title,
+    status: data.status,
+    tags: data.tags,
+    externalIncidentUrl:
+      data.externalIncidentUrl && data.externalIncidentUrl.trim().length > 0
+        ? data.externalIncidentUrl
+        : null,
+  };
+}

x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_header/external_incident_button.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { EuiButtonEmpty, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { useInvestigation } from '../../contexts/investigation_context';
+
+export function ExternalIncidentButton() {
+  const { investigation } = useInvestigation();
+
+  if (!investigation?.externalIncidentUrl) {
+    return null;
+  }
+
+  return (
+    <EuiButtonEmpty
+      data-test-subj="externalIncidentHeaderButton"
+      iconType="link"
+      size="xs"
+      href={investigation.externalIncidentUrl}
+      target="_blank"
+    >
+      <EuiText size="s">
+        {i18n.translate('xpack.investigateApp.investigationHeader.externalIncidentTextLabel', {
+          defaultMessage: 'External incident',
+        })}
+      </EuiText>
+    </EuiButtonEmpty>
+  );
+}

x-pack/plugins/observability_solution/investigate_app/public/pages/details/components/investigation_header/investigation_header.tsx

@@ -6,14 +6,15 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { formatDistance } from 'date-fns';
-import { FormattedMessage } from '@kbn/i18n-react';
 import React from 'react';
 import { InvestigationStatusBadge } from '../../../../components/investigation_status_badge/investigation_status_badge';
 import { InvestigationTag } from '../../../../components/investigation_tag/investigation_tag';
 import { useInvestigation } from '../../contexts/investigation_context';
 import { AlertDetailsButton } from './alert_details_button';
+import { ExternalIncidentButton } from './external_incident_button';
 
 export function InvestigationHeader() {
   const { investigation } = useInvestigation();
@@ -62,6 +63,12 @@ export function InvestigationHeader() {
             />
           </EuiText>
         </EuiFlexItem>
+
+        {!!investigation.externalIncidentUrl && (
+          <EuiFlexItem grow={false}>
+            <ExternalIncidentButton />
+          </EuiFlexItem>
+        )}
       </EuiFlexGroup>
     </EuiFlexGroup>
   );