## Summary (fixes #25342) There is a fatal when using the File Upload control in the image upload control. While the fatal appears to originate within the File Upload control, it is actually [coming from](https://github.com/clintandrewhall/kibana/blob/file-upload/x-pack/plugins/canvas/public/components/loading/index.js#L15) `Loading`, which attempts to use `react-redux` to change the `backgroundColor` of the loading indicator based on the page. I couldn't find an instance where we use this Loading indicator outside of a redux context, so I've opted to simply use the control directly. @rashidkpc agreed this would be a good fix for the moment. In addition, I fixed a props error coming from the data-url field that made it read-only, so I fixed that, too, as well as a formatting issue with the Set button. ## Test Plan Added a `setTimeout` call to simulate load. Toggled between data url and literal URL. ![screen shot 2018-11-07 at 6 47 32 pm](https://user-images.githubusercontent.com/297604/48171133-20ff4a80-e2c0-11e8-9b9f-71818801744a.png) - Before ![screen shot 2018-11-07 at 7 11 48 pm](https://user-images.githubusercontent.com/297604/48171320-09749180-e2c1-11e8-8a2a-f87d564944c1.png) - After ![screen shot 2018-11-07 at 6 57 17 pm](https://user-images.githubusercontent.com/297604/48171134-20ff4a80-e2c0-11e8-9bec-f129cfbfaa18.png) - Fixed Warning ![screen shot 2018-11-07 at 7 11 57 pm](https://user-images.githubusercontent.com/297604/48171334-142f2680-e2c1-11e8-8ab6-ee06e6231e6b.png) ### Checklist Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR. - [x] This was checked for cross-browser compatibility, [including a check against IE11](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md) ~~- [ ] [Documentation](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#writing-documentation) was added for features that require explanation or tutorials~~ ~~- [ ] [Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios~~ ~~- [ ] This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist)~~ ### For maintainers ~~- [] This was checked for breaking API changes and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~~ ~~- [ ] This includes a feature addition or change that requires a release note and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~~
This commit is contained in:
parent
57cffd692e
commit
8d139d508e
|
@ -7,6 +7,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import {
|
import {
|
||||||
|
EuiForm,
|
||||||
EuiFlexGroup,
|
EuiFlexGroup,
|
||||||
EuiFlexItem,
|
EuiFlexItem,
|
||||||
EuiImage,
|
EuiImage,
|
||||||
|
@ -15,7 +16,10 @@ import {
|
||||||
EuiButton,
|
EuiButton,
|
||||||
EuiFieldText,
|
EuiFieldText,
|
||||||
} from '@elastic/eui';
|
} from '@elastic/eui';
|
||||||
import { Loading } from '../../../../public/components/loading';
|
|
||||||
|
// TODO: (clintandrewhall) This is a quick fix for #25342 -- we should figure out how to use the overall component.
|
||||||
|
import { Loading } from '../../../../public/components/loading/loading';
|
||||||
|
|
||||||
import { FileUpload } from '../../../../public/components/file_upload';
|
import { FileUpload } from '../../../../public/components/file_upload';
|
||||||
import { elasticOutline } from '../../../lib/elastic_outline';
|
import { elasticOutline } from '../../../lib/elastic_outline';
|
||||||
import { resolveFromArgs } from '../../../../common/lib/resolve_dataurl';
|
import { resolveFromArgs } from '../../../../common/lib/resolve_dataurl';
|
||||||
|
@ -123,18 +127,19 @@ class ImageUpload extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
const pasteImageUrl = urlTypeSrc ? (
|
const pasteImageUrl = urlTypeSrc ? (
|
||||||
<form onSubmit={this.setSrcUrl} className="eui-textRight">
|
<EuiForm onSubmit={this.setSrcUrl} className="eui-textRight">
|
||||||
<EuiFieldText
|
<EuiFieldText
|
||||||
compressed
|
compressed
|
||||||
value={this.state.url}
|
defaultValue={this.state.url}
|
||||||
inputRef={ref => (this.inputRefs.srcUrlText = ref)}
|
inputRef={ref => (this.inputRefs.srcUrlText = ref)}
|
||||||
placeholder="Image URL"
|
placeholder="Image URL"
|
||||||
aria-label="Image URL"
|
aria-label="Image URL"
|
||||||
/>
|
/>
|
||||||
|
<EuiSpacer size="m" />
|
||||||
<EuiButton type="submit" size="s" onClick={this.setSrcUrl}>
|
<EuiButton type="submit" size="s" onClick={this.setSrcUrl}>
|
||||||
Set
|
Set
|
||||||
</EuiButton>
|
</EuiButton>
|
||||||
</form>
|
</EuiForm>
|
||||||
) : null;
|
) : null;
|
||||||
|
|
||||||
const shouldPreview =
|
const shouldPreview =
|
||||||
|
|
Loading…
Reference in a new issue