From 288f068f6aec7c332b7d9278b70f32ca3eee1b20 Mon Sep 17 00:00:00 2001 From: Abdullah Waheed Date: Mon, 20 Jun 2022 16:39:11 +0500 Subject: [PATCH 1/6] refactor: updated deprecation of MasqueradeBanner component and updated unit tests --- .../static/components/MasqueradeBanner.jsx | 22 +++++++++---------- .../specs/MasqueradeBanner.test.jsx | 20 ++++++++--------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/credentials/static/components/MasqueradeBanner.jsx b/credentials/static/components/MasqueradeBanner.jsx index 550c57bd6..1d51d0e89 100644 --- a/credentials/static/components/MasqueradeBanner.jsx +++ b/credentials/static/components/MasqueradeBanner.jsx @@ -2,7 +2,7 @@ import React from 'react'; import axios from 'axios'; import PropTypes from 'prop-types'; import Cookies from 'js-cookie'; -import { Button, StatusAlert } from '@edx/paragon'; +import { Button, Alert } from '@edx/paragon'; import StringUtils from './Utils'; @@ -106,17 +106,17 @@ class MasqueradeBanner extends React.Component { /> - - { gettext('Masquerading failed') } - { gettext('You either do not have permission to masquerade as this user, or the user could not be found.') } - - )} - /> + dismissible + > +
+ { gettext('Masquerading failed') } + { gettext('You either do not have permission to masquerade as this user, or the user could not be found.') } +
+ ); } diff --git a/credentials/static/components/specs/MasqueradeBanner.test.jsx b/credentials/static/components/specs/MasqueradeBanner.test.jsx index 69970c448..b408eb091 100644 --- a/credentials/static/components/specs/MasqueradeBanner.test.jsx +++ b/credentials/static/components/specs/MasqueradeBanner.test.jsx @@ -30,19 +30,19 @@ describe('', () => { }); it('shows the failure alert', () => { - expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true); + expect(wrapper.find('.alert-danger').exists()).toBe(false); wrapper.setState({ masqueradeFailureAlertOpen: true }); wrapper.update(); - expect(wrapper.find('.alert-danger').prop('hidden')).toBe(false); + expect(wrapper.find('.alert-danger .alert-heading').first().text()).toEqual(gettext('Masquerading failed')); }); it('closes the failure alert', () => { - expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true); + expect(wrapper.find('.alert-danger').exists()).toBe(false); wrapper.setState({ masqueradeFailureAlertOpen: true }); wrapper.update(); - expect(wrapper.find('.alert-danger').prop('hidden')).toBe(false); - wrapper.find('.alert-danger .close').simulate('click'); - expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true); + expect(wrapper.find('.alert-danger').hasClass('show')).toBe(true); + wrapper.find('.alert-danger .btn').first().simulate('click'); + expect(wrapper.find('.alert-danger').hasClass('show')).toBe(false); }); it('handles releasing masquerade', () => { @@ -52,7 +52,7 @@ describe('', () => { return postPromise.then(() => { wrapper.update(); - expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true); + expect(wrapper.find('.alert-danger').exists()).toBe(false); }); }); }); @@ -92,19 +92,19 @@ describe('', () => { return postPromise.then(() => { wrapper.update(); - expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true); + expect(wrapper.find('.alert-danger').exists()).toBe(false); }); }); it('shows the failure alert on masquerade failure', () => { - expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true); + expect(wrapper.find('.alert-danger').exists()).toBe(false); const postPromise = Promise.resolve({ status: 400, response: { message: 'error' } }); axios.post.mockImplementation(() => postPromise); wrapper.find('.masquerade-form').simulate('submit'); return postPromise.catch(() => { wrapper.update(); - expect(wrapper.find('.alert-danger').prop('hidden')).toBe(false); + expect(wrapper.find('.alert-danger').hasClass('show')).toBe(true); }); }); }); From 3e8ad5c629a43afb2eef38956b58d4b92a6a86cb Mon Sep 17 00:00:00 2001 From: Abdullah Waheed Date: Mon, 20 Jun 2022 17:00:54 +0500 Subject: [PATCH 2/6] refactor: updated deprecation of ProgramRecord component and updated unit tests --- .../static/components/MasqueradeBanner.jsx | 6 +- .../static/components/ProgramRecord.jsx | 68 +++++++++---------- .../components/specs/ProgramRecord.test.jsx | 36 +++++----- 3 files changed, 51 insertions(+), 59 deletions(-) diff --git a/credentials/static/components/MasqueradeBanner.jsx b/credentials/static/components/MasqueradeBanner.jsx index 1d51d0e89..be2786467 100644 --- a/credentials/static/components/MasqueradeBanner.jsx +++ b/credentials/static/components/MasqueradeBanner.jsx @@ -112,10 +112,8 @@ class MasqueradeBanner extends React.Component { onClose={this.closeMasqueradeFailureAlert} dismissible > -
- { gettext('Masquerading failed') } - { gettext('You either do not have permission to masquerade as this user, or the user could not be found.') } -
+ { gettext('Masquerading failed') } + { gettext('You either do not have permission to masquerade as this user, or the user could not be found.') } ); diff --git a/credentials/static/components/ProgramRecord.jsx b/credentials/static/components/ProgramRecord.jsx index ddb5a84a1..88f98a746 100644 --- a/credentials/static/components/ProgramRecord.jsx +++ b/credentials/static/components/ProgramRecord.jsx @@ -1,7 +1,7 @@ import React from 'react'; import axios from 'axios'; import PropTypes from 'prop-types'; -import { Button, Icon, StatusAlert } from '@edx/paragon'; +import { Button, Icon, Alert } from '@edx/paragon'; import Cookies from 'js-cookie'; import FoldingTable from './FoldingTable'; @@ -301,45 +301,39 @@ class ProgramRecord extends React.Component { /> )} - - { gettext('We are sending your program record.') } - - - )} - /> - } + dismissible + > + { gettext('We are sending your program record.') } + + - { gettext('We were unable to send your program record.') } - - {StringUtils.interpolate(gettext('We were unable to send your record to {orgs}. You can attempt to send this record again. Contact support if this issue persists.'), - { orgs: StringUtils.formatStringList(this.state.sendRecordFailureOrgs) })} - - - )} - /> - + { gettext('We were unable to send your program record.') } + + {StringUtils.interpolate(gettext('We were unable to send your record to {orgs}. You can attempt to send this record again. Contact support if this issue persists.'), + { orgs: StringUtils.formatStringList(this.state.sendRecordFailureOrgs) })} + + + - { gettext('You have successfully shared your Learner Record') } - - {StringUtils.interpolate(gettext('You have sent your record to {orgs}. Next, ensure you understand their application process.'), - { orgs: StringUtils.formatStringList(this.state.sendRecordSuccessOrgs) })} - - - )} - /> + dismissible + > + { gettext('You have successfully shared your Learner Record') } + + {StringUtils.interpolate(gettext('You have sent your record to {orgs}. Next, ensure you understand their application process.'), + { orgs: StringUtils.formatStringList(this.state.sendRecordSuccessOrgs) })} + +
diff --git a/credentials/static/components/specs/ProgramRecord.test.jsx b/credentials/static/components/specs/ProgramRecord.test.jsx index 7414ae761..f8544d5eb 100644 --- a/credentials/static/components/specs/ProgramRecord.test.jsx +++ b/credentials/static/components/specs/ProgramRecord.test.jsx @@ -192,51 +192,51 @@ describe('', () => { }); it('shows the info alert', () => { - expect(wrapper.find('.alert-info').prop('hidden')).toBe(true); + expect(wrapper.find('.alert-info').exists()).toBe(false); wrapper.setState({ sendRecordLoadingAlertOpen: true }); wrapper.update(); - expect(wrapper.find('.alert-info').prop('hidden')).toBe(false); + expect(wrapper.find('.alert-info').hasClass('show')).toBe(true); }); it('shows the success alert', () => { - expect(wrapper.find('.alert-success').prop('hidden')).toBe(true); + expect(wrapper.find('.alert-danger').exists()).toBe(false); wrapper.setState({ sendRecordSuccessOrgs: ['RIT'], sendRecordSuccessAlertOpen: true }); wrapper.update(); - expect(wrapper.find('.alert-success').prop('hidden')).toBe(false); + expect(wrapper.find('.alert-success').hasClass('show')).toBe(true); }); it('shows the failure alert', () => { - expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true); + expect(wrapper.find('.alert-danger').exists()).toBe(false); wrapper.setState({ sendRecordFailureOrgs: ['RIT'], sendRecordFailureAlertOpen: true }); wrapper.update(); - expect(wrapper.find('.alert-danger').prop('hidden')).toBe(false); + expect(wrapper.find('.alert-danger').hasClass('show')).toBe(true); }); it('closes the info alert', () => { - expect(wrapper.find('.alert-info').prop('hidden')).toBe(true); + expect(wrapper.find('.alert-info').exists()).toBe(false); wrapper.setState({ sendRecordLoadingAlertOpen: true }); wrapper.update(); - expect(wrapper.find('.alert-info').prop('hidden')).toBe(false); - wrapper.find('.alert-info .close').simulate('click'); - expect(wrapper.find('.alert-info').prop('hidden')).toBe(true); + expect(wrapper.find('.alert-info').hasClass('show')).toBe(true); + wrapper.find('.alert-info .btn').first().simulate('click'); + expect(wrapper.find('.alert-info').hasClass('show')).toBe(false); }); it('closes the success alert', () => { - expect(wrapper.find('.alert-success').prop('hidden')).toBe(true); + expect(wrapper.find('.alert-success').exists()).toBe(false); wrapper.setState({ sendRecordSuccessOrgs: ['RIT'], sendRecordSuccessAlertOpen: true }); wrapper.update(); - expect(wrapper.find('.alert-success').prop('hidden')).toBe(false); - wrapper.find('.alert-success .close').simulate('click'); - expect(wrapper.find('.alert-success').prop('hidden')).toBe(true); + expect(wrapper.find('.alert-success').hasClass('show')).toBe(true); + wrapper.find('.alert-success .btn').first().simulate('click'); + expect(wrapper.find('.alert-success').hasClass('show')).toBe(false); }); it('closes the failure alert', () => { - expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true); + expect(wrapper.find('.alert-danger').exists()).toBe(false); wrapper.setState({ sendRecordFailureOrgs: ['RIT'], sendRecordFailureAlertOpen: true }); wrapper.update(); - expect(wrapper.find('.alert-danger').prop('hidden')).toBe(false); - wrapper.find('.alert-danger .close').simulate('click'); - expect(wrapper.find('.alert-danger').prop('hidden')).toBe(true); + expect(wrapper.find('.alert-danger').hasClass('show')).toBe(true); + wrapper.find('.alert-danger .btn').first().simulate('click'); + expect(wrapper.find('.alert-danger').hasClass('show')).toBe(false); }); it('correctly categorizes send request success', () => { From 49736fd27b8fea2e74c21e967e3075911f2f0e13 Mon Sep 17 00:00:00 2001 From: Abdullah Waheed Date: Mon, 20 Jun 2022 19:16:27 +0500 Subject: [PATCH 3/6] refactor: updated deprecation of SendLearnerRecordModal component and updated unit tests --- .../components/SendLearnerRecordModal.jsx | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/credentials/static/components/SendLearnerRecordModal.jsx b/credentials/static/components/SendLearnerRecordModal.jsx index ad968f8a6..e267ca29f 100644 --- a/credentials/static/components/SendLearnerRecordModal.jsx +++ b/credentials/static/components/SendLearnerRecordModal.jsx @@ -2,7 +2,7 @@ import 'core-js/features/promise'; // Needed to support Promises on legacy brows import React from 'react'; import PropTypes from 'prop-types'; import { - Button, CheckBoxGroup, CheckBox, Modal, StatusAlert, + Button, CheckBoxGroup, CheckBox, Modal, Alert, } from '@edx/paragon'; import StringUtils from './Utils'; @@ -106,17 +106,16 @@ class SendLearnerRecordModal extends React.Component {

{this.anyInactivePathways && (
- - {gettext('Not all credit partners are ready to receive records yet')} -

{gettext('You can check back in the future or share your record link directly if you need to do so immediately.')}

-
-)} - /> + > + + { gettext('Not all credit partners are ready to receive records yet')} + +

{gettext('You can check back in the future or share your record link directly if you need to do so immediately.')}

+
)}

