feat: add variant ID CourseRun form (#931)

src/components/EditCoursePage/CollapsibleCourseRun.jsx

@@ -18,7 +18,7 @@ import { courseSubmitRun } from '../../data/actions/courseSubmitInfo';
 import FieldLabel from '../FieldLabel';
 import {
   courseRunIsArchived, localTimeZone, formatDate, isSafari, getDateWithDashes,
-  getDateWithSlashes, isNonExemptChanged, isPristine, hasMastersTrack, jsonDeepEqual, utcTimeZone,
+  getDateWithSlashes, isNonExemptChanged, isPristine, hasMastersTrack, jsonDeepEqual, utcTimeZone, isExternalCourse,
 } from '../../utils';
 import Pill from '../Pill';
 import RenderInputTextField from '../RenderInputTextField';
@@ -33,7 +33,7 @@ import {
   PUBLISHED, DATE_INPUT_PATTERN, FORMAT_DATE_MATCHER, NORMALIZE_DATE_MATCHER, REVIEWED,
 } from '../../data/constants';
 import {
-  dateEditHelp, runTypeHelp, pacingEditHelp, publishDateHelp,
+  dateEditHelp, runTypeHelp, pacingEditHelp, publishDateHelp, courseRunVariantIdHelp,
 } from '../../helpText';
 import RichEditor from '../RichEditor';
 import ListField from '../ListField';
@@ -248,6 +248,7 @@ class CollapsibleCourseRun extends React.Component {
       isOpen,
       onToggle,
       courseRunTypeOptions,
+      courseInfo,
     } = this.props;
     const { copied, hasExternalKey } = this.state;
     const { administrator } = getAuthenticatedUser();
@@ -273,6 +274,8 @@ class CollapsibleCourseRun extends React.Component {
 
     const pristine = initialValues && isPristine(initialValues, currentFormValues)
       && isPristine(initialValues, currentFormValues, courseRun.key);
+    const productSource = courseInfo?.data?.product_source?.slug;
+    const courseType = courseInfo?.data?.course_type;
 
     return (
       <Collapsible
@@ -283,6 +286,21 @@ class CollapsibleCourseRun extends React.Component {
         <div className="mb-3">
           <span className="text-primary-500" aria-hidden> All fields are required for publication unless otherwise specified.</span>
         </div>
+        {isExternalCourse(productSource, courseType) && (
+          <Field
+            name={`${courseId}.variant_id`}
+            component={RenderInputTextField}
+            label={(
+              <FieldLabel
+                id={`${courseId}.variant_id.label`}
+                text="Variant Id"
+                helpText={courseRunVariantIdHelp}
+              />
+            )}
+            disabled={disabled}
+            optional
+          />
+        )}
         {/* TODO this should be refactored when paragon supports safari */}
         {/* text inputs for safari */}
         {isSafari
@@ -765,6 +783,16 @@ CollapsibleCourseRun.propTypes = {
   initialValues: PropTypes.shape({
     course_runs: PropTypes.arrayOf(PropTypes.shape({})),
   }).isRequired,
+  courseInfo: PropTypes.shape({
+    data: PropTypes.shape({
+      product_source: PropTypes.shape({
+        slug: PropTypes.string,
+        name: PropTypes.string,
+        description: PropTypes.string,
+      }),
+      course_type: PropTypes.string,
+    }),
+  }),
 };
 
 CollapsibleCourseRun.defaultProps = {
@@ -774,6 +802,7 @@ CollapsibleCourseRun.defaultProps = {
     isSubmittingRunReview: false,
   },
   courseRunTypeOptions: {},
+  courseInfo: {},
   runTypeModes: {},
   editable: false,
   isSubmittingForReview: false,

src/components/EditCoursePage/CollapsibleCourseRun.test.jsx

@@ -4,7 +4,9 @@ import { shallowToJson } from 'enzyme-to-json';
 
 import CollapsibleCourseRun from './CollapsibleCourseRun';
 import { courseSubmitRun } from '../../data/actions/courseSubmitInfo';
-import { AUDIT_TRACK, MASTERS_TRACK, VERIFIED_TRACK } from '../../data/constants';
+import {
+  AUDIT_TRACK, EXECUTIVE_EDUCATION_SLUG, MASTERS_TRACK, VERIFIED_TRACK,
+} from '../../data/constants';
 
 import store from '../../data/store';
 
@@ -109,6 +111,34 @@ describe('Collapsible Course Run', () => {
     expect(shallowToJson(component)).toMatchSnapshot();
   });
 
+  it('renders correctly variant_id field for external course\'s course run', () => {
+    const courseInfo = {
+      data: {
+        product_source: {
+          slug: 'test-source',
+          name: 'Test Source',
+          description: 'Test Source Description',
+        },
+        course_type: EXECUTIVE_EDUCATION_SLUG,
+      },
+    };
+    const component = shallow(<CollapsibleCourseRun
+      languageOptions={languageOptions}
+      pacingTypeOptions={pacingTypeOptions}
+      courseRun={unpublishedCourseRun}
+      courseId="test-course"
+      courseUuid="11111111-1111-1111-1111-111111111111"
+      type="8a8f30e1-23ce-4ed3-a361-1325c656b67b"
+      currentFormValues={currentFormValues}
+      courseRunTypeOptions={courseRunTypeOptions}
+      index={1}
+      courseInfo={courseInfo}
+    />);
+    const variantIdField = component.find('Field[name="test-course.variant_id"]');
+    expect(variantIdField.exists()).toBe(true);
+    expect(shallowToJson(component)).toMatchSnapshot();
+  });
+
   it('renders correctly with external key field enabled', () => {
     const runTypeModes = {
       '00000000-0000-4000-0000-000000000000': [

src/components/EditCoursePage/EditCoursePage.test.jsx

@@ -26,6 +26,7 @@ describe('EditCoursePage', () => {
   const defaultPrice = '77';
   const defaultEnd = '2019-08-14T00:00:00Z';
   const defaultUpgradeDeadlineOverride = '2019-09-14T00:00:00Z';
+  const variantId = '00000000-0000-0000-0000-000000000000';
   const watchers = ['[email protected]'];
 
   const courseInfo = {
@@ -62,6 +63,7 @@ describe('EditCoursePage', () => {
           start: '2019-05-14T00:00:00Z',
           end: defaultEnd,
           upgrade_deadline_override: '2019-05-10T00:00:00Z',
+          variant_id: null,
           expected_program_type: 'micromasters',
           expected_program_name: 'Test Program Name',
           go_live_date: '2019-05-06T00:00:00Z',
@@ -86,6 +88,7 @@ describe('EditCoursePage', () => {
           start: '2019-05-14T00:00:00Z',
           end: defaultEnd,
           upgrade_deadline_override: '2019-05-10T00:00:00Z',
+          variant_id: null,
           expected_program_type: null,
           expected_program_name: '',
           go_live_date: '2019-05-06T00:00:00Z',
@@ -322,6 +325,7 @@ describe('EditCoursePage', () => {
       start: '2019-05-14T00:00:00Z',
       end: defaultEnd,
       upgrade_deadline_override: defaultUpgradeDeadlineOverride,
+      variant_id: variantId,
       expected_program_type: null,
       expected_program_name: '',
       go_live_date: '2019-05-06T00:00:00Z',
@@ -469,6 +473,7 @@ describe('EditCoursePage', () => {
         transcript_languages: ['en-us'],
         weeks_to_complete: '100',
         upgrade_deadline_override: defaultUpgradeDeadlineOverride,
+        variant_id: variantId,
       },
       {
         content_language: 'en-us',
@@ -490,6 +495,7 @@ describe('EditCoursePage', () => {
         transcript_languages: ['en-us'],
         weeks_to_complete: '100',
         upgrade_deadline_override: defaultUpgradeDeadlineOverride,
+        variant_id: variantId,
       },
     ];
 
@@ -501,6 +507,7 @@ describe('EditCoursePage', () => {
       courseData.course_runs[0].end = defaultEnd;
       courseData.course_runs[0].status = UNPUBLISHED;
       courseData.course_runs[0].upgrade_deadline_override = defaultUpgradeDeadlineOverride;
+      courseData.course_runs[0].variant_id = variantId;
       courseData.prices = {
         verified: defaultPrice,
       };