Fixups to Manual ToolConfig Creation

Add some changes to the Manual Configuration form
for 1.3 tools.

refs PLAT-4248

Test Plan:
 n/a

Change-Id: I02d0321eb338ddda5dccd232ab024729abfdf88e
Reviewed-on: https://gerrit.instructure.com/187168
Tested-by: Jenkins
Reviewed-by: Weston Dransfield <wdransfield@instructure.com>
QA-Review: Marc Phillips <mphillips@instructure.com>
Product-Review: Marc Phillips <mphillips@instructure.com>
This commit is contained in:
Marc Phillips 2019-03-27 14:10:59 -06:00
parent 6d7073ec16
commit 054f22a894
2 changed files with 200 additions and 154 deletions

View File

@ -19,6 +19,7 @@ import I18n from 'i18n!react_developer_keys'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import React from 'react' import React from 'react'
import { Alert } from '@instructure/ui-alerts'
import View from '@instructure/ui-layout/lib/components/View' import View from '@instructure/ui-layout/lib/components/View'
import { CheckboxGroup } from '@instructure/ui-forms' import { CheckboxGroup } from '@instructure/ui-forms'
import FormFieldGroup from '@instructure/ui-form-field/lib/components/FormFieldGroup'; import FormFieldGroup from '@instructure/ui-form-field/lib/components/FormFieldGroup';
@ -39,13 +40,18 @@ export default class ManualConfigurationForm extends React.Component {
state = { state = {
toolConfiguration: {}, toolConfiguration: {},
additionalSettings: {}, additionalSettings: {},
placements: [{placement: "account_navigation"}, {placement: "link_selection"}] placements: [{placement: "account_navigation"}, {placement: "link_selection"}],
custom_fields: {}
} }
get toolConfiguration() { get toolConfiguration() {
return this.state.toolConfiguration return this.state.toolConfiguration
} }
get specialTypes() {
return ["editor_button"]
}
placements(obj) { placements(obj) {
return obj.map(o => o.placement); return obj.map(o => o.placement);
} }
@ -71,130 +77,154 @@ export default class ManualConfigurationForm extends React.Component {
} }
render() { render() {
const { toolConfiguration, additionalSettings, placements } = this.state; const { toolConfiguration, additionalSettings, placements, custom_fields } = this.state;
const { validScopes, validPlacements } = this.props; const { validScopes, validPlacements } = this.props;
return ( return (
<View> <View>
<FormFieldGroup <FormFieldGroup
description={I18n.t('Manual Configuration')} description={<ScreenReaderContent>{I18n.t('Manual Configuration')}</ScreenReaderContent>}
layout="stacked" layout="stacked"
> >
<FormFieldGroup <FormFieldGroup
description={<ScreenReaderContent>{I18n.t("Display Values")}</ScreenReaderContent>} description={I18n.t("Required Values")}
layout="columns"
> >
<TextInput <hr />
name="title" <FormFieldGroup
value={toolConfiguration.title} description={<ScreenReaderContent>{I18n.t('Display Values')}</ScreenReaderContent>}
label={I18n.t("Title")} layout="columns"
>
<TextInput
name="title"
value={toolConfiguration.title}
label={I18n.t("Title")}
required
/>
<TextArea
name="description"
value={toolConfiguration.description}
label={I18n.t("Description")}
maxHeight="5rem"
required
/>
</FormFieldGroup>
<FormFieldGroup
description={<ScreenReaderContent>{I18n.t("Open Id Connect Values")}</ScreenReaderContent>}
layout="columns"
>
<TextInput
name="target_link_uri"
value={toolConfiguration.target_link_uri}
label={I18n.t("Target Link URI")}
required
/>
<TextInput
name="oidc_initiation_url"
value={toolConfiguration.oidc_initiation_url}
label={I18n.t("OpenID Connect Initiation Url")}
required
/>
</FormFieldGroup>
<TextArea
name="public_jwk"
value={toolConfiguration.public_jwk}
label={I18n.t("Public JWK")}
maxHeight="10rem"
required required
resize="vertical"
autoGrow
/> />
<TextInput <hr />
name="icon_url"
value={toolConfiguration.title}
label={I18n.t("Icon Url")}
/>
</FormFieldGroup> </FormFieldGroup>
<TextArea
name="description"
value={toolConfiguration.description}
label={I18n.t("Description")}
maxHeight="5rem"
required
/>
<FormFieldGroup
description={<ScreenReaderContent>{I18n.t("OIDC Values")}</ScreenReaderContent>}
layout="columns"
>
<TextInput
name="target_link_uri"
value={toolConfiguration.target_link_uri}
label={I18n.t("Target Link URI")}
required
/>
<TextInput
name="oidc_initiation_url"
value={toolConfiguration.oidc_initiation_url}
label={I18n.t("OpenID Connect Initiation Url")}
required
/>
</FormFieldGroup>
<TextArea
name="public_jwk"
value={toolConfiguration.public_jwk}
label={I18n.t("Public JWK")}
maxHeight="10rem"
required
resize="vertical"
autoGrow
/>
<ToggleDetails <ToggleDetails
summary={I18n.t("LTI Advantage Services")} summary={I18n.t("LTI Advantage Services")}
fluidWidth fluidWidth
> >
<CheckboxGroup <View
name="services" as="div"
onChange={() => {}} margin="small"
value={toolConfiguration.scopes} >
description={<ScreenReaderContent>{I18n.t("Check Services to enable")}</ScreenReaderContent>} <Alert
> variant="warning"
{ margin="small"
Object.keys(validScopes).map(key => { >
return <Checkbox {I18n.t("Services must be supported by the tool in order to work. Check with your Tool Vendor to ensure service capabilities.")}
key={key} </Alert>
label={validScopes[key]} <CheckboxGroup
value={key} name="services"
variant="toggle" onChange={() => {}}
/> value={toolConfiguration.scopes}
}) description={<ScreenReaderContent>{I18n.t("Check Services to enable")}</ScreenReaderContent>}
} >
</CheckboxGroup> {
Object.keys(validScopes).map(key => {
return <Checkbox
key={key}
label={validScopes[key]}
value={key}
variant="toggle"
/>
})
}
</CheckboxGroup>
</View>
</ToggleDetails> </ToggleDetails>
<ToggleDetails <ToggleDetails
summary={I18n.t("Additional Settings")} summary={I18n.t("Additional Settings")}
fluidWidth fluidWidth
> >
<FormFieldGroup <View
description={<ScreenReaderContent>{I18n.t("Identification Values")}</ScreenReaderContent>} as="div"
layout="columns" margin="small"
> >
<TextInput <FormFieldGroup
name="domain" description={<ScreenReaderContent>{I18n.t("Identification Values")}</ScreenReaderContent>}
value={additionalSettings.domain} layout="columns"
label={I18n.t("Domain")} >
<TextInput
name="domain"
value={additionalSettings.domain}
label={I18n.t("Domain")}
/>
<TextInput
name="tool_id"
value={additionalSettings.tool_id}
label={I18n.t("Tool Id")}
/>
</FormFieldGroup>
<FormFieldGroup
description={<ScreenReaderContent>{I18n.t("Display Values")}</ScreenReaderContent>}
layout="columns"
>
<TextInput
name="settings_icon_url"
value={additionalSettings.icon_url}
label={I18n.t("Icon Url")}
/>
<TextInput
name="text"
value={additionalSettings.text}
label={I18n.t("Text")}
/>
<TextInput
name="selection_height"
value={additionalSettings.selection_height}
label={I18n.t("Selection Height")}
/>
<TextInput
name="selection_width"
value={additionalSettings.selection_width}
label={I18n.t("Selection Width")}
/>
</FormFieldGroup>
<TextArea
label={I18n.t('Custom Fields')}
maxHeight="10rem"
messages={[{text: I18n.t('One per line. Format: name=value'), type: 'hint'}]}
name="custom_fields"
value={Object.keys(custom_fields).map(k => `${k}=${custom_fields[k]}`).join("\n")}
/> />
<TextInput </View>
name="tool_id"
value={additionalSettings.tool_id}
label={I18n.t("Tool Id")}
/>
</FormFieldGroup>
<FormFieldGroup
description={<ScreenReaderContent>{I18n.t("Display Values")}</ScreenReaderContent>}
layout="columns"
>
<TextInput
name="settings_icon_url"
value={additionalSettings.icon_url}
label={I18n.t("Icon Url")}
/>
<TextInput
name="text"
value={additionalSettings.text}
label={I18n.t("Text")}
/>
<TextInput
name="selection_height"
value={additionalSettings.selection_height}
label={I18n.t("Selection Height")}
/>
<TextInput
name="selection_width"
value={additionalSettings.selection_width}
label={I18n.t("Selection Width")}
/>
</FormFieldGroup>
</ToggleDetails> </ToggleDetails>
<Select <Select
label={I18n.t("Placements")} label={I18n.t("Placements")}
@ -219,64 +249,80 @@ export default class ManualConfigurationForm extends React.Component {
fluidWidth fluidWidth
key={p.placement} key={p.placement}
> >
<FormFieldGroup <View
description={<ScreenReaderContent>{I18n.t("Placement Values")}</ScreenReaderContent>} as="div"
margin="small"
> >
<FormFieldGroup <FormFieldGroup
description={<ScreenReaderContent>{I18n.t("Request Values")}</ScreenReaderContent>} description={<ScreenReaderContent>{I18n.t("Placement Values")}</ScreenReaderContent>}
layout="columns"
> >
<TextInput {
name={`${p.placement}_target_link_uri`} this.specialTypes.includes(p.placement)
value={p.icon_url} ? <Alert
label={I18n.t("Target Link URI")} variant="warning"
/> margin="small"
<RadioInputGroup >
name={`${p.placement}_message_type`} {I18n.t("This placement requires Deep Link support by the vendor. Check with your tool vendor to ensure they support this functionality")}
value={p.message_type} </Alert>
description={I18n.t("Select Message Type")} : null
}
<FormFieldGroup
description={<ScreenReaderContent>{I18n.t("Request Values")}</ScreenReaderContent>}
layout="columns"
> >
<RadioInput <TextInput
value="LtiDeepLinkingRequest" name={`${p.placement}_target_link_uri`}
label="LtiDeepLinkingRequest" value={p.icon_url}
label={I18n.t("Target Link URI")}
/> />
<RadioInput <RadioInputGroup
value="LtiResourceLinkRequest" name={`${p.placement}_message_type`}
label="LtiResourceLinkRequest" value={p.message_type}
description={I18n.t("Select Message Type")}
required
>
<RadioInput
value="LtiDeepLinkingRequest"
label="LtiDeepLinkingRequest"
/>
<RadioInput
value="LtiResourceLinkRequest"
label="LtiResourceLinkRequest"
/>
</RadioInputGroup>
</FormFieldGroup>
<FormFieldGroup
description={<ScreenReaderContent>{I18n.t("Label Values")}</ScreenReaderContent>}
layout="columns"
>
<TextInput
name={`${p.placement}_icon_url`}
value={p.icon_url}
label={I18n.t("Icon Url")}
/> />
</RadioInputGroup> <TextInput
name={`${p.placement}_text`}
value={p.text}
label={I18n.t("Text")}
/>
</FormFieldGroup>
<FormFieldGroup
description={<ScreenReaderContent>{I18n.t("Display Values")}</ScreenReaderContent>}
layout="columns"
>
<TextInput
name={`${p.placement}_selection_height`}
value={p.selection_height}
label={I18n.t("Selection Height")}
/>
<TextInput
name={`${p.placement}_selection_width`}
value={p.selection_width}
label={I18n.t("Selection Width")}
/>
</FormFieldGroup>
</FormFieldGroup> </FormFieldGroup>
<FormFieldGroup </View>
description={<ScreenReaderContent>{I18n.t("Label Values")}</ScreenReaderContent>}
layout="columns"
>
<TextInput
name={`${p.placement}_icon_url`}
value={p.icon_url}
label={I18n.t("Icon Url")}
/>
<TextInput
name={`${p.placement}_text`}
value={p.text}
label={I18n.t("Text")}
/>
</FormFieldGroup>
<FormFieldGroup
description={<ScreenReaderContent>{I18n.t("Display Values")}</ScreenReaderContent>}
layout="columns"
>
<TextInput
name={`${p.placement}_selection_height`}
value={p.selection_height}
label={I18n.t("Selection Height")}
/>
<TextInput
name={`${p.placement}_selection_width`}
value={p.selection_width}
label={I18n.t("Selection Width")}
/>
</FormFieldGroup>
</FormFieldGroup>
</ToggleDetails> </ToggleDetails>
}) })
} }