{ gettext('Select organization(s) you wish to send this record to:') }

From 76a1646d41a25e5b0f980ef59eb3e43a67aed51c Mon Sep 17 00:00:00 2001 From: Abdullah Waheed Date: Mon, 20 Jun 2022 19:28:12 +0500 Subject: [PATCH 4/6] refactor: updated deprecation of ShareProgramRecordModal component and updated unit tests --- .../components/ShareProgramRecordModal.jsx | 32 +++++++++---------- .../specs/ShareProgramRecordModal.test.jsx | 2 +- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/credentials/static/components/ShareProgramRecordModal.jsx b/credentials/static/components/ShareProgramRecordModal.jsx index b2eefd78f..e1c091b6d 100644 --- a/credentials/static/components/ShareProgramRecordModal.jsx +++ b/credentials/static/components/ShareProgramRecordModal.jsx @@ -4,7 +4,7 @@ import axios from 'axios'; import PropTypes from 'prop-types'; import Cookies from 'js-cookie'; import { - Button, Icon, InputText, Modal, StatusAlert, + Button, Icon, InputText, Modal, Alert, } from '@edx/paragon'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import trackEvent from './Analytics'; @@ -135,26 +135,26 @@ class ShareProgramRecordModal extends React.Component {
{urlError && ( - - { gettext('We were unable to create your record link.') } -

{ gettext('You can close this window and try again.') }

-
- )} - /> + > + + { gettext('We were unable to create your record link.') } + +

{ gettext('You can close this window and try again.') }

+ )} {urlCopied && ( - + > + {gettext('Successfully copied program record link.')} + )}

