From 473fc27353dc20630a4d1646bda4d84aea172b03 Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Wed, 3 Jul 2024 18:35:53 +0200
Subject: [PATCH] feat: Library history section of info sidebar added

---
 src/library-authoring/data/api.ts             |  2 +
 .../library-info/LibraryInfo.tsx              | 43 ++++++++++++++++---
 .../library-info/messages.ts                  | 15 +++++++
 .../library-sidebar/LibrarySidebar.tsx        |  8 +++-
 src/utils.js                                  | 15 +++++++
 5 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
index c95dba74b5..fab13829b4 100644
--- a/src/library-authoring/data/api.ts
+++ b/src/library-authoring/data/api.ts
@@ -28,6 +28,8 @@ export interface ContentLibrary {
   hasUnpublishedDeletes: boolean;
   canEditLibrary: boolean;
   license: string;
+  created: Date;
+  updated: Date;
 }
 
 export interface CreateBlockDataRequest {
diff --git a/src/library-authoring/library-info/LibraryInfo.tsx b/src/library-authoring/library-info/LibraryInfo.tsx
index 0553a10553..31f76e59cc 100644
--- a/src/library-authoring/library-info/LibraryInfo.tsx
+++ b/src/library-authoring/library-info/LibraryInfo.tsx
@@ -2,23 +2,52 @@ import { Stack } from "@openedx/paragon";
 import { useIntl } from '@edx/frontend-platform/i18n';
 import React from "react";
 import messages from "./messages";
+import { convertToStringFromDateAndFormat } from "../../utils";
+import { COMMA_SEPARATED_DATE_FORMAT } from "../../constants";
 
-const LibraryInfo = () => {
+type LibraryInfoProps = {
+  orgName: string,
+  createdAt: Date,
+  updatedAt: Date,
+};
+
+const LibraryInfo = ({ orgName, createdAt, updatedAt } : LibraryInfoProps) => {
   const intl = useIntl();
 
   return (
-    <Stack direction='vertical'>
+    <Stack direction='vertical' gap={2.5}>
       <div>
         Published section
       </div>
-      <div>
+      <Stack direction='vertical'>
         <span className="font-weight-bold">
           {intl.formatMessage(messages.organizationSectionTitle)}
         </span>
-      </div>
-      <div>
-        Library History Section
-      </div>
+        <span>
+          {orgName}
+        </span>
+      </Stack>
+      <Stack>
+        <span className="font-weight-bold">
+          {intl.formatMessage(messages.libraryHistorySectionTitle)}
+        </span>
+        <Stack>
+          <span className="small text-gray-500">
+            {intl.formatMessage(messages.lastModifiedLabel)}
+          </span>
+          <span className="small">
+            {convertToStringFromDateAndFormat(updatedAt, COMMA_SEPARATED_DATE_FORMAT)}
+          </span>
+        </Stack>
+        <Stack>
+          <span className="small text-gray-500">
+            {intl.formatMessage(messages.createdLabel)}
+          </span>
+          <span className="small">
+            {convertToStringFromDateAndFormat(createdAt, COMMA_SEPARATED_DATE_FORMAT)}
+          </span>
+        </Stack>
+      </Stack>
     </Stack>
   );
 };
diff --git a/src/library-authoring/library-info/messages.ts b/src/library-authoring/library-info/messages.ts
index f1f0400beb..d5854ff77d 100644
--- a/src/library-authoring/library-info/messages.ts
+++ b/src/library-authoring/library-info/messages.ts
@@ -11,6 +11,21 @@ const messages = defineMessages({
     defaultMessage: 'Organization',
     description: 'Title for Organization section in Library info sidebar.'
   },
+  libraryHistorySectionTitle: {
+    id: 'course-authoring.library-authoring.sidebar.info.history.title',
+    defaultMessage: 'Library History',
+    description: 'Title for Library History section in Library info sidebar.'
+  },
+  lastModifiedLabel: {
+    id: 'course-authoring.library-authoring.sidebar.info.history.last-modified',
+    defaultMessage: 'Last Modified',
+    description: 'Last Modified label used in Library History section.'
+  },
+  createdLabel: {
+    id: 'course-authoring.library-authoring.sidebar.info.history.created',
+    defaultMessage: 'Created',
+    description: 'Created label used in Library History section.'
+  }, 
 });
 
 export default messages;
diff --git a/src/library-authoring/library-sidebar/LibrarySidebar.tsx b/src/library-authoring/library-sidebar/LibrarySidebar.tsx
index 135b1f6a3a..0ec0b487c6 100644
--- a/src/library-authoring/library-sidebar/LibrarySidebar.tsx
+++ b/src/library-authoring/library-sidebar/LibrarySidebar.tsx
@@ -31,7 +31,11 @@ const LibrarySidebar = ({library}: LibrarySidebarProps) => {
 
   const bodyComponentMap = {
     'add-content': <AddContentContainer />,
-    'info': <LibraryInfo />,
+    'info': <LibraryInfo
+              orgName={library.org}
+              createdAt={library.created}
+              updatedAt={library.updated}
+            />,
     unknown: null,
   };
 
@@ -45,7 +49,7 @@ const LibrarySidebar = ({library}: LibrarySidebarProps) => {
   const buildHeader = (): React.ReactNode | null => headerComponentMap[sidebarBodyComponent || 'unknown'];
 
   return (
-    <div className="p-2 vh-100">
+    <div className="p-2 vh-100 text-primary-700">
       <Stack direction="horizontal" className="d-flex justify-content-between">
         {buildHeader()}
         <IconButton
diff --git a/src/utils.js b/src/utils.js
index 2abb63e5be..f1995ee991 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -284,6 +284,21 @@ export const convertToStringFromDate = (date) => {
   return moment(date).format(DATE_TIME_FORMAT);
 };
 
+export const convertToStringFromDateAndFormat = (date, format) => {
+  /**
+   * Convert local time to UTC string from react-datepicker in a format
+   * Note: react-datepicker has a bug where it only interacts with local time
+   * @param {Date} date - date in local time
+   * @param {string} format - format of the date
+   * @return {string} date converted in string in the desired format
+   */
+  if (!date) {
+    return '';
+  }
+
+  return moment(date).format(format);
+};
+
 export const isValidDate = (date) => {
   const formattedValue = convertToStringFromDate(date).split('T')[0];