fix: getting course-id when public path is set (#127)

src/components/bulk-email-tool/BulkEmailTool.jsx

@@ -22,7 +22,7 @@ export default function BulkEmailTool() {
           <NavigationTabs courseId={courseId} tabData={courseMetadata.tabs} />
           <BulkEmailProvider>
             <Container size="md">
-              <BackToInstructor />
+              <BackToInstructor courseId={courseId} />
               <div className="row pb-4.5">
                 <h1 className="text-primary-500" id="main-content">
                   <FormattedMessage

src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailPendingTasksAlert.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import { getConfig } from '@edx/frontend-platform';
 import { Hyperlink, Alert } from '@edx/paragon';
 import { WarningFilled } from '@edx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-export default function BulkEmailPendingTasksAlert() {
+export default function BulkEmailPendingTasksAlert(props) {
+  const { courseId } = props;
+
   return (
     <Alert variant="warning" icon={WarningFilled}>
       <FormattedMessage
@@ -13,7 +16,7 @@ export default function BulkEmailPendingTasksAlert() {
         defaultMessage="To view all pending tasks, including email, visit&nbsp;"
       />
       <Hyperlink
-        destination={`${getConfig().LMS_BASE_URL}/courses/${window.location.pathname.split('/')[2]}/instructor#view-course-info`}
+        destination={`${getConfig().LMS_BASE_URL}/courses/${courseId}/instructor#view-course-info`}
         target="_blank"
         isInline
         showLaunchIcon={false}
@@ -31,3 +34,7 @@ export default function BulkEmailPendingTasksAlert() {
 
   );
 }
+
+BulkEmailPendingTasksAlert.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};

src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskManager.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
@@ -8,7 +9,7 @@ import messages from './messages';
 import BulkEmailScheduledEmailsTable from './bulk-email-scheduled-emails-table';
 import BulkEmailPendingTasksAlert from './BulkEmailPendingTasksAlert';
 
-function BulkEmailTaskManager({ intl }) {
+function BulkEmailTaskManager({ intl, courseId }) {
   return (
     <div className="w-100">
       {getConfig().SCHEDULE_EMAIL_SECTION && (
@@ -26,7 +27,7 @@ function BulkEmailTaskManager({ intl }) {
       </div>
       <div className="border-top border-primary-500 pt-4.5">
         <h2 className="h3 mb-4 text-primary-500">{intl.formatMessage(messages.pendingTasksHeader)}</h2>
-        <BulkEmailPendingTasksAlert />
+        <BulkEmailPendingTasksAlert courseId={courseId} />
       </div>
     </div>
   );
@@ -34,6 +35,7 @@ function BulkEmailTaskManager({ intl }) {
 
 BulkEmailTaskManager.propTypes = {
   intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
 };
 
 export default injectIntl(BulkEmailTaskManager);

src/components/bulk-email-tool/bulk-email-task-manager/test/BulkEmailPendingTasksAlert.test.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import BulkEmailPendingTasksAlert from '../BulkEmailPendingTasksAlert';
+import {
+  initializeMockApp, render, screen,
+} from '../../../../setupTest';
+
+describe('Testing BulkEmailPendingTasksAlert Component', () => {
+  beforeAll(async () => {
+    await initializeMockApp();
+  });
+
+  test('Render without Public path', async () => {
+    render(<BulkEmailPendingTasksAlert courseId="test-course-id" />);
+
+    const linkEl = await screen.findByText('Course Info');
+    expect(linkEl.href).toEqual('http://localhost:18000/courses/test-course-id/instructor#view-course-info');
+  });
+
+  test('Render with Public path', async () => {
+    Object.defineProperty(window, 'location', {
+      get() {
+        return { pathname: '/communications/courses/test-course-id/bulk-email' };
+      },
+    });
+
+    render(<BulkEmailPendingTasksAlert courseId="test-course-id" />);
+
+    const linkEl = await screen.findByText('Course Info');
+    expect(linkEl.href).toEqual('http://localhost:18000/courses/test-course-id/instructor#view-course-info');
+    expect(window.location.pathname).toEqual('/communications/courses/test-course-id/bulk-email');
+  });
+});

src/components/navigation-tabs/BackToInstructor.jsx

@@ -1,16 +1,19 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button, Icon } from '@edx/paragon';
 import { ArrowBack } from '@edx/paragon/icons';
 
-export default function BackToInstructor() {
+export default function BackToInstructor(props) {
+  const { courseId } = props;
+
   return (
     <Button
       variant="tertiary"
       className="mb-4.5 ml-n4.5 text-primary-500"
-      href={`${getConfig().LMS_BASE_URL}/courses/${window.location.pathname.split('/')[2]}/instructor#view-course-info`}
+      href={`${getConfig().LMS_BASE_URL}/courses/${courseId}/instructor#view-course-info`}
     >
       <Icon
         src={ArrowBack}
@@ -24,3 +27,7 @@ export default function BackToInstructor() {
     </Button>
   );
 }
+
+BackToInstructor.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};

src/components/navigation-tabs/BackToInstructor.test.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import BackToInstructor from './BackToInstructor';
+import {
+  initializeMockApp, render, screen,
+} from '../../setupTest';
+
+describe('Testing BackToInstructor Component', () => {
+  beforeAll(async () => {
+    await initializeMockApp();
+  });
+
+  test('Render without Public path', async () => {
+    render(<BackToInstructor courseId="test-course-id" />);
+
+    const linkEl = await screen.findByText('Back to Instructor Dashboard');
+    expect(linkEl.href).toEqual('http://localhost:18000/courses/test-course-id/instructor#view-course-info');
+  });
+
+  test('Render with Public path', async () => {
+    Object.defineProperty(window, 'location', {
+      get() {
+        return { pathname: '/communications/courses/test-course-id/bulk-email' };
+      },
+    });
+
+    render(<BackToInstructor courseId="test-course-id" />);
+
+    const linkEl = await screen.findByText('Back to Instructor Dashboard');
+    expect(linkEl.href).toEqual('http://localhost:18000/courses/test-course-id/instructor#view-course-info');
+    expect(window.location.pathname).toEqual('/communications/courses/test-course-id/bulk-email');
+  });
+});