diff --git a/src/Header.messages.jsx b/src/Header.messages.jsx
index c05b5980f..a5ff3a589 100644
--- a/src/Header.messages.jsx
+++ b/src/Header.messages.jsx
@@ -61,6 +61,11 @@ const messages = defineMessages({
defaultMessage: 'Studio Home',
description: 'Link to the Studio Home',
},
+ 'header.user.menu.studio.maintenance': {
+ id: 'header.user.menu.studio.maintenance',
+ defaultMessage: 'Maintenance',
+ description: 'Link to the Studio Maintenance',
+ },
'header.label.account.nav': {
id: 'header.label.account.nav',
defaultMessage: 'Account',
diff --git a/src/studio-header/StudioHeader.test.jsx b/src/studio-header/StudioHeader.test.jsx
index b020422cd..793f91ab7 100644
--- a/src/studio-header/StudioHeader.test.jsx
+++ b/src/studio-header/StudioHeader.test.jsx
@@ -12,6 +12,7 @@ import { Context as ResponsiveContext } from 'react-responsive';
import { MemoryRouter } from 'react-router-dom';
import StudioHeader from './StudioHeader';
+import messages from './messages';
const authenticatedUser = {
userId: 3,
@@ -114,6 +115,16 @@ describe('Header', () => {
expect(dropdownOption).toBeVisible();
});
+ it('maintenance should not be in user menu', async () => {
+ currentUser = { ...authenticatedUser, administrator: false };
+ const { getAllByRole, queryByText } = render();
+ const userMenu = getAllByRole('button')[1];
+ await waitFor(() => fireEvent.click(userMenu));
+ const maintenanceButton = queryByText(messages['header.user.menu.maintenance'].defaultMessage);
+
+ expect(maintenanceButton).toBeNull();
+ });
+
it('user menu should use avatar icon', async () => {
currentUser = { ...authenticatedUser, avatar: null };
const { getByTestId } = render();
@@ -175,6 +186,15 @@ describe('Header', () => {
expect(desktopMenu).toBeNull();
});
+ it('maintenance should be in user menu', async () => {
+ const { getAllByRole, getByText } = render();
+ const userMenu = getAllByRole('button')[1];
+ await waitFor(() => fireEvent.click(userMenu));
+ const maintenanceButton = getByText(messages['header.user.menu.maintenance'].defaultMessage);
+
+ expect(maintenanceButton).toBeVisible();
+ });
+
it('user menu should use avatar image', async () => {
const { getByTestId } = render();
const avatarImage = getByTestId('avatar-image');
diff --git a/src/studio-header/messages.js b/src/studio-header/messages.js
index b57f7eac0..b3fc522a8 100644
--- a/src/studio-header/messages.js
+++ b/src/studio-header/messages.js
@@ -6,6 +6,11 @@ const messages = defineMessages({
defaultMessage: 'Studio Home',
description: 'Link to Studio Home',
},
+ 'header.user.menu.maintenance': {
+ id: 'header.user.menu.maintenance',
+ defaultMessage: 'Maintenance',
+ description: 'Link to the Studio maintenance page',
+ },
'header.user.menu.logout': {
id: 'header.user.menu.logout',
defaultMessage: 'Logout',
diff --git a/src/studio-header/utils.js b/src/studio-header/utils.js
index f30b12689..e95f03c4b 100644
--- a/src/studio-header/utils.js
+++ b/src/studio-header/utils.js
@@ -1,3 +1,4 @@
+import { getConfig } from '@edx/frontend-platform';
import messages from './messages';
const getUserMenuItems = ({
@@ -20,6 +21,9 @@ const getUserMenuItems = ({
{
href: `${studioBaseUrl}`,
title: intl.formatMessage(messages['header.user.menu.studio']),
+ }, {
+ href: `${getConfig().STUDIO_BASE_URL}/maintenance`,
+ title: intl.formatMessage(messages['header.user.menu.maintenance']),
}, {
href: `${logoutUrl}`,
title: intl.formatMessage(messages['header.user.menu.logout']),