Andal.LND/frontend-app-learner-dashboard
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: use getConfig not process.env

Browse Source 
Co-authored-by: Mena Hassan <mhassan@axim.org>
This commit is contained in:
Cindy Nguyen
2023-10-27 15:29:33 -04:00
parent c44db75273
commit 4b2d65c44c
8 changed files with 51 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/index.html
View File

@@ -1,19 +1,8 @@
<!doctype html> <!doctype html>
<html lang="en-us" dir="ltr"> <html lang="en-us" dir="ltr">
<head> <head>
<title>Learner Dashboard | <%= process.env.SITE_NAME %></title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
<% if (process.env.OPTIMIZELY_URL) { %>
<script
src="<%= process.env.OPTIMIZELY_URL %>"
></script>
<% } else if (process.env.OPTIMIZELY_PROJECT_ID) { %>
<script
src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
></script>
<% } %>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

28
src/App.jsx
View File

@@ -27,6 +27,7 @@ import fakeData from 'data/services/lms/fakeData/courses';
import AppWrapper from 'containers/WidgetContainers/AppWrapper'; import AppWrapper from 'containers/WidgetContainers/AppWrapper';
import LearnerDashboardHeader from 'containers/LearnerDashboardHeader'; import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
import { getConfig } from '@edx/frontend-platform';
import messages from './messages'; import messages from './messages';
import './App.scss'; import './App.scss';
@@ -41,8 +42,21 @@ export const App = () => {
const { supportEmail } = reduxHooks.usePlatformSettingsData(); const { supportEmail } = reduxHooks.usePlatformSettingsData();
const loadData = reduxHooks.useLoadData(); const loadData = reduxHooks.useLoadData();
const optimizelyScript = () => {
if (getConfig().OPTIMIZELY_URL) {
return <script src={getConfig().OPTIMIZELY_URL} />;
} if (getConfig().OPTIMIZELY_PROJECT_ID) {
return (
<script
src={`${getConfig().MARKETING_SITE_BASE_URL}/optimizelyjs/${getConfig().env.OPTIMIZELY_PROJECT_ID}.js`}
/>
);
}
return null;
};
React.useEffect(() => { React.useEffect(() => {
if (authenticatedUser?.administrator || process.env.NODE_ENV === 'development') { if (authenticatedUser?.administrator || getConfig().NODE_ENV === 'development') {
window.loadEmptyData = () => { window.loadEmptyData = () => {
loadData({ ...fakeData.globalData, courses: [] }); loadData({ ...fakeData.globalData, courses: [] });
}; };
@@ -60,12 +74,12 @@ export const App = () => {
window.actions = actions; window.actions = actions;
window.track = track; window.track = track;
} }
if (process.env.HOTJAR_APP_ID) { if (getConfig().HOTJAR_APP_ID) {
try { try {
initializeHotjar({ initializeHotjar({
hotjarId: process.env.HOTJAR_APP_ID, hotjarId: getConfig().HOTJAR_APP_ID,
hotjarVersion: process.env.HOTJAR_VERSION, hotjarVersion: getConfig().HOTJAR_VERSION,
hotjarDebug: !!process.env.HOTJAR_DEBUG, hotjarDebug: !!getConfig().HOTJAR_DEBUG,
}); });
} catch (error) { } catch (error) {
logError(error); logError(error);
@@ -76,6 +90,8 @@ export const App = () => {
<> <>
<Helmet> <Helmet>
<title>{formatMessage(messages.pageTitle)}</title> <title>{formatMessage(messages.pageTitle)}</title>
<link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
{optimizelyScript()}
</Helmet> </Helmet>
<div> <div>
<AppWrapper> <AppWrapper>
@@ -93,7 +109,7 @@ export const App = () => {
)} )}
</main> </main>
</AppWrapper> </AppWrapper>
<Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} /> <Footer logo={getConfig().LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
<ZendeskFab /> <ZendeskFab />
</div> </div>
</> </>

8
src/App.test.jsx
View File

@@ -37,17 +37,21 @@ jest.mock('hooks', () => ({
})); }));
jest.mock('data/store', () => 'data/store'); jest.mock('data/store', () => 'data/store');
const logo = 'fakeLogo.png';
jest.mock('@edx/frontend-platform', () => ({
getConfig: jest.fn(() => ({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo })),
}));
const loadData = jest.fn(); const loadData = jest.fn();
reduxHooks.useLoadData.mockReturnValue(loadData); reduxHooks.useLoadData.mockReturnValue(loadData);
const logo = 'fakeLogo.png';
let el; let el;
const supportEmail = 'test-support-url'; const supportEmail = 'test-support-url';
reduxHooks.usePlatformSettingsData.mockReturnValue({ supportEmail }); reduxHooks.usePlatformSettingsData.mockReturnValue({ supportEmail });
describe('App router component', () => { describe('App router component', () => {
process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
describe('component', () => { describe('component', () => {
const runBasicTests = () => { const runBasicTests = () => {

12
src/__snapshots__/App.test.jsx.snap
View File

@@ -9,6 +9,10 @@ exports[`App router component component initialize failure snapshot 1`] = `
<title> <title>
Learner Home Learner Home
</title> </title>
<link
rel="shortcut icon"
type="image/x-icon"
/>
</HelmetWrapper> </HelmetWrapper>
<div> <div>
<AppWrapper> <AppWrapper>
@@ -40,6 +44,10 @@ exports[`App router component component no network failure snapshot 1`] = `
<title> <title>
Learner Home Learner Home
</title> </title>
<link
rel="shortcut icon"
type="image/x-icon"
/>
</HelmetWrapper> </HelmetWrapper>
<div> <div>
<AppWrapper> <AppWrapper>
@@ -67,6 +75,10 @@ exports[`App router component component refresh failure snapshot 1`] = `
<title> <title>
Learner Home Learner Home
</title> </title>
<link
rel="shortcut icon"
type="image/x-icon"
/>
</HelmetWrapper> </HelmetWrapper>
<div> <div>
<AppWrapper> <AppWrapper>

4
src/containers/LearnerDashboardHeader/BrandLogo.jsx
View File

@@ -3,8 +3,8 @@ import React from 'react';
import { useIntl } from '@edx/frontend-platform/i18n'; import { useIntl } from '@edx/frontend-platform/i18n';
import { reduxHooks } from 'hooks'; import { reduxHooks } from 'hooks';
import { configuration } from '../../config';
import { getConfig } from '@edx/frontend-platform';
import messages from './messages'; import messages from './messages';
export const BrandLogo = () => { export const BrandLogo = () => {
@@ -15,7 +15,7 @@ export const BrandLogo = () => {
<a href={dashboard?.url || '/'} className="mx-auto"> <a href={dashboard?.url || '/'} className="mx-auto">
<img <img
className="logo py-3" className="logo py-3"
src={configuration.LOGO_URL} src={getConfig().LOGO_URL}
alt={formatMessage(messages.logoAltText)} alt={formatMessage(messages.logoAltText)}
/> />
</a> </a>

3
src/widgets/ProductRecommendations/components/ProductCardHeader.jsx
View File

@@ -5,6 +5,7 @@ import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
import { Icon, Hyperlink } from '@edx/paragon'; import { Icon, Hyperlink } from '@edx/paragon';
import { ChevronRight } from '@edx/paragon/icons'; import { ChevronRight } from '@edx/paragon/icons';
import { getConfig } from '@edx/frontend-platform';
import { trackProductHeaderClicked } from '../optimizelyExperiment'; import { trackProductHeaderClicked } from '../optimizelyExperiment';
import { recommendationsHeaderClicked } from '../track'; import { recommendationsHeaderClicked } from '../track';
import { executiveEducation, bootCamp } from '../constants'; import { executiveEducation, bootCamp } from '../constants';
@@ -44,7 +45,7 @@ const ProductCardHeader = ({ courseType }) => {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const productTypeDetail = getProductTypeDetail(courseType); const productTypeDetail = getProductTypeDetail(courseType);
const headerUrl = `${process.env.MARKETING_SITE_BASE_URL}${productTypeDetail.url}`; const headerUrl = `${getConfig().MARKETING_SITE_BASE_URL}${productTypeDetail.url}`;
return ( return (
<div> <div>

4
src/widgets/ProductRecommendations/optimizely.js
View File

@@ -1,6 +1,8 @@
import { createInstance, setLogLevel } from '@optimizely/react-sdk'; import { createInstance, setLogLevel } from '@optimizely/react-sdk';
const OPTIMIZELY_SDK_KEY = process.env.OPTIMIZELY_FULL_STACK_SDK_KEY; import { getConfig } from '@edx/frontend-platform';
const OPTIMIZELY_SDK_KEY = getConfig().OPTIMIZELY_FULL_STACK_SDK_KEY;
const configureClient = () => { const configureClient = () => {
setLogLevel('error'); setLogLevel('error');

4
src/widgets/ProductRecommendations/optimizely.test.js
View File

@@ -6,6 +6,10 @@ jest.mock('@optimizely/react-sdk', () => ({
setLogLevel: jest.fn(), setLogLevel: jest.fn(),
})); }));
jest.mock('@edx/frontend-platform', () => ({
getConfig: jest.fn(() => ({ OPTIMIZELY_FULL_STACK_SDK_KEY: 'SDK Key' })),
}));
describe('optimizelyClient', () => { describe('optimizelyClient', () => {
it('should configure an Optimizely client instance with the correct SDK key', () => { it('should configure an Optimizely client instance with the correct SDK key', () => {
expect(optimizelyClient).toBeDefined(); expect(optimizelyClient).toBeDefined();