Paragon form component deprecations (#1716)

* refactor: removed deprecated paragon checkbox components * refactor: removed deprecated paragon InputText components * fix: unit tests
openedx · Aug 22, 2022 · 697793b · 697793b
1 parent dc5f397
commit 697793b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 30 deletions.
diff --git 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, Alert,
+  Button, Form, Modal, Alert,
 } from '@edx/paragon';
 import StringUtils from './Utils';
 
@@ -70,7 +70,8 @@ class SendLearnerRecordModal extends React.Component {
   }
 
   // Update a credit pathway's state when the checkbox is updated
-  checkCreditPathway(checked, name) {
+  checkCreditPathway(event) {
+    const { checked, name } = event.target;
     this.setState((prevState) => {
       const updatedCreditPathways = { ...prevState.creditPathways };
       updatedCreditPathways[name].checked = checked;
@@ -119,20 +120,19 @@ class SendLearnerRecordModal extends React.Component {
             </div>
             )}
             <p>{ gettext('Select organization(s) you wish to send this record to:') }</p>
-            <CheckBoxGroup>
-              {this.props.creditPathwaysList.map(pathway => (
-                <CheckBox
-                  id={'checkbox-' + pathway.id}
-                  name={pathway.name}
-                  label={this.getPathwayDisplayName(pathway.name)}
-                  key={pathway.id}
-                  disabled={this.state.creditPathways[pathway.name].sent
-                      || !this.state.creditPathways[pathway.name].isActive}
-                  onChange={this.checkCreditPathway}
-                  checked={this.state.creditPathways[pathway.name].checked}
-                />
-              ))}
-            </CheckBoxGroup>
+            {this.props.creditPathwaysList.map(pathway => (
+              <Form.Checkbox
+                id={'checkbox-' + pathway.id}
+                name={pathway.name}
+                key={pathway.id}
+                disabled={this.state.creditPathways[pathway.name].sent
+                    || !this.state.creditPathways[pathway.name].isActive}
+                onChange={this.checkCreditPathway}
+                checked={this.state.creditPathways[pathway.name].checked}
+              >
+                {this.getPathwayDisplayName(pathway.name)}
+              </Form.Checkbox>
+            ))}
           </div>
         )}
         open

diff --git 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, Alert,
+  Button, Icon, Modal, Alert, Form,
 } from '@edx/paragon';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import trackEvent from './Analytics';
@@ -162,13 +162,15 @@ class ShareProgramRecordModal extends React.Component {
               && (
               <div className="url-group">
                 <div onCopy={this.checkUrlCopied}>
-                  <InputText
-                    value={programRecordUrl}
-                    name="program-record-share-url"
-                    className={['program-record-share-url']}
-                    label={<span className="sr-only">{gettext('Program Record URL')}</span>}
-                    readOnly
-                  />
+                  <Form.Group>
+                    <Form.Control
+                      value={programRecordUrl}
+                      name="program-record-share-url"
+                      className={['program-record-share-url']}
+                      label={<span className="sr-only">{gettext('Program Record URL')}</span>}
+                      readOnly
+                    />
+                  </Form.Group>
                 </div>
                 <CopyToClipboard
                   text={programRecordUrl}

diff --git a/credentials/static/components/specs/ShareProgramRecordModal.test.jsx b/credentials/static/components/specs/ShareProgramRecordModal.test.jsx
@@ -34,7 +34,7 @@ describe('<ShareProgramRecordModal />', () => {
 
       return promise.then(() => {
         wrapper.update();
-        expect(wrapper.find('.modal-body .form-group input').props().value).toBe(wrapper.state('programRecordUrl'));
+        expect(wrapper.find('.modal-body .pgn__form-group input').props().value).toBe(wrapper.state('programRecordUrl'));
         expect(wrapper.find('.modal-body .loading-wrapper').length).toBe(0);
         expect(wrapper.find('.modal-body button.btn-primary').length).toBe(1);
       });
@@ -65,7 +65,7 @@ describe('<ShareProgramRecordModal />', () => {
     it('renders the url input as read only', () => (
       promise.then(() => {
         wrapper.update();
-        expect(wrapper.find('.modal-body .form-group input').prop('readOnly')).toBe(true);
+        expect(wrapper.find('.modal-body .pgn__form-group input').prop('readOnly')).toBe(true);
       })
     ));
 
@@ -85,10 +85,10 @@ describe('<ShareProgramRecordModal />', () => {
 
       return promise.then(() => {
         wrapper.update();
-        const input = wrapper.find('.modal-dialog .form-group input').getDOMNode();
+        const input = wrapper.find('.modal-dialog .pgn__form-group input').getDOMNode();
         input.selectionStart = 0;
         input.selectionEnd = input.value.length; // Select all of the url to copy
-        wrapper.find('.modal-dialog .form-group input').simulate('copy');
+        wrapper.find('.modal-dialog .pgn__form-group input').simulate('copy');
         expect(wrapper.state('urlCopied')).toBe(true);
       });
     });
@@ -98,10 +98,10 @@ describe('<ShareProgramRecordModal />', () => {
 
       return promise.then(() => {
         wrapper.update();
-        const input = wrapper.find('.modal-dialog .form-group input').getDOMNode();
+        const input = wrapper.find('.modal-dialog .pgn__form-group input').getDOMNode();
         input.selectionStart = 0;
         input.selectionEnd = 5; // Only select part of the url to copy
-        wrapper.find('.modal-body .form-group input').simulate('copy');
+        wrapper.find('.modal-body .pgn__form-group input').simulate('copy');
         expect(wrapper.state('urlCopied')).toBe(false);
       });
     });