Skip to content

Commit

Permalink
use EUI components for tutorial params (#167014)
Browse files Browse the repository at this point in the history
## 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 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="https://github.com/elastic/kibana/assets/82822460/ba3a3dce-c2d5-41db-a7e8-24bf6caeb16b">

Co-authored-by: Kibana Machine <[email protected]>
  • Loading branch information
vadimkibana and kibanamachine authored Sep 27, 2023
1 parent 0301775 commit 94bd19d
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 20 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}

Expand Down

0 comments on commit 94bd19d

Please sign in to comment.