diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
index a0129b5c16..2280c6305a 100644
--- a/src/library-authoring/data/api.ts
+++ b/src/library-authoring/data/api.ts
@@ -34,6 +34,8 @@ export interface ContentLibrary {
hasUnpublishedDeletes: boolean;
canEditLibrary: boolean;
license: string;
+ created: Date;
+ updated: Date;
}
export interface LibraryBlockType {
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 (
-
+
Published section
-
+
{intl.formatMessage(messages.organizationSectionTitle)}
-
-
- Library History Section
-
+
+ {orgName}
+
+
+
+
+ {intl.formatMessage(messages.libraryHistorySectionTitle)}
+
+
+
+ {intl.formatMessage(messages.lastModifiedLabel)}
+
+
+ {convertToStringFromDateAndFormat(updatedAt, COMMA_SEPARATED_DATE_FORMAT)}
+
+
+
+
+ {intl.formatMessage(messages.createdLabel)}
+
+
+ {convertToStringFromDateAndFormat(createdAt, COMMA_SEPARATED_DATE_FORMAT)}
+
+
+
);
};
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': ,
- 'info': ,
+ 'info': ,
unknown: null,
};
@@ -45,7 +49,7 @@ const LibrarySidebar = ({library}: LibrarySidebarProps) => {
const buildHeader = (): React.ReactNode | null => headerComponentMap[sidebarBodyComponent || 'unknown'];
return (
-
+
{buildHeader()}
{
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];