feat: update hardcode preview_url for courses having updated slug (#883)

* feat: update hardcode preview_url for courses having updated slug * fix: update url slug pattern * fix: update snapshots
openedx · Jun 26, 2023 · ac876f9 · ac876f9
1 parent 210b7cd
commit ac876f9
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 9 deletions.
diff --git a/.env.development b/.env.development
@@ -19,3 +19,4 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 ADDITIONAL_METADATA_REQUIRED_FIELDS='{}'
 IS_NEW_SLUG_FORMAT_ENABLED='false'
+MARKETING_SITE_PREVIEW_URL_ROOT=''
diff --git a/.env.test b/.env.test
@@ -7,3 +7,4 @@ FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 SITE_NAME='edX'
 ADDITIONAL_METADATA_REQUIRED_FIELDS='{}'
 IS_NEW_SLUG_FORMAT_ENABLED='false'
+MARKETING_SITE_PREVIEW_URL_ROOT=''
diff --git a/src/components/EditCoursePage/EditCourseForm.jsx b/src/components/EditCoursePage/EditCourseForm.jsx
@@ -141,7 +141,8 @@ export class BaseEditCourseForm extends React.Component {
       return (
         <>
           <Hyperlink
-            destination={`https://www.edx.org/preview/course/${courseInfo.data.url_slug}`}
+            name="preview-url"
+            destination={`${process.env.MARKETING_SITE_PREVIEW_URL_ROOT}/${courseInfo?.data?.url_slug.includes('/') ? '' : 'course/'}${courseInfo.data.url_slug}`}
             target="_blank"
           >
             View Preview Page

diff --git a/src/components/EditCoursePage/EditCourseForm.test.jsx b/src/components/EditCoursePage/EditCourseForm.test.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { shallowToJson } from 'enzyme-to-json';
 import { Field } from 'redux-form';
+import { Hyperlink } from '@edx/paragon';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 
 import { BaseEditCourseForm } from './EditCourseForm';
@@ -289,6 +290,72 @@ describe('BaseEditCourseForm', () => {
     expect(setCustomValidityMock).toHaveBeenCalledWith('');
   });
 
+  it('checks preview url renders correctly for old url slug format', () => {
+    const urlSlug = 'test-url-slug';
+    const { MARKETING_SITE_PREVIEW_URL_ROOT } = process.env;
+    const courseInfoWithUrlSlug = { ...courseInfo, data: { ...courseInfo.data, url_slug: urlSlug } };
+    const wrapper = shallow(<BaseEditCourseForm
+      handleSubmit={() => null}
+      title={initialValuesFull.title}
+      initialValues={initialValuesFull}
+      currentFormValues={initialValuesFull}
+      number="Test101x"
+      entitlement={{ sku: 'ABC1234' }}
+      courseStatuses={[REVIEWED]}
+      courseInfo={courseInfoWithUrlSlug}
+      courseOptions={courseOptions}
+      courseRunOptions={courseRunOptions}
+      uuid={initialValuesFull.uuid}
+      type={initialValuesFull.type}
+      id="edit-course-form"
+    />);
+    expect(wrapper.instance().getLinkComponent([REVIEWED], courseInfoWithUrlSlug)).toEqual(
+      <>
+        <Hyperlink
+          name="preview-url"
+          destination={`${MARKETING_SITE_PREVIEW_URL_ROOT}/course/${urlSlug}`}
+          target="_blank"
+        >
+          View Preview Page
+        </Hyperlink>
+        <span className="d-block">Any changes will go live when the website next builds</span>
+      </>,
+    );
+  });
+
+  it('checks preview url renders correctly for new slug format', () => {
+    const urlSlug = 'learn/test-url-slug/test';
+    const { MARKETING_SITE_PREVIEW_URL_ROOT } = process.env;
+    const courseInfoWithUrlSlug = { ...courseInfo, data: { ...courseInfo.data, url_slug: urlSlug } };
+    const wrapper = shallow(<BaseEditCourseForm
+      handleSubmit={() => null}
+      title={initialValuesFull.title}
+      initialValues={initialValuesFull}
+      currentFormValues={initialValuesFull}
+      number="Test101x"
+      entitlement={{ sku: 'ABC1234' }}
+      courseStatuses={[REVIEWED]}
+      courseInfo={courseInfoWithUrlSlug}
+      courseOptions={courseOptions}
+      courseRunOptions={courseRunOptions}
+      uuid={initialValuesFull.uuid}
+      type={initialValuesFull.type}
+      id="edit-course-form"
+    />);
+    expect(wrapper.instance().getLinkComponent([REVIEWED], courseInfoWithUrlSlug)).toEqual(
+      <>
+        <Hyperlink
+          name="preview-url"
+          destination={`${MARKETING_SITE_PREVIEW_URL_ROOT}/${urlSlug}`}
+          target="_blank"
+        >
+          View Preview Page
+        </Hyperlink>
+        <span className="d-block">Any changes will go live when the website next builds</span>
+      </>,
+    );
+  });
+
   it('no marketing fields if course type is not marketable', () => {
     const initialValuesWithMasters = {
       ...initialValuesFull,

diff --git a/src/components/EditCoursePage/__snapshots__/EditCourseForm.test.jsx.snap b/src/components/EditCoursePage/__snapshots__/EditCourseForm.test.jsx.snap
@@ -153,7 +153,7 @@ exports[`BaseEditCourseForm renders correctly when submitting for review 1`] = `
         }
         name="url_slug"
         optional={true}
-        pattern="^[a-z0-9_]+(?:-[a-z0-9_]+)*$"
+        pattern="^[a-z0-9-_]+(?:-[a-z0-9-_]+)*$"
         type="text"
       />
       <div>
@@ -1966,7 +1966,7 @@ exports[`BaseEditCourseForm renders html correctly while submitting 1`] = `
         }
         name="url_slug"
         optional={true}
-        pattern="^[a-z0-9_]+(?:-[a-z0-9_]+)*$"
+        pattern="^[a-z0-9-_]+(?:-[a-z0-9-_]+)*$"
         type="text"
       />
       <div>
@@ -3817,7 +3817,7 @@ exports[`BaseEditCourseForm renders html correctly with administrator being true
         }
         name="url_slug"
         optional={true}
-        pattern="^[a-z0-9_]+(?:-[a-z0-9_]+)*$"
+        pattern="^[a-z0-9-_]+(?:-[a-z0-9-_]+)*$"
         type="text"
       />
       <div>
@@ -5974,7 +5974,7 @@ exports[`BaseEditCourseForm renders html correctly with all data present 1`] = `
         }
         name="url_slug"
         optional={true}
-        pattern="^[a-z0-9_]+(?:-[a-z0-9_]+)*$"
+        pattern="^[a-z0-9-_]+(?:-[a-z0-9-_]+)*$"
         type="text"
       />
       <div>
@@ -7825,7 +7825,7 @@ exports[`BaseEditCourseForm renders html correctly with minimal data 1`] = `
         }
         name="url_slug"
         optional={true}
-        pattern="^[a-z0-9_]+(?:-[a-z0-9_]+)*$"
+        pattern="^[a-z0-9-_]+(?:-[a-z0-9-_]+)*$"
         type="text"
       />
       <div>
@@ -9183,7 +9183,7 @@ exports[`BaseEditCourseForm renders html correctly with skills data when skills
         }
         name="url_slug"
         optional={true}
-        pattern="^[a-z0-9_]+(?:-[a-z0-9_]+)*$"
+        pattern="^[a-z0-9-_]+(?:-[a-z0-9-_]+)*$"
         type="text"
       />
       <div>

diff --git a/src/data/constants/index.js b/src/data/constants/index.js
@@ -22,8 +22,8 @@ const NORMALIZE_DATE_MATCHER = /20\d{2}\/(0\d{1}|1[0-2])\/([0-2]\d{1}|3[0-1])/;
 
 const EXECUTIVE_EDUCATION_SLUG = 'executive-education-2u';
 
-const COURSE_URL_SLUG_PATTERN_OLD = '^[a-z0-9_]+(?:-[a-z0-9_]+)*$';
-const COURSE_URL_SLUG_PATTERN_NEW = '^learn/[a-zA-z0-9_]+/[a-zA-z0-9_]+$';
+const COURSE_URL_SLUG_PATTERN_OLD = '^[a-z0-9-_]+(?:-[a-z0-9-_]+)*$';
+const COURSE_URL_SLUG_PATTERN_NEW = '^learn/[a-zA-z0-9-_]+/[a-zA-z0-9-_]+$';
 const COURSE_URL_SLUG_PATTERN = `${COURSE_URL_SLUG_PATTERN_OLD}|${COURSE_URL_SLUG_PATTERN_NEW}`;
 
 const COURSE_URL_SLUG_VALIDATION_MESSAGE = {