diff --git a/src/studio-home/StudioHome.jsx b/src/studio-home/StudioHome.jsx
index f67088aea..01b3e5c8c 100644
--- a/src/studio-home/StudioHome.jsx
+++ b/src/studio-home/StudioHome.jsx
@@ -74,24 +74,27 @@ const StudioHome = ({ intl }) => {
}
if (redirectToLibraryAuthoringMfe) {
libraryHref = `${libraryAuthoringMfeUrl}/create`;
+ headerButtons.push(
+ ,
+ );
}
- headerButtons.push(
- ,
- );
return headerButtons;
}
const headerButtons = userIsActive ? getHeaderButtons() : [];
+ if (isLoadingPage) {
+ return ();
+ }
return (
<>
@@ -118,22 +121,16 @@ const StudioHome = ({ intl }) => {
>
- {isLoadingPage ? (
-
- ) : (
- <>
- {showNewCourseContainer && (
- setShowNewCourseContainer(false)} />
- )}
- {isShowOrganizationDropdown && }
- setShowNewCourseContainer(true)}
- isShowProcessing={isShowProcessing}
- />
- >
+ {showNewCourseContainer && (
+ setShowNewCourseContainer(false)} />
)}
+ {isShowOrganizationDropdown && }
+ setShowNewCourseContainer(true)}
+ isShowProcessing={isShowProcessing}
+ />
diff --git a/src/studio-home/StudioHome.test.jsx b/src/studio-home/StudioHome.test.jsx
index 74a47665a..c2fd189e7 100644
--- a/src/studio-home/StudioHome.test.jsx
+++ b/src/studio-home/StudioHome.test.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import { useSelector } from 'react-redux';
-import { getConfig, initializeMockApp } from '@edx/frontend-platform';
+import { initializeMockApp } from '@edx/frontend-platform';
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
import { AppProvider } from '@edx/frontend-platform/react';
@@ -116,31 +116,21 @@ describe('', async () => {
});
describe('render new library button', () => {
- it('href should include #libraries-tab', async () => {
+ it('should not show button', async () => {
useSelector.mockReturnValue({
...studioHomeMock,
courseCreatorStatus: COURSE_CREATOR_STATES.granted,
});
- const { getByTestId } = render();
- const createNewLibraryButton = getByTestId('new-library-button');
- expect(createNewLibraryButton.getAttribute('href')).toBe(`${getConfig().STUDIO_BASE_URL}/home#libraries-tab`);
- });
- it('href should include home_library', async () => {
- useSelector.mockReturnValue({
- ...studioHomeMock,
- courseCreatorStatus: COURSE_CREATOR_STATES.granted,
- splitStudioHome: true,
- });
-
- const { getByTestId } = render();
- const createNewLibraryButton = getByTestId('new-library-button');
- expect(createNewLibraryButton.getAttribute('href')).toBe(`${getConfig().STUDIO_BASE_URL}/home_library`);
+ const { queryByTestId } = render();
+ const createNewLibraryButton = queryByTestId('new-library-button');
+ expect(createNewLibraryButton).toBeNull();
});
it('href should include create', async () => {
useSelector.mockReturnValue({
...studioHomeMock,
courseCreatorStatus: COURSE_CREATOR_STATES.granted,
+ splitStudioHome: true,
redirectToLibraryAuthoringMfe: true,
});
const libraryAuthoringMfeUrl = 'http://localhost:3001';
@@ -160,10 +150,8 @@ describe('', async () => {
const { getByRole, getByText } = render();
const createNewCourseButton = getByRole('button', { name: messages.addNewCourseBtnText.defaultMessage });
- fireEvent.click(createNewCourseButton);
- waitFor(() => {
- expect(getByText(createNewCourseMessages.createNewCourse.defaultMessage)).toBeInTheDocument();
- });
+ await act(() => fireEvent.click(createNewCourseButton));
+ expect(getByText(createNewCourseMessages.createNewCourse.defaultMessage)).toBeInTheDocument();
});
it('should hide create new course container', async () => {
@@ -187,6 +175,45 @@ describe('', async () => {
});
});
+ describe('contact administrator card', () => {
+ it('should show contact administrator card with no add course buttons', () => {
+ useSelector.mockReturnValue({
+ ...studioHomeMock,
+ courses: null,
+ courseCreatorStatus: COURSE_CREATOR_STATES.pending,
+ });
+ const { getByText, queryByText } = render();
+ const defaultTitleMessage = messages.defaultSection_1_Title.defaultMessage;
+ const titleWithStudioName = defaultTitleMessage.replace('{studioShortName}', 'Studio');
+ const administratorCardTitle = getByText(titleWithStudioName);
+
+ expect(administratorCardTitle).toBeVisible();
+
+ const addCourseButton = queryByText(messages.btnAddNewCourseText.defaultMessage);
+ expect(addCourseButton).toBeNull();
+ });
+
+ it('should show contact administrator card with add course buttons', () => {
+ useSelector.mockReturnValue({
+ ...studioHomeMock,
+ courses: null,
+ courseCreatorStatus: COURSE_CREATOR_STATES.granted,
+ });
+ const { getByText, getByTestId } = render();
+ const defaultTitleMessage = messages.defaultSection_1_Title.defaultMessage;
+ const titleWithStudioName = defaultTitleMessage.replace('{studioShortName}', 'Studio');
+ const administratorCardTitle = getByText(titleWithStudioName);
+
+ expect(administratorCardTitle).toBeVisible();
+
+ const addCourseButton = getByTestId('contact-admin-create-course');
+ expect(addCourseButton).toBeVisible();
+
+ fireEvent.click(addCourseButton);
+ expect(getByTestId('create-course-form')).toBeVisible();
+ });
+ });
+
it('should show footer', () => {
const { getByText } = render();
expect(getByText('Looking for help with Studio?')).toBeInTheDocument();
diff --git a/src/studio-home/create-new-course-form/index.jsx b/src/studio-home/create-new-course-form/index.jsx
index f0b255bfe..b4c80f15c 100644
--- a/src/studio-home/create-new-course-form/index.jsx
+++ b/src/studio-home/create-new-course-form/index.jsx
@@ -15,7 +15,7 @@ const CreateNewCourseForm = ({ handleOnClickCancel }) => {
};
return (
-