From 1f056dfac73acd53445c4df2e0e209120993e3d7 Mon Sep 17 00:00:00 2001
From: Maxwell Frank <mfrank@2u.com>
Date: Mon, 9 Jan 2023 22:46:20 +0000
Subject: [PATCH] feat: set up skills builder route

---
 .env                                   |  1 +
 .env.development                       |  1 +
 src/index.jsx                          |  6 ++++
 src/skills/SkillsBuilder.jsx           | 40 ++++++++++++++++++++++++++
 src/skills/index.js                    |  2 ++
 src/skills/messages.js                 | 17 +++++++++++
 src/skills/test/SkillsBuilder.test.jsx | 19 ++++++++++++
 7 files changed, 86 insertions(+)
 create mode 100644 src/skills/SkillsBuilder.jsx
 create mode 100644 src/skills/index.js
 create mode 100644 src/skills/messages.js
 create mode 100644 src/skills/test/SkillsBuilder.test.jsx

diff --git a/.env b/.env
index bc72c92..b544657 100644
--- a/.env
+++ b/.env
@@ -27,3 +27,4 @@ LEARNER_RECORD_MFE_BASE_URL=''
 COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
+ENABLE_SKILLS_BUILDER=''
diff --git a/.env.development b/.env.development
index 4d6fd37..22f1dbd 100644
--- a/.env.development
+++ b/.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'
diff --git a/src/index.jsx b/src/index.jsx
index 0a1f9b5..3a2ffd2 100755
--- a/src/index.jsx
+++ b/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');
     },
   },
diff --git a/src/skills/SkillsBuilder.jsx b/src/skills/SkillsBuilder.jsx
new file mode 100644
index 0000000..b544bf7
--- /dev/null
+++ b/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;
diff --git a/src/skills/index.js b/src/skills/index.js
new file mode 100644
index 0000000..f6dd83e
--- /dev/null
+++ b/src/skills/index.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as SkillsBuilder } from './SkillsBuilder';
diff --git a/src/skills/messages.js b/src/skills/messages.js
new file mode 100644
index 0000000..a4f053e
--- /dev/null
+++ b/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;
diff --git a/src/skills/test/SkillsBuilder.test.jsx b/src/skills/test/SkillsBuilder.test.jsx
new file mode 100644
index 0000000..1d3c754
--- /dev/null
+++ b/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');
+  });
+});