fix(content-explorer): Migrated Date (#3800)

src/elements/content-explorer/Date.js.flow

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Datefield from '../common/date';
+import messages from '../common/messages';
+import { FIELD_INTERACTED_AT } from '../../constants';
+import type { BoxItem } from '../../common/types/core';
+
+type Props = {
+    dataKey: string,
+    item: BoxItem
+};
+
+const Date = ({
+    dataKey,
+    item,
+}: Props) => {
+    const {
+        modified_at = '',
+        interacted_at = '',
+        modified_by,
+    }: BoxItem = item;
+    const modifiedBy: string = modified_by ? modified_by.name || '' : '';
+    const isRecents: boolean = dataKey === FIELD_INTERACTED_AT;
+    const date: string = isRecents ? interacted_at || modified_at : modified_at;
+    const DateValue = <Datefield capitalize date={date} omitCommas />;
+
+    if (isRecents || !modifiedBy) {
+        return DateValue;
+    }
+
+    return (
+        <FormattedMessage
+            {...messages.nameDate}
+            values={{
+                date: DateValue,
+                name: modifiedBy,
+            }}
+        />
+    );
+};
+export default Date;

src/elements/content-explorer/Date.js → src/elements/content-explorer/Date.tsx

@@ -1,17 +1,16 @@
-// @flow
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import Datefield from '../common/date';
 import messages from '../common/messages';
 import { FIELD_INTERACTED_AT } from '../../constants';
 import type { BoxItem } from '../../common/types/core';
 
-type Props = {
-    dataKey: string,
-    item: BoxItem,
-};
+export interface DateProps {
+    dataKey: string;
+    item: BoxItem;
+}
 
-const Date = ({ dataKey, item }: Props) => {
+const Date = ({ dataKey, item }: DateProps) => {
     const { modified_at = '', interacted_at = '', modified_by }: BoxItem = item;
     const modifiedBy: string = modified_by ? modified_by.name || '' : '';
     const isRecents: boolean = dataKey === FIELD_INTERACTED_AT;

src/elements/content-explorer/__tests__/Date.test.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { render, screen } from '../../../test-utils/testing-library';
+
+import Date, { DateProps } from '../Date';
+import { FIELD_INTERACTED_AT } from '../../../constants';
+
+const itemWithModifiedBy = {
+    modified_at: '2023-10-01T12:00:00Z',
+    interacted_at: '2023-10-02T12:00:00Z',
+    modified_by: { name: 'John Doe' },
+};
+
+const itemWithoutModifiedBy = {
+    modified_at: '2023-10-01T12:00:00Z',
+    interacted_at: '2023-10-02T12:00:00Z',
+};
+
+describe('elements/content-explorer/Date', () => {
+    const renderComponent = (props: DateProps) => {
+        return render(<Date {...props} />);
+    };
+
+    test('renders date with modified_by name when dataKey is not FIELD_INTERACTED_AT', () => {
+        renderComponent({ dataKey: 'someKey', item: itemWithModifiedBy });
+        expect(screen.getByText(/Sun Oct 1 2023\s+by John Doe/)).toBeInTheDocument();
+    });
+
+    test('renders date without modified_by name when dataKey is FIELD_INTERACTED_AT', () => {
+        renderComponent({ dataKey: FIELD_INTERACTED_AT, item: itemWithoutModifiedBy });
+        expect(screen.getByText('Mon Oct 2 2023')).toBeInTheDocument();
+    });
+
+    test('renders date without modified_by name when modified_by is not provided', () => {
+        renderComponent({ dataKey: 'someKey', item: itemWithoutModifiedBy });
+        expect(screen.getByText('Sun Oct 1 2023')).toBeInTheDocument();
+    });
+});