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:
Vadim Kibana 2023-09-27 10:49:31 +02:00 committed by GitHub
parent 03017759d2
commit 94bd19d747
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 20 deletions

View file

@ -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>
);
}

View file

@ -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>
);
}