Skip to content

Commit d5112e4

Browse files
dcoadcoa
committed
refactor: replace Input with Form.Control
1 parent ab31fb0 commit d5112e4

File tree

12 files changed

+108
-94
lines changed

12 files changed

+108
-94
lines changed

‎src/Configuration/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,4 @@
3030
opacity: 1;
3131
flex-shrink: 0;
3232
pointer-events: none;
33-
}
33+
}

‎src/FeatureBasedEnrollments/FeatureBasedEnrollmentIndexPage.jsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import React, {
77
useLayoutEffect,
88
} from 'react';
99
import { useLocation, useNavigate } from 'react-router-dom';
10-
import { Input, Button } from '@openedx/paragon';
10+
import { Form, Button } from '@openedx/paragon';
1111

1212
import UserMessagesContext from '../userMessages/UserMessagesContext';
1313
import AlertList from '../userMessages/AlertList';
@@ -96,8 +96,10 @@ export default function FeatureBasedEnrollmentIndexPage() {
9696

9797
<section className="mb-3">
9898
<form className="form-inline">
99-
<label htmlFor="courseId">Course ID</label>
100-
<Input ref={searchRef} className="mr-1 ml-1 col-sm-4" name="courseId" type="text" defaultValue={searchValue} />
99+
<Form.Group>
100+
<Form.Label htmlFor="courseId">Course ID</Form.Label>
101+
<Form.Control ref={searchRef} className="mr-1 ml-1 col-sm-4" name="courseId" defaultValue={searchValue} />
102+
</Form.Group>
101103
<Button type="submit" onClick={submit} className="ml-1 col-sm-1" variant="primary">Search</Button>
102104
</form>
103105
</section>

‎src/ProgramEnrollments/LinkProgramEnrollments.jsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Input, Button } from '@openedx/paragon';
1+
import { Form, Button } from '@openedx/paragon';
22
import React, { useState, useCallback } from 'react';
33
import getLinkProgramEnrollmentDetails from './data/api';
44
import LinkProgramEnrollmentsTable from './LinkProgramEnrollmentsTable';
@@ -47,14 +47,15 @@ export default function LinkProgramEnrollments() {
4747
<section className="my-3">
4848
<form>
4949
<div className="my-2">
50-
<label htmlFor="programUUID">Program UUID</label>
51-
<Input
52-
className="mr-1 col-sm-12"
53-
name="programUUID"
54-
type="text"
55-
defaultValue={programID}
56-
onChange={onProgramChange}
57-
/>
50+
<Form.Group>
51+
<Form.Label htmlFor="programUUID">Program UUID</Form.Label>
52+
<Form.Control
53+
className="mr-1 col-sm-12"
54+
name="programUUID"
55+
defaultValue={programID}
56+
onChange={onProgramChange}
57+
/>
58+
</Form.Group>
5859
</div>
5960
<div className="my-4">
6061
<label
@@ -63,10 +64,10 @@ export default function LinkProgramEnrollments() {
6364
>
6465
List of External key and username pairings (one per line)
6566
</label>
66-
<Input
67+
<Form.Control
6768
className="mr-1 col-sm-12"
6869
name="usernamePairText"
69-
type="textarea"
70+
as="textarea"
7071
rows="10"
7172
onChange={onUserTextChange}
7273
defaultValue={usernamePairText}

‎src/ProgramEnrollments/ProgramInspector/ProgramInspector.jsx‎

Lines changed: 40 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect, useState, useCallback } from 'react';
22
import { useLocation, useNavigate } from 'react-router-dom';
33
import {
4-
Alert, Col, Row, Button, Input,
4+
Alert, Col, Row, Button, Form,
55
} from '@openedx/paragon';
66
import { getSsoRecords } from '../../users/data/api';
77
import EnrollmentDetails from './EnrollmentDetails';
@@ -117,41 +117,49 @@ export default function ProgramInspector() {
117117
<form>
118118
<div className="d-flex">
119119
<div className="col-sm-4 pl-0">
120-
<label htmlFor="username">edX username or email</label>
121-
<Input
122-
className="col-sm-12"
123-
name="username"
124-
type="text"
125-
defaultValue={username}
126-
onChange={(e) => (e.target.value
127-
? setUsername(e.target.value)
128-
: setUsername(undefined))}
129-
placeholder="edx@example.com"
130-
/>
120+
<Form.Group>
121+
<Form.Label htmlFor="username">edX username or email</Form.Label>
122+
<Form.Control
123+
className="col-sm-12"
124+
name="username"
125+
defaultValue={username}
126+
onChange={(e) => (e.target.value
127+
? setUsername(e.target.value)
128+
: setUsername(undefined))}
129+
placeholder="edx@example.com"
130+
/>
131+
</Form.Group>
131132
</div>
132133
<div className="col-sm-4">
133-
<label htmlFor="orgKey">Identity-providing institution</label>
134-
<Input
135-
className="col-sm-12"
136-
name="orgKey"
137-
type="select"
138-
defaultValue={activeOrgKey}
139-
options={getOrgKeyList()}
140-
onChange={(e) => setActiveOrgKey(e.target.value)}
141-
/>
134+
<Form.Group>
135+
<Form.Label htmlFor="orgKey">Identity-providing institution</Form.Label>
136+
<Form.Control
137+
className="col-sm-12"
138+
name="orgKey"
139+
type="select"
140+
defaultValue={activeOrgKey}
141+
onChange={(e) => setActiveOrgKey(e.target.value)}
142+
>
143+
{
144+
getOrgKeyList()
145+
.map(({ label, value, disabled }) => <option value={value} disabled={disabled}>{label}</option>)
146+
}
147+
</Form.Control>
148+
</Form.Group>
142149
</div>
143150
<div className="col-sm-4 pr-0">
144-
<label htmlFor="externalKey">Institution user key</label>
145-
<Input
146-
className="col-sm-12"
147-
name="externalKey"
148-
type="text"
149-
defaultValue={externalUserKey}
150-
onChange={(e) => (e.target.value
151-
? setExternalUserKey(e.target.value)
152-
: setExternalUserKey(undefined))}
153-
placeholder="ex. GTPersonDirectoryID for GT Students"
154-
/>
151+
<Form.Group>
152+
<Form.Label htmlFor="externalKey">Institution user key</Form.Label>
153+
<Form.Control
154+
className="col-sm-12"
155+
name="externalKey"
156+
defaultValue={externalUserKey}
157+
onChange={(e) => (e.target.value
158+
? setExternalUserKey(e.target.value)
159+
: setExternalUserKey(undefined))}
160+
placeholder="ex. GTPersonDirectoryID for GT Students"
161+
/>
162+
</Form.Group>
155163
</div>
156164
</div>
157165
<Button type="submit" className="mt-4" onClick={submit}>

‎src/users/EntitlementsAndEnrollmentsContainer.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react';
22
import PropTypes from 'prop-types';
3-
import { Input } from '@openedx/paragon';
3+
import { Form } from '@openedx/paragon';
44
import Enrollments from './enrollments/Enrollments';
55
import Entitlements from './entitlements/Entitlements';
66

@@ -12,7 +12,7 @@ export default function EntitlementsAndEnrollmentsContainer({
1212
return (
1313
<div id="entitlementsAndEnrollmentsContainer">
1414
<div className="mb-2 p-2 background-light-gray">
15-
<Input name="courseId" className="mr-1 col-sm-4" type="text" placeholder="Course ID or Name" defaultValue={searchValue} onChange={(e) => { setSearchValue(e.target.value.toLowerCase()); }} />
15+
<Form.Control name="courseId" className="mr-1 col-sm-4" placeholder="Course ID or Name" defaultValue={searchValue} onChange={(e) => { setSearchValue(e.target.value.toLowerCase()); }} />
1616
</div>
1717
<Entitlements
1818
user={user}

‎src/users/UserSearch.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React, {
33
} from 'react';
44
import PropTypes from 'prop-types';
55

6-
import { Input, Button } from '@openedx/paragon';
6+
import { Form, Button } from '@openedx/paragon';
77

88
export default function UserSearch({ userIdentifier, searchHandler }) {
99
const searchRef = useRef();
@@ -18,7 +18,7 @@ export default function UserSearch({ userIdentifier, searchHandler }) {
1818
<section className="mb-3">
1919
<form className="form-inline">
2020
<label htmlFor="userIdentifier">Username, Email or LMS User ID</label>
21-
<Input ref={searchRef} className="flex-grow-1 ml-1 mr-1" name="userIdentifier" type="text" defaultValue={userIdentifier} />
21+
<Form.Control ref={searchRef} className="flex-grow-1 ml-1 mr-1" name="userIdentifier" defaultValue={userIdentifier} />
2222
<Button type="submit" onClick={submit} variant="primary">Search</Button>
2323
</form>
2424
</section>

‎src/users/account-actions/TogglePasswordStatus.jsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
22
import PropTypes from 'prop-types';
33
import {
4-
Button, Input, Alert, ModalDialog, ActionRow,
4+
Button, Form, Alert, ModalDialog, ActionRow,
55
} from '@openedx/paragon';
66
import { postTogglePasswordStatus } from '../data/api';
77

@@ -52,9 +52,8 @@ export default function TogglePasswordStatus({
5252
</p>
5353
</Alert>
5454
<label htmlFor="comment">Reason: </label>
55-
<Input
55+
<Form.Control
5656
name="comment"
57-
type="text"
5857
value={comment}
5958
onChange={(event) => setComment(event.target.value)}
6059
/>

‎src/users/enrollments/ChangeEnrollmentForm.jsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useCallback, useState, useContext } from 'react';
22
import PropTypes from 'prop-types';
33
import {
44
ActionRow,
5-
Button, Input, InputSelect, ModalDialog,
5+
Button, Form, ModalDialog,
66
} from '@openedx/paragon';
77
import AlertList from '../../userMessages/AlertList';
88
import { patchEnrollment } from '../data/api';
@@ -99,29 +99,32 @@ export default function ChangeEnrollmentForm({
9999
</div>
100100
<hr />
101101

102-
<InputSelect
102+
<Form.Control
103103
className="mb-n3"
104-
type="select"
104+
as="select"
105105
options={getModes()}
106106
value=""
107107
id="mode"
108108
name="mode"
109109
onChange={(event) => setMode(event)}
110110
disabled={hideOnSubmit}
111-
/>
112-
<InputSelect
111+
>
112+
{getModes().map(({ label, value, disabled }) => <option value={value} disabled={disabled}>{label}</option>)}
113+
</Form.Control>
114+
<Form.Control
113115
className="mb-4"
114-
type="select"
115-
options={reasons}
116+
as="select"
116117
id="reason"
117118
name="reason"
118119
value=""
119120
onChange={(event) => setReason(event)}
120121
disabled={hideOnSubmit}
121-
/>
122-
<Input
122+
>
123+
{reasons.map(({ label, value, disabled }) => <option value={value} disabled={disabled}>{label}</option>)}
124+
</Form.Control>
125+
<Form.Control
123126
placeholder="Explanation"
124-
type="textarea"
127+
as="textarea"
125128
id="comments"
126129
name="comments"
127130
defaultValue=""

‎src/users/enrollments/CreateEnrollmentForm.jsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useCallback, useState, useContext } from 'react';
22
import PropTypes from 'prop-types';
33
import {
44
ActionRow,
5-
Button, Input, InputSelect, ModalDialog,
5+
Button, Form, ModalDialog,
66
} from '@openedx/paragon';
77

88
import AlertList from '../../userMessages/AlertList';
@@ -55,35 +55,36 @@ export default function CreateEnrollmentForm({
5555
<form>
5656
<AlertList topic="createEnrollments" className="mb-3" />
5757
<div className="form-group">
58-
<Input
59-
type="text"
58+
<Form.Control
6059
id="courseID"
6160
name="courseID"
6261
placeholder="Course Run ID"
6362
onChange={(event) => setCourseID(event.target.value)}
6463
ref={forwardedRef}
6564
/>
66-
<InputSelect
65+
<Form.Control
6766
className="mb-n3 small"
68-
type="select"
69-
options={modes}
67+
as="select"
7068
id="mode"
7169
name="mode"
7270
value=""
7371
onChange={(event) => setMode(event)}
74-
/>
75-
<InputSelect
72+
>
73+
{modes.map(({ label, value, disabled }) => <option value={value} disabled={disabled}>{label}</option>)}
74+
</Form.Control>
75+
<Form.Control
7676
className="mb-4 small"
77-
type="select"
78-
options={reasons}
77+
as="select"
7978
id="reason"
8079
name="reason"
8180
value=""
8281
onChange={(event) => setReason(event)}
83-
/>
84-
<Input
82+
>
83+
{reasons.map(({ label, value, disabled }) => <option value={value} disabled={disabled}>{label}</option>)}
84+
</Form.Control>
85+
<Form.Control
8586
placeholder="Explanation"
86-
type="textarea"
87+
as="textarea"
8788
id="comments"
8889
name="comments"
8990
defaultValue=""

‎src/users/entitlements/CreateEntitlementForm.jsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useCallback, useState, useContext } from 'react';
22
import PropTypes from 'prop-types';
33
import {
44
ActionRow,
5-
Button, Input, ModalDialog,
5+
Button, Form, ModalDialog,
66
} from '@openedx/paragon';
77

88
import UserMessagesContext from '../../userMessages/UserMessagesContext';
@@ -60,33 +60,33 @@ export default function CreateEntitlementForm({
6060
const createEntitlementForm = (
6161
<form>
6262
<AlertList topic="createEntitlement" className="mb-3" />
63-
<Input
63+
<Form.Control
6464
className="mb-4"
65-
type="text"
6665
id="courseUuid"
6766
name="courseUuid"
6867
placeholder="Course UUID"
6968
value={courseUuid}
7069
onChange={(event) => setCourseUuid(event.target.value)}
7170
ref={forwardedRef}
7271
/>
73-
<Input
72+
<Form.Control
7473
className="mb-4"
75-
type="select"
74+
as="select"
7675
id="mode"
7776
name="mode"
7877
defaultValue=""
79-
options={[
78+
onChange={(event) => setMode(event.target.value)}
79+
>
80+
{[
8081
{ label: 'Mode', value: '', disabled: true },
8182
{ label: 'Verified', value: 'verified' },
8283
{ label: 'Professional', value: 'professional' },
8384
{ label: 'No ID Professional', value: 'no-id-professional' },
84-
]}
85-
onChange={(event) => setMode(event.target.value)}
86-
/>
87-
<Input
85+
].map(({ label, value, disabled }) => <option value={value} disabled={disabled}>{label}</option>)}
86+
</Form.Control>
87+
<Form.Control
8888
placeholder="Explanation"
89-
type="textarea"
89+
as="textarea"
9090
id="comments"
9191
name="comments"
9292
defaultValue=""

0 commit comments

Comments
 (0)