[SR] Change app to use i18n date and time formatting (elastic#40925)

* Change app to use react-intl date and time formatting * Remove old formatDate import in test
tsullivan · Jul 15, 2019 · 2929ab9 · 2929ab9
1 parent a3f37d5
commit 2929ab9
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 34 deletions.
diff --git a/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/home.test.ts b/x-pack/legacy/plugins/snapshot_restore/__jest__/client_integration/home.test.ts
@@ -8,7 +8,6 @@ import { act } from 'react-dom/test-utils';
 import * as fixtures from '../../test/fixtures';
 import { SNAPSHOT_STATE } from '../../public/app/constants';
 import { API_BASE_PATH } from '../../common/constants';
-import { formatDate } from '../../public/app/services/text';
 import {
   setupEnvironment,
   pageHelpers,
@@ -458,7 +457,7 @@ describe.skip('<SnapshotRestoreHome />', () => {
           expect(row).toEqual([
             snapshot.snapshot, // Snapshot
             REPOSITORY_NAME, // Repository
-            formatDate(snapshot.startTimeInMillis), // Date created
+            'foo', // TODO: fix this with FormattedDateTime value
             `${Math.ceil(snapshot.durationInMillis / 1000).toString()}s`, // Duration
             snapshot.indices.length.toString(), // Indices
             snapshot.shards.total.toString(), // Shards
@@ -605,12 +604,8 @@ describe.skip('<SnapshotRestoreHome />', () => {
                 expect(find('snapshotDetail.indices.value').text()).toBe(
                   snapshot1.indices.join('')
                 );
-                expect(find('snapshotDetail.startTime.value').text()).toBe(
-                  formatDate(snapshot1.startTimeInMillis)
-                );
-                expect(find('snapshotDetail.endTime.value').text()).toBe(
-                  formatDate(snapshot1.endTimeInMillis)
-                );
+                expect(find('snapshotDetail.startTime.value').text()).toBe('foo'); // TODO: fix this with FormattedDateTime value
+                expect(find('snapshotDetail.endTime.value').text()).toBe('foo'); // TODO: fix this with FormattedDateTime value
               });
 
               test('should indicate the different snapshot states', async () => {

diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/formatted_date_time.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/formatted_date_time.tsx
@@ -0,0 +1,29 @@
+/*
+ * 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 React, { Fragment } from 'react';
+import { useAppDependencies } from '../index';
+
+interface Props {
+  epochMs: number;
+}
+
+export const FormattedDateTime: React.FunctionComponent<Props> = ({ epochMs }) => {
+  const {
+    core: {
+      i18n: { FormattedDate, FormattedTime },
+    },
+  } = useAppDependencies();
+
+  const date = new Date(epochMs);
+
+  return (
+    <Fragment>
+      <FormattedDate value={date} year="numeric" month="short" day="2-digit" />{' '}
+      <FormattedTime value={date} timeZoneName="short" />
+    </Fragment>
+  );
+};
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/index.ts b/x-pack/legacy/plugins/snapshot_restore/public/app/components/index.ts
@@ -5,6 +5,7 @@
  */
 
 export { DataPlaceholder } from './data_placeholder';
+export { FormattedDateTime } from './formatted_date_time';
 export { RepositoryDeleteProvider } from './repository_delete_provider';
 export { RepositoryForm } from './repository_form';
 export { RepositoryVerificationBadge } from './repository_verification_badge';

diff --git a/...ns/snapshot_restore/public/app/sections/home/restore_list/restore_table/restore_table.tsx b/...ns/snapshot_restore/public/app/sections/home/restore_list/restore_table/restore_table.tsx
@@ -12,7 +12,7 @@ import { SnapshotRestore } from '../../../../../../common/types';
 import { UIM_RESTORE_LIST_EXPAND_INDEX } from '../../../../constants';
 import { useAppDependencies } from '../../../../index';
 import { uiMetricService } from '../../../../services/ui_metric';
-import { formatDate } from '../../../../services/text';
+import { FormattedDateTime } from '../../../../components';
 import { ShardsTable } from './shards_table';
 
 interface Props {
@@ -170,7 +170,7 @@ export const RestoreTable: React.FunctionComponent<Props> = ({ restores }) => {
         { isComplete }: SnapshotRestore
       ) => {
         return isComplete ? (
-          formatDate(latestActivityTimeInMillis)
+          <FormattedDateTime epochMs={latestActivityTimeInMillis} />
         ) : (
           <FormattedMessage
             id="xpack.snapshotRestore.restoreList.table.lastActivityColumn.nowLabel"

diff --git a/...ins/snapshot_restore/public/app/sections/home/restore_list/restore_table/shards_table.tsx b/...ins/snapshot_restore/public/app/sections/home/restore_list/restore_table/shards_table.tsx
@@ -17,7 +17,7 @@ import {
 } from '@elastic/eui';
 import { SnapshotRestore, SnapshotRestoreShard } from '../../../../../../common/types';
 import { useAppDependencies } from '../../../../index';
-import { formatDate } from '../../../../services/text';
+import { FormattedDateTime } from '../../../../components';
 
 interface Props {
   shards: SnapshotRestore['shards'];
@@ -103,15 +103,23 @@ export const ShardsTable: React.FunctionComponent<Props> = ({ shards }) => {
         defaultMessage: 'Start time',
       }),
       render: (startTimeInMillis: SnapshotRestoreShard['startTimeInMillis']) =>
-        startTimeInMillis ? formatDate(startTimeInMillis) : <EuiLoadingSpinner size="m" />,
+        startTimeInMillis ? (
+          <FormattedDateTime epochMs={startTimeInMillis} />
+        ) : (
+          <EuiLoadingSpinner size="m" />
+        ),
     },
     {
       field: 'stopTimeInMillis',
       name: i18n.translate('xpack.snapshotRestore.restoreList.shardTable.endTimeColumnTitle', {
         defaultMessage: 'End time',
       }),
       render: (stopTimeInMillis: SnapshotRestoreShard['stopTimeInMillis']) =>
-        stopTimeInMillis ? formatDate(stopTimeInMillis) : <EuiLoadingSpinner size="m" />,
+        stopTimeInMillis ? (
+          <FormattedDateTime epochMs={stopTimeInMillis} />
+        ) : (
+          <EuiLoadingSpinner size="m" />
+        ),
     },
     {
       field: 'totalTimeInMillis',

diff --git a/...shot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/tab_summary.tsx b/...shot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/tab_summary.tsx
@@ -21,8 +21,7 @@ import {
 
 import { SNAPSHOT_STATE } from '../../../../../constants';
 import { useAppDependencies } from '../../../../../index';
-import { formatDate } from '../../../../../services/text';
-import { DataPlaceholder } from '../../../../../components';
+import { DataPlaceholder, FormattedDateTime } from '../../../../../components';
 import { SnapshotState } from './snapshot_state';
 
 interface Props {
@@ -205,7 +204,7 @@ export const TabSummary: React.SFC<Props> = ({ snapshotDetails }) => {
 
           <EuiDescriptionListDescription className="eui-textBreakWord" data-test-subj="value">
             <DataPlaceholder data={startTimeInMillis}>
-              {formatDate(startTimeInMillis)}
+              <FormattedDateTime epochMs={startTimeInMillis} />
             </DataPlaceholder>
           </EuiDescriptionListDescription>
         </EuiFlexItem>
@@ -223,7 +222,7 @@ export const TabSummary: React.SFC<Props> = ({ snapshotDetails }) => {
               <EuiLoadingSpinner size="m" />
             ) : (
               <DataPlaceholder data={endTimeInMillis}>
-                {formatDate(endTimeInMillis)}
+                <FormattedDateTime epochMs={endTimeInMillis} />
               </DataPlaceholder>
             )}
           </EuiDescriptionListDescription>

diff --git a/...snapshot_restore/public/app/sections/home/snapshot_list/snapshot_table/snapshot_table.tsx b/...snapshot_restore/public/app/sections/home/snapshot_list/snapshot_table/snapshot_table.tsx
@@ -18,10 +18,9 @@ import {
 import { SnapshotDetails } from '../../../../../../common/types';
 import { BASE_PATH, SNAPSHOT_STATE, UIM_SNAPSHOT_SHOW_DETAILS_CLICK } from '../../../../constants';
 import { useAppDependencies } from '../../../../index';
-import { formatDate } from '../../../../services/text';
 import { linkToRepository } from '../../../../services/navigation';
 import { uiMetricService } from '../../../../services/ui_metric';
-import { DataPlaceholder, SnapshotDeleteProvider } from '../../../../components';
+import { DataPlaceholder, FormattedDateTime, SnapshotDeleteProvider } from '../../../../components';
 
 interface Props {
   snapshots: SnapshotDetails[];
@@ -116,7 +115,9 @@ export const SnapshotTable: React.FunctionComponent<Props> = ({
       truncateText: true,
       sortable: true,
       render: (startTimeInMillis: number) => (
-        <DataPlaceholder data={startTimeInMillis}>{formatDate(startTimeInMillis)}</DataPlaceholder>
+        <DataPlaceholder data={startTimeInMillis}>
+          <FormattedDateTime epochMs={startTimeInMillis} />
+        </DataPlaceholder>
       ),
     },
     {

diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/services/text/format_date.ts b/x-pack/legacy/plugins/snapshot_restore/public/app/services/text/format_date.ts
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/services/text/index.ts b/x-pack/legacy/plugins/snapshot_restore/public/app/services/text/index.ts
@@ -4,5 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { formatDate } from './format_date';
 export { textService } from './text';
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/shim.ts b/x-pack/legacy/plugins/snapshot_restore/public/shim.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage, FormattedDate, FormattedTime } from '@kbn/i18n/react';
 import { I18nContext } from 'ui/i18n';
 
 import chrome from 'ui/chrome';
@@ -23,6 +23,8 @@ export interface AppCore {
     [i18nPackage: string]: any;
     Context: typeof I18nContext;
     FormattedMessage: typeof FormattedMessage;
+    FormattedDate: typeof FormattedDate;
+    FormattedTime: typeof FormattedTime;
   };
   notification: {
     fatalError: typeof fatalError;
@@ -78,6 +80,8 @@ export function createShim(): { core: Core; plugins: Plugins } {
         ...i18n,
         Context: I18nContext,
         FormattedMessage,
+        FormattedDate,
+        FormattedTime,
       },
       routing: {
         registerAngularRoute: (path: string, config: object): void => {