View File

@ -29,7 +29,7 @@ class TokenScopes
LTI_NRPS_V2_SCOPE = "https://purl.imsglobal.org/spec/lti-nrps/scope/contextmembership.readonly".freeze LTI_NRPS_V2_SCOPE = "https://purl.imsglobal.org/spec/lti-nrps/scope/contextmembership.readonly".freeze
LTI_SCOPES = { LTI_SCOPES = {
LTI_AGS_LINE_ITEM_SCOPE => I18n.t("Can create and view assignment data in the gradebook associated with the tool."), LTI_AGS_LINE_ITEM_SCOPE => I18n.t("Can create and view assignment data in the gradebook associated with the tool."),
LTI_AGS_LINE_ITEM_READ_ONLY_SCOPE => I18n.t("Can view assignment data in the Gradebook associated with the tool."), LTI_AGS_LINE_ITEM_READ_ONLY_SCOPE => I18n.t("Can view assignment data in the gradebook associated with the tool."),
LTI_AGS_RESULT_READ_ONLY_SCOPE => I18n.t("Can view submission data for assignments associated with the tool."), LTI_AGS_RESULT_READ_ONLY_SCOPE => I18n.t("Can view submission data for assignments associated with the tool."),
LTI_AGS_SCORE_SCOPE => I18n.t("Can create and update submission results for assignments associated with the tool."), LTI_AGS_SCORE_SCOPE => I18n.t("Can create and update submission results for assignments associated with the tool."),
LTI_NRPS_V2_SCOPE => I18n.t("Can retrieve user data associated with the context the tool is installed in.") LTI_NRPS_V2_SCOPE => I18n.t("Can retrieve user data associated with the context the tool is installed in.")