From 4b61780e9b70b0339faa2051216ab36de4cf4495 Mon Sep 17 00:00:00 2001 From: srwang <12386424+srwang@users.noreply.github.com> Date: Thu, 25 Aug 2022 03:53:12 -0400 Subject: [PATCH 1/2] Revert "feat: added dropdown fields to EditCourseForm.jsx (#764)" (#771) This reverts commit 86f73ea18d7a2c131f1146eab3bfcd4fdb0edaaa. --- .../CreateCourseRunPage.test.jsx.snap | 124 ---- .../EditCoursePage/EditCourseForm.jsx | 61 -- .../EditCoursePage/EditCourseForm.test.jsx | 7 - .../EditCoursePage/EditCoursePage.test.jsx | 28 - .../EditCourseForm.test.jsx.snap | 575 ------------------ .../EditCoursePage.test.jsx.snap | 281 --------- src/components/EditCoursePage/index.jsx | 23 - .../updated-paragon-component.jsx | 71 --- src/data/constants/testData.js | 32 - 9 files changed, 1202 deletions(-) delete mode 100644 src/components/RenderSelectField/updated-paragon-component.jsx diff --git a/src/components/CreateCourseRunPage/__snapshots__/CreateCourseRunPage.test.jsx.snap b/src/components/CreateCourseRunPage/__snapshots__/CreateCourseRunPage.test.jsx.snap index d2a6a0609..002ea854c 100644 --- a/src/components/CreateCourseRunPage/__snapshots__/CreateCourseRunPage.test.jsx.snap +++ b/src/components/CreateCourseRunPage/__snapshots__/CreateCourseRunPage.test.jsx.snap @@ -35,68 +35,6 @@ exports[`CreateCourseRunPage renders html correctly 1`] = ` }, ], }, - "location_restriction": Object { - "children": Object { - "countries": Object { - "child": Object { - "choices": Array [ - Object { - "label": "Afghanistan", - "value": "AF", - }, - Object { - "label": "Åland Islands", - "value": "AX", - }, - Object { - "label": "Algeria", - "value": "DZ", - }, - Object { - "label": "American Samoa", - "value": "AS", - }, - Object { - "label": "Andorra", - "value": "AD", - }, - ], - }, - }, - "restriction_type": Object { - "choices": Array [ - "blocklist", - "allowlist", - ], - }, - "states": Object { - "child": Object { - "choices": Array [ - Object { - "label": "Alabama", - "value": "AL", - }, - Object { - "label": "Arizona", - "value": "AZ", - }, - Object { - "label": "Arkansas", - "value": "AR", - }, - Object { - "label": "California", - "value": "CA", - }, - Object { - "label": "Colorado", - "value": "CO", - }, - ], - }, - }, - }, - }, "subjects": Object { "child": Object { "choices": Array [ @@ -566,68 +504,6 @@ exports[`CreateCourseRunPage renders html correctly with Course Type 1`] = ` }, ], }, - "location_restriction": Object { - "children": Object { - "countries": Object { - "child": Object { - "choices": Array [ - Object { - "label": "Afghanistan", - "value": "AF", - }, - Object { - "label": "Åland Islands", - "value": "AX", - }, - Object { - "label": "Algeria", - "value": "DZ", - }, - Object { - "label": "American Samoa", - "value": "AS", - }, - Object { - "label": "Andorra", - "value": "AD", - }, - ], - }, - }, - "restriction_type": Object { - "choices": Array [ - "blocklist", - "allowlist", - ], - }, - "states": Object { - "child": Object { - "choices": Array [ - Object { - "label": "Alabama", - "value": "AL", - }, - Object { - "label": "Arizona", - "value": "AZ", - }, - Object { - "label": "Arkansas", - "value": "AR", - }, - Object { - "label": "California", - "value": "CA", - }, - Object { - "label": "Colorado", - "value": "CO", - }, - ], - }, - }, - }, - }, "subjects": Object { "child": Object { "choices": Array [ diff --git a/src/components/EditCoursePage/EditCourseForm.jsx b/src/components/EditCoursePage/EditCourseForm.jsx index a33efce16..b2f5d2488 100644 --- a/src/components/EditCoursePage/EditCourseForm.jsx +++ b/src/components/EditCoursePage/EditCourseForm.jsx @@ -16,9 +16,6 @@ import FieldLabel from '../FieldLabel'; import ImageUpload from '../ImageUpload'; import RenderInputTextField from '../RenderInputTextField'; import RenderSelectField from '../RenderSelectField'; -// TODO: remove RenderSelectFieldNew when migrating off deprecated Paragon components, -// i.e. as a part of https://github.com/openedx/frontend-app-publisher/pull/761 -import RenderSelectFieldNew from '../RenderSelectField/updated-paragon-component'; import RichEditor from '../RichEditor'; import Pill from '../Pill'; import Collapsible from '../Collapsible'; @@ -239,12 +236,6 @@ export class BaseEditCourseForm extends React.Component { && parseOptions(courseRunOptionsData.content_language.choices)); const programOptions = (courseRunOptionsData && parseOptions(courseRunOptionsData.expected_program_type.choices)); - const locationCountryOptions = courseOptionsData - && parseOptions(courseOptionsData.location_restriction.children.countries.child.choices); - const locationRestrictionTypeOptions = courseOptionsData - && parseOptions(courseOptionsData.location_restriction.children.restriction_type.choices); - const locationStateOptions = courseOptionsData - && parseOptions(courseOptionsData.location_restriction.children.states.child.choices); const { data: { @@ -944,53 +935,6 @@ export class BaseEditCourseForm extends React.Component { disabled={disabled} optional /> - {administrator && ( - <> - - - )} - extraInput={{ onInvalid: this.openCollapsible }} - options={locationRestrictionTypeOptions} - required={false} - disabled={disabled} - /> - - )} - extraInput={{ onInvalid: this.openCollapsible, multiple: true }} - options={locationCountryOptions} - disabled={disabled} - required={false} - /> - - )} - extraInput={{ onInvalid: this.openCollapsible, multiple: true }} - options={locationStateOptions} - disabled={disabled} - required={false} - /> - - )} {administrator && ( <> { skill_names: [], organization_logo_override: 'http://image.src.small', organization_short_code_override: 'test short code', - location_restriction: { - restriction_type: 'allowlist', - countries: [ - 'AF', 'AX', - ], - states: ['CO'], - }, in_year_value: { per_click_usa: 100, per_click_international: 100, diff --git a/src/components/EditCoursePage/EditCoursePage.test.jsx b/src/components/EditCoursePage/EditCoursePage.test.jsx index a55ca5129..9ed6a764d 100644 --- a/src/components/EditCoursePage/EditCoursePage.test.jsx +++ b/src/components/EditCoursePage/EditCoursePage.test.jsx @@ -154,13 +154,6 @@ describe('EditCoursePage', () => { skill_names: [], organization_logo_override_url: 'http://image.src.small', organization_short_code_override: 'test short code', - location_restriction: { - restriction_type: 'allowlist', - countries: [ - 'AF', 'AX', - ], - states: ['AL'], - }, }, showCreateStatusAlert: false, isFetching: false, @@ -364,13 +357,6 @@ describe('EditCoursePage', () => { imageSrc: 'http://image.jpg', learner_testimonials: '

I learned stuff!

', level_type: 'Basic', - location_restriction: { - restriction_type: 'allowlist', - countries: [ - 'AF', 'AX', - ], - states: ['AL'], - }, organization_logo_override_url: 'http://image.src.small', organization_short_code_override: 'test short code', outcome: '

Stuff

', @@ -399,13 +385,6 @@ describe('EditCoursePage', () => { key: 'edX+Test101x', learner_testimonials: '

I learned stuff!

', level_type: 'Basic', - location_restriction: { - restriction_type: 'allowlist', - countries: [ - 'AF', 'AX', - ], - states: ['AL'], - }, organization_logo_override: 'http://image.src.small', organization_short_code_override: 'test short code', outcome: '

Stuff

', @@ -929,13 +908,6 @@ describe('EditCoursePage', () => { key: 'edX+Test101x', learner_testimonials: '

I learned stuff!

', level_type: 'Basic', - location_restriction: { - restriction_type: 'allowlist', - countries: [ - 'AF', 'AX', - ], - states: ['AL'], - }, organization_logo_override: 'http://image.src.small', organization_short_code_override: 'test short code', outcome: '

Stuff

', diff --git a/src/components/EditCoursePage/__snapshots__/EditCourseForm.test.jsx.snap b/src/components/EditCoursePage/__snapshots__/EditCourseForm.test.jsx.snap index e4bbb9158..14297bae4 100644 --- a/src/components/EditCoursePage/__snapshots__/EditCourseForm.test.jsx.snap +++ b/src/components/EditCoursePage/__snapshots__/EditCourseForm.test.jsx.snap @@ -1044,68 +1044,6 @@ exports[`BaseEditCourseForm renders correctly when submitting for review 1`] = ` }, ], }, - "location_restriction": Object { - "children": Object { - "countries": Object { - "child": Object { - "choices": Array [ - Object { - "label": "Afghanistan", - "value": "AF", - }, - Object { - "label": "Åland Islands", - "value": "AX", - }, - Object { - "label": "Algeria", - "value": "DZ", - }, - Object { - "label": "American Samoa", - "value": "AS", - }, - Object { - "label": "Andorra", - "value": "AD", - }, - ], - }, - }, - "restriction_type": Object { - "choices": Array [ - "blocklist", - "allowlist", - ], - }, - "states": Object { - "child": Object { - "choices": Array [ - Object { - "label": "Alabama", - "value": "AL", - }, - Object { - "label": "Arizona", - "value": "AZ", - }, - Object { - "label": "Arkansas", - "value": "AR", - }, - Object { - "label": "California", - "value": "CA", - }, - Object { - "label": "Colorado", - "value": "CO", - }, - ], - }, - }, - }, - }, "subjects": Object { "child": Object { "choices": Array [ @@ -1527,16 +1465,6 @@ exports[`BaseEditCourseForm renders correctly when submitting for review 1`] = ` }, "learner_testimonials": "learner testimonials", "level_type": "advanced", - "location_restriction": Object { - "countries": Array [ - "AF", - "AX", - ], - "restriction_type": "allowlist", - "states": Array [ - "CO", - ], - }, "organization_logo_override": "http://image.src.small", "organization_short_code_override": "test short code", "outcome": "learning outcomes", @@ -2726,68 +2654,6 @@ exports[`BaseEditCourseForm renders html correctly while submitting 1`] = ` }, ], }, - "location_restriction": Object { - "children": Object { - "countries": Object { - "child": Object { - "choices": Array [ - Object { - "label": "Afghanistan", - "value": "AF", - }, - Object { - "label": "Åland Islands", - "value": "AX", - }, - Object { - "label": "Algeria", - "value": "DZ", - }, - Object { - "label": "American Samoa", - "value": "AS", - }, - Object { - "label": "Andorra", - "value": "AD", - }, - ], - }, - }, - "restriction_type": Object { - "choices": Array [ - "blocklist", - "allowlist", - ], - }, - "states": Object { - "child": Object { - "choices": Array [ - Object { - "label": "Alabama", - "value": "AL", - }, - Object { - "label": "Arizona", - "value": "AZ", - }, - Object { - "label": "Arkansas", - "value": "AR", - }, - Object { - "label": "California", - "value": "CA", - }, - Object { - "label": "Colorado", - "value": "CO", - }, - ], - }, - }, - }, - }, "subjects": Object { "child": Object { "choices": Array [ @@ -3209,16 +3075,6 @@ exports[`BaseEditCourseForm renders html correctly while submitting 1`] = ` }, "learner_testimonials": "learner testimonials", "level_type": "advanced", - "location_restriction": Object { - "countries": Array [ - "AF", - "AX", - ], - "restriction_type": "allowlist", - "states": Array [ - "CO", - ], - }, "organization_logo_override": "http://image.src.small", "organization_short_code_override": "test short code", "outcome": "learning outcomes", @@ -3262,16 +3118,6 @@ exports[`BaseEditCourseForm renders html correctly while submitting 1`] = ` }, "learner_testimonials": "learner testimonials", "level_type": "advanced", - "location_restriction": Object { - "countries": Array [ - "AF", - "AX", - ], - "restriction_type": "allowlist", - "states": Array [ - "CO", - ], - }, "organization_logo_override": "http://image.src.small", "organization_short_code_override": "test short code", "outcome": "learning outcomes", @@ -4495,139 +4341,6 @@ exports[`BaseEditCourseForm renders html correctly with administrator being true requiredHeight={110} requiredWidth={110} /> - - - } - name="location_restriction.restriction_type" - options={ - Array [ - Object { - "label": undefined, - "value": undefined, - }, - Object { - "label": undefined, - "value": undefined, - }, - ] - } - required={false} - /> - - } - name="location_restriction.countries" - options={ - Array [ - Object { - "label": undefined, - "value": "AF", - }, - Object { - "label": undefined, - "value": "AX", - }, - Object { - "label": undefined, - "value": "DZ", - }, - Object { - "label": undefined, - "value": "AS", - }, - Object { - "label": undefined, - "value": "AD", - }, - ] - } - required={false} - /> - - } - name="location_restriction.states" - options={ - Array [ - Object { - "label": undefined, - "value": "AL", - }, - Object { - "label": undefined, - "value": "AZ", - }, - Object { - "label": undefined, - "value": "AR", - }, - Object { - "label": undefined, - "value": "CA", - }, - Object { - "label": undefined, - "value": "CO", - }, - ] - } - required={false} - /> learn

", @@ -609,16 +594,6 @@ exports[`EditCoursePage renders page correctly with courseInfo 1`] = ` }, "learner_testimonials": null, "level_type": "intermediate", - "location_restriction": Object { - "countries": Array [ - "AF", - "AX", - ], - "restriction_type": "allowlist", - "states": Array [ - "AL", - ], - }, "organization_logo_override_url": "http://image.src.small", "organization_short_code_override": "test short code", "outcome": "

learn

", @@ -853,16 +828,6 @@ exports[`EditCoursePage renders page correctly with courseInfo and courseOptions "key": "edX+Test101x", "learner_testimonials": null, "level_type": "intermediate", - "location_restriction": Object { - "countries": Array [ - "AF", - "AX", - ], - "restriction_type": "allowlist", - "states": Array [ - "AL", - ], - }, "organization_logo_override_url": "http://image.src.small", "organization_short_code_override": "test short code", "outcome": "

learn

", @@ -925,68 +890,6 @@ exports[`EditCoursePage renders page correctly with courseInfo and courseOptions }, ], }, - "location_restriction": Object { - "children": Object { - "countries": Object { - "child": Object { - "choices": Array [ - Object { - "label": "Afghanistan", - "value": "AF", - }, - Object { - "label": "Åland Islands", - "value": "AX", - }, - Object { - "label": "Algeria", - "value": "DZ", - }, - Object { - "label": "American Samoa", - "value": "AS", - }, - Object { - "label": "Andorra", - "value": "AD", - }, - ], - }, - }, - "restriction_type": Object { - "choices": Array [ - "blocklist", - "allowlist", - ], - }, - "states": Object { - "child": Object { - "choices": Array [ - Object { - "label": "Alabama", - "value": "AL", - }, - Object { - "label": "Arizona", - "value": "AZ", - }, - Object { - "label": "Arkansas", - "value": "AR", - }, - Object { - "label": "California", - "value": "CA", - }, - Object { - "label": "Colorado", - "value": "CO", - }, - ], - }, - }, - }, - }, "subjects": Object { "child": Object { "choices": Array [ @@ -1423,16 +1326,6 @@ exports[`EditCoursePage renders page correctly with courseInfo and courseOptions }, "learner_testimonials": null, "level_type": "intermediate", - "location_restriction": Object { - "countries": Array [ - "AF", - "AX", - ], - "restriction_type": "allowlist", - "states": Array [ - "AL", - ], - }, "organization_logo_override_url": "http://image.src.small", "organization_short_code_override": "test short code", "outcome": "

learn

", @@ -1604,11 +1497,6 @@ exports[`EditCoursePage renders page correctly with courseInfo error 1`] = ` }, "learner_testimonials": undefined, "level_type": undefined, - "location_restriction": Object { - "countries": null, - "restriction_type": null, - "states": null, - }, "organization_logo_override_url": undefined, "organization_short_code_override": undefined, "outcome": undefined, @@ -1852,16 +1740,6 @@ exports[`EditCoursePage renders page correctly with courseInfo, courseOptions, a "key": "edX+Test101x", "learner_testimonials": null, "level_type": "intermediate", - "location_restriction": Object { - "countries": Array [ - "AF", - "AX", - ], - "restriction_type": "allowlist", - "states": Array [ - "AL", - ], - }, "organization_logo_override_url": "http://image.src.small", "organization_short_code_override": "test short code", "outcome": "

learn

", @@ -1924,68 +1802,6 @@ exports[`EditCoursePage renders page correctly with courseInfo, courseOptions, a }, ], }, - "location_restriction": Object { - "children": Object { - "countries": Object { - "child": Object { - "choices": Array [ - Object { - "label": "Afghanistan", - "value": "AF", - }, - Object { - "label": "Åland Islands", - "value": "AX", - }, - Object { - "label": "Algeria", - "value": "DZ", - }, - Object { - "label": "American Samoa", - "value": "AS", - }, - Object { - "label": "Andorra", - "value": "AD", - }, - ], - }, - }, - "restriction_type": Object { - "choices": Array [ - "blocklist", - "allowlist", - ], - }, - "states": Object { - "child": Object { - "choices": Array [ - Object { - "label": "Alabama", - "value": "AL", - }, - Object { - "label": "Arizona", - "value": "AZ", - }, - Object { - "label": "Arkansas", - "value": "AR", - }, - Object { - "label": "California", - "value": "CA", - }, - Object { - "label": "Colorado", - "value": "CO", - }, - ], - }, - }, - }, - }, "subjects": Object { "child": Object { "choices": Array [ @@ -2490,16 +2306,6 @@ exports[`EditCoursePage renders page correctly with courseInfo, courseOptions, a }, "learner_testimonials": null, "level_type": "intermediate", - "location_restriction": Object { - "countries": Array [ - "AF", - "AX", - ], - "restriction_type": "allowlist", - "states": Array [ - "AL", - ], - }, "organization_logo_override_url": "http://image.src.small", "organization_short_code_override": "test short code", "outcome": "

learn

", @@ -2687,11 +2493,6 @@ exports[`EditCoursePage renders page correctly with courseInfo, courseOptions, a }, "learner_testimonials": undefined, "level_type": undefined, - "location_restriction": Object { - "countries": null, - "restriction_type": null, - "states": null, - }, "organization_logo_override_url": undefined, "organization_short_code_override": undefined, "outcome": undefined, @@ -2858,68 +2659,6 @@ exports[`EditCoursePage renders page correctly with courseOptions 1`] = ` }, ], }, - "location_restriction": Object { - "children": Object { - "countries": Object { - "child": Object { - "choices": Array [ - Object { - "label": "Afghanistan", - "value": "AF", - }, - Object { - "label": "Åland Islands", - "value": "AX", - }, - Object { - "label": "Algeria", - "value": "DZ", - }, - Object { - "label": "American Samoa", - "value": "AS", - }, - Object { - "label": "Andorra", - "value": "AD", - }, - ], - }, - }, - "restriction_type": Object { - "choices": Array [ - "blocklist", - "allowlist", - ], - }, - "states": Object { - "child": Object { - "choices": Array [ - Object { - "label": "Alabama", - "value": "AL", - }, - Object { - "label": "Arizona", - "value": "AZ", - }, - Object { - "label": "Arkansas", - "value": "AR", - }, - Object { - "label": "California", - "value": "CA", - }, - Object { - "label": "Colorado", - "value": "CO", - }, - ], - }, - }, - }, - }, "subjects": Object { "child": Object { "choices": Array [ @@ -3217,11 +2956,6 @@ exports[`EditCoursePage renders page correctly with courseOptions 1`] = ` }, "learner_testimonials": undefined, "level_type": undefined, - "location_restriction": Object { - "countries": null, - "restriction_type": null, - "states": null, - }, "organization_logo_override_url": undefined, "organization_short_code_override": undefined, "outcome": undefined, @@ -3391,11 +3125,6 @@ exports[`EditCoursePage renders page correctly with courseOptions error 1`] = ` }, "learner_testimonials": undefined, "level_type": undefined, - "location_restriction": Object { - "countries": null, - "restriction_type": null, - "states": null, - }, "organization_logo_override_url": undefined, "organization_short_code_override": undefined, "outcome": undefined, @@ -3640,11 +3369,6 @@ exports[`EditCoursePage renders page correctly with courseRunOptions 1`] = ` }, "learner_testimonials": undefined, "level_type": undefined, - "location_restriction": Object { - "countries": null, - "restriction_type": null, - "states": null, - }, "organization_logo_override_url": undefined, "organization_short_code_override": undefined, "outcome": undefined, @@ -3814,11 +3538,6 @@ exports[`EditCoursePage renders page correctly with courseRunOptions error 1`] = }, "learner_testimonials": undefined, "level_type": undefined, - "location_restriction": Object { - "countries": null, - "restriction_type": null, - "states": null, - }, "organization_logo_override_url": undefined, "organization_short_code_override": undefined, "outcome": undefined, diff --git a/src/components/EditCoursePage/index.jsx b/src/components/EditCoursePage/index.jsx index 271fb4c47..542c04b0b 100644 --- a/src/components/EditCoursePage/index.jsx +++ b/src/components/EditCoursePage/index.jsx @@ -212,21 +212,6 @@ class EditCoursePage extends React.Component { }; } - formatLocationRestrictionFields(courseData) { - if (courseData?.location_restriction) { - return { - restriction_type: courseData.location_restriction.restriction_type, - countries: courseData.location_restriction.countries, - states: courseData.location_restriction.states, - }; - } - return { - restriction_type: null, - countries: null, - states: null, - }; - } - prepareSendCourseData(courseData) { const { courseInfo: { @@ -253,7 +238,6 @@ class EditCoursePage extends React.Component { key, learner_testimonials: courseData.learner_testimonials, level_type: courseData.level_type, - location_restriction: courseData.location_restriction, organization_logo_override: courseData.organization_logo_override_url, organization_short_code_override: courseData.organization_short_code_override, outcome: courseData.outcome, @@ -280,12 +264,10 @@ class EditCoursePage extends React.Component { if (courseData.course_type === EXECUTIVE_EDUCATION_SLUG) { formattedCourseData.additional_metadata = this.formatAdditionalMetadataFields(courseData); } - // Check for values to prevent a new entry being created unnecessarily if (courseData.in_year_value && Object.values(courseData.in_year_value).some(value => value !== null)) { formattedCourseData.in_year_value = this.formatValueFields(courseData); } - return formattedCourseData; } @@ -462,10 +444,6 @@ class EditCoursePage extends React.Component { return this.formatValueFields(this.props.courseInfo.data); } - buildLocationRestriction() { - return this.formatLocationRestrictionFields(this.props.courseInfo.data); - } - buildInitialValues() { const { courseInfo: { @@ -531,7 +509,6 @@ class EditCoursePage extends React.Component { enterprise_subscription_inclusion, organization_short_code_override, organization_logo_override_url, - location_restriction: this.buildLocationRestriction(), in_year_value: this.buildInYearValue(), }; } diff --git a/src/components/RenderSelectField/updated-paragon-component.jsx b/src/components/RenderSelectField/updated-paragon-component.jsx deleted file mode 100644 index 5e690a2e3..000000000 --- a/src/components/RenderSelectField/updated-paragon-component.jsx +++ /dev/null @@ -1,71 +0,0 @@ -// TODO: This file can be deleted as a part of https://github.com/openedx/frontend-app-publisher/pull/761 -// When we migrate off deprecated paragon components, we want to replace the contents of ./index.jsx -// with the contents of this file and then delete this file. -// Adding this file to the codebase as a temporary measure -// because the existing select component doesn't have multiselect functionality -// and it doesn't make sense to edit paragon to add that functionality bc we're moving off that component soon. - -import React from 'react'; -import PropTypes from 'prop-types'; -import { Form } from '@edx/paragon'; - -const RenderSelectField = ({ - input, - extraInput, - name, - label, - disabled, - required, - meta: { touched, error }, - options, -}) => ( - - - {label} - - - {options.map(option => ( - - ))} - {touched && error && ( - - {error} - - )} - - -); - -RenderSelectField.defaultProps = { - extraInput: {}, - name: '', - disabled: false, - required: false, -}; - -RenderSelectField.propTypes = { - input: PropTypes.shape({}).isRequired, - extraInput: PropTypes.shape({}), - name: PropTypes.string, - label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired, - meta: PropTypes.shape({ - touched: PropTypes.bool, - error: PropTypes.string, - }).isRequired, - disabled: PropTypes.bool, - required: PropTypes.bool, - options: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.string), - PropTypes.arrayOf(PropTypes.object), - ]).isRequired, -}; - -export default RenderSelectField; diff --git a/src/data/constants/testData.js b/src/data/constants/testData.js index 3d2b6118e..2d80490b7 100644 --- a/src/data/constants/testData.js +++ b/src/data/constants/testData.js @@ -225,38 +225,6 @@ const courseOptions = { ], }, }, - location_restriction: { - children: { - restriction_type: { - choices: [ - 'blocklist', - 'allowlist', - ], - }, - countries: { - child: { - choices: [ - { label: 'Afghanistan', value: 'AF' }, - { label: 'Åland Islands', value: 'AX' }, - { label: 'Algeria', value: 'DZ' }, - { label: 'American Samoa', value: 'AS' }, - { label: 'Andorra', value: 'AD' }, - ], - }, - }, - states: { - child: { - choices: [ - { label: 'Alabama', value: 'AL' }, - { label: 'Arizona', value: 'AZ' }, - { label: 'Arkansas', value: 'AR' }, - { label: 'California', value: 'CA' }, - { label: 'Colorado', value: 'CO' }, - ], - }, - }, - }, - }, }, }, }, From 05afea41c9227b1e9abc1efb3b24f9506ff3c25e Mon Sep 17 00:00:00 2001 From: Muhammad Abdullah Waheed <42172960+abdullahwaheed@users.noreply.github.com> Date: Thu, 25 Aug 2022 17:50:51 +0500 Subject: [PATCH 2/2] Paragon StatusAlert deprecation (#762) * refactor: migrated StatusAlert deprecation to Alert * refactor: removed central StatusAlert and migrated each component to Paragon Alert --- .gitignore | 1 + src/components/CollaboratorPage/index.jsx | 32 +- .../CreateCoursePage.test.jsx.snap | 113 +++- src/components/CreateCoursePage/index.jsx | 22 +- .../CreateCourseRunPage.test.jsx | 6 +- .../CreateCourseRunPage.test.jsx.snap | 34 +- src/components/CreateCourseRunPage/index.jsx | 19 +- .../EditCoursePage/EditCoursePage.test.jsx | 19 +- .../EditCoursePage/TranscriptLanguage.jsx | 7 +- .../EditCoursePage.test.jsx.snap | 573 +++++++++++++----- .../TranscriptLanguage.test.jsx.snap | 29 +- src/components/EditCoursePage/index.jsx | 54 +- .../__snapshots__/ImageUpload.test.jsx.snap | 29 +- src/components/ImageUpload/index.jsx | 17 +- .../__snapshots__/ListField.test.jsx.snap | 58 +- src/components/ListField/index.jsx | 8 +- src/components/RichEditor/index.jsx | 7 +- src/components/SidePanes/CommentsPane.jsx | 21 +- .../SidePanes/CommentsPane.test.jsx | 6 +- src/components/SidePanes/UsersPane.jsx | 5 +- .../__snapshots__/StafferPage.test.jsx.snap | 109 +++- src/components/StafferPage/index.jsx | 34 +- .../StatusAlert/StatusAlert.test.jsx | 15 - .../__snapshots__/StatusAlert.test.jsx.snap | 22 - src/components/StatusAlert/index.jsx | 68 --- .../TableComponent.test.jsx.snap | 41 +- src/components/TableComponent/index.jsx | 26 +- .../CreateCourse/CreateCourse.test.jsx | 2 +- 28 files changed, 880 insertions(+), 497 deletions(-) delete mode 100644 src/components/StatusAlert/StatusAlert.test.jsx delete mode 100644 src/components/StatusAlert/__snapshots__/StatusAlert.test.jsx.snap delete mode 100644 src/components/StatusAlert/index.jsx diff --git a/.gitignore b/.gitignore index 1b6f8502b..86918ee92 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,4 @@ module.config.js dist/ .idea +.vscode diff --git a/src/components/CollaboratorPage/index.jsx b/src/components/CollaboratorPage/index.jsx index feba33792..b4b53d719 100644 --- a/src/components/CollaboratorPage/index.jsx +++ b/src/components/CollaboratorPage/index.jsx @@ -1,9 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Helmet } from 'react-helmet'; +import { Alert } from '@edx/paragon'; import CollaboratorForm from './CollaboratorForm'; -import StatusAlert from '../StatusAlert'; import PageContainer from '../PageContainer'; class CollaboratorPage extends React.Component { @@ -51,12 +51,13 @@ class CollaboratorPage extends React.Component { if (!isCreateForm && (!location.state || !location.state.uuid)) { return ( - + variant="danger" + > + Could not load page: +

Direct access to collaborators not supported

+ ); } @@ -87,12 +88,14 @@ class CollaboratorPage extends React.Component { { referrer && ( - + > + The data you entered on the course edit screen is saved. You will return to that page + when you have finished updating collaborator information. + )}

{titleText}

@@ -109,11 +112,12 @@ class CollaboratorPage extends React.Component { {...this.props} /> { errorArray.length > 0 && ( - + variant="danger" + > + {errorArray} + )}
diff --git a/src/components/CreateCoursePage/__snapshots__/CreateCoursePage.test.jsx.snap b/src/components/CreateCoursePage/__snapshots__/CreateCoursePage.test.jsx.snap index 2e3a3649b..3b2a010ba 100644 --- a/src/components/CreateCoursePage/__snapshots__/CreateCoursePage.test.jsx.snap +++ b/src/components/CreateCoursePage/__snapshots__/CreateCoursePage.test.jsx.snap @@ -142,21 +142,32 @@ exports[`CreateCoursePage renders page correctly with course create error 1`] = touchOnChange={false} updateUnregisteredFields={false} /> - , - ] - } onClose={[Function]} - title={null} - /> + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" + > + Fail +
+ @@ -293,16 +304,45 @@ exports[`CreateCoursePage renders page correctly with course create success 1`] `; exports[`CreateCoursePage renders page correctly with no publisherUserInfo 1`] = ` - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" +> + + Course Create Form failed to load: + +

