@elyra/canvas 12.16.0 → 12.21.0

package/src/common-properties/controls/expression/expression.scss

@@ -15,55 +15,83 @@
  */
 
 @import "./expression-builder/expression-builder";
+@import "./expression-toggle/expression-toggle";
 
-/* Override so Codemirror autocomplete shows up on top */
-.CodeMirror-hints {
-	z-index: 1110;
-}
+.react-codemirror2 {
+	.CodeMirror {
+		width: 100%;
+		background: $field-02;
+		color: $text-01;
 
-.CodeMirror-placeholder {
-	opacity: 0.5;
-}
+		.CodeMirror-gutters {
+			border-right: none;
+			background-color: inherit;
+		}
 
-.CodeMirror {
-	width: 100%;
-	background: $field-02;
-	color: $text-01;
-}
+		.CodeMirror-lines {
+			padding-top: $spacing-05;
+			.CodeMirror-line-like {
+				padding-left: $spacing-03;
+			}
+			.CodeMirror-placeholder {
+				opacity: 0.5;
+				@include carbon--type-style("code-02");
+			}
+			.CodeMirror-cursor {
+				border-left: 1px solid $text-01;
+			}
+			.CodeMirror-code {
 
-.CodeMirror-cursor {
-	border-left: 1px solid $text-01;
-}
+				.CodeMirror-linenumber {
+					@include carbon--type-style("body-short-01");
+				}
 
-.cm-s-error.CodeMirror { border: $spacing-01 solid $support-01; }
+				.CodeMirror-line {
+					padding-left: $spacing-03;
 
-.cm-s-warning.CodeMirror { border: $spacing-01 solid $support-03; }
+					span {
+						@include carbon--type-style("code-02");
+					}
+				}
+			}
+		}
+	}
 
-.cm-s-disabled.CodeMirror { opacity: 0.5}
+	.cm-s-error.CodeMirror { border: $spacing-01 solid $support-01; }
 
-.cm-s-custom .cm-keyword { color: $link-01; }
+	.cm-s-warning.CodeMirror { border: $spacing-01 solid $support-03; }
 
-.cm-s-custom .cm-number { color: $text-02; }
+	.cm-s-disabled.CodeMirror { opacity: 0.5}
 
-.cm-s-custom .cm-def { color: $support-01; }
+	.cm-s-custom .cm-keyword { color: $link-01; }
 
-.cm-s-custom .cm-comment { color: $support-02; }
+	.cm-s-custom .cm-number { color: $text-02; }
 
-.cm-s-custom .cm-variable,
-.cm-s-custom .cm-punctuation,
-.cm-s-custom .cm-property,
-.cm-s-custom .cm-operator {
-	color: $text-01;
-}
-.cm-s-custom .cm-variable-2 { color: $text-01; }
+	.cm-s-custom .cm-def { color: $support-01; }
+
+	.cm-s-custom .cm-comment { color: $support-02; }
+
+	.cm-s-custom .cm-variable,
+	.cm-s-custom .cm-punctuation,
+	.cm-s-custom .cm-property,
+	.cm-s-custom .cm-operator {
+		color: $text-01;
+	}
+	.cm-s-custom .cm-variable-2 { color: $text-01; }
 
-.cm-s-custom .cm-variable-3, .cm-s-custom .cm-type { color: $text-01; }
+	.cm-s-custom .cm-variable-3, .cm-s-custom .cm-type { color: $text-01; }
 
-.cm-s-custom .cm-string { color: $text-error; }
+	.cm-s-custom .cm-string { color: $text-error; }
 
-.cm-s-custom .cm-string-2 { color: $text-error; }
+	.cm-s-custom .cm-string-2 { color: $text-error; }
 
-.cm-s-custom .cm-meta { color: $ui-01; }
+	.cm-s-custom .cm-meta { color: $ui-01; }
+}
+
+/* Override so Codemirror autocomplete shows up on top */
+.CodeMirror-hints {
+	z-index: 1110;
+}
 
 .properties-expression-editor {
 	border: 1px solid $ui-03;

package/src/common-properties/controls/expression/expressionInfo-parser.js

@@ -15,7 +15,7 @@
  */
 
 import logger from "../../../../utils/logger";
-import { L10nProvider } from "../../util/L10nProvider";
+import { L10nProvider, ResourceDef } from "../../util/L10nProvider";
 import { cloneDeep, propertyOf } from "lodash";
 
 function setExpressionInfo(inExpressionInfo) {
@@ -75,6 +75,11 @@ function setExpressionInfo(inExpressionInfo) {
 			}
 		}
 	}
