mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 18:51:07 -04:00
use EUI components for tutorial params (#167014)
## Summary
Partially addresses https://github.com/elastic/kibana/issues/46410
Stops using `kuiTextInput` CSS class name in `number_parameter.js` and
`string_paramter.js` components in the `home` plugin.
How to test? I don't know if these parameters are still used, so to test
this apply this patch:
```diff
diff --git a/src/plugins/home/public/application/components/tutorial/instruction_set.js b/src/plugins/home/public/application/components/tutorial/instruction_set.js
index 651212f062c..7f2077a322d 100644
--- a/src/plugins/home/public/application/components/tutorial/instruction_set.js
+++ b/src/plugins/home/public/application/components/tutorial/instruction_set.js
@@ -261,14 +261,20 @@ class InstructionSetUi extends React.Component {
render() {
let paramsForm;
- if (this.props.params && this.state.isParamFormVisible) {
+ if (true) {
paramsForm = (
<>
+ PARAMETER FORM
<EuiSpacer />
<ParameterForm
- params={this.props.params}
- paramValues={this.props.paramValues}
- setParameter={this.props.setParameter}
+ params={[
+ { id: 'test', label: 'test', type: 'string' },
+ { id: 'test2', label: 'test2', type: 'number'}
+ ]}
+ paramValues={{ test: 'test', test2: 123 }}
+ setParameter={(id, value) => {
+ console.log('setParameter', id, value);
+ }}
/>
</>
);
```
And go to `/app/home#/tutorial/apm` page, you will see the new parameter
input look there:
<img width="478" alt="image"
src="ba3a3dce
-c2d5-41db-a7e8-24bf6caeb16b">
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
parent
03017759d2
commit
94bd19d747
2 changed files with 8 additions and 20 deletions
|
@ -8,6 +8,7 @@
|
|||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
|
||||
|
||||
export function NumberParameter({ id, label, value, setParameter }) {
|
||||
const handleChange = (evt) => {
|
||||
|
@ -15,20 +16,9 @@ export function NumberParameter({ id, label, value, setParameter }) {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="visEditorSidebar__formRow">
|
||||
<label className="visEditorSidebar__formLabel" htmlFor={id}>
|
||||
{label}
|
||||
</label>
|
||||
<div className="visEditorSidebar__formControl kuiFieldGroupSection--wide">
|
||||
<input
|
||||
className="kuiTextInput"
|
||||
type="number"
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
id={id}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<EuiFormRow label={label}>
|
||||
<EuiFieldNumber value={value} onChange={handleChange} fullWidth />
|
||||
</EuiFormRow>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { EuiFormRow, EuiFieldText } from '@elastic/eui';
|
||||
|
||||
export function StringParameter({ id, label, value, setParameter }) {
|
||||
const handleChange = (evt) => {
|
||||
|
@ -15,12 +16,9 @@ export function StringParameter({ id, label, value, setParameter }) {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="visEditorSidebar__formRow">
|
||||
<label className="visEditorSidebar__formLabel">{label}</label>
|
||||
<div className="visEditorSidebar__formControl kuiFieldGroupSection--wide">
|
||||
<input className="kuiTextInput" type="text" value={value} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<EuiFormRow label={label}>
|
||||
<EuiFieldText value={value} onChange={handleChange} fullWidth />
|
||||
</EuiFormRow>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue