[7.x] [SIEM] [Case] Comments to case view (#58315) (#59098)

x-pack/legacy/plugins/siem/public/components/edit_data_provider/translations.ts

@@ -18,7 +18,7 @@ export const FIELD = i18n.translate('xpack.siem.editDataProvider.fieldLabel', {
   defaultMessage: 'Field',
 });
 
-export const FIELD_PLACEHOLDER = i18n.translate('xpack.siem.editDataProvider.fieldPlaceholder', {
+export const FIELD_PLACEHOLDER = i18n.translate('xpack.siem.editDataProvider.placeholder', {
   defaultMessage: 'Select a field',
 });
 

x-pack/legacy/plugins/siem/public/components/formatted_date/index.tsx

@@ -125,3 +125,32 @@ export const FormattedRelativePreferenceDate = ({ value }: { value?: string | nu
     </LocalizedDateTooltip>
   );
 };
+
+/**
+ * Renders a preceding label according to under/over one hour
+ */
+
+export const FormattedRelativePreferenceLabel = ({
+  value,
+  preferenceLabel,
+  relativeLabel,
+}: {
+  value?: string | number | null;
+  preferenceLabel?: string | null;
+  relativeLabel?: string | null;
+}) => {
+  if (value == null) {
+    return null;
+  }
+  const maybeDate = getMaybeDate(value);
+  if (!maybeDate.isValid()) {
+    return null;
+  }
+  return moment(maybeDate.toDate())
+    .add(1, 'hours')
+    .isBefore(new Date()) ? (
+    <>{preferenceLabel}</>
+  ) : (
+    <>{relativeLabel}</>
+  );
+};

x-pack/legacy/plugins/siem/public/components/header_page/editable_title.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, ChangeEvent } from 'react';
 import styled, { css } from 'styled-components';
 
 import {
@@ -14,19 +14,24 @@ import {
   EuiFlexItem,
   EuiFieldText,
   EuiButtonIcon,
+  EuiLoadingSpinner,
 } from '@elastic/eui';
 
 import * as i18n from './translations';
 
 import { Title } from './title';
 
-const StyledEuiButtonIcon = styled(EuiButtonIcon)`
+const MyEuiButtonIcon = styled(EuiButtonIcon)`
   ${({ theme }) => css`
     margin-left: ${theme.eui.euiSize};
   `}
 `;
 
-StyledEuiButtonIcon.displayName = 'StyledEuiButtonIcon';
+const MySpinner = styled(EuiLoadingSpinner)`
+  ${({ theme }) => css`
+    margin-left: ${theme.eui.euiSize};
+  `}
+`;
 
 interface Props {
   isLoading: boolean;
@@ -36,42 +41,54 @@ interface Props {
 
 const EditableTitleComponent: React.FC<Props> = ({ onSubmit, isLoading, title }) => {
   const [editMode, setEditMode] = useState(false);
-  const [changedTitle, onTitleChange] = useState(title);
+  const [changedTitle, onTitleChange] = useState<string>(typeof title === 'string' ? title : '');
 
   const onCancel = useCallback(() => setEditMode(false), []);
   const onClickEditIcon = useCallback(() => setEditMode(true), []);
 
-  const onClickSubmit = useCallback(
-    (newTitle: string): void => {
-      onSubmit(newTitle);
-      setEditMode(false);
+  const onClickSubmit = useCallback((): void => {
+    if (changedTitle !== title) {
+      onSubmit(changedTitle);
+    }
+    setEditMode(false);
+  }, [changedTitle, title]);
+
+  const handleOnChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onTitleChange(e.target.value);
     },
-    [changedTitle]
+    [onTitleChange]
   );
 
   return editMode ? (
     <EuiFlexGroup alignItems="center" gutterSize="m" justifyContent="spaceBetween">
       <EuiFlexItem grow={false}>
         <EuiFieldText
-          onChange={e => onTitleChange(e.target.value)}
+          onChange={handleOnChange}
           value={`${changedTitle}`}
           data-test-subj="editable-title-input-field"
         />
       </EuiFlexItem>
       <EuiFlexGroup gutterSize="none" responsive={false} wrap={true}>
         <EuiFlexItem grow={false}>
           <EuiButton
-            fill
-            isDisabled={isLoading}
-            isLoading={isLoading}
-            onClick={() => onClickSubmit(changedTitle as string)}
+            color="secondary"
             data-test-subj="editable-title-submit-btn"
+            fill
+            iconType="save"
+            onClick={onClickSubmit}
+            size="s"
           >
-            {i18n.SUBMIT}
+            {i18n.SAVE}
           </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty onClick={onCancel} data-test-subj="editable-title-cancel-btn">
+          <EuiButtonEmpty
+            data-test-subj="editable-title-cancel-btn"
+            iconType="cross"
+            onClick={onCancel}
+            size="s"
+          >
             {i18n.CANCEL}
           </EuiButtonEmpty>
         </EuiFlexItem>
@@ -84,12 +101,15 @@ const EditableTitleComponent: React.FC<Props> = ({ onSubmit, isLoading, title })
         <Title title={title} />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <StyledEuiButtonIcon
-          aria-label={i18n.EDIT_TITLE_ARIA(title as string)}
-          iconType="pencil"
-          onClick={onClickEditIcon}
-          data-test-subj="editable-title-edit-icon"
-        />
+        {isLoading && <MySpinner />}
+        {!isLoading && (
+          <MyEuiButtonIcon
+            aria-label={i18n.EDIT_TITLE_ARIA(title as string)}
+            iconType="pencil"
+            onClick={onClickEditIcon}
+            data-test-subj="editable-title-edit-icon"
+          />
+        )}
       </EuiFlexItem>
     </EuiFlexGroup>
   );

x-pack/legacy/plugins/siem/public/components/header_page/translations.ts

@@ -6,8 +6,8 @@
 
 import { i18n } from '@kbn/i18n';
 
-export const SUBMIT = i18n.translate('xpack.siem.header.editableTitle.submit', {
-  defaultMessage: 'Submit',
+export const SAVE = i18n.translate('xpack.siem.header.editableTitle.save', {
+  defaultMessage: 'Save',
 });
 
 export const CANCEL = i18n.translate('xpack.siem.header.editableTitle.cancel', {

x-pack/legacy/plugins/siem/public/components/markdown_editor/constants.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export const MARKDOWN_HELP_LINK = 'https://www.markdownguide.org/cheat-sheet/';

x-pack/legacy/plugins/siem/public/components/markdown_editor/form.tsx

@@ -0,0 +1,58 @@
+/*
+ * 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 { EuiFormRow } from '@elastic/eui';
+import React, { useCallback } from 'react';
+
+import { FieldHook, getFieldValidityAndErrorMessage } from '../../shared_imports';
+import { MarkdownEditor } from '.';
+
+interface IMarkdownEditorForm {
+  dataTestSubj: string;
+  field: FieldHook;
+  idAria: string;
+  isDisabled: boolean;
+  placeholder?: string;
+  footerContentRight?: React.ReactNode;
+}
+export const MarkdownEditorForm = ({
+  dataTestSubj,
+  field,
+  idAria,
+  isDisabled = false,
+  placeholder,
+  footerContentRight,
+}: IMarkdownEditorForm) => {
+  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
+
+  const handleContentChange = useCallback(
+    (newContent: string) => {
+      field.setValue(newContent);
+    },
+    [field]
+  );
+
+  return (
+    <EuiFormRow
+      label={field.label}
+      labelAppend={field.labelAppend}
+      helpText={field.helpText}
+      error={errorMessage}
+      isInvalid={isInvalid}
+      fullWidth
+      data-test-subj={dataTestSubj}
+      describedByIds={idAria ? [idAria] : undefined}
+    >
+      <MarkdownEditor
+        initialContent={field.value as string}
+        isDisabled={isDisabled}
+        footerContentRight={footerContentRight}
+        onChange={handleContentChange}
+        placeholder={placeholder}
+      />
+    </EuiFormRow>
+  );
+};

x-pack/legacy/plugins/siem/public/components/markdown_editor/index.tsx

@@ -0,0 +1,121 @@
+/*
+ * 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 {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiPanel,
+  EuiTabbedContent,
+  EuiTextArea,
+} from '@elastic/eui';
+import React, { useEffect, useMemo, useState } from 'react';
+import styled, { css } from 'styled-components';
+
+import { Markdown } from '../markdown';
+import * as i18n from './translations';
+import { MARKDOWN_HELP_LINK } from './constants';
+
+const TextArea = styled(EuiTextArea)`
+  width: 100%;
+`;
+
+const Container = styled(EuiPanel)`
+  ${({ theme }) => css`
+    padding: 0;
+    background: ${theme.eui.euiColorLightestShade};
+    position: relative;
+    .euiTab {
+      padding: 10px;
+    }
+    .euiFormRow__labelWrapper {
+      position: absolute;
+      top: -${theme.eui.euiSizeL};
+    }
+    .euiFormErrorText {
+      padding: 0 ${theme.eui.euiSizeM};
+    }
+  `}
+`;
+
+const Tabs = styled(EuiTabbedContent)`
+  width: 100%;
+`;
+
+const Footer = styled(EuiFlexGroup)`
+  ${({ theme }) => css`
+    height: 41px;
+    padding: 0 ${theme.eui.euiSizeM};
+    .euiLink {
+      font-size: ${theme.eui.euiSizeM};
+    }
+  `}
+`;
+
+const MarkdownContainer = styled(EuiPanel)`
+  min-height: 150px;
+  overflow: auto;
+`;
+
+/** An input for entering a new case description  */
+export const MarkdownEditor = React.memo<{
+  placeholder?: string;
+  footerContentRight?: React.ReactNode;
+  initialContent: string;
+  isDisabled?: boolean;
+  onChange: (description: string) => void;
+}>(({ placeholder, footerContentRight, initialContent, isDisabled = false, onChange }) => {
+  const [content, setContent] = useState(initialContent);
+  useEffect(() => {
+    onChange(content);
+  }, [content]);
+  const tabs = useMemo(
+    () => [
+      {
+        id: 'comment',
+        name: i18n.MARKDOWN,
+        content: (
+          <TextArea
+            onChange={e => {
+              setContent(e.target.value);
+            }}
+            aria-label={`markdown-editor-comment`}
+            fullWidth={true}
+            disabled={isDisabled}
+            placeholder={placeholder ?? ''}
+            spellCheck={false}
+            value={content}
+          />
+        ),
+      },
+      {
+        id: 'preview',
+        name: i18n.PREVIEW,
+        content: (
+          <MarkdownContainer data-test-subj="markdown-container" paddingSize="s">
+            <Markdown raw={content} />
+          </MarkdownContainer>
+        ),
+      },
+    ],
+    [content, isDisabled, placeholder]
+  );
+  return (
+    <Container>
+      <Tabs data-test-subj={`markdown-tabs`} size="s" tabs={tabs} initialSelectedTab={tabs[0]} />
+      <Footer alignItems="center" gutterSize="none" justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiLink href={MARKDOWN_HELP_LINK} external target="_blank">
+            {i18n.MARKDOWN_SYNTAX_HELP}
+          </EuiLink>
+        </EuiFlexItem>
+        {footerContentRight && <EuiFlexItem grow={false}>{footerContentRight}</EuiFlexItem>}
+      </Footer>
+    </Container>
+  );
+});
+
+MarkdownEditor.displayName = 'MarkdownEditor';