feat: allow runtieme configuration (#586)

Allows frontend-app-profile to be configured at
runtime using the LMS's new MFE Configuration API.

Part of https://github.com/openedx/frontend-wg/issues/103
This commit is contained in:
Diana Olarte
2022-10-17 11:13:59 -05:00
committed by GitHub
parent f732fa7ffc
commit 4f00bc43b9
11 changed files with 614 additions and 293 deletions

23
src/head/Head.jsx Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import { Helmet } from 'react-helmet';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { getConfig } from '@edx/frontend-platform';
import messages from './messages';
function Head({ intl }) {
return (
<Helmet>
<title>
{intl.formatMessage(messages['profile.page.title'], { siteName: getConfig().SITE_NAME })}
</title>
<link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
</Helmet>
);
}
Head.propTypes = {
intl: intlShape.isRequired,
};
export default injectIntl(Head);

17
src/head/Head.test.jsx Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import { IntlProvider } from '@edx/frontend-platform/i18n';
import { Helmet } from 'react-helmet';
import { mount } from 'enzyme';
import { getConfig } from '@edx/frontend-platform';
import Head from './Head';
describe('Head', () => {
const props = {};
it('should match render title tag and favicon with the site configuration values', () => {
mount(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
const helmet = Helmet.peek();
expect(helmet.title).toEqual(`Profile | ${getConfig().SITE_NAME}`);
expect(helmet.linkTags[0].rel).toEqual('shortcut icon');
expect(helmet.linkTags[0].href).toEqual(getConfig().FAVICON_URL);
});
});

11
src/head/messages.js Normal file
View File

@@ -0,0 +1,11 @@
import { defineMessages } from '@edx/frontend-platform/i18n';
const messages = defineMessages({
'profile.page.title': {
id: 'profile.page.title',
defaultMessage: 'Profile | {siteName}',
description: 'Title tag',
},
});
export default messages;

View File

@@ -25,10 +25,12 @@ import { ProfilePage, NotFoundPage } from './profile';
import configureStore from './data/configureStore';
import './index.scss';
import Head from './head/Head';
subscribe(APP_READY, () => {
ReactDOM.render(
<AppProvider store={configureStore()}>
<Head />
<Header />
<main>
<Switch>

View File

@@ -120,12 +120,8 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
<p
className="mb-0"
>
<span>
Member since
<span>
2017
</span>
</span>
Member since
2017
</p>
<hr
className="d-none d-md-block"
@@ -202,12 +198,8 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
<p
className="mb-0"
>
<span>
Member since
<span>
2017
</span>
</span>
Member since
2017
</p>
<hr
className="d-none d-md-block"
@@ -2346,9 +2338,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
<p
className="small mb-0"
>
<span>
From
</span>
From
</p>
<p
className="h6 mb-4"
@@ -2361,12 +2351,8 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
<p
className="small mb-2"
>
<span>
Completed on
<span>
3/4/2019
</span>
</span>
Completed on
3/4/2019
</p>
<div>
<a
@@ -2515,12 +2501,8 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
<p
className="mb-0"
>
<span>
Member since
<span>
2017
</span>
</span>
Member since
2017
</p>
<hr
className="d-none d-md-block"
@@ -2597,12 +2579,8 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
<p
className="mb-0"
>
<span>
Member since
<span>
2017
</span>
</span>
Member since
2017
</p>
<hr
className="d-none d-md-block"
@@ -3535,9 +3513,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
<p
className="small mb-0"
>
<span>
From
</span>
From
</p>
<p
className="h6 mb-4"
@@ -3550,12 +3526,8 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
<p
className="small mb-2"
>
<span>
Completed on
<span>
3/4/2019
</span>
</span>
Completed on
3/4/2019
</p>
<div>
<a
@@ -3704,12 +3676,8 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
<p
className="mb-0"
>
<span>
Member since
<span>
2017
</span>
</span>
Member since
2017
</p>
<hr
className="d-none d-md-block"
@@ -3786,12 +3754,8 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
<p
className="mb-0"
>
<span>
Member since
<span>
2017
</span>
</span>
Member since
2017
</p>
<hr
className="d-none d-md-block"
@@ -5599,9 +5563,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
<p
className="small mb-0"
>
<span>
From
</span>
From
</p>
<p
className="h6 mb-4"
@@ -5614,12 +5576,8 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
<p
className="small mb-2"
>
<span>
Completed on
<span>
3/4/2019
</span>
</span>
Completed on
3/4/2019
</p>
<div>
<a
@@ -5745,12 +5703,8 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
<p
className="mb-0"
>
<span>
Member since
<span>
2017
</span>
</span>
Member since
2017
</p>
<div
className="d-flex align-items-center mt-3 mb-2rem"
@@ -5777,9 +5731,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
<div
className="username-description"
>
<span>
Your profile information is only visible to you. Only your username is visible to others on localhost.
</span>
Your profile information is only visible to you. Only your username is visible to others on localhost.
</div>
</div>
<hr
@@ -5812,12 +5764,8 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
<p
className="mb-0"
>
<span>
Member since
<span>
2017
</span>
</span>
Member since
2017
</p>
<div
className="d-flex align-items-center mt-3 mb-2rem"
@@ -5844,9 +5792,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
<div
className="username-description"
>
<span>
Your profile information is only visible to you. Only your username is visible to others on localhost.
</span>
Your profile information is only visible to you. Only your username is visible to others on localhost.
</div>
</div>
<hr
@@ -6012,12 +5958,8 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
<p
className="mb-0"
>
<span>
Member since
<span>
2017
</span>
</span>
Member since
2017
</p>
<hr
className="d-none d-md-block"
@@ -6094,12 +6036,8 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
<p
className="mb-0"
>
<span>
Member since
<span>
2017
</span>
</span>
Member since
2017
</p>
<hr
className="d-none d-md-block"
@@ -6907,9 +6845,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
<p
className="small mb-0"
>
<span>
From
</span>
From
</p>
<p
className="h6 mb-4"
@@ -6922,12 +6858,8 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
<p
className="small mb-2"
>
<span>
Completed on
<span>
3/4/2019
</span>
</span>
Completed on
3/4/2019
</p>
<div>
<a
@@ -7076,12 +7008,8 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
<p
className="mb-0"
>
<span>
Member since
<span>
2017
</span>
</span>
Member since
2017
</p>
<hr
className="d-none d-md-block"
@@ -7158,12 +7086,8 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
<p
className="mb-0"
>
<span>
Member since
<span>
2017
</span>
</span>
Member since
2017
</p>
<hr
className="d-none d-md-block"
@@ -8038,9 +7962,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
<p
className="small mb-0"
>
<span>
From
</span>
From
</p>
<p
className="h6 mb-4"
@@ -8053,12 +7975,8 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
<p
className="small mb-2"
>
<span>
Completed on
<span>
3/4/2019
</span>
</span>
Completed on
3/4/2019
</p>
<div>
<a
@@ -8207,12 +8125,8 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
<p
className="mb-0"
>
<span>
Member since
<span>
2017
</span>
</span>
Member since
2017
</p>
<hr
className="d-none d-md-block"
@@ -8289,12 +8203,8 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
<p
className="mb-0"
>
<span>
Member since
<span>
2017
</span>
</span>
Member since
2017
</p>
<hr
className="d-none d-md-block"
@@ -9175,9 +9085,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
<p
className="small mb-0"
>
<span>
From
</span>
From
</p>
<p
className="h6 mb-4"
@@ -9190,12 +9098,8 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
<p
className="small mb-2"
>
<span>
Completed on
<span>
3/4/2019
</span>
</span>
Completed on
3/4/2019
</p>
<div>
<a
@@ -9344,12 +9248,8 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
<p
className="mb-0"
>
<span>
Member since
<span>
2017
</span>
</span>
Member since
2017
</p>
<hr
className="d-none d-md-block"
@@ -9381,12 +9281,8 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
<p
className="mb-0"
>
<span>
Member since
<span>
2017
</span>
</span>
Member since
2017
</p>
<hr
className="d-none d-md-block"
@@ -10149,9 +10045,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
<p
className="small mb-0"
>
<span>
From
</span>
From
</p>
<p
className="h6 mb-4"
@@ -10164,12 +10058,8 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
<p
className="small mb-2"
>
<span>
Completed on
<span>
3/4/2019
</span>
</span>
Completed on
3/4/2019
</p>
<div>
<a

View File

@@ -399,9 +399,7 @@ exports[`<SocialLinks /> calls social links with edit mode goals 1`] = `
style={Object {}}
/>
</svg>
<span>
Add Facebook
</span>
Add Facebook
</button>
</div>
</li>
@@ -433,9 +431,7 @@ exports[`<SocialLinks /> calls social links with edit mode goals 1`] = `
style={Object {}}
/>
</svg>
<span>
Add Twitter
</span>
Add Twitter
</button>
</div>
</li>