feat: set up skills builder route

.env

@@ -27,3 +27,4 @@ LEARNER_RECORD_MFE_BASE_URL=''
 COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
+ENABLE_SKILLS_BUILDER=''

.env.development

@@ -28,3 +28,4 @@ LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
 COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
+ENABLE_SKILLS_BUILDER='true'

src/index.jsx

@@ -4,6 +4,7 @@ import 'regenerator-runtime/runtime';
 import {
   APP_INIT_ERROR,
   APP_READY,
+  getConfig,
   initialize,
   mergeConfig,
   subscribe,
@@ -22,6 +23,7 @@ import Footer, { messages as footerMessages } from '@edx/frontend-component-foot
 
 import appMessages from './i18n';
 import { ProfilePage, NotFoundPage } from './profile';
+import { SkillsBuilder } from './skills';
 import configureStore from './data/configureStore';
 
 import './index.scss';
@@ -34,6 +36,9 @@ subscribe(APP_READY, () => {
       <Header />
       <main>
         <Switch>
+          {getConfig().ENABLE_SKILLS_BUILDER && (
+            <Route path="/skills" component={SkillsBuilder} />
+          )}
           <Route path="/u/:username" component={ProfilePage} />
           <Route path="/notfound" component={NotFoundPage} />
           <Route path="*" component={NotFoundPage} />
@@ -63,6 +68,7 @@ initialize({
         ENABLE_LEARNER_RECORD_MFE: (process.env.ENABLE_LEARNER_RECORD_MFE || false),
         LEARNER_RECORD_MFE_BASE_URL: process.env.LEARNER_RECORD_MFE_BASE_URL,
         COLLECT_YEAR_OF_BIRTH: process.env.COLLECT_YEAR_OF_BIRTH,
+        ENABLE_SKILLS_BUILDER: process.env.ENABLE_SKILLS_BUILDER,
       }, 'App loadConfig override handler');
     },
   },

src/skills/SkillsBuilder.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {
+  ActionRow,
+  Button,
+  Container,
+  FullscreenModal,
+} from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+const SkillsBuilder = () => {
+  const onCloseHandle = () => {
+    window.history.back();
+  };
+
+  return (
+    <FullscreenModal
+      title="Skills Builder"
+      isOpen
+      onClose={onCloseHandle}
+      footerNode={(
+        <ActionRow>
+          <Button variant="tertiary">
+            <FormattedMessage {...messages.goBackButton} />
+          </Button>
+          <ActionRow.Spacer />
+          <Button>
+            <FormattedMessage {...messages.nextStepButton} />
+          </Button>
+        </ActionRow>
+          )}
+    >
+      <Container>
+        <h3>Skills Builder content will go here</h3>
+      </Container>
+    </FullscreenModal>
+  );
+};
+
+export default SkillsBuilder;

src/skills/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as SkillsBuilder } from './SkillsBuilder';

src/skills/messages.js

@@ -0,0 +1,17 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  /* Modal Action Row Buttons */
+  goBackButton: {
+    id: 'go.back.button',
+    defaultMessage: 'Go Back',
+    description: 'Button that sends the user to the previous step in the skills builder.',
+  },
+  nextStepButton: {
+    id: 'next.step.button',
+    defaultMessage: 'Next Step',
+    description: 'Button that sends the user to the next step in the skills builder.',
+  },
+});
+
+export default messages;

src/skills/test/SkillsBuilder.test.jsx

@@ -0,0 +1,19 @@
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { mount } from 'enzyme';
+import React from 'react';
+import SkillsBuilder from '../SkillsBuilder';
+
+const SkillsBuilderWrapper = () => (
+  <IntlProvider locale="en">
+    <SkillsBuilder />
+  </IntlProvider>
+);
+
+describe('skills-builder', () => {
+  it('should render a Skills Builder modal', () => {
+    const component = <SkillsBuilderWrapper />;
+    const wrapper = mount(component);
+    const modal = wrapper.find(SkillsBuilder);
+    expect(modal.find('h2').text()).toBe('Skills Builder');
+  });
+});