+
+	if (inExpressionInfo && inExpressionInfo.resources) {
+		expressionFunctionInfo.resources = inExpressionInfo.resources;
+	}
+
 	return expressionFunctionInfo;
 }
 
@@ -85,6 +90,11 @@ function _genFunctionParameters(functionInfoList, l10nProvider) {
 		newEntry.locLabel = l10nProvider.l10nLabel(newEntry, newEntry.id);
 		newEntry.help = l10nProvider.l10nDesc(newEntry, newEntry.locLabel);
 		newEntry.value = newEntry.locLabel;
+		// Translatable return type of function
+		if (newEntry.return_type_label) {
+			const returnTypeLabel = ResourceDef.make(newEntry.return_type_label);
+			newEntry.locReturnType = l10nProvider.l10nResource(returnTypeLabel);
+		}
 		if (Array.isArray(functionInfo.parameters)) {
 			// if the function label has any parameter substituion char '?' then replace with parameter label
 			if (newEntry.locLabel && newEntry.locLabel.indexOf("?") !== -1) {

package/src/common-properties/controls/passwordfield/passwordfield.jsx

@@ -17,7 +17,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { TextInput } from "carbon-components-react";
+import { TextInput, Form } from "carbon-components-react";
 import ValidationMessage from "./../../components/validation-message";
 import * as ControlUtils from "./../../util/control-utils";
 import { STATES } from "./../../constants/constants.js";
@@ -40,19 +40,21 @@ class PasswordControl extends React.Component {
 		const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl);
 		return (
 			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
-				<TextInput.PasswordInput
-					{...validationProps}
-					autoComplete="off"
-					id={this.id}
-					disabled={this.props.state === STATES.DISABLED}
-					placeholder={this.props.control.additionalText}
-					onChange={this.handleChange.bind(this)}
-					value={value}
-					labelText={this.props.controlItem}
-					hideLabel={this.props.tableControl}
-					light={this.props.controller.getLight()}
-					tooltipAlignment="end"
-				/>
+				<Form>
+					<TextInput.PasswordInput
+						{...validationProps}
+						autoComplete="off"
+						id={this.id}
+						disabled={this.props.state === STATES.DISABLED}
+						placeholder={this.props.control.additionalText}
+						onChange={this.handleChange.bind(this)}
+						value={value}
+						labelText={this.props.controlItem}
+						hideLabel={this.props.tableControl}
+						light={this.props.controller.getLight()}
+						tooltipAlignment="end"
+					/>
+				</Form>
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
 			</div>);
 	}

package/src/common-properties/controls/radioset/radioset.jsx

@@ -23,7 +23,7 @@ import * as ConditionsUtils from "./../../ui-conditions/conditions-utils.js";
 import ValidationMessage from "./../../components/validation-message";
 import { RadioButton } from "carbon-components-react";
 import classNames from "classnames";
-import { STATES } from "./../../constants/constants.js";
+import { STATES, UPDATE_TYPE } from "./../../constants/constants.js";
 import { ORIENTATIONS } from "./../../constants/form-constants.js";
 import { v4 as uuid4 } from "uuid";
 import { Information16 } from "@carbon/icons-react";
@@ -39,7 +39,7 @@ class RadiosetControl extends React.Component {
 	}
 
 	componentDidMount() {
-		this.updateValueFromFilterEnum(true);
+		this.updateValueFromFilterEnum(true, UPDATE_TYPE.INITIAL_LOAD);
 		const val = this.props.controller.getPropertyValue(this.props.propertyId);
 		this.setEnabledStateOfOptionalPanels(val);
 		if (typeof this.props.value !== "undefined" && this.props.value !== null) {
@@ -92,7 +92,7 @@ class RadiosetControl extends React.Component {
 	}
 
 	// this is needed in order to reset the property value when a value is filtered out.
-	updateValueFromFilterEnum(skipValidateInput) {
+	updateValueFromFilterEnum(skipValidateInput, updateType) {
 		if (this.props.value !== null && typeof this.props.value !== "undefined" &&
 			!this.props.controlOpts.values.includes(this.props.value)) {
 			let defaultValue = null;
@@ -100,7 +100,7 @@ class RadiosetControl extends React.Component {
 			if (this.props.control.valueDef && this.props.control.valueDef.defaultValue && this.props.controlOpts.values.includes(this.props.control.valueDef.defaultValue)) {
 				defaultValue = this.props.control.valueDef.defaultValue;
 			}
-			this.props.controller.updatePropertyValue(this.props.propertyId, defaultValue, skipValidateInput);
+			this.props.controller.updatePropertyValue(this.props.propertyId, defaultValue, skipValidateInput, updateType);
 		}
 	}
 

package/src/common-properties/controls/selectcolumns/selectcolumns.jsx

@@ -31,7 +31,7 @@ import ReadonlyControl from "./../readonly";
 
 /* eslint max-depth: ["error", 6] */
 
-class SelectColumns extends AbstractTable {
+class SelectColumnsControl extends AbstractTable {
 
 	constructor(props) {
 		super(props);
@@ -170,7 +170,7 @@ class SelectColumns extends AbstractTable {
 	}
 }
 
-SelectColumns.propTypes = {
+SelectColumnsControl.propTypes = {
 	control: PropTypes.object.isRequired,
 	propertyId: PropTypes.object.isRequired,
 	controller: PropTypes.object.isRequired,
@@ -194,4 +194,4 @@ const mapStateToProps = (state, ownProps) => ({
 	tableButtons: ownProps.controller.getTableButtons(ownProps.propertyId)
 });
 
-export default connect(mapStateToProps, null)(SelectColumns);
+export default connect(mapStateToProps, null)(SelectColumnsControl);

package/src/common-properties/controls/someofselect/someofselect.jsx

@@ -23,7 +23,7 @@ import ValidationMessage from "./../../components/validation-message";
 import classNames from "classnames";
 import { isEqual, intersection } from "lodash";
 
-import { STATES } from "../../constants/constants";
+import { STATES, UPDATE_TYPE } from "../../constants/constants";
 
 class SomeofselectControl extends React.Component {
 	constructor(props) {
@@ -34,7 +34,7 @@ class SomeofselectControl extends React.Component {
 	}
 
 	componentDidMount() {
-		this.updateValueFromFilterEnum(true);
+		this.updateValueFromFilterEnum(true, UPDATE_TYPE.INITIAL_LOAD);
 	}
 
 	componentDidUpdate(prevProps) {
@@ -45,10 +45,10 @@ class SomeofselectControl extends React.Component {
 	}
 
 	// this is needed in order to reset the property value when a value is filtered out.
-	updateValueFromFilterEnum(skipValidateInput) {
+	updateValueFromFilterEnum(skipValidateInput, updateType) {
 		const newValues = intersection(this.props.value, this.props.controlOpts.values);
 		if (!isEqual(newValues, this.props.value)) {
-			this.props.controller.updatePropertyValue(this.props.propertyId, newValues, skipValidateInput);
+			this.props.controller.updatePropertyValue(this.props.propertyId, newValues, skipValidateInput, updateType);
 		}
 	}
 

package/src/common-properties/controls/toggle/index.jsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2017-2022 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ToggleControl from "./toggle.jsx";
+export default ToggleControl;

package/src/common-properties/controls/toggle/toggle.jsx

@@ -0,0 +1,89 @@
+/*
+ * Copyright 2017-2022 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Toggle } from "carbon-components-react";
+import ValidationMessage from "./../../components/validation-message";
+import * as ControlUtils from "./../../util/control-utils";
+import { STATES, MESSAGE_KEYS } from "./../../constants/constants.js";
+import classNames from "classnames";
+import { formatMessage } from "./../../util/property-utils";
+
+
+class ToggleControl extends React.Component {
+	constructor(props) {
+		super(props);
+		this.id = ControlUtils.getControlId(this.props.propertyId);
+	}
+
+
+	handleChange(value) {
+		this.props.controller.updatePropertyValue(this.props.propertyId, value);
+	}
+
+	render() {
+		const overrideLabelKeyOn = `${this.props.control.name}.toggle.on.label`;
+		const overrideLabelKeyOff = `${this.props.control.name}.toggle.off.label`;
+
+		const defaultOnEditLabel = formatMessage(this.reactIntl, MESSAGE_KEYS.TOGGLE_ON_LABEL);
+		const defaultOffEditLabel = formatMessage(this.reactIntl, MESSAGE_KEYS.TOGGLE_OFF_LABEL);
+
+		const labelOn = this.props.controller.getResource(overrideLabelKeyOn, defaultOnEditLabel);
+		const labelOff = this.props.controller.getResource(overrideLabelKeyOff, defaultOffEditLabel);
+		const size = this.props.tableControl ? "sm" : "md";
+		const toggleControl = (<Toggle
+			id={this.id}
+			size={size}
+			disabled={this.props.state === STATES.DISABLED}
+			toggled={Boolean(this.props.value)}
+			labelB={labelOn}
+			labelA={labelOff}
+			onToggle={this.handleChange.bind(this)}
+			labelText={this.props.controlItem}
+		/>);
+
+
+		const className = classNames("properties-toggle", { "hide": this.props.state === STATES.HIDDEN }, this.props.messageInfo ? this.props.messageInfo.type : null);
+		return (
+			<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
+				{toggleControl}
+				<ValidationMessage inTable={this.props.tableControl} state={this.props.state} messageInfo={this.props.messageInfo} />
+			</div>
+
+		);
+	}
+}
+
+ToggleControl.propTypes = {
+	control: PropTypes.object.isRequired,
+	propertyId: PropTypes.object.isRequired,
+	controller: PropTypes.object.isRequired,
+	controlItem: PropTypes.element,
+	tableControl: PropTypes.bool,
+	state: PropTypes.string, // pass in by redux
+	value: PropTypes.bool, // pass in by redux
+	messageInfo: PropTypes.object // pass in by redux
+};
+
+const mapStateToProps = (state, ownProps) => ({
+	value: ownProps.controller.getPropertyValue(ownProps.propertyId),
+	state: ownProps.controller.getControlState(ownProps.propertyId),
+	messageInfo: ownProps.controller.getErrorMessage(ownProps.propertyId)
+});
+
+export default connect(mapStateToProps, null)(ToggleControl);

package/src/common-properties/controls/toggle/toggle.scss

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2017-2022 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.properties-table-cell-control { // overrides when in a table cell
+	.properties-toggle {
+		.bx--toggle__switch { // override carbon when inside a table
+			margin: $spacing-02 0;
+		}
+	}
+}

package/src/common-properties/form/ControlInfo.js

@@ -68,6 +68,9 @@ export class Control {
 		if (settings.language) {
 			this.language = settings.language;
 		}
+		if (settings.enableMaximize) {
+			this.enableMaximize = settings.enableMaximize;
+		}
 		if (settings.charLimit) {
 			this.charLimit = settings.charLimit;
 		}

package/src/common-properties/form/EditorForm.js

@@ -238,6 +238,17 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 		}
 		return UIItem.makePanel(new ControlPanel(groupName, PanelType.TWISTY_PANEL, groupClassName, nestedPanel, panSubItems, groupLabel, group.open));
 	}
+	case GroupType.TEARSHEET_PANEL: {
+		groupLabel = l10nProvider.l10nLabel(group, group.name);
+		const panSubItems = [];
+		if (Array.isArray(group.subGroups)) {
+			group.subGroups.forEach(function(subGroup) {
+				groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider);
+				panSubItems.push(groupItem);
+			});
+		}
+		return UIItem.makeTearsheetPanel(new ControlPanel(groupName, PanelType.TEARSHEET, groupClassName, nestedPanel, panSubItems, groupLabel, false), group.description);
+	}
 	default:
 		logger.warn("(Unknown group type '" + group.groupType() + "')");
 		return null;
@@ -605,6 +616,7 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	settings.moveableRows = moveableRows;
 	settings.required = required;
 	settings.language = parameter.language;
+	settings.enableMaximize = parameter.enableMaximize;
 	settings.summary = parameter.summary;
 	settings.increment = parameter.increment;
 	settings.rowSelection = rowSelection;
@@ -625,7 +637,6 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
 	settings.customValueAllowed = parameter.customValueAllowed;
 	settings.className = parameter.className;
 	settings.buttons = buttons;
-
 	if (isSubControl) {
 		settings.visible = parameter.visible;
 		settings.width = parameter.columns(8);

package/src/common-properties/form/ParameterInfo.js

@@ -113,6 +113,10 @@ export class ParameterDef {
 		if (settings.language) {
 			this.language = settings.language;
 		}
+		if (settings.enableMaximize) {
+			this.enableMaximize = settings.enableMaximize;
+		}
+
 		if (toType(settings.summary) === "boolean") {
 			this.summary = settings.summary;
 		}
@@ -314,6 +318,7 @@ export class ParameterDef {
 		if (param) {
 			return new ParameterDef({
 				"id": propertyOf(param)("id"),
+				"enableMaximize": propertyOf(uihint)("enable_maximize"),
 				"label": propertyOf(uihint)("label"),
 				"description": propertyOf(uihint)("description"),
 				"type": propertyOf(param)("type"),

package/src/common-properties/form/UIItem.js

@@ -123,4 +123,14 @@ export class UIItem {
 			className: className
 		});
 	}
+
+	static makeTearsheetPanel(control, description) {
+		return new UIItem({
+			itemType: ItemType.TEARSHEET,
+			panel: {
+				...control,
+				description
+			}
+		});
+	}
 }

package/src/common-properties/panels/panels.scss

@@ -22,3 +22,4 @@
 @import "./action-panel/action-panel";
 @import "./column/column";
 @import "./control/control";
+@import "./tearsheet/tearsheet";

package/src/common-properties/panels/summary/summary.jsx

@@ -299,6 +299,7 @@ class SummaryPanel extends React.Component {
 			rejectLabel={rejectLabel}
 			title={this.props.panel.label}
 			light={this.props.controller.getLight()}
+			okButtonEnabled={this.props.okButtonEnabled}
 		>
 			<div>
 				{this.props.children}
@@ -326,11 +327,13 @@ SummaryPanel.propTypes = {
 	controller: PropTypes.object.isRequired,
 	children: PropTypes.array,
 	panel: PropTypes.object.isRequired,
-	panelState: PropTypes.string // set by redux
+	panelState: PropTypes.string, // set by redux
+	okButtonEnabled: PropTypes.bool // set by redux
 };
 
 const mapStateToProps = (state, ownProps) => ({
-	panelState: ownProps.controller.getPanelState({ name: ownProps.panel.id })
+	panelState: ownProps.controller.getPanelState({ name: ownProps.panel.id }),
+	okButtonEnabled: !ownProps.controller.getWideFlyoutPrimaryButtonDisabled({ name: ownProps.panel.id })
 });
 
 export default connect(mapStateToProps, null)(SummaryPanel);

package/src/common-properties/panels/tearsheet/index.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2017-2022 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import TearSheet from "./tearsheet.jsx";
+export default TearSheet;

package/src/common-properties/panels/tearsheet/tearsheet.jsx

@@ -0,0 +1,54 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { ComposedModal, ModalHeader, ModalBody } from "carbon-components-react";
+import { Portal } from "react-portal";
+
+class TearSheet extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			open: false
+		};
+	}
+	componentDidMount() {
+		setTimeout(() => {
+			this.setState({
+				open: true
+			});
+		}, 0);
+	}
+	render() {
+		const title = this.props.panel.label ? this.props.panel.label : null;
+		const description = this.props.panel.description ? this.props.panel.description.default : null;
+		return (
+			<Portal>
+				<ComposedModal
+					className="properties-tearsheet-panel"
+					open={this.state.open}
+					size="lg"
+					preventCloseOnClickOutside
+				>
+					<ModalHeader
+						title={title}
+						buttonOnClick={() => {
+							setTimeout(() => {
+								this.props.controller.clearActiveTearsheet();
+							}, 500);
+						}}
+					>
+						{description ? (<p>{description}</p>) : null}
+					</ModalHeader>
+					<ModalBody>
+						{this.props.children}
+					</ModalBody>
+				</ComposedModal>
+			</Portal>);
+	}
+}
+TearSheet.propTypes = {
+	panel: PropTypes.object.isRequired,
+	controller: PropTypes.object.isRequired,
+	children: PropTypes.array
+};
+
+export default TearSheet;

package/src/common-properties/panels/tearsheet/tearsheet.scss

@@ -0,0 +1,31 @@
+.properties-tearsheet-panel.bx--modal {
+	align-items: flex-end;
+	.bx--modal-container {
+		max-height: calc(100% - 88px);
+		height: 100%;
+		width: calc(100% - 128px);
+		transform: translate3d(0, 500px, 0);
+		transition: transform 240ms cubic-bezier(0, 0, 0.3, 1);
+		.bx--modal-header {
+			padding: $spacing-06 $spacing-07;
+			border-bottom: 1px solid $ui-03;
+			margin-bottom: 0;
+			h3 {
+				@include carbon--type-style("productive-heading-04");
+			}
+			p {
+				margin-top: $spacing-03;
+				@include carbon--type-style("body-short-01");
+			}
+		}
+		.bx--modal-content {
+			padding: $spacing-06 $spacing-07;
+			background-color: $ui-background;
+			margin-bottom: 0;
+			.react-codemirror2, .react-codemirror2 .CodeMirror {
+				background-color: $ui-01;
+			}
+		}	
+	}
+	
+}