From 2929ab934c6cb363de08535948e140e0cc7709ac Mon Sep 17 00:00:00 2001 From: Jen Huang Date: Mon, 15 Jul 2019 11:27:59 -0700 Subject: [PATCH] [SR] Change app to use i18n date and time formatting (#40925) * Change app to use react-intl date and time formatting * Remove old formatDate import in test --- .../__jest__/client_integration/home.test.ts | 11 ++----- .../app/components/formatted_date_time.tsx | 29 +++++++++++++++++++ .../public/app/components/index.ts | 1 + .../restore_table/restore_table.tsx | 4 +-- .../restore_table/shards_table.tsx | 14 +++++++-- .../snapshot_details/tabs/tab_summary.tsx | 7 ++--- .../snapshot_table/snapshot_table.tsx | 7 +++-- .../public/app/services/text/format_date.ts | 12 -------- .../public/app/services/text/index.ts | 1 - .../plugins/snapshot_restore/public/shim.ts | 6 +++- 10 files changed, 58 insertions(+), 34 deletions(-) create mode 100644 x-pack/legacy/plugins/snapshot_restore/public/app/components/formatted_date_time.tsx delete mode 100644 x-pack/legacy/plugins/snapshot_restore/public/app/services/text/format_date.ts 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 index 547478ca0dd4b..1cbafab69da7c 100644 --- 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('', () => { 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('', () => { 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 new file mode 100644 index 0000000000000..fa1be2768b207 --- /dev/null +++ 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 = ({ epochMs }) => { + const { + core: { + i18n: { FormattedDate, FormattedTime }, + }, + } = useAppDependencies(); + + const date = new Date(epochMs); + + return ( + + {' '} + + + ); +}; 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 index 2c70ac4ae398e..355805babf25c 100644 --- 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/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/restore_list/restore_table/restore_table.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/restore_list/restore_table/restore_table.tsx index c958c50ef6880..9d92835427b4f 100644 --- a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/restore_list/restore_table/restore_table.tsx +++ b/x-pack/legacy/plugins/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 = ({ restores }) => { { isComplete }: SnapshotRestore ) => { return isComplete ? ( - formatDate(latestActivityTimeInMillis) + ) : ( = ({ shards }) => { defaultMessage: 'Start time', }), render: (startTimeInMillis: SnapshotRestoreShard['startTimeInMillis']) => - startTimeInMillis ? formatDate(startTimeInMillis) : , + startTimeInMillis ? ( + + ) : ( + + ), }, { field: 'stopTimeInMillis', @@ -111,7 +115,11 @@ export const ShardsTable: React.FunctionComponent = ({ shards }) => { defaultMessage: 'End time', }), render: (stopTimeInMillis: SnapshotRestoreShard['stopTimeInMillis']) => - stopTimeInMillis ? formatDate(stopTimeInMillis) : , + stopTimeInMillis ? ( + + ) : ( + + ), }, { field: 'totalTimeInMillis', diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/tab_summary.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/tab_summary.tsx index 262fc6e204154..9638ee7a8e798 100644 --- a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/tab_summary.tsx +++ b/x-pack/legacy/plugins/snapshot_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 = ({ snapshotDetails }) => { - {formatDate(startTimeInMillis)} + @@ -223,7 +222,7 @@ export const TabSummary: React.SFC = ({ snapshotDetails }) => { ) : ( - {formatDate(endTimeInMillis)} + )} diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_table/snapshot_table.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_table/snapshot_table.tsx index 490113a14bc6b..8e2e620d1b68d 100644 --- a/x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_table/snapshot_table.tsx +++ b/x-pack/legacy/plugins/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 = ({ truncateText: true, sortable: true, render: (startTimeInMillis: number) => ( - {formatDate(startTimeInMillis)} + + + ), }, { 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 deleted file mode 100644 index 26b0f85beffb7..0000000000000 --- a/x-pack/legacy/plugins/snapshot_restore/public/app/services/text/format_date.ts +++ /dev/null @@ -1,12 +0,0 @@ -/* - * 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 { dateFormatAliases } from '@elastic/eui/lib/services/format'; -import moment from 'moment'; - -export function formatDate(epochMs: number): string { - return moment(Number(epochMs)).format(dateFormatAliases.longDateTime); -} 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 index f442bfbc0ab23..3bed86f69937a 100644 --- 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 index 6fd2d6aed7b23..45083d997fdb6 100644 --- 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 => {