{ gettext('Copy this link to share your record with a university, employer, or anyone else of your choosing. Anyone you share this link with will have access to your record forever.') }

{this.renderSwitchToSendParagraph()} diff --git a/credentials/static/components/specs/ShareProgramRecordModal.test.jsx b/credentials/static/components/specs/ShareProgramRecordModal.test.jsx index 9b0fb0fde..5d1f9573d 100644 --- a/credentials/static/components/specs/ShareProgramRecordModal.test.jsx +++ b/credentials/static/components/specs/ShareProgramRecordModal.test.jsx @@ -139,7 +139,7 @@ describe('', () => { expect(wrapper.find('.modal-body .alert-danger').length).toBe(1); const errorText = 'We were unable to create your record link.'; - expect(wrapper.find('.modal-body .alert-danger span').text()).toBe(errorText); + expect(wrapper.find('.modal-body .alert-danger .alert-heading').first().text()).toBe(errorText); }); }); }); From 9914437efa77b8588148f7679c2d1110cf8e5a0a Mon Sep 17 00:00:00 2001 From: Abdullah Waheed Date: Wed, 6 Jul 2022 14:35:30 +0500 Subject: [PATCH 5/6] refactor: updated Dismiss button size to be consistent with library --- credentials/static/sass/views/_program-record.scss | 6 ------ credentials/templates/programs.html | 2 +- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/credentials/static/sass/views/_program-record.scss b/credentials/static/sass/views/_program-record.scss index 166286b26..1f86e738a 100644 --- a/credentials/static/sass/views/_program-record.scss +++ b/credentials/static/sass/views/_program-record.scss @@ -22,12 +22,6 @@ $record-border-color: #C2C2C2; } // Needed to override paragon default .alert styles - .alert { - .btn { - font-size: 24px; - font-weight: bold; - } - } .alert-body { display: block; diff --git a/credentials/templates/programs.html b/credentials/templates/programs.html index 4678ba2d5..eacfad745 100644 --- a/credentials/templates/programs.html +++ b/credentials/templates/programs.html @@ -36,7 +36,7 @@ isPublic: {{ is_public|yesno:"true,false"}}, uuid: '{{uuid}}', helpUrl: '{{records_help_url}}', - programListUrl: '{{program_list_url}}, + programListUrl: '{{program_list_url}}', }); {% endblock %} From 48515a0bd28ef76a220049c20c70835ccf803b6a Mon Sep 17 00:00:00 2001 From: Abdullah Waheed Date: Tue, 26 Jul 2022 18:00:24 +0500 Subject: [PATCH 6/6] refactor: added override styles of Alert btn styling for edx theme --- credentials/static/sass/overrides.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/credentials/static/sass/overrides.scss b/credentials/static/sass/overrides.scss index 3f0707e72..50794013a 100644 --- a/credentials/static/sass/overrides.scss +++ b/credentials/static/sass/overrides.scss @@ -9,4 +9,11 @@ white-space: normal; overflow: hidden; text-overflow: ellipsis; - } \ No newline at end of file + } + +.alert { + .btn { + font-size: .875rem !important; + font-weight: 500 !important; + } +}