use EUI components for tutorial params (#167014)

vadimkibana · kibanamachine · web-flow · commit 94bd19d74758 · 2023-09-27T09:49:31.000+01:00
## Summary Partially addresses #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 651212f..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="https://github.com/elastic/kibana/assets/82822460/ba3a3dce-c2d5-41db-a7e8-24bf6caeb16b"> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
diff --git a/src/plugins/home/public/application/components/tutorial/number_parameter.js b/src/plugins/home/public/application/components/tutorial/number_parameter.js
@@ -8,27 +8,17 @@
 
 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) => {
     setParameter(id, parseFloat(evt.target.value));
   };
 
   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>
   );
 }
 
diff --git a/src/plugins/home/public/application/components/tutorial/string_parameter.js b/src/plugins/home/public/application/components/tutorial/string_parameter.js
@@ -8,19 +8,17 @@
 
 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) => {
     setParameter(id, evt.target.value);
   };
 
   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>
   );
 }
 
