From 5106779b56f1c0f15738eafa5b021151e156a652 Mon Sep 17 00:00:00 2001
From: greg-in-a-box <103291617+greg-in-a-box@users.noreply.github.com>
Date: Thu, 19 Dec 2024 16:40:43 -0500
Subject: [PATCH] fix(content-explorer): Migrated Date (#3800)

---
 src/elements/content-explorer/Date.js.flow    | 41 +++++++++++++++++++
 .../content-explorer/{Date.js => Date.tsx}    | 11 +++--
 .../content-explorer/__tests__/Date.test.tsx  | 37 +++++++++++++++++
 3 files changed, 83 insertions(+), 6 deletions(-)
 create mode 100644 src/elements/content-explorer/Date.js.flow
 rename src/elements/content-explorer/{Date.js => Date.tsx} (88%)
 create mode 100644 src/elements/content-explorer/__tests__/Date.test.tsx

diff --git a/src/elements/content-explorer/Date.js.flow b/src/elements/content-explorer/Date.js.flow
new file mode 100644
index 0000000000..6c2d7f0c8c
--- /dev/null
+++ b/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;
diff --git a/src/elements/content-explorer/Date.js b/src/elements/content-explorer/Date.tsx
similarity index 88%
rename from src/elements/content-explorer/Date.js
rename to src/elements/content-explorer/Date.tsx
index 6d9033fa3e..f7a1f08010 100644
--- a/src/elements/content-explorer/Date.js
+++ b/src/elements/content-explorer/Date.tsx
@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import Datefield from '../common/date';
@@ -6,12 +5,12 @@ 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;
diff --git a/src/elements/content-explorer/__tests__/Date.test.tsx b/src/elements/content-explorer/__tests__/Date.test.tsx
new file mode 100644
index 0000000000..23f93f6cc1
--- /dev/null
+++ b/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();
+    });
+});