From 37f2d5ac010ace56139dc0943b188b4e1444ac9c Mon Sep 17 00:00:00 2001
From: andrey-canon <andrey.canon@edunext.co>
Date: Wed, 1 Oct 2025 13:22:38 -0500
Subject: [PATCH] feat: add report button component

---
 src/courseware/course/sequence/Sequence.jsx      | 3 ++-
 src/courseware/course/sequence/Sequence.scss     | 5 +++++
 src/courseware/course/sequence/Sequence.test.jsx | 4 ++--
 src/index.scss                                   | 1 +
 4 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 src/courseware/course/sequence/Sequence.scss

diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index bdd506b826..0170ac1798 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -9,7 +9,7 @@ import {
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSelector } from 'react-redux';
 import SequenceExamWrapper from '@edx/frontend-lib-special-exams';
-import { LikeDislikeUnit } from '@edunext/frontend-essentials';
+import { ReportButton, LikeDislikeUnit } from '@edunext/frontend-essentials';
 
 import PageLoading from '@src/generic/PageLoading';
 import { useModel } from '@src/generic/model-store';
@@ -211,6 +211,7 @@ const Sequence = ({
               <>
                 <div className="nelp-container">
                   <LikeDislikeUnit courseId={courseId} unitId={unitId} />
+                  <ReportButton courseId={courseId} unitId={unitId} />
                 </div>
                 {renderUnitNavigation(false)}
               </>
diff --git a/src/courseware/course/sequence/Sequence.scss b/src/courseware/course/sequence/Sequence.scss
new file mode 100644
index 0000000000..2856a1b8cb
--- /dev/null
+++ b/src/courseware/course/sequence/Sequence.scss
@@ -0,0 +1,5 @@
+.nelp-container {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+}
diff --git a/src/courseware/course/sequence/Sequence.test.jsx b/src/courseware/course/sequence/Sequence.test.jsx
index d61255d8f6..f2c6adbf87 100644
--- a/src/courseware/course/sequence/Sequence.test.jsx
+++ b/src/courseware/course/sequence/Sequence.test.jsx
@@ -106,7 +106,7 @@ describe('Sequence', () => {
     waitFor(() => {
       expect(screen.queryByText('Loading locked content messaging...')).toBeInTheDocument();
       // `Previous`, `Prerequisite` and `Close Tray` buttons.
-      expect(screen.getAllByRole('button').length).toEqual(5); // two more buttons like and dislike
+      expect(screen.getAllByRole('button').length).toEqual(6); // three more buttons like, dislike and report
       // `Next` button.
       expect(screen.getAllByRole('link').length).toEqual(1);
 
@@ -162,7 +162,7 @@ describe('Sequence', () => {
     waitFor(() => {
       expect(screen.findByText('Loading learning sequence...')).toBeInTheDocument();
       // `Previous`, `Prerequisite` and `Close Tray` buttons.
-      expect(screen.getAllByRole('button')).toHaveLength(5); // two more buttons like and dislike
+      expect(screen.getAllByRole('button')).toHaveLength(6); // three more buttons like, dislike and report
       // Renders `Next` button.
       expect(screen.getAllByRole('link')).toHaveLength(1);
 
diff --git a/src/index.scss b/src/index.scss
index 9264797e71..f93c2560b5 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -473,3 +473,4 @@
 @import "course-tabs/course-tabs-navigation.scss";
 @import "courseware/course/sidebar/common/SidebarBase.scss";
 @import "courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss";
+@import "courseware/course/sequence/Sequence.scss";