This repository has been archived by the owner on Sep 5, 2024. It is now read-only.
Conversion Host Configuration Wizard - Step #3 - Authentication #880
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
![codeclimate[bot]](https://avatars.githubusercontent.com/in/9403?s=60&v=4){kind=small}
app/javascript/react/screens/App/common/forms/TextFileInput/TextFileInput.js
Outdated
Show resolved
Hide resolved
...nHostWizard/ConversionHostWizardAuthenticationStep/ConversionHostWizardAuthenticationStep.js
Show resolved
Hide resolved
...nHostWizard/ConversionHostWizardAuthenticationStep/ConversionHostWizardAuthenticationStep.js
Show resolved
Hide resolved
mturley
force-pushed
the
conv-host-wizard-step3
branch
from
28c0f17
to
8a4840c
Compare
mturley
force-pushed
the
conv-host-wizard-step3
branch
from
8a4840c
to
6cf1e82
Compare
mturley
changed the title
mturley
force-pushed
the
conv-host-wizard-step3
branch
from
f5ed8ca
to
b5560a4
Compare
|
Checked commits mturley/manageiq-v2v@a05b54f~...b5560a4 with ruby 2.3.3, rubocop 0.52.1, haml-lint 0.20.0, and yamllint 1.10.0 |
|
For some reason, when I click on the new step of the conv. host wizard, I'm getting the following javascript error: Instead of a wizard screen, I'm getting a blank page (or well, blank v2v div). |
|
i have lost a lot of context here, but I don't have any concerns w/ this from a quick glance @mturley. It seems the error above is caused by React dependency conflicts though? Let me know if you need any help debugging further... |
|
What really puzzles me here is that things seemed to have worked on Mike's end (screenshots above), but all I'm getting here is just the error (i.e. the wizard screen disappears with the error). |
|
@mzazrivec did you run a |
Yup, several times. With the updated packages I got the above error. |
|
Today I thought of deleting and re-creating |
simaishi
pushed a commit
that referenced
this pull request
Apr 5, 2019
Conversion Host Configuration Wizard - Step #3 - Authentication (cherry picked from commit c097fb8) https://bugzilla.redhat.com/show_bug.cgi?id=1696423
|
Hammer backport details: |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Part of the Conversion Hosts UI feature BZ: https://bugzilla.redhat.com/show_bug.cgi?id=1693339
This is part of #855.
This PR adds the Authentication step of the wizard, including a new reusable component for collecting an uploaded or pasted text file.
Implementation Details
As part of adding the new
TextFileInputcomponent, I upgraded us fromreact-dropzonev4.2.8 to v8.1.0. This upgrade contained breaking changes to theDropzoneprops interface, so it required changes to the other place we use aDropzonein theCSVDropzoneFieldcomponent (used on the VMs step of the Migration Plan wizard). As a bonus of these changes, we no longer need to use the hackydropzoneRefpattern to trigger the file browse dialog.I also updated the grey color of the drag-and-drop active border on the existing
CSVDropzoneFieldto match the new color I added inTextFileInput, because the old color was not a patternfly variable.I ran into an issue with redux-form where, by default, conditionally rendered fields will remain registered for validation after they are unmounted. This was causing a bug where, for example, if you selected the SSH transformation method, left the SSH key field blank, then switched to VDDK and filled in all the other fields, the wizard would still block you because the hidden SSH key field was left blank. I saw online that others have solved this by leaving the reduxForm option
destroyOnUnmountset to true, but we need that set to false so the form values persist in the store after leaving the step. Instead I solved this by adding theforceUnregisterOnUnmountoption, which unregisters unmounted fields from validation without removing their values from the store.In our existing reusable
FormFieldcomponent, I added support for aninfoprop which, when present, renders an info icon to the right of the field label with a popover containing the string or node passed to the prop. In order to make room for this icon, I moved the "required" asterisk to the left of the label, which affects all FormFields in the UI. For consistency, I also moved the asterisk to the left inBootstrapSelect. I also added thecontrolWidthprop toFormField, so we can specify custom widths on both the label and the control, which was necessary to make space for the info icon in this particular field label.I also added a
childrenprop toFormField, so that we can use it more flexibly for the layout of field label and control columns, while rendering any arbitrary JSX as the actual field contents. The children prop here is a function (render props pattern) which consumes the redux-form input object. I did this to allow rendering the newTextFileInputas a child ofFormField, without having to add a special "textfile" mode toFormFieldor duplicate theFormFieldlayout pieces inTextFileInput. If children are present, thetypeprop will be ignored and children rendered instead.I also fixed a bug in
FormFieldwhere sometimes an emptyHelpBlockwould render below the field, causing things to shift a little on the screen.Screens
The wizard step looks like this upon first load (when an OpenStack provider is selected, otherwise the OpenStack User field is hidden):
The info icon next to the Conversion Host SSH Key field label has popover text that depends on the provider type. It looks like this for OpenStack:
It looks like this for RHV:
The SSH key upload component allows the user to either browse for a file or paste the contents of a file. It also supports drag-and-drop of a file onto the field. The file contents field can be typed in, to allow the paste use case. If the user selects a file, the filename is shown and the file contents field becomes read-only until the user clicks the Clear button. In the future, I plan to make this component available for reuse (tracked in patternfly/patternfly-react#1254).
If the user selects SSH for the transformation method, another SSH key file input field is shown.
If the user selects VDDK for the transformation method, a VDDK library path field is shown instead. This field is currently missing its Validate button from the mockup, which will be added in a separate PR (tracked in #881).
All visible fields on the form are required, and when they are all filled in, the Configure button (which replaces the Next button on this step of the wizard) will become active.