Add date_created Field to Entity and Display in Metadata Component

pontoon/base/models.py

@@ -3076,6 +3076,7 @@ def map_entities(
                     "translation": translation_array,
                     "readonly": entity.resource.project.projectlocale[0].readonly,
                     "is_sibling": is_sibling,
+                    "date_created": entity.date_created,
                 }
             )
 

pontoon/base/tests/models/test_entity.py

@@ -327,6 +327,7 @@ def test_entity_project_locale_no_paths(
         "machinery_original": str(entity_a.string),
         "readonly": False,
         "is_sibling": False,
+        "date_created": entity_a.date_created,
     }
     assert entities[0] == expected
 

translate/public/locale/en-US/translate.ftl

@@ -279,6 +279,9 @@ entitydetails-Metadata--placeholder =
 entitydetails-Metadata--attribute =
     .title = FLUENT ATTRIBUTE
 
+entitydetails-Metadata--entity-created-date =
+    .title = CREATED
+
 ## Entity Details ContextIssueButton
 ## Shows the request context or report issue button
 

translate/src/api/entity.ts

@@ -30,6 +30,7 @@ export type Entity = {
   readonly translation: Array<EntityTranslation>;
   readonly readonly: boolean;
   readonly isSibling: boolean;
+  readonly date_created: string;
 };
 
 /**

translate/src/context/EntityView.tsx

@@ -31,6 +31,7 @@ const emptyEntity: Entity = {
   translation: [],
   readonly: true,
   isSibling: false,
+  date_created: '',
 };
 
 export type EntityView = {

translate/src/modules/entitydetails/components/EntityDetails.test.js

@@ -14,6 +14,7 @@ const ENTITY = (pk) => ({
   translation: [{ string: 'test', errors: [], warnings: [] }],
   project: { contact: '' },
   comment: '',
+  date_created: new Date().toISOString(),
 });
 
 function mockEntityDetails(pk) {

translate/src/modules/entitydetails/components/Metadata.test.js

@@ -20,6 +20,7 @@ const ENTITY = {
     slug: 'callme',
     name: 'CallMe',
   },
+  date_created: new Date().toISOString(),
 };
 
 const LOCALE = {

translate/src/modules/entitydetails/components/Metadata.tsx

@@ -86,6 +86,36 @@ function GroupComment({ comment }: { comment: string }) {
   );
 }
 
+function EntityCreatedDate({ dateCreated }: { dateCreated: string }) {
+  // Create date and time formatters
+  const dateFormatter = new Intl.DateTimeFormat('en-US', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  });
+  const timeFormatter = new Intl.DateTimeFormat('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+
+  // Create a Date object from the dateCreated string
+  const date = new Date(dateCreated);
+
+  // Format the date and time
+  const formattedDate = dateFormatter.format(date);
+  const formattedTime = timeFormatter.format(date);
+
+  // Combine the formatted date and time into one string
+  const formattedDateTime = `${formattedDate} ${formattedTime}`;
+
+  return (
+    <Datum id='entity-created-date' title='CREATED'>
+      {formattedDateTime}
+    </Datum>
+  );
+}
+
 function ResourceComment({ comment }: { comment: string }) {
   const ref = React.useRef<HTMLDivElement>(null);
   const [overflow, setOverflow] = React.useState(false);
@@ -243,6 +273,7 @@ export function Metadata({
         localeCode={code}
         navigateToPath={navigateToPath}
       />
+      <EntityCreatedDate dateCreated={entity.date_created} />
     </div>
   );
 }