Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Paragon form component deprecations #843

Closed
wants to merge 24 commits into from
Closed

Paragon form component deprecations #843

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
df61345
refactor: removed paragon Form deprecations from BlackboardIntegratio…
abdullahwaheed Jul 28, 2022
b948bf8
refactor: removed paragon Form deprecations from CanvasIntegrationCon…
abdullahwaheed Jul 28, 2022
8da2621
refactor: removed paragon Form deprecations from CornerstoneIntegrati…
abdullahwaheed Jul 28, 2022
6c7853e
refactor: removed paragon Form deprecations from DegreedIntegrationCo…
abdullahwaheed Jul 28, 2022
2caa05a
refactor: removed paragon Form deprecations from MoodleIntegrationCon…
abdullahwaheed Jul 28, 2022
c3c430b
refactor: removed paragon Form deprecations from SuccessFactorsIntegr…
abdullahwaheed Jul 28, 2022
6b621c6
refactor: removed paragon ValidationFormGroup deprecations from Redux…
abdullahwaheed Jul 28, 2022
ff8f0f0
refactor: removed paragon Form deprecations from EmailDeliveryMethodForm
abdullahwaheed Jul 29, 2022
bc8b770
refactor: removed paragon Form deprecations from ReportingConfigForm
abdullahwaheed Jul 29, 2022
e038ded
refactor: removed paragon Form deprecations from SFTPDeliveryMethodForm
abdullahwaheed Jul 29, 2022
ba08746
fix: issue of multiple field name
abdullahwaheed Jul 29, 2022
f5c8082
refactor: removed paragon Form deprecations from SamlConfiguration
abdullahwaheed Jul 29, 2022
a575f68
refactor: removed paragon Form deprecations from SamlProviderConfigForm
abdullahwaheed Jul 29, 2022
858510e
refactor: removed paragon Form deprecations from SamlProviderDataForm
abdullahwaheed Jul 29, 2022
33c45a7
refactor: removed paragon Form deprecations from FileInput
abdullahwaheed Jul 29, 2022
679c2d7
refactor: updated unit test
abdullahwaheed Aug 1, 2022
215d771
fix: fixed remaining tests
abdullahwaheed Aug 1, 2022
c31c27f
Merge branch 'master' of github.com:openedx/frontend-app-admin-portal…
abdullahwaheed Sep 8, 2022
e216afd
refactor: updated checkbox component as suggested
abdullahwaheed Sep 9, 2022
787ea42
refactor: removed redundant htmlFor attributes
abdullahwaheed Sep 9, 2022
b6d88d9
refactor: removed redundant id attribute for form controls with contr…
abdullahwaheed Sep 9, 2022
66063a3
refactor: removed remaining id attribute for form controls with contr…
abdullahwaheed Sep 9, 2022
6332f49
refactor: changes based on PR suggestions
abdullahwaheed Sep 9, 2022
175b41b
fix: updated snapshots
abdullahwaheed Sep 9, 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
1 change: 1 addition & 0 deletions .env.development
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,4 @@ MAINTENANCE_ALERT_MESSAGE=''
MAINTENANCE_ALERT_START_TIMESTAMP=''
TABLEAU_URL='https://enterprise-tableau.edx.org'
USE_API_CACHE='true'
FEATURE_SSO_SETTINGS_TAB='true'
19 changes: 12 additions & 7 deletions src/components/FileInput/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { clearFields } from 'redux-form';
import { Button, Icon, ValidationFormGroup } from '@edx/paragon';
import { Button, Icon, Form } from '@edx/paragon';
import { Error } from '@edx/paragon/icons';

class FileInput extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -68,12 +69,10 @@ class FileInput extends React.Component {
} = this.props;
const hasError = !!(touched && error);
return (
<ValidationFormGroup
<Form.Group
className="file-input"
for={id}
helpText={description}
invalid={hasError}
invalidMessage={error}
controlId={id}
isInvalid={hasError}
>
<label className="m-0 mb-1" htmlFor={id}>{label}</label>
<div
Expand Down Expand Up @@ -144,8 +143,14 @@ class FileInput extends React.Component {
</Button>
</>
)}
<Form.Text>{description}</Form.Text>
{hasError && (
<Form.Control.Feedback icon={<Error className="mr-1" />}>
Copy link
Member

Choose a reason for hiding this comment

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

[curious] Why not use the default icon that Form.Control.Feedback uses versus overriding the default invalid icon? Same question applies to all uses of Form.Control.Feedback that passes an <Error />. Because isInvalid is passed to the top-level Form.Group, the default icon that Form.Control.Feedback uses should be the correct icon already.

image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

previously it was using Error icon, so to make it consistent with previous design i had added this
Screenshot 2022-07-28 at 12 49 14 PM

{error}
</Form.Control.Feedback>
)}
</div>
</ValidationFormGroup>
</Form.Group>
);
}
}
Expand Down
144 changes: 59 additions & 85 deletions src/components/LmsConfigurations/BlackboardIntegrationConfigForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import React from 'react';
import PropTypes from 'prop-types';
import isEmpty from 'lodash/isEmpty';
import {
ValidationFormGroup,
Input,
Form,
StatefulButton,
Icon,
Hyperlink,
} from '@edx/paragon';
import { Error } from '@edx/paragon/icons';
import { snakeCaseFormData } from '../../utils';
import LmsApiService from '../../data/services/LmsApiService';
import StatusAlert from '../StatusAlert';
Expand All @@ -20,6 +20,33 @@ export const REQUIRED_BLACKBOARD_CONFIG_FIELDS = [
'clientSecret',
];