+ User information unavailable +

+ `; exports[`CreateCoursePage renders page correctly with org error 1`] = ` @@ -365,21 +405,32 @@ exports[`CreateCoursePage renders page correctly with org error 1`] = ` touchOnChange={false} updateUnregisteredFields={false} /> - , - ] - } onClose={[Function]} - title={null} - /> + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" + > + Fail +
+ diff --git a/src/components/CreateCoursePage/index.jsx b/src/components/CreateCoursePage/index.jsx index ef69a171a..e7599074f 100644 --- a/src/components/CreateCoursePage/index.jsx +++ b/src/components/CreateCoursePage/index.jsx @@ -1,11 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Helmet } from 'react-helmet'; +import { Alert } from '@edx/paragon'; import CreateCourseForm from './CreateCourseForm'; import LoadingSpinner from '../LoadingSpinner'; import PageContainer from '../PageContainer'; -import StatusAlert from '../StatusAlert'; import ConfirmationModal from '../ConfirmationModal'; import { formatPriceData } from '../../utils'; @@ -94,12 +94,13 @@ class CreateCoursePage extends React.Component { render() { if (!this.props.publisherUserInfo) { return ( - + variant="danger" + > + Course Create Form failed to load: +

User information unavailable

+ ); } @@ -174,11 +175,12 @@ class CreateCoursePage extends React.Component { courseRunOptions={courseRunOptions} /> {errorArray.length > 1 && ( - + variant="danger" + > + {errorArray} + ) } )} diff --git a/src/components/CreateCourseRunPage/CreateCourseRunPage.test.jsx b/src/components/CreateCourseRunPage/CreateCourseRunPage.test.jsx index eff8fa710..9025d64b1 100644 --- a/src/components/CreateCourseRunPage/CreateCourseRunPage.test.jsx +++ b/src/components/CreateCourseRunPage/CreateCourseRunPage.test.jsx @@ -1,10 +1,10 @@ import React from 'react'; import { shallow } from 'enzyme'; import { shallowToJson } from 'enzyme-to-json'; +import { Alert } from '@edx/paragon'; import { CreateCourseRunForm } from './CreateCourseRunForm'; import CreateCourseRunPage from './index'; -import StatusAlert from '../StatusAlert'; import { courseOptions } from '../../data/constants/testData'; describe('CreateCourseRunPage', () => { @@ -91,9 +91,9 @@ describe('CreateCourseRunPage', () => { />); // Confirm message is shown - const reviewAlert = component.find(StatusAlert); + const reviewAlert = component.find(Alert); const reviewMessage = 'Test Course has been submitted for review. No course runs can be added right now.'; - expect(reviewAlert.props().message).toEqual(reviewMessage); + expect(reviewAlert.text()).toEqual(reviewMessage); // And confirm that we don't show form const form = component.find(CreateCourseRunForm); diff --git a/src/components/CreateCourseRunPage/__snapshots__/CreateCourseRunPage.test.jsx.snap b/src/components/CreateCourseRunPage/__snapshots__/CreateCourseRunPage.test.jsx.snap index 002ea854c..689f18b06 100644 --- a/src/components/CreateCourseRunPage/__snapshots__/CreateCourseRunPage.test.jsx.snap +++ b/src/components/CreateCourseRunPage/__snapshots__/CreateCourseRunPage.test.jsx.snap @@ -430,21 +430,33 @@ exports[`CreateCourseRunPage renders html correctly when error 1`] = ` updateUnregisteredFields={false} uuid="" /> - , - ] - } onClose={[Function]} - title={null} - /> + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" + > + failed +
+ diff --git a/src/components/CreateCourseRunPage/index.jsx b/src/components/CreateCourseRunPage/index.jsx index 8289a6a0e..264069e34 100644 --- a/src/components/CreateCourseRunPage/index.jsx +++ b/src/components/CreateCourseRunPage/index.jsx @@ -3,11 +3,12 @@ import moment from 'moment'; import React from 'react'; import PropTypes from 'prop-types'; import { Helmet } from 'react-helmet'; +import { Alert } from '@edx/paragon'; import { IN_REVIEW_STATUS } from '../../data/constants'; import { CreateCourseRunForm } from './CreateCourseRunForm'; import LoadingSpinner from '../LoadingSpinner'; -import StatusAlert from '../StatusAlert'; + import PageContainer from '../PageContainer'; import { buildInitialPrices, formatDate, getOptionsData, parseCourseTypeOptions, @@ -151,10 +152,9 @@ class CreateCourseRunPage extends React.Component { { showSpinner && } { courseInReview && ( - + + {`${title} has been submitted for review. No course runs can be added right now.`} + )} { showForm && ( @@ -177,12 +177,13 @@ class CreateCourseRunPage extends React.Component { canSetRunKey={canSetRunKey} /> {errorArray.length > 1 && ( - + > + {errorArray} + ) } )} diff --git a/src/components/EditCoursePage/EditCoursePage.test.jsx b/src/components/EditCoursePage/EditCoursePage.test.jsx index 9ed6a764d..f7bafbbcf 100644 --- a/src/components/EditCoursePage/EditCoursePage.test.jsx +++ b/src/components/EditCoursePage/EditCoursePage.test.jsx @@ -4,10 +4,11 @@ import { Provider } from 'react-redux'; import { mount, shallow } from 'enzyme'; import { shallowToJson } from 'enzyme-to-json'; import configureStore from 'redux-mock-store'; +import { Alert } from '@edx/paragon'; + import EditCoursePage from './index'; import ConfirmationModal from '../ConfirmationModal'; -import StatusAlert from '../StatusAlert'; import { PUBLISHED, REVIEW_BY_INTERNAL, REVIEW_BY_LEGAL, UNPUBLISHED, EXECUTIVE_EDUCATION_SLUG, @@ -565,9 +566,9 @@ describe('EditCoursePage', () => { targetRun: unpublishedCourseRun, }} />); - const reviewAlert = component.find(StatusAlert); + const reviewAlert = component.find(Alert); const reviewMessage = 'Course has been submitted for review. The course will be locked for the next two business days. You will receive an email when the review is complete.'; - expect(reviewAlert.props().message).toEqual(reviewMessage); + expect(reviewAlert.text()).toEqual(reviewMessage); }); it('upon legal review submission, StatusAlert is set to appear', () => { @@ -578,9 +579,9 @@ describe('EditCoursePage', () => { targetRun: { status: REVIEW_BY_LEGAL }, }} />); - const reviewAlert = component.find(StatusAlert); + const reviewAlert = component.find(Alert); const reviewMessage = 'Legal Review Complete. Course Run is now awaiting PC Review.'; - expect(reviewAlert.props().message).toEqual(reviewMessage); + expect(reviewAlert.text()).toEqual(reviewMessage); }); it('upon internal review submission, StatusAlert is set to appear', () => { @@ -591,18 +592,18 @@ describe('EditCoursePage', () => { targetRun: { status: REVIEW_BY_INTERNAL }, }} />); - const reviewAlert = component.find(StatusAlert); + const reviewAlert = component.find(Alert); const reviewMessage = 'PC Review Complete.'; - expect(reviewAlert.props().message).toEqual(reviewMessage); + expect(reviewAlert.text()).toEqual(reviewMessage); }); it('upon course run creation, StatusAlert is set to appear', () => { const component = shallow(); - const createAlert = component.find(StatusAlert); + const createAlert = component.find(Alert); const createMessage = 'Course run has been created in studio. See link below.'; - expect(createAlert.props().message).toEqual(createMessage); + expect(createAlert.text()).toEqual(createMessage); }); it('handleCourseSubmit properly prepares course data for Save Edits case with no changes', () => { diff --git a/src/components/EditCoursePage/TranscriptLanguage.jsx b/src/components/EditCoursePage/TranscriptLanguage.jsx index 380936109..5459666f1 100644 --- a/src/components/EditCoursePage/TranscriptLanguage.jsx +++ b/src/components/EditCoursePage/TranscriptLanguage.jsx @@ -1,11 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Field, FieldArray } from 'redux-form'; +import { Alert } from '@edx/paragon'; import RenderSelectField from '../RenderSelectField'; import RemoveButton from '../RemoveButton'; import FieldLabel from '../FieldLabel'; -import StatusAlert from '../StatusAlert'; class TranscriptLanguage extends React.Component { constructor(props) { @@ -33,10 +33,7 @@ class TranscriptLanguage extends React.Component {
{submitFailed && error && ( - + {error} )}
    {fields.map((language, index) => ( diff --git a/src/components/EditCoursePage/__snapshots__/EditCoursePage.test.jsx.snap b/src/components/EditCoursePage/__snapshots__/EditCoursePage.test.jsx.snap index 6d366e7c5..9c03f69a5 100644 --- a/src/components/EditCoursePage/__snapshots__/EditCoursePage.test.jsx.snap +++ b/src/components/EditCoursePage/__snapshots__/EditCoursePage.test.jsx.snap @@ -53,15 +53,30 @@ exports[`EditCoursePage renders html correctly 1`] = ` } wide={false} > - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="secondary" + > + You have permission to view this course, but not edit. If you would like to edit the course, please contact a course editor. + - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="secondary" + > + You have permission to view this course, but not edit. If you would like to edit the course, please contact a course editor. + - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="secondary" + > + You have permission to view this course, but not edit. If you would like to edit the course, please contact a course editor. + - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="secondary" + > + You have permission to view this course, but not edit. If you would like to edit the course, please contact a course editor. + - , - ] - } onClose={[Function]} - title={null} - /> + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" + > + Course Info error. +
    + `; @@ -1603,15 +1674,30 @@ exports[`EditCoursePage renders page correctly with courseInfo, courseOptions, a } wide={false} > - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="secondary" + > + You have permission to view this course, but not edit. If you would like to edit the course, please contact a course editor. + - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="secondary" + > + You have permission to view this course, but not edit. If you would like to edit the course, please contact a course editor. + - , - "Course Options error.", -
    , - "Course Run Options error.", -
    , - ] - } onClose={[Function]} - title={null} - /> + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" + > + Course Info error. +
    + Course Options error. +
    + Course Run Options error. +
    + `; @@ -2599,15 +2711,30 @@ exports[`EditCoursePage renders page correctly with courseOptions 1`] = ` } wide={false} > - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="secondary" + > + You have permission to view this course, but not edit. If you would like to edit the course, please contact a course editor. + - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="secondary" + > + You have permission to view this course, but not edit. If you would like to edit the course, please contact a course editor. + - , - ] - } onClose={[Function]} - title={null} - /> + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" + > + Course Options error. +
    + `; @@ -3227,15 +3380,30 @@ exports[`EditCoursePage renders page correctly with courseRunOptions 1`] = ` } wide={false} > - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="secondary" + > + You have permission to view this course, but not edit. If you would like to edit the course, please contact a course editor. + - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="secondary" + > + You have permission to view this course, but not edit. If you would like to edit the course, please contact a course editor. + - , - ] - } onClose={[Function]} - title={null} - /> + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" + > + Course Run Options error. +
    + `; exports[`EditCoursePage renders page correctly with no courseInfo 1`] = ` - + show={true} + stacked={false} + title="" + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" +> + + Course Edit Form failed to load: + +

    + Course information unavailable. Please try reloading the page and if the error persists, please contact support. +

    + `; exports[`EditCoursePage renders page correctly with no courseOptions 1`] = ` - + show={true} + stacked={false} + title="" + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" +> + + Course Edit Form failed to load: + +

    + Course information unavailable. Please try reloading the page and if the error persists, please contact support. +

    + `; exports[`EditCoursePage renders page correctly with no courseRunOptions 1`] = ` - + show={true} + stacked={false} + title="" + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" +> + + Course Edit Form failed to load: + +

    + Course information unavailable. Please try reloading the page and if the error persists, please contact support. +

    + `; diff --git a/src/components/EditCoursePage/__snapshots__/TranscriptLanguage.test.jsx.snap b/src/components/EditCoursePage/__snapshots__/TranscriptLanguage.test.jsx.snap index 33fb77e54..0d898d5de 100644 --- a/src/components/EditCoursePage/__snapshots__/TranscriptLanguage.test.jsx.snap +++ b/src/components/EditCoursePage/__snapshots__/TranscriptLanguage.test.jsx.snap @@ -72,15 +72,30 @@ exports[`Transcript Language renders correctly with an error after failed submis className="transcript-languages mb-3" tabIndex="-1" > - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" + > + This field is required +
      diff --git a/src/components/EditCoursePage/index.jsx b/src/components/EditCoursePage/index.jsx index 542c04b0b..21a2f04b0 100644 --- a/src/components/EditCoursePage/index.jsx +++ b/src/components/EditCoursePage/index.jsx @@ -2,10 +2,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Helmet } from 'react-helmet'; +import { Alert } from '@edx/paragon'; import EditCourseForm from './EditCourseForm'; import PageContainer from '../PageContainer'; -import StatusAlert from '../StatusAlert'; import LoadingSpinner from '../LoadingSpinner'; import { buildInitialPrices, courseRunIsArchived, formatPriceData, getCourseNumber, isValidDate, @@ -561,13 +561,18 @@ class EditCoursePage extends React.Component { render() { if (!this.props.courseInfo || !this.props.courseOptions || !this.props.courseRunOptions) { return ( - + variant="danger" + title="" + message="" + > + Course Edit Form failed to load: +

      + Course information unavailable. Please try reloading the page and if the error + persists, please contact support. +

      + ); } @@ -665,21 +670,23 @@ class EditCoursePage extends React.Component { />
      { showReviewStatusAlert && ( - + variant="success" + > + {targetRun && this.displayReviewStatusAlert(targetRun.status)} + ) } { showCreateStatusAlert && ( - + variant="success" + > + Course run has been created in studio. See link below. + ) }
      { showSpinner && } @@ -710,10 +717,10 @@ class EditCoursePage extends React.Component { )} > { showForm && !editable && ( - + + You have permission to view this course, but not edit. If you would like to edit the course, please + contact a course editor. + ) } { showForm && ( <> @@ -743,11 +750,12 @@ class EditCoursePage extends React.Component { )} { errorArray.length > 0 && ( - + variant="danger" + > + {errorArray} + )} diff --git a/src/components/ImageUpload/__snapshots__/ImageUpload.test.jsx.snap b/src/components/ImageUpload/__snapshots__/ImageUpload.test.jsx.snap index 9cfdc9a7e..0b3535b63 100644 --- a/src/components/ImageUpload/__snapshots__/ImageUpload.test.jsx.snap +++ b/src/components/ImageUpload/__snapshots__/ImageUpload.test.jsx.snap @@ -15,15 +15,30 @@ exports[`ImageUpload shows an image upload and an error 1`] = ` Image Error Test - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" + > + Required + {label} {/* eslint-disable-line jsx-a11y/label-has-for */} {sizeValidationError && ( - + + {sizeValidationError} + )} {submitFailed && error && ( - + + {error} + )} - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" + > + This field is required + @@ -328,15 +343,30 @@ exports[`ListField - Staffers renders correctly with an error after failed submi
      - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" + > + This field is required + diff --git a/src/components/ListField/index.jsx b/src/components/ListField/index.jsx index 05fab6708..afe1cfff2 100644 --- a/src/components/ListField/index.jsx +++ b/src/components/ListField/index.jsx @@ -3,9 +3,10 @@ import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; import Autosuggest from 'react-autosuggest'; import { push } from 'connected-react-router'; import PropTypes from 'prop-types'; +import { Alert } from '@edx/paragon'; + import store from '../../data/store'; import sourceInfo from '../../data/actions/sourceInfo'; -import StatusAlert from '../StatusAlert'; class ListField extends React.Component { constructor(props) { @@ -187,10 +188,7 @@ class ListField extends React.Component {
      {submitFailed && error && ( - + {error} )} diff --git a/src/components/RichEditor/index.jsx b/src/components/RichEditor/index.jsx index f08eef199..4f50a749b 100644 --- a/src/components/RichEditor/index.jsx +++ b/src/components/RichEditor/index.jsx @@ -13,7 +13,7 @@ import '@edx/tinymce-language-selector'; import 'tinymce/skins/ui/oxide/skin.css'; import contentCss from 'tinymce/skins/content/default/content.min.css'; import contentUiCss from 'tinymce/skins/ui/oxide/content.min.css'; -import StatusAlert from '../StatusAlert'; +import { Alert } from '@edx/paragon'; class RichEditor extends React.Component { constructor(props) { @@ -73,10 +73,7 @@ class RichEditor extends React.Component {
      {label}
      {submitFailed && error && ( - + {error} )} {/* We are using aria-labelledby here instead of a
      diff --git a/src/components/SidePanes/CommentsPane.test.jsx b/src/components/SidePanes/CommentsPane.test.jsx index 8cd284a46..b39769323 100644 --- a/src/components/SidePanes/CommentsPane.test.jsx +++ b/src/components/SidePanes/CommentsPane.test.jsx @@ -1,9 +1,9 @@ import React from 'react'; import { shallow } from 'enzyme'; +import { Alert } from '@edx/paragon'; import Comment from './Comment'; import CommentsPane from './CommentsPane'; -import StatusAlert from '../StatusAlert'; describe('CommentsPane', () => { const mockFetch = jest.fn(); @@ -99,7 +99,7 @@ describe('CommentsPane', () => { const postCommentButton = wrapper.find('.btn-primary'); postCommentButton.simulate('click'); - const commentAlert = wrapper.find(StatusAlert); + const commentAlert = wrapper.find(Alert); expect(commentAlert); expect(wrapper.state().showEmptyCommentAlert).toEqual(true); }); @@ -112,7 +112,7 @@ describe('CommentsPane', () => { fetchComments={mockFetch} />); - const commentAlert = wrapper.find(StatusAlert); + const commentAlert = wrapper.find(Alert); expect(commentAlert); }); }); diff --git a/src/components/SidePanes/UsersPane.jsx b/src/components/SidePanes/UsersPane.jsx index ace2623c1..fcd376581 100644 --- a/src/components/SidePanes/UsersPane.jsx +++ b/src/components/SidePanes/UsersPane.jsx @@ -1,12 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Icon, InputSelect } from '@edx/paragon'; +import { Icon, InputSelect, Alert } from '@edx/paragon'; import Pane from './Pane'; import User from './User'; import FieldLabel from '../FieldLabel'; -import StatusAlert from '../StatusAlert'; class UsersPane extends React.Component { displayName(user) { @@ -120,7 +119,7 @@ class UsersPane extends React.Component {
      )} {!showEditors && Array.isArray(organizationUsers.error) && organizationUsers.error.length - && } + && {organizationUsers.error[0]}} {showEditors && (
      diff --git a/src/components/StafferPage/__snapshots__/StafferPage.test.jsx.snap b/src/components/StafferPage/__snapshots__/StafferPage.test.jsx.snap index 5d49a5e94..23ccded4f 100644 --- a/src/components/StafferPage/__snapshots__/StafferPage.test.jsx.snap +++ b/src/components/StafferPage/__snapshots__/StafferPage.test.jsx.snap @@ -65,16 +65,31 @@ exports[`StafferPage renders html correctly when given a referrer 1`] = ` className="" wide={false} > - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="info" + > + The data you entered on the course edit screen is saved. You will return to that page when you have finished updating instructor information. +

      Create New Instructor @@ -195,16 +210,47 @@ exports[`StafferPage renders page correctly while fetching 1`] = ` `; exports[`StafferPage renders page correctly with no stafferInfo 1`] = ` - + show={true} + stacked={false} + title="" + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" +> + + Could not load page + +

      + Could not get instructor information +

      + `; exports[`StafferPage renders page correctly with staffer info error 1`] = ` @@ -261,21 +307,32 @@ exports[`StafferPage renders page correctly with staffer info error 1`] = ` touchOnChange={false} updateUnregisteredFields={false} /> - , - ] - } onClose={[Function]} - title={null} - /> + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" + > + Fail +
      +

      diff --git a/src/components/StafferPage/index.jsx b/src/components/StafferPage/index.jsx index da0ac952f..820481440 100644 --- a/src/components/StafferPage/index.jsx +++ b/src/components/StafferPage/index.jsx @@ -1,9 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Helmet } from 'react-helmet'; +import { Alert } from '@edx/paragon'; import StafferForm from './StafferForm'; -import StatusAlert from '../StatusAlert'; import LoadingSpinner from '../LoadingSpinner'; import PageContainer from '../PageContainer'; @@ -107,12 +107,15 @@ class StafferPage extends React.Component { if (!stafferInfo) { return ( - + variant="danger" + title="" + message="" + > + Could not load page +

      Could not get instructor information

      + ); } @@ -150,12 +153,14 @@ class StafferPage extends React.Component { { showSpinner && } { referrer && ( - + > + The data you entered on the course edit screen is saved. You will return to that + page when you have finished updating instructor information. + )} { showForm && (
      @@ -171,11 +176,12 @@ class StafferPage extends React.Component { {...this.props} /> { errorArray.length > 1 && ( - + variant="danger" + > + {errorArray} + )}
      )} diff --git a/src/components/StatusAlert/StatusAlert.test.jsx b/src/components/StatusAlert/StatusAlert.test.jsx deleted file mode 100644 index 3f299347a..000000000 --- a/src/components/StatusAlert/StatusAlert.test.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; -import { shallowToJson } from 'enzyme-to-json'; - -import StatusAlert from './index'; - -describe('StatusAlert', () => { - it('shows a status alert', () => { - const component = shallow(); - expect(shallowToJson(component)).toMatchSnapshot(); - }); -}); diff --git a/src/components/StatusAlert/__snapshots__/StatusAlert.test.jsx.snap b/src/components/StatusAlert/__snapshots__/StatusAlert.test.jsx.snap deleted file mode 100644 index d6845f566..000000000 --- a/src/components/StatusAlert/__snapshots__/StatusAlert.test.jsx.snap +++ /dev/null @@ -1,22 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`StatusAlert shows a status alert 1`] = ` - -
      - Test Message -
      -
      - } - dismissible={false} - onClose={[Function]} - open={true} -/> -`; diff --git a/src/components/StatusAlert/index.jsx b/src/components/StatusAlert/index.jsx deleted file mode 100644 index faae13eb0..000000000 --- a/src/components/StatusAlert/index.jsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import { StatusAlert as Alert, Icon } from '@edx/paragon'; - -const StatusAlert = (props) => { - const { - alertType, - className, - iconClassNames, - title, - message, - dismissible, - onClose, - } = props; - - return ( - 0, - }) -} - > - {iconClassNames.length > 0 - && ( -
      - -
      - )} -
      - {title - && {title}} - {message} -
      -
- )} - onClose={onClose} - open - /> - ); -}; - -StatusAlert.propTypes = { - alertType: PropTypes.string.isRequired, - message: PropTypes.oneOfType([ - PropTypes.string, PropTypes.element, PropTypes.array, - ]).isRequired, - className: PropTypes.string, - iconClassNames: PropTypes.arrayOf(PropTypes.string), - title: PropTypes.string, - dismissible: PropTypes.bool, - onClose: PropTypes.func, -}; - -StatusAlert.defaultProps = { - className: '', - iconClassNames: [], - title: null, - dismissible: false, - onClose: () => {}, -}; - -export default StatusAlert; diff --git a/src/components/TableComponent/__snapshots__/TableComponent.test.jsx.snap b/src/components/TableComponent/__snapshots__/TableComponent.test.jsx.snap index 93ab3cbac..a07f78beb 100644 --- a/src/components/TableComponent/__snapshots__/TableComponent.test.jsx.snap +++ b/src/components/TableComponent/__snapshots__/TableComponent.test.jsx.snap @@ -300,25 +300,32 @@ exports[`CourseTable shows an empty table 1`] = ` exports[`CourseTable shows an error 1`] = ` - + show={true} + stacked={false} + transition={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "appear": false, + "in": false, + "mountOnEnter": false, + "timeout": 300, + "unmountOnExit": false, + }, + "displayName": "Fade", + "render": [Function], + } + } + variant="danger" + > + Unable to load data: + Test error. + `; diff --git a/src/components/TableComponent/index.jsx b/src/components/TableComponent/index.jsx index aca2be624..f98f8edf1 100644 --- a/src/components/TableComponent/index.jsx +++ b/src/components/TableComponent/index.jsx @@ -1,13 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import qs from 'query-string'; -import { Pagination, DataTable } from '@edx/paragon'; +import { Pagination, DataTable, Alert } from '@edx/paragon'; +import { WarningFilled, Error as ErrorIcon } from '@edx/paragon/icons'; import 'font-awesome/css/font-awesome.css'; import './TableComponent.scss'; import LoadingSpinner from '../LoadingSpinner'; -import StatusAlert from '../StatusAlert'; import { getErrorMessages, getPageOptionsFromUrl, updateUrl } from '../../utils'; class TableComponent extends React.Component { @@ -125,21 +125,23 @@ class TableComponent extends React.Component { ? ['You do not yet have access to Publisher. Please contact your project coordinator to get access.'] : ['Unable to load data: '].concat(getErrorMessages(this.props.error)); return ( - + + {message} + ); } renderEmptyDataMessage() { return ( - + + There are no results. + ); } diff --git a/src/containers/CreateCourse/CreateCourse.test.jsx b/src/containers/CreateCourse/CreateCourse.test.jsx index c4cacc122..f2fb40573 100644 --- a/src/containers/CreateCourse/CreateCourse.test.jsx +++ b/src/containers/CreateCourse/CreateCourse.test.jsx @@ -77,7 +77,7 @@ describe('Create Course View', () => { testState.courseRunOptions.isFetching = false; const wrapper = createWrapper(testState).find('CreateCoursePage').dive(); expect(wrapper.find('#create-error')).toHaveLength(1); - expect(wrapper.find('#create-error').props().message).toEqual(errorMessage.concat(
)); + expect(wrapper.find('#create-error').text()).toEqual(errorMessage[0]); }); it('Shows confirmation modal on form submission', () => {