[Management] Refactor index pattern creation to React, Phase 1 #15905
Conversation
There was a problem hiding this comment.
⚔️ Awesome!! This looks great overall. Just had a few questions.
In terms of your approach, have you considered migrating each step to React first, and then implementing this "base" last? This would allow you to merge directly to master and use the existing functional tests to ensure the UX is still intact.
| config: PropTypes.object.isRequired, | ||
| kbnUrl: PropTypes.object.isRequired, | ||
| notify: PropTypes.object.isRequired, | ||
| }).isRequired, |
There was a problem hiding this comment.
What's the advantage of nesting these props inside of a services object instead of passing them indirectly?
| this.goToIndexPatternStep = () => { | ||
| this.wizardStep = 'indexPattern'; | ||
| }; | ||
| renderInitialLoadingState() { |
There was a problem hiding this comment.
When the user clicks the "Check for new data" button are we going to set the isInitiallyLoadingIndices state variable back to true and then use this method to re-render the loading state? If so, then I'm not sure I get the meaning behind initial in this method name and in isInitiallyLoadingIndices?
| <EuiSpacer size="s"/> | ||
| <EuiText size="s"> | ||
| <p style={{ textAlign: 'center' }}> | ||
| <EuiIcon type="faceSad"/> |
| <EuiSpacer size="xs"/> | ||
| <EuiFlexGroup justifyContent="center" alignItems="center"> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiButton iconType="faceHappy"> |
There was a problem hiding this comment.
This button is so happy at the prospect of being clicked!
| @@ -0,0 +1,5 @@ | |||
| <kbn-management-app section="kibana"> | |||
| <kbn-management-indices> | |||
| <div id="react"></div> | |||
There was a problem hiding this comment.
It might sound paranoid but to be sure we avoid collisions can we go with a more specific id value, e.g. "createIndexPatternWizard"?
|
Replaced by #16499 |
Follows #15722
TEMPORARILY OBSOLETE - DO NOT REVIEW
Background
This PR is the first of several that will refactor the index pattern creation wizard from Angular to React. Please note this PR is not targeted into master, but rather a staging branch which will eventually go into master. The PRs are broken apart for ease of reviewing.
Details
This PR removes all existing code for index pattern creation and replaces it with a basic shell of how the new code will look.
The file structure looks like:
index.js- This contains all the React to render the shellangular_template.html- This is the template file connected to the angular route which contains wrapping directives so the page renders as expectedconstants/- This is where the constants used throughout index pattern creation are storedlib/- This is where helper functions exist, isolated and dependency-freeFurther Work
Subsequent PRs will introduce the individual steps associated with index pattern creation and those will live in a
components/folder.Tests
This PR currently does NOT have any tests, which is intentional. I want to verify this general pattern and flow look good before dedicating tests to it.
There isn't much to actually test when running the code, so I'd suggest spending more time reviewing the code itself.