fix: Use soft nav when clicking a library from studio home (#1306)

Author: bradenmacdonald

src/generic/alert-message/AlertMessage.test.jsx renamed to src/generic/alert-message/AlertMessage.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Alert } from '@openedx/paragon';
+
+interface Props extends React.ComponentPropsWithoutRef<typeof Alert> {
+  title?: string | React.ReactNode;
+  description?: string | React.ReactNode;
+}
+
+const AlertMessage: React.FC<Props> = ({ title, description, ...props }) => (
+  <Alert {...props}>
+    <Alert.Heading>{title}</Alert.Heading>
+    <span>{description}</span>
+  </Alert>
+);
+
+export default AlertMessage;

src/generic/alert-message/index.jsx

@@ -8,7 +8,7 @@ import {
   Row,
 } from '@openedx/paragon';
 import { Add as AddIcon, Error } from '@openedx/paragon/icons';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { StudioFooter } from '@edx/frontend-component-footer';
 import { getConfig } from '@edx/frontend-platform';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -28,7 +28,8 @@ import messages from './messages';
 import { useStudioHome } from './hooks';
 import AlertMessage from '../generic/alert-message';
 
-const StudioHome = ({ intl }) => {
+const StudioHome = () => {
+  const intl = useIntl();
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -46,7 +47,6 @@ const StudioHome = ({ intl }) => {
     hasAbilityToCreateNewCourse,
     isFiltered,
     setShowNewCourseContainer,
-    dispatch,
   } = useStudioHome(isPaginationCoursesEnabled);
 
   const libMode = getConfig().LIBRARY_MODE;
@@ -64,7 +64,7 @@ const StudioHome = ({ intl }) => {
   } = studioHomeData;
 
   const getHeaderButtons = useCallback(() => {
-    const headerButtons = [];
+    const headerButtons: JSX.Element[] = [];
 
     if (isFailedLoadingPage || !userIsActive) {
       return headerButtons;
@@ -160,11 +160,9 @@ const StudioHome = ({ intl }) => {
             )}
             {isShowOrganizationDropdown && <OrganizationSection />}
             <TabsSection
-              tabsData={studioHomeData}
               showNewCourseContainer={showNewCourseContainer}
               onClickNewCourse={() => setShowNewCourseContainer(true)}
               isShowProcessing={isShowProcessing && !isFiltered}
-              dispatch={dispatch}
               isPaginationCoursesEnabled={isPaginationCoursesEnabled}
             />
           </section>
@@ -203,8 +201,4 @@ const StudioHome = ({ intl }) => {
   );
 };
 
-StudioHome.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(StudioHome);
+export default StudioHome;

src/generic/alert-message/index.tsx

@@ -0,0 +1,89 @@
+import * as reactRedux from 'react-redux';
+import { getConfig } from '@edx/frontend-platform';
+
+import { studioHomeMock } from '../__mocks__';
+import messages from '../messages';
+import { trimSlashes } from './utils';
+import {
+  fireEvent,
+  initializeMocks,
+  render,
+  screen,
+} from '../../testUtils';
+import CardItem from '.';
+
+jest.spyOn(reactRedux, 'useSelector').mockImplementation(() => studioHomeMock);
+
+describe('<CardItem />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+  it('should render course details for non-library course', () => {
+    const props = studioHomeMock.archivedCourses[0];
+    render(<CardItem {...props} />);
+    expect(screen.getByText(`${props.org} / ${props.number} / ${props.run}`)).toBeInTheDocument();
+  });
+
+  it('should render correct links for non-library course', () => {
+    const props = studioHomeMock.archivedCourses[0];
+    render(<CardItem {...props} />);
+    const courseTitleLink = screen.getByText(props.displayName);
+    expect(courseTitleLink).toHaveAttribute('href', `${getConfig().STUDIO_BASE_URL}${props.url}`);
+    const btnReRunCourse = screen.getByText(messages.btnReRunText.defaultMessage);
+    expect(btnReRunCourse).toHaveAttribute('href', trimSlashes(props.rerunLink));
+    const viewLiveLink = screen.getByText(messages.viewLiveBtnText.defaultMessage);
+    expect(viewLiveLink).toHaveAttribute('href', props.lmsLink);
+  });
+
+  it('should render correct links for non-library course pagination', () => {
+    const props = studioHomeMock.archivedCourses[0];
+    render(<CardItem {...props} isPaginated />);
+    const courseTitleLink = screen.getByText(props.displayName);
+    expect(courseTitleLink).toHaveAttribute('href', `${getConfig().STUDIO_BASE_URL}${props.url}`);
+    const dropDownMenu = screen.getByTestId('toggle-dropdown');
+    fireEvent.click(dropDownMenu);
+    const btnReRunCourse = screen.getByText(messages.btnReRunText.defaultMessage);
+    expect(btnReRunCourse).toHaveAttribute('href', trimSlashes(props.rerunLink));
+    const viewLiveLink = screen.getByText(messages.viewLiveBtnText.defaultMessage);
+    expect(viewLiveLink).toHaveAttribute('href', props.lmsLink);
+  });
+  it('should render course details for library course', () => {
+    const props = { ...studioHomeMock.archivedCourses[0], isLibraries: true };
+    render(<CardItem {...props} />);
+    const courseTitleLink = screen.getByText(props.displayName);
+    expect(courseTitleLink).toHaveAttribute('href', `${getConfig().STUDIO_BASE_URL}${props.url}`);
+    expect(screen.getByText(`${props.org} / ${props.number}`)).toBeInTheDocument();
+  });
+  it('should hide rerun button if disallowed', () => {
+    const props = studioHomeMock.archivedCourses[0];
+    // Update our mocked redux data:
+    jest.spyOn(reactRedux, 'useSelector').mockImplementation(() => (
+      { ...studioHomeMock, allowCourseReruns: false }
+    ));
+    const { queryByText } = render(<CardItem {...props} />);
+    expect(queryByText(messages.btnReRunText.defaultMessage)).not.toBeInTheDocument();
+  });
+  it('should be read only course if old mongo course', () => {
+    const props = studioHomeMock.courses[1];
+    render(<CardItem {...props} />);
+    expect(screen.queryByText(props.displayName)).not.toHaveAttribute('href');
+    expect(screen.queryByText(messages.btnReRunText.defaultMessage)).not.toBeInTheDocument();
+    expect(screen.queryByText(messages.viewLiveBtnText.defaultMessage)).not.toBeInTheDocument();
+  });
+
+  it('should render course key if displayname is empty', () => {
+    const props = studioHomeMock.courses[1];
+    const courseKeyTest = 'course-key';
+    render(
+      <CardItem
+        {...props}
+        displayName=""
+        courseKey={courseKeyTest}
+        lmsLink="lmsLink"
+        rerunLink="returnLink"
+        url="url"
+      />,
+    );
+    expect(screen.getByText(courseKeyTest)).toBeInTheDocument();
+  });
+});