[Cases] strip down milliseconds for dates and extra dates in tooltips (#123821)

x-pack/plugins/cases/public/components/all_cases/columns.tsx

@@ -305,7 +305,7 @@ export const useCasesColumns = ({
             if (createdAt != null) {
               return (
                 <span data-test-subj={`case-table-column-createdAt`}>
-                  <FormattedRelativePreferenceDate value={createdAt} />
+                  <FormattedRelativePreferenceDate value={createdAt} stripMs={true} />
                 </span>
               );
             }

x-pack/plugins/cases/public/components/case_view/metrics/status.tsx

@@ -18,7 +18,7 @@ import {
   CASE_REOPENED_ON,
 } from './translations';
 import { getMaybeDate } from '../../formatted_date/maybe_date';
-import { FormattedDate, FormattedRelativePreferenceDate } from '../../formatted_date';
+import { FormattedRelativePreferenceDate } from '../../formatted_date';
 import { getEmptyTagValue } from '../../empty_value';
 import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
 import { CaseViewMetricsProps } from './types';
@@ -118,6 +118,7 @@ const CreationDate: React.FC<{ date: string }> = React.memo(({ date }) => {
     <FormattedRelativePreferenceDate
       data-test-subj={'case-metrics-lifespan-creation-date'}
       value={date}
+      stripMs={true}
     />
   );
 });
@@ -210,9 +211,10 @@ const ValueWithExplanationIcon: React.FC<{
       {explanationValues.map((explanationValue, index) => {
         return (
           <React.Fragment key={`explanation-value-${index}`}>
-            <FormattedDate
+            <FormattedRelativePreferenceDate
               data-test-subj={`case-metrics-lifespan-reopen-${index}`}
               value={explanationValue}
+              stripMs={true}
             />
             {isNotLastItem(index, explanationValues.length) ? <EuiSpacer size="xs" /> : null}
           </React.Fragment>

x-pack/plugins/cases/public/components/case_view/metrics/translations.ts

@@ -66,5 +66,5 @@ export const CASE_REOPENED = i18n.translate('xpack.cases.caseView.metrics.lifesp
 });
 
 export const CASE_REOPENED_ON = i18n.translate('xpack.cases.caseView.metrics.lifespan.reopenedOn', {
-  defaultMessage: 'Reopened on ',
+  defaultMessage: 'Reopened ',
 });

x-pack/plugins/cases/public/components/formatted_date/index.test.tsx

@@ -63,6 +63,23 @@ describe('formatted_date', () => {
 
       expect(wrapper.text()).toEqual('Feb-25-2019');
     });
+
+    test('it strips down milliseconds when stripMs is passed', () => {
+      const date = new Date('2022-01-27T10:30:00.000Z');
+
+      const wrapper = mount(<PreferenceFormattedDate value={date} stripMs={true} />);
+
+      expect(wrapper.text()).toEqual('Jan 27, 2022 @ 10:30:00');
+    });
+
+    test('it strips down milliseconds when stripMs is passed and user-defined format is used', () => {
+      const date = new Date('2022-01-27T10:30:00.000Z');
+      mockUseDateFormat.mockImplementation(() => 'HH:mm:ss.SSS');
+
+      const wrapper = mount(<PreferenceFormattedDate value={date} stripMs={true} />);
+
+      expect(wrapper.text()).toEqual('10:30:00');
+    });
   });
 
   describe('FormattedDate', () => {
@@ -166,5 +183,16 @@ describe('formatted_date', () => {
 
       expect(wrapper.text()).toBe(getEmptyValue());
     });
+
+    test('strips down the time milliseconds when stripMs is passed', () => {
+      const date = new Date('2022-01-27T10:30:00.000Z');
+      const wrapper = mount(
+        <TestProviders>
+          <FormattedRelativePreferenceDate stripMs={true} value={date.toISOString()} />
+        </TestProviders>
+      );
+
+      expect(wrapper.text()).toBe('Jan 27, 2022 @ 10:30:00');
+    });
   });
 });

x-pack/plugins/cases/public/components/formatted_date/index.tsx

@@ -14,12 +14,17 @@ import { getOrEmptyTagFromValue } from '../empty_value';
 import { LocalizedDateTooltip } from '../localized_date_tooltip';
 import { getMaybeDate } from './maybe_date';
 
-export const PreferenceFormattedDate = React.memo<{ dateFormat?: string; value: Date }>(
-  /* eslint-disable-next-line react-hooks/rules-of-hooks */
-  ({ value, dateFormat = useDateFormat() }) => (
-    <>{moment.tz(value, useTimeZone()).format(dateFormat)}</>
-  )
-);
+export const PreferenceFormattedDate = React.memo<{
+  dateFormat?: string;
+  value: Date;
+  stripMs?: boolean;
+}>(({ value, dateFormat, stripMs = false }) => {
+  const systemDateFormat = useDateFormat();
+  const toUseDateFormat = dateFormat ? dateFormat : systemDateFormat;
+  const strippedDateFormat =
+    toUseDateFormat && stripMs ? toUseDateFormat.replace(/\.?SSS/, '') : toUseDateFormat;
+  return <>{moment.tz(value, useTimeZone()).format(strippedDateFormat)}</>;
+});
 
 PreferenceFormattedDate.displayName = 'PreferenceFormattedDate';
 
@@ -121,9 +126,16 @@ FormattedDate.displayName = 'FormattedDate';
  * - a humanized relative date (e.g. 16 minutes ago)
  * - a long representation of the date that includes the day of the week (e.g. Thursday, March 21, 2019 6:47pm)
  * - the raw date value (e.g. 2019-03-22T00:47:46Z)
+ * @param value -  raw date
+ * @param  stripMs - strip milliseconds when formatting time (remove ".SSS" from the date format)
  */
-
-export const FormattedRelativePreferenceDate = ({ value }: { value?: string | number | null }) => {
+export const FormattedRelativePreferenceDate = ({
+  value,
+  stripMs = false,
+}: {
+  value?: string | number | null;
+  stripMs?: boolean;
+}) => {
   if (value == null) {
     return getOrEmptyTagFromValue(value);
   }
@@ -135,7 +147,7 @@ export const FormattedRelativePreferenceDate = ({ value }: { value?: string | nu
   return (
     <LocalizedDateTooltip date={date}>
       {moment(date).add(1, 'hours').isBefore(new Date()) ? (
-        <PreferenceFormattedDate data-test-subj="preference-time" value={date} />
+        <PreferenceFormattedDate data-test-subj="preference-time" value={date} stripMs={stripMs} />
       ) : (
         <FormattedRelative data-test-subj="relative-time" value={date} />
       )}

x-pack/plugins/cases/public/components/localized_date_tooltip/index.test.tsx

@@ -10,6 +10,7 @@ import moment from 'moment-timezone';
 import React from 'react';
 
 import { LocalizedDateTooltip } from '.';
+import { TestProviders } from '../../common/mock';
 
 describe('LocalizedDateTooltip', () => {
   beforeEach(() => {
@@ -29,9 +30,11 @@ describe('LocalizedDateTooltip', () => {
 
   test('it renders the child content', () => {
     const wrapper = mount(
-      <LocalizedDateTooltip date={date.toDate()}>
-        <SampleContent />
-      </LocalizedDateTooltip>
+      <TestProviders>
+        <LocalizedDateTooltip date={date.toDate()}>
+          <SampleContent />
+        </LocalizedDateTooltip>
+      </TestProviders>
     );
 
     expect(wrapper.find('[data-test-subj="sample-content"]').exists()).toEqual(true);
@@ -39,9 +42,11 @@ describe('LocalizedDateTooltip', () => {
 
   test('it renders', () => {
     const wrapper = mount(
-      <LocalizedDateTooltip date={date.toDate()}>
-        <SampleContent />
-      </LocalizedDateTooltip>
+      <TestProviders>
+        <LocalizedDateTooltip date={date.toDate()}>
+          <SampleContent />
+        </LocalizedDateTooltip>
+      </TestProviders>
     );
 
     expect(wrapper.find('[data-test-subj="localized-date-tool-tip"]').exists()).toEqual(true);

x-pack/plugins/cases/public/components/localized_date_tooltip/index.tsx

@@ -6,9 +6,9 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
-import { FormattedRelative } from '@kbn/i18n-react';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import React from 'react';
+import { useTimeZone } from '../../common/lib/kibana';
 
 export const LocalizedDateTooltip = React.memo<{
   children: React.ReactNode;
@@ -26,17 +26,8 @@ export const LocalizedDateTooltip = React.memo<{
             <span data-test-subj="field-name">{fieldName}</span>
           </EuiFlexItem>
         ) : null}
-        <EuiFlexItem grow={false}>
-          <FormattedRelative
-            data-test-subj="humanized-relative-date"
-            value={moment.utc(date).toDate()}
-          />
-        </EuiFlexItem>
         <EuiFlexItem data-test-subj="with-day-of-week" grow={false}>
-          {moment.utc(date).local().format('llll')}
-        </EuiFlexItem>
-        <EuiFlexItem data-test-subj="with-time-zone-offset-in-hours" grow={false}>
-          {moment(date).format()}
+          {moment.tz(date, useTimeZone()).format('llll')}
         </EuiFlexItem>
       </EuiFlexGroup>
     }