Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix that try sample and show adv option buttons could be clicked without Git URL in different import flows #9290

Merged
merged 1 commit into from Jun 22, 2021

Conversation

jerolimov
Copy link
Member

@jerolimov jerolimov commented Jun 17, 2021

Fixes:
https://issues.redhat.com/browse/ODC-5955
https://issues.redhat.com/browse/ODC-6016

Analysis / Root cause:
With 4.8 we automatically focus the Git URL (the first input field) when the user imports from Git, Dockerfile or Devfile.

When the user clicks then on "Try sample" or "Show advanced Git options" the url field losts his focus. The onBlur method then marks the input field as touched (in formik) and show an error if the url field is empty.

This "Required!" error was shown faster then the mentioned buttons handles their event. And because the "Required!" was added as a new label below the input field all buttons and input fields jumps a little but down and the user click on these buttons is ignored.

A second click works fine. Also if the user first lost the focus of the input field, and then select it again.

Solution Description:
Add a help text to the "Git Repo URL" field. This help text was replaced with the error message when the form field is empty (or invalid).

Also fixed a small flicking because git.isUrlValidating was set to false before the validation status was set.

The help text for the different cases are:

  1. Repository URL to build and deploy your code from source.
  2. Repository URL to build and deploy your code from a Dockerfile.
  3. Repository URL to build and deploy your code from a Devfile.

Solution was discussed with UX in slack #tmp-odc-add

Screen shots / Gifs for design review:
Before:
Peek 2021-06-17 15-56

After:
Peek 2021-06-17 15-57

Unit test coverage report:
Just added a new help text. Unit tests are not changed.

Test setup:

  • Open developer perspective
  • Add > Import from Devfile > Click "Try sample"
  • Add > Import from Git > Click "Show advanced options"

Browser conformance:

  • Chrome
  • Firefox
  • Safari
  • Edge

@openshift-ci openshift-ci bot added component/dev-console Related to dev-console kind/i18n Indicates issue or PR relates to internationalization or has content that needs to be translated approved Indicates a PR has been approved by an approver from all required OWNERS files. labels Jun 17, 2021
@jerolimov jerolimov changed the title Add git URL help text so that other sections doesn't jump down Fix that try sample and show adv option buttons could be clicked without Git URL in different import flows Jun 17, 2021
@jerolimov
Copy link
Member Author

/kind bug
/assign @debsmita1

@openshift-ci openshift-ci bot added the kind/bug Categorizes issue or PR as related to a bug. label Jun 17, 2021
Copy link
Contributor

@debsmita1 debsmita1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tried out the changes and it looks good. Left a few comments related to the help texts. Will wait for UX to approve the changes

@jerolimov
Copy link
Member Author

Will wait for UX to approve the changes

It is approved by @beaumorley and @parvathyvr in this slack thread, but maybe one of you both could add a comment to this PR as well. Thanks :)

@debsmita1
Copy link
Contributor

/lgtm

@openshift-ci openshift-ci bot added the lgtm Indicates that a PR is ready to be merged. label Jun 22, 2021
@openshift-ci
Copy link
Contributor

openshift-ci bot commented Jun 22, 2021

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: debsmita1, jerolimov

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

1 similar comment
@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-merge-robot openshift-merge-robot merged commit 020eef3 into openshift:master Jun 22, 2021
@spadgett spadgett added this to the v4.9 milestone Jul 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. component/dev-console Related to dev-console kind/bug Categorizes issue or PR as related to a bug. kind/i18n Indicates issue or PR relates to internationalization or has content that needs to be translated lgtm Indicates that a PR is ready to be merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants