fix(stepper): hide success icon on failure

Author: navinkarkera

src/generic/course-stepper/CourseStepper.test.tsx

@@ -1,5 +1,8 @@
 import { render, screen, initializeMocks } from '@src/testUtils';
 
+import { Icon } from '@openedx/paragon';
+import { ManageHistory as SuccessIcon, Settings as SettingsIcon } from '@openedx/paragon/icons';
+
 import CourseStepper from '.';
 
 const stepsMock = [
@@ -84,6 +87,18 @@ describe('<CourseStepper />', () => {
     expect(errorStep).toHaveClass('error');
   });
 
+  it('shows neutral pending icon instead of success icon on the final step when an earlier step has an error', () => {
+    renderComponent({ activeKey: 1, hasError: true, errorMessage: 'Export failed' });
+
+    const lastStepIcon = screen.getByTestId('Success-icon').querySelector('svg');
+    // Render reference icons to compare the actual svg markup being shown
+    const { container: successRef } = render(<Icon src={SuccessIcon} />);
+    const { container: settingsRef } = render(<Icon src={SettingsIcon} />);
+
+    expect(lastStepIcon?.outerHTML).not.toEqual(successRef.querySelector('svg')?.outerHTML);
+    expect(lastStepIcon?.outerHTML).toEqual(settingsRef.querySelector('svg')?.outerHTML);
+  });
+
   it('shows percentage for active step', () => {
     const percent = 50;
     renderComponent({ activeKey: 1, percent });

src/generic/course-stepper/index.tsx

@@ -42,7 +42,7 @@ const CourseStepper = ({
       if (hasError && isActiveStep) {
         return ErrorIcon;
       }
-      if (isLastStep && !isActiveStep) {
+      if (isLastStep && !isActiveStep && !hasError) {
         return SuccessIcon;
       }
       if (isLastStepDone) {