Skip to content
This repository has been archived by the owner on Jul 18, 2024. It is now read-only.

Paragon form component deprecations #53

Merged
merged 15 commits into from
Oct 4, 2022
+98 −84
Merged

Paragon form component deprecations #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
6263740
refactor: changed deprecated form components to their respective alte…
abdullahwaheed Jul 25, 2022
bd287ea
refactor: changed deprecated form components to their respective alte…
abdullahwaheed Jul 25, 2022
07ef7dd
refactor: changed deprecated form components to their respective alte…
abdullahwaheed Jul 25, 2022
5d0634c
refactor: changed deprecated Input component to Form.Control in Libra…
abdullahwaheed Jul 25, 2022
cb5b8ee
refactor: changed deprecated Input component to Form.Control in Cours…
abdullahwaheed Jul 25, 2022
6186a0e
refactor: changed deprecated Input component to Form.Checkbox in Lice…
abdullahwaheed Jul 25, 2022
9296293
refactor: changed deprecated Input component to Form.Control in Licen…
abdullahwaheed Jul 25, 2022
e962a24
Merge branch 'master' of github.com:edx/frontend-app-library-authorin…
abdullahwaheed Aug 16, 2022
b6b27cb
Merge branch 'master' of github.com:edx/frontend-app-library-authorin…
abdullahwaheed Aug 23, 2022
d7d5402
Merge branch 'master' of github.com:edx/frontend-app-library-authorin…
abdullahwaheed Aug 25, 2022
a0aa599
Merge branch 'master' of github.com:edx/frontend-app-library-authorin…
abdullahwaheed Sep 30, 2022
1dae83d
refactor: removed checkbox prop and fixed styling
abdullahwaheed Oct 3, 2022
8b97057
refactor: removed unused code
abdullahwaheed Oct 3, 2022
b5c148d
refactor: removed unused code
abdullahwaheed Oct 3, 2022
a8bcbb8
fix: removed unecessary commented line
abdullahwaheed Oct 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions src/library-authoring/author-library/LibraryAuthoringPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
Modal,
Dropdown,
SearchField,
Input,
Form,
Pagination,
} from '@edx/paragon';
import { v4 as uuid4 } from 'uuid';
Expand Down Expand Up @@ -369,13 +369,18 @@ export const LibraryAuthoringPageBase = ({
/>
</Col>
<Col xs={12} md={3} className="pb-2">
<Input
type="select"
<Form.Control
as="select"
data-testid="filter-dropdown"
value={type}
options={typeOptions}
onChange={(event) => changeType(event.target.value)}
/>
>
{typeOptions.map(typeOption => (
<option value={typeOption.value} key={typeOption.value}>
{typeOption.label}
</option>
))}
</Form.Control>
</Col>
</>
)}
Expand Down
14 changes: 5 additions & 9 deletions src/library-authoring/common/LicenseField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import {
Button,
Col,
Input,
Form,
Row,
} from '@edx/paragon';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
Expand Down Expand Up @@ -60,8 +60,7 @@ export const LicenceFieldBase = (
</div>
<Row className="border-bottom py-2">
<Col xs={1} className="text-center align-self-center">
<Input
type="checkbox"
<Form.Checkbox
id="attribution"
name="attribution"
className="m-0 p-0 position-relative"
Expand All @@ -80,8 +79,7 @@ export const LicenceFieldBase = (
</Row>
<Row className="border-bottom py-2">
<Col xs={1} className="text-center align-self-center">
<Input
type="checkbox"
<Form.Checkbox
id="nonCommercial"
name="nonCommercial"
className="m-0 p-0 position-relative"
Expand All @@ -100,8 +98,7 @@ export const LicenceFieldBase = (
</Row>
<Row className="border-bottom py-2">
<Col xs={1} className="text-center align-self-center">
<Input
type="checkbox"
<Form.Checkbox
name="noDerivatives"
id="noDerivatives"
className="m-0 p-0 position-relative"
Expand All @@ -120,8 +117,7 @@ export const LicenceFieldBase = (
</Row>
<Row className="border-bottom py-2">
<Col xs={1} className="text-center align-self-center">
<Input
type="checkbox"
<Form.Checkbox
id="shareAlike"
name="shareAlike"
className="m-0 p-0 position-relative"
Expand Down
101 changes: 48 additions & 53 deletions src/library-authoring/configure-library/LibraryConfigurePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ import {
Button,
Form,
Icon,
Input,
StatefulButton,
ValidationFormGroup,
} from '@edx/paragon';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
Expand Down Expand Up @@ -173,7 +171,9 @@ class LibraryConfigurePage extends React.Component {

const validTypes = Object.values(LIBRARY_TYPES).filter((type) => type !== LIBRARY_TYPES.LEGACY);
const typeOptions = validTypes.map((value) => (
{ value, label: intl.formatMessage(messages[`library.edit.type.label.${value}`]) }
<option value={value} key={`aoption-${value}`}>
{intl.formatMessage(messages[`library.edit.type.label.${value}`])}
</option>
));

return (
Expand Down Expand Up @@ -202,68 +202,63 @@ class LibraryConfigurePage extends React.Component {
<Form onSubmit={this.handleSubmit} className="form-create">
<fieldset>
<ol className="list-input">
<li className="field">
<ValidationFormGroup
for="title"
helpText={intl.formatMessage(messages['library.edit.title.help'])}
invalid={this.hasFieldError('title')}
invalidMessage={this.getFieldError('title')}
className="mb-0 mr-2"
>
<label className="h6 d-block" htmlFor="title">
{intl.formatMessage(messages['library.edit.title.label'])}
</label>
<Input
name="title"
id="title"
type="text"
placeholder={intl.formatMessage(messages['library.edit.title.placeholder'])}
defaultValue={data.title}
onChange={this.handleValueChange}
/>
</ValidationFormGroup>
</li>
<li className="field">
<ValidationFormGroup
for="description"
helpText={intl.formatMessage(messages['library.edit.description.help'])}
invalid={this.hasFieldError('description')}
invalidMessage={this.getFieldError('description')}
className="mb-0 mr-2"
>
<label className="h6 d-block" htmlFor="description">
{intl.formatMessage(messages['library.edit.description.label'])}
</label>
<Input
name="description"
id="description"
type="textarea"
placeholder={intl.formatMessage(messages['library.edit.description.placeholder'])}
defaultValue={data.description}
onChange={this.handleValueChange}
/>
</ValidationFormGroup>
</li>
{['title', 'description'].map(name => (
<li className="field" key={name}>
<Form.Group
controlId={name}
isInvalid={this.hasFieldError(name)}
className="mb-0 mr-2"
>
<Form.Label className="h6 d-block" htmlFor={name}>
{intl.formatMessage(messages[`library.edit.${name}.label`])}
</Form.Label>
<Form.Control
name={name}
id={name}
type="text"
placeholder={intl.formatMessage(messages[`library.edit.${name}.placeholder`])}
defaultValue={data[name]}
onChange={this.handleValueChange}
/>
<Form.Text className="form-text text-muted">
{intl.formatMessage(messages[`library.edit.${name}.help`])}
</Form.Text>
{this.hasFieldError(name) && (
<Form.Control.Feedback hasIcon={false} type="invalid">
{this.getFieldError(name)}
</Form.Control.Feedback>
)}
</Form.Group>
</li>
))}
<li className="field">
{data.libraryId && (
<ValidationFormGroup
<Form.Group
for="type"
helpText={intl.formatMessage(messages['library.edit.type.help'])}
invalid={this.hasFieldError('type')}
invalidMessage={this.getFieldError('type')}
isInvalid={this.hasFieldError('type')}
className="mb-0 mr-2"
>
<label className="h6 d-block" htmlFor="type">
{intl.formatMessage(messages['library.edit.type.label'])}
</label>
<Input
<Form.Control
name="type"
type="select"
as="select"
options={typeOptions}
defaultValue={data.type}
onChange={this.handleValueChange}
/>
</ValidationFormGroup>
>
{typeOptions}
</Form.Control>
<Form.Text className="form-text text-muted">
{intl.formatMessage(messages['library.edit.type.help'])}
</Form.Text>
{this.hasFieldError('type') && (
<Form.Control.Feedback hasIcon={false} type="invalid">
{this.getFieldError('type')}
</Form.Control.Feedback>
)}
</Form.Group>
) }
</li>
<li className="field">
Expand Down
24 changes: 19 additions & 5 deletions src/library-authoring/course-import/CourseImportPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import {
Button, Form, Input, Pagination, Alert,
Button, Form, Pagination, Alert,
} from '@edx/paragon';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { faSearch, faSync } from '@fortawesome/free-solid-svg-icons';
Expand Down Expand Up @@ -179,6 +179,19 @@ export const CourseImportListFilter = ({
});
};

const renderOption = option => {
if (option.group) {
return (
<optgroup label={option.label}>
{option.group.map(renderOption)}
</optgroup>
);
}
return (
<option value={option.value} key={option.value}>{option.label}</option>
);
};
Comment on lines +182 to +193
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i noticed there is an identical function in LibraryListPage.jsx, is there any way this could be put somewhere that allows it to be used in both files?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

renderOption isn't used in LibraryListPage.jsx anymore so I have removed it. Don't think we should make it a util now


return (
<>
<div className="bit">
Expand Down Expand Up @@ -215,13 +228,14 @@ export const CourseImportListFilter = ({
<Form.Label className="title title-3">
{intl.formatMessage(messages['library.course_import.course_filter.options.org.label'])}
</Form.Label>
<Input
<Form.Control
name="org"
type="select"
options={orgOptions}
as="select"
defaultValue={filterParams ? filterParams.org : null}
onChange={handleOrgChange}
/>
>
{orgOptions.map(renderOption)}
</Form.Control>
</Form.Group>
</Form.Row>
</Form>
Expand Down
26 changes: 16 additions & 10 deletions src/library-authoring/library-access/LibraryAccessForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
Form for adding a new Library user.
*/
import {
Button, Card, Icon, Input, Row, StatefulButton, ValidationFormGroup,
Button, Card, Icon, Row, StatefulButton, Form,
} from '@edx/paragon';
import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
Expand Down Expand Up @@ -37,25 +37,31 @@ const LibraryAccessForm = (
<fieldset>
<ol className="list-input">
<li className="field">
<ValidationFormGroup
for="title"
helpText={intl.formatMessage(messages['library.access.form.email.help'])}
invalid={hasFieldError('email')}
invalidMessage={getFieldError('email')}
<Form.Group
controlId="email"
isInvalid={hasFieldError('email')}
className="mb-0 mr-2"
>
<label className="h6 d-block" htmlFor="email">
<Form.Label className="h6 d-block" htmlFor="email">
{intl.formatMessage(messages['library.access.form.email.label'])}
</label>
<Input
</Form.Label>
<Form.Control
name="email"
id="email"
type="text"
placeholder={intl.formatMessage(messages['library.access.form.email.placeholder'])}
value={data.email}
onChange={onValueChange}
/>
</ValidationFormGroup>
<Form.Text className="form-text text-muted">
{intl.formatMessage(messages['library.access.form.email.help'])}
</Form.Text>
{hasFieldError('email') && (
<Form.Control.Feedback hasIcon={false} type="invalid">
{getFieldError('email')}
</Form.Control.Feedback>
)}
</Form.Group>
</li>
</ol>
</fieldset>
Expand Down
2 changes: 0 additions & 2 deletions src/vendor/studio.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -905,8 +905,6 @@ $yellow-u3: desaturate($yellow, 45%) !default;
input[type="checkbox"] {
display: inline-block;
margin-right: ($baseline/4);
width: auto;
height: auto;

& + label {
display: inline-block;
Expand Down