From 432b6f89be007709b918a1da5ca80626ccad0dae Mon Sep 17 00:00:00 2001
From: Justin Hynes <JHynes@edx.org>
Date: Wed, 5 Jan 2022 14:12:29 -0500
Subject: [PATCH] feat: Add some basic scaffolding for the bulk email tool task
 manager section of the comms MFE

[MICROBA-1621]
* Adds a section for the pending tasks section of the task manager
* Adds a section for the bulk course email task history data
* Adds a section for the bulk course email content history data
---
 .../bulk-email-tool/BulkEmailTaskManager.jsx  |  5 ---
 .../bulk-email-tool/BulkEmailTool.jsx         |  3 +-
 .../BulkEmailContentHistory.jsx               | 26 ++++++++++++++
 .../BulkEmailPendingTasks.jsx                 | 17 +++++++++
 .../BulkEmailTaskHistory.jsx                  | 26 ++++++++++++++
 .../BulkEmailTaskManager.jsx                  | 36 +++++++++++++++++++
 6 files changed, 107 insertions(+), 6 deletions(-)
 delete mode 100644 src/components/bulk-email-tool/BulkEmailTaskManager.jsx
 create mode 100644 src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx
 create mode 100644 src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasks.jsx
 create mode 100644 src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskHistory.jsx
 create mode 100644 src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskManager.jsx

diff --git a/src/components/bulk-email-tool/BulkEmailTaskManager.jsx b/src/components/bulk-email-tool/BulkEmailTaskManager.jsx
deleted file mode 100644
index fb22b33..0000000
--- a/src/components/bulk-email-tool/BulkEmailTaskManager.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default function BulkEmailTaskManager() {
-  return <div />;
-}
diff --git a/src/components/bulk-email-tool/BulkEmailTool.jsx b/src/components/bulk-email-tool/BulkEmailTool.jsx
index fa0f9da..fd673a0 100644
--- a/src/components/bulk-email-tool/BulkEmailTool.jsx
+++ b/src/components/bulk-email-tool/BulkEmailTool.jsx
@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import BulkEmailRecepient from './BulkEmailRecepient';
 import BulkEmailBody from './BulkEmailBody';
-import BulkEmailTaskManager from './BulkEmailTaskManager';
+import BulkEmailTaskManager from './bulk-email-task-manager/BulkEmailTaskManager';
 import Navigationtabs from '../navigation-tabs/NavigationTabs';
 import { getCourseHomeCourseMetadata } from './api';
 
@@ -20,6 +20,7 @@ export default function BulkEmailTool() {
     }
     fetchTabData();
   }, []);
+
   return (
     <div>
       <Navigationtabs courseId={courseId} tabData={courseTabData} />
diff --git a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx
new file mode 100644
index 0000000..859086b
--- /dev/null
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+export default function BulkEmailContentHistory() {
+  return (
+    <div>
+      <div>
+        <p>
+          <FormattedMessage
+            id="bulk.email.content.history.section.heading"
+            defaultMessage="To see the content of previously sent emails, click this button:"
+            description="Instructions for course staff and admins to view historical bulk course email content."
+          />
+        </p>
+        <button type="button" className="btn btn-outline-primary mb-2">
+          <FormattedMessage
+            id="bulk.email.view.email.content.history.button"
+            defaultMessage="Show Sent Email History"
+            description="Button that displays a table with historical sent email data for this course-run"
+          />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasks.jsx b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasks.jsx
new file mode 100644
index 0000000..b752196
--- /dev/null
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasks.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+export default function BulkEmailPendingTasks() {
+  return (
+    <div>
+      <p>
+        <FormattedMessage
+          id="bulk.email.pending.tasks.section.info"
+          defaultMessage="Email actions run in the background. The status for any active tasks - including email tasks - appears in the table below"
+          description="A section to see pending and executing Instructor Tasks"
+        />
+      </p>
+    </div>
+  );
+}
diff --git a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskHistory.jsx b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskHistory.jsx
new file mode 100644
index 0000000..53eb295
--- /dev/null
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskHistory.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+export default function BulkEmailTaskHistory() {
+  return (
+    <div>
+      <div>
+        <p>
+          <FormattedMessage
+            id="bulk.email.task.history.section.heading"
+            defaultMessage="To see the status for all email tasks submitted for this course, click this button:"
+            description="Instructions for course staff and admins to view historical bulk course email task data"
+          />
+        </p>
+        <button type="button" className="btn btn-outline-primary mb-2">
+          <FormattedMessage
+            id="bulk.email.view.task.history.button"
+            defaultMessage="Show Task Email History"
+            description="Button that displays a table with historical bulk email task data for a course-run"
+          />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskManager.jsx b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskManager.jsx
new file mode 100644
index 0000000..535c7f6
--- /dev/null
+++ b/src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskManager.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import BulkEmailContentHistory from './BulkEmailContentHistory';
+import BulkEmailPendingTasks from './BulkEmailPendingTasks';
+import BulkEmailTaskHistory from './BulkEmailTaskHistory';
+
+export default function BulkEmailTaskManager() {
+  return (
+    <div className="px-5">
+      <div>
+        <h2 className="h3">
+          <FormattedMessage
+            id="bulk.email.pending.tasks.section.heading"
+            defaultMessage="Pending Tasks"
+            description="A section to see pending and executing Instructor Tasks"
+          />
+        </h2>
+        <BulkEmailPendingTasks />
+      </div>
+      <div>
+        <h2 className="h3">
+          <FormattedMessage
+            id="bulk.email.task.manager.heading"
+            defaultMessage="Email Task History"
+            description="Title of the Email task History section of the Bulk Course Email tool"
+          />
+        </h2>
+        <BulkEmailContentHistory />
+      </div>
+      <div>
+        <BulkEmailTaskHistory />
+      </div>
+    </div>
+  );
+}