const BLACKBOARD_FIELDS = [
{
key: 'blackboardBaseUrl',
invalidMessage: 'Blackboard Instance URL is required.',
helpText: 'Your Blackboard instance URL. Make sure to include the protocol (ie https/http)',
label: 'Blackboard Instance URL',
},
{
key: 'clientId',
invalidMessage: 'Blackboard client ID is required.',
helpText: 'This should match the API Client ID found on Blackboard.',
label: 'Blackboard Client ID',
},
{
key: 'clientSecret',
invalidMessage: 'Blackboard client secret is required.',
helpText: 'This should match the API Client secret found on Blackboard.',
label: 'Blackboard Client Secret',
},
{
key: 'refreshToken',
helpText: "The Blackboard API's refresh token token. This should be automatically propagated once you visit the oauth complete endpoint.",
label: 'Blackboard API Refresh Token',

},
];

class BlackboardIntegrationConfigForm extends React.Component {
state = {
invalidFields: {},
Expand Down Expand Up @@ -126,95 +153,42 @@ class BlackboardIntegrationConfigForm extends React.Component {
>
<div className="row">
<div className="col col-6">
<ValidationFormGroup
for="active"
>
<label htmlFor="active">Active</label>
<Input
type="checkbox"
id="active"
<Form.Group controlId="active">
<Form.Checkbox
name="active"
className="ml-3"
checked={active}
onChange={() => this.setState(prevState => ({ active: !prevState.active }))}
/>
</ValidationFormGroup>
</div>
</div>
<div className="row">
<div className="col col-4">
<ValidationFormGroup
for="blackboardBaseUrl"
invalid={invalidFields.blackboardBaseUrl}
invalidMessage="Blackboard Instance URL is required."
helpText="Your Blackboard instance URL. Make sure to include the protocol (ie https/http)"
>
<label htmlFor="blackboardBaseUrl">Blackboard Instance URL</label>
<Input
type="text"
id="blackboardBaseUrl"
name="blackboardBaseUrl"
defaultValue={config ? config.blackboardBaseUrl : null}
data-hj-suppress
/>
</ValidationFormGroup>
floatLabelLeft
>
Active
</Form.Checkbox>
</Form.Group>
</div>
</div>
<div className="row">
<div className="col col-4">
<ValidationFormGroup
for="clientId"
invalid={invalidFields.clientId}
invalidMessage="Blackboard client ID is required."
helpText="This should match the API Client ID found on Blackboard."
>
<label htmlFor="clientId">Blackboard Client ID</label>
<Input
type="text"
id="clientId"
name="clientId"
defaultValue={config ? config.clientId : null}
data-hj-suppress
/>
</ValidationFormGroup>
</div>
</div>
<div className="row">
<div className="col col-4">
<ValidationFormGroup
for="clientSecret"
invalid={invalidFields.clientSecret}
invalidMessage="Blackboard client secret is required."
helpText="This should match the API Client secret found on Blackboard."
>
<label htmlFor="clientSecret">Blackboard Client Secret</label>
<Input
type="text"
id="clientSecret"
name="clientSecret"
defaultValue={config ? config.clientSecret : null}
data-hj-suppress
/>
</ValidationFormGroup>
</div>
</div>
<div className="row">
<div className="col col-4">
<ValidationFormGroup
for="refreshToken"
helpText="The Blackboard API's refresh token token. This should be automatically propagated once you visit the oauth complete endpoint."
>
<label htmlFor="refreshToken">Blackboard API Refresh Token</label>
<Input
type="text"
id="refreshToken"
name="refreshToken"
defaultValue={config ? config.refreshToken : null}
data-hj-suppress
/>
</ValidationFormGroup>
{BLACKBOARD_FIELDS.map(backgroundField => (
<div className="row" key={backgroundField.key}>
<div className="col col-4">
<Form.Group
controlId={backgroundField.key}
isInvalid={invalidFields[backgroundField.key]}
>
<Form.Label>{backgroundField.label}</Form.Label>
<Form.Control
type="text"
name={backgroundField.key}
defaultValue={config ? config[backgroundField.key] : null}
data-hj-suppress
/>
<Form.Text>{backgroundField.helpText}</Form.Text>
{invalidFields[backgroundField.key] && backgroundField.invalidMessage && (
<Form.Control.Feedback icon={<Error className="mr-1" />}>
{backgroundField.invalidMessage}
</Form.Control.Feedback>
)}
</Form.Group>
</div>
</div>
</div>
))}

<div className="row">
<div className="col col-4">
Expand Down
147 changes: 56 additions & 91 deletions src/components/LmsConfigurations/CanvasIntegrationConfigForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types';
import isEmpty from 'lodash/isEmpty';
import {
ValidationFormGroup, Input, StatefulButton, Icon,
Form, StatefulButton, Icon,
} from '@edx/paragon';
import { Error } from '@edx/paragon/icons';
import { snakeCaseFormData } from '../../utils';
import StatusAlert from '../StatusAlert';
import LmsApiService from '../../data/services/LmsApiService';
Expand All @@ -17,6 +18,28 @@ export const REQUIRED_CANVAS_CONFIG_FIELDS = [
'canvasBaseUrl',
];

const CANVAS_FIELDS = [
{
key: 'clientId',
invalidMessage: 'Required. Client Id must not be blank',
label: 'API Client Id',
},
{
key: 'clientSecret',
invalidMessage: 'Required. Client Secret must not be blank',
label: 'API Client Secret',
},
{
key: 'canvasAccountId',
invalidMessage: 'Required. Canvas Account Id must not be blank',
label: 'Canvas Account Id',
},
{
key: 'canvasBaseUrl',
invalidMessage: 'Required. Canvas Base URL must not be blank',
label: 'Canvas Base URL',
},
];
class CanvasIntegrationConfigForm extends React.Component {
state = {
invalidFields: {},
Expand Down Expand Up @@ -117,102 +140,44 @@ class CanvasIntegrationConfigForm extends React.Component {
>
<div className="row">
<div className="col col-6">
<ValidationFormGroup
for="active"
>
<label htmlFor="active">Active</label>
<Input
type="checkbox"
id="active"
<Form.Group controlId="active">
<Form.Checkbox
name="active"
className="ml-3"
checked={active}
onChange={() => this.setState(prevState => ({ active: !prevState.active }))}
data-hj-suppress
/>
</ValidationFormGroup>
</div>
</div>
<div className="row">
<div className="col col-6">
<ValidationFormGroup
for="clientId"
invalid={invalidFields.clientId}
invalidMessage="Required. Client Id must not be blank"
>
<label htmlFor="clientId">API Client Id</label>
<Input
type="text"
id="clientId"
name="clientId"
className="ml-3"
defaultValue={config ? config.clientId : ''}
onChange={() => this.setState(prevState => ({ clientId: !prevState.clientId }))}
data-hj-suppress
/>
</ValidationFormGroup>
</div>
</div>
<div className="row">
<div className="col col-6">
<ValidationFormGroup
for="clientSecret"
invalid={invalidFields.clientSecret}
invalidMessage="Required. Client Secret must not be blank"
>
<label htmlFor="clientSecret">API Client Secret</label>
<Input
type="text"
id="clientSecret"
name="clientSecret"
className="ml-3"
defaultValue={config ? config.clientSecret : ''}
onChange={() => this.setState(prevState => ({ clientSecret: !prevState.clientSecret }))}
data-hj-suppress
/>
</ValidationFormGroup>
</div>
</div>
<div className="row">
<div className="col col-6">
<ValidationFormGroup
for="canvasAccountId"
invalid={invalidFields.canvasAccountId}
invalidMessage="Required. Canvas Account Id must not be blank"
>
<label htmlFor="canvasAccountId">Canvas Account Id</label>
<Input
type="number"
id="canvasAccountId"
name="canvasAccountId"
className="ml-3"
defaultValue={config ? config.canvasAccountId : null}
onChange={() => this.setState(prevState => ({ canvasAccountId: !prevState.canvasAccountId }))}
data-hj-suppress
/>
</ValidationFormGroup>
floatLabelLeft
>
Active
</Form.Checkbox>
</Form.Group>
</div>
</div>
<div className="row">
<div className="col col-6">
<ValidationFormGroup
for="canvasBaseUrl"
invalid={invalidFields.canvasBaseUrl}
invalidMessage="Required. Canvas Base URL must not be blank"
>
<label htmlFor="canvasBaseUrl">Canvas Base URL</label>
<Input
type="text"
id="canvasBaseUrl"
name="canvasBaseUrl"
className="ml-3"
defaultValue={config ? config.canvasBaseUrl : null}
onChange={() => this.setState(prevState => ({ canvasBaseUrl: !prevState.canvasBaseUrl }))}
data-hj-suppress
/>
</ValidationFormGroup>
{CANVAS_FIELDS.map(canvasField => (
<div className="row" key={canvasField.key}>
<div className="col col-4">
<Form.Group
controlId={canvasField.key}
isInvalid={invalidFields[canvasField.key]}
>
<Form.Label>{canvasField.label}</Form.Label>
<Form.Control
type="text"
name={canvasField.key}
defaultValue={config ? config[canvasField.key] : ''}
onChange={() => this.setState(
prevState => ({ [canvasField.key]: !prevState[canvasField.key] }),
)}
data-hj-suppress
/>
{invalidFields[canvasField.key] && canvasField.invalidMessage && (
<Form.Control.Feedback icon={<Error className="mr-1" />}>
{canvasField.invalidMessage}
</Form.Control.Feedback>
)}
</Form.Group>
</div>
</div>
</div>
))}

<div className="row">
<div className="col col-2">
Expand Down
Loading