finish design matching

elastic · Mar 27, 2020 · d16b7b0 · d16b7b0
1 parent 726d2c7
commit d16b7b0
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 41 deletions.
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/insert_timeline_popover/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/insert_timeline_popover/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButtonIcon, EuiPopover, EuiSelectableOption } from '@elastic/eui';
+import { EuiButtonIcon, EuiPopover, EuiSelectableOption, EuiToolTip } from '@elastic/eui';
 import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
@@ -62,13 +62,15 @@ export const InsertTimelinePopoverComponent: React.FC<Props> = ({
 
   const insertTimelineButton = useMemo(
     () => (
-      <EuiButtonIcon
-        aria-label={i18n.INSERT_TIMELINE}
-        data-test-subj="insert-timeline-button"
-        iconType="timeline"
-        isDisabled={isDisabled}
-        onClick={handleOpenPopover}
-      />
+      <EuiToolTip position="top" content={<p>{i18n.INSERT_TIMELINE}</p>}>
+        <EuiButtonIcon
+          aria-label={i18n.INSERT_TIMELINE}
+          data-test-subj="insert-timeline-button"
+          iconType="timeline"
+          isDisabled={isDisabled}
+          onClick={handleOpenPopover}
+        />
+      </EuiToolTip>
     ),
     [handleOpenPopover, isDisabled]
   );

diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/translations.ts b/x-pack/legacy/plugins/siem/public/components/timeline/translations.ts
@@ -25,5 +25,5 @@ export const SEARCH_BOX_TIMELINE_PLACEHOLDER = i18n.translate(
 );
 
 export const INSERT_TIMELINE = i18n.translate('xpack.siem.insert.timeline.insertTimelineButton', {
-  defaultMessage: 'Insert Timeline…',
+  defaultMessage: 'Insert timeline link',
 });
diff --git a/x-pack/legacy/plugins/siem/public/containers/case/translations.ts b/x-pack/legacy/plugins/siem/public/containers/case/translations.ts
@@ -29,15 +29,13 @@ export const DELETED_CASES = (totalCases: number, caseTitle?: string) =>
 export const CLOSED_CASES = (totalCases: number, caseTitle?: string) =>
   i18n.translate('xpack.siem.containers.case.closedCases', {
     values: { caseTitle, totalCases },
-    defaultMessage:
-      'Closed {totalCases, plural, =1 {{totalCases} rule} other {{totalCases} cases}}',
+    defaultMessage: 'Closed {totalCases, plural, =1 {"{caseTitle}"} other {{totalCases} cases}}',
   });
 
 export const REOPENED_CASES = (totalCases: number, caseTitle?: string) =>
   i18n.translate('xpack.siem.containers.case.reopenedCases', {
     values: { caseTitle, totalCases },
-    defaultMessage:
-      'Reopened {totalCases, plural, =1 {{totalCases} rule} other {{totalCases} cases}}',
+    defaultMessage: 'Reopened {totalCases, plural, =1 {"{caseTitle}"} other {{totalCases} cases}}',
   });
 
 export const TAG_FETCH_FAILURE = i18n.translate(

diff --git a/x-pack/legacy/plugins/siem/public/containers/case/use_bulk_update_case.tsx b/x-pack/legacy/plugins/siem/public/containers/case/use_bulk_update_case.tsx
@@ -71,17 +71,18 @@ export const useUpdateCases = (): UseUpdateCase => {
         dispatch({ type: 'FETCH_INIT' });
         const patchResponse = await patchCasesStatus(cases);
         if (!cancel) {
-          console.log('patchResponse', patchResponse);
-          dispatch({ type: 'FETCH_SUCCESS', payload: true });
-          if (patchResponse.length && patchResponse[0].status === 'open') {
+          const resultCount = Object.keys(patchResponse).length;
+          const firstTitle = patchResponse[0].title;
 
+          dispatch({ type: 'FETCH_SUCCESS', payload: true });
+          if (resultCount && patchResponse[0].status === 'open') {
             displaySuccessToast(
-              i18n.CLOSED_CASES(cases.length, cases.length === 1 ? cases[0].title : ''),
+              i18n.REOPENED_CASES(resultCount, resultCount === 1 ? firstTitle : ''),
               dispatchToaster
             );
           } else {
             displaySuccessToast(
-              i18n.REOPENED_CASES(cases.length, cases.length === 1 ? cases[0].title : ''),
+              i18n.CLOSED_CASES(resultCount, resultCount === 1 ? firstTitle : ''),
               dispatchToaster
             );
           }

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/all_cases/index.tsx
@@ -107,7 +107,13 @@ export const AllCases = React.memo(() => {
     isDisplayConfirmDeleteModal,
   } = useDeleteCases();
 
-  const { dispatchResetIsUpdated, isUpdated, updateBulkStatus } = useUpdateCases();
+  // Update case
+  const {
+    dispatchResetIsUpdated,
+    isLoading: isUpdating,
+    isUpdated,
+    updateBulkStatus,
+  } = useUpdateCases();
   const [deleteThisCase, setDeleteThisCase] = useState({
     title: '',
     id: '',
@@ -301,7 +307,7 @@ export const AllCases = React.memo(() => {
           </EuiFlexItem>
         </EuiFlexGroup>
       </CaseHeaderPage>
-      {(isCasesLoading || isDeleting) && !isDataEmpty && (
+      {(isCasesLoading || isDeleting || isUpdating) && !isDataEmpty && (
         <ProgressLoader size="xs" color="accent" className="essentialAnimation" />
       )}
       <Panel loading={isCasesLoading}>

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/user_action_tree/translations.ts b/x-pack/legacy/plugins/siem/public/pages/case/components/user_action_tree/translations.ts
@@ -22,13 +22,13 @@ export const REQUIRED_UPDATE_TO_SERVICE = i18n.translate(
   }
 );
 
-export const COPY_LINK_COMMENT = i18n.translate('xpack.siem.case.caseView.copyCommentLinkAria', {
-  defaultMessage: 'click to copy comment link',
+export const COPY_REFERENCE_LINK = i18n.translate('xpack.siem.case.caseView.copyCommentLinkAria', {
+  defaultMessage: 'Copy reference link',
 });
 
 export const MOVE_TO_ORIGINAL_COMMENT = i18n.translate(
   'xpack.siem.case.caseView.moveToCommentAria',
   {
-    defaultMessage: 'click to highlight the reference comment',
+    defaultMessage: 'Highlight the referenced comment',
   }
 );
diff --git a/...ck/legacy/plugins/siem/public/pages/case/components/user_action_tree/user_action_item.tsx b/...ck/legacy/plugins/siem/public/pages/case/components/user_action_tree/user_action_item.tsx
@@ -154,6 +154,7 @@ export const UserActionItem = ({
                 labelQuoteAction={labelQuoteAction}
                 labelTitle={labelTitle ?? <></>}
                 linkId={linkId}
+                fullName={fullName}
                 username={username}
                 updatedAt={updatedAt}
                 onEdit={onEdit}

diff --git a/...k/legacy/plugins/siem/public/pages/case/components/user_action_tree/user_action_title.tsx b/...k/legacy/plugins/siem/public/pages/case/components/user_action_tree/user_action_title.tsx
@@ -4,7 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiLoadingSpinner, EuiFlexGroup, EuiFlexItem, EuiText, EuiButtonIcon } from '@elastic/eui';
+import {
+  EuiLoadingSpinner,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiButtonIcon,
+  EuiToolTip,
+} from '@elastic/eui';
 import { FormattedRelative } from '@kbn/i18n/react';
 import copy from 'copy-to-clipboard';
 import { isEmpty } from 'lodash/fp';
@@ -33,6 +40,7 @@ interface UserActionTitleProps {
   labelQuoteAction?: string;
   labelTitle: JSX.Element;
   linkId?: string | null;
+  fullName?: string | null;
   updatedAt?: string | null;
   username: string;
   onEdit?: (id: string) => void;
@@ -48,6 +56,7 @@ export const UserActionTitle = ({
   labelQuoteAction,
   labelTitle,
   linkId,
+  fullName,
   username,
   updatedAt,
   onEdit,
@@ -105,7 +114,9 @@ export const UserActionTitle = ({
         <EuiFlexItem grow={false}>
           <EuiFlexGroup alignItems="baseline" gutterSize="xs" component="span">
             <EuiFlexItem grow={false}>
-              <strong>{username}</strong>
+              <EuiToolTip position="top" content={<p>{fullName ?? username}</p>}>
+                <strong>{username}</strong>
+              </EuiToolTip>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>{labelTitle}</EuiFlexItem>
             <EuiFlexItem grow={false}>
@@ -137,20 +148,24 @@ export const UserActionTitle = ({
           <EuiFlexGroup alignItems="baseline" gutterSize="none">
             {!isEmpty(linkId) && (
               <EuiFlexItem grow={false}>
-                <EuiButtonIcon
-                  aria-label={i18n.MOVE_TO_ORIGINAL_COMMENT}
-                  onClick={handleMoveToLink}
-                  iconType="arrowUp"
-                />
+                <EuiToolTip position="top" content={<p>{i18n.MOVE_TO_ORIGINAL_COMMENT}</p>}>
+                  <EuiButtonIcon
+                    aria-label={i18n.MOVE_TO_ORIGINAL_COMMENT}
+                    onClick={handleMoveToLink}
+                    iconType="arrowUp"
+                  />
+                </EuiToolTip>
               </EuiFlexItem>
             )}
             <EuiFlexItem grow={false}>
-              <EuiButtonIcon
-                aria-label={i18n.COPY_LINK_COMMENT}
-                onClick={handleAnchorLink}
-                iconType="link"
-                id={`${id}-permLink`}
-              />
+              <EuiToolTip position="top" content={<p>{i18n.COPY_REFERENCE_LINK}</p>}>
+                <EuiButtonIcon
+                  aria-label={i18n.COPY_REFERENCE_LINK}
+                  onClick={handleAnchorLink}
+                  iconType="link"
+                  id={`${id}-permLink`}
+                />
+              </EuiToolTip>
             </EuiFlexItem>
             {propertyActions.length > 0 && (
               <EuiFlexItem grow={false}>

diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/user_list/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/user_list/index.tsx
@@ -13,6 +13,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiLoadingSpinner,
+  EuiToolTip,
 } from '@elastic/eui';
 import styled, { css } from 'styled-components';
 import { ElasticUser } from '../../../../containers/case/types';
@@ -49,11 +50,13 @@ const renderUsers = (
             <MyAvatar name={fullName ? fullName : username} />
           </EuiFlexItem>
           <EuiFlexItem>
-            <p>
-              <strong>
-                <small data-test-subj="case-view-username">{username}</small>
-              </strong>
-            </p>
+            <EuiToolTip position="top" content={<p>{fullName ?? username}</p>}>
+              <p>
+                <strong>
+                  <small data-test-subj="case-view-username">{username}</small>
+                </strong>
+              </p>
+            </EuiToolTip>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
@@ -63,6 +66,7 @@ const renderUsers = (
           onClick={handleSendEmail.bind(null, email)}
           iconType="email"
           aria-label="email"
+          isDisabled={!email}
         />
       </EuiFlexItem>
     </MyFlexGroup>