Bug 1797702: remove search button and search status/result for deploy image #4187

sahil143 · 2020-02-04T17:20:11Z

ODC-bug: https://issues.redhat.com/browse/ODC-2337

This PR makes the changes suggested by UX on the Deploy image page.

default state

error state

success

openshift-ci-robot · 2020-02-04T17:20:17Z

@sahil143: This pull request references Bugzilla bug 1797702, which is valid. The bug has been moved to the POST state. The bug has been updated to refer to the pull request using the external bug tracker.

In response to this:

Bug 1797702: remove search button and search status/result for deploy image

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

sahil143 · 2020-02-04T17:20:35Z

cc: @serenamarie125 @openshift/team-devconsole-ux

openshift-ci-robot · 2020-02-04T17:32:11Z

@sahil143: This pull request references Bugzilla bug 1797702, which is valid.

In response to this:

Bug 1797702: remove search button and search status/result for deploy image

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

serenamarie125 · 2020-02-04T17:32:22Z

@sahil143 can we utilize the PF4 component shown here ? https://www.patternfly.org/v4/documentation/react/components/form#invalid

serenamarie125

If possible, I think that the icon should be in the text field itself. Although that should NOT hold up this PR from a UX perspective, because getting these usability improvements merged is high priority from my perspective!

andrewballantyne · 2020-02-04T19:37:47Z

It would appear there is a style break in the patternfly variable. The font-size-md variable is printing out $font-size-base instead of the value 14px (or 1rem) that is stored in that variable.

I overrode the variable locally, and got it to work:

Not the solution I would think... but gives a place to start investigating.

Also I want to note the empty-state error is pretty bad. I am not sure if we even want to show an empty-state error? @openshift/team-devconsole-ux thoughts?

andrewballantyne · 2020-02-04T19:41:25Z

If possible, I think that the icon should be in the text field itself. Although that should NOT hold up this PR from a UX perspective, because getting these usability improvements merged is high priority from my perspective!

@serenamarie125 how do you feel about the experience in the git flow?

Success

Error

andrewballantyne · 2020-02-04T19:45:37Z

/kind bug

openshift-ci-robot · 2020-02-07T10:39:56Z

@sahil143: This pull request references Bugzilla bug 1797702, which is valid.

In response to this:

Bug 1797702: remove search button and search status/result for deploy image

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

sahil143 · 2020-02-07T10:52:28Z

@andrewballantyne I have updated the error for empty input field.

andrewballantyne · 2020-02-07T16:00:12Z

Thanks @sahil143 I think that's consistent with the git flow. They probably should be in sync for their error / validating / success states.

christianvogt · 2020-02-12T01:05:40Z

Fyi there's a pr by @jeff-phillips-18 that willl clash here.

serenamarie125 · 2020-02-12T03:06:10Z

thanks for updating!

andrewballantyne

There are a slew of visual issues I find with the validation text (see below). We shouldn't be showing internal variable ids in error messages.

Once you get an error - as you start typing (or select a browser autocomplete value) you get this error:

I think our errors should always start with a capital letter:

If you start with an invalid character, like a /, you see the field id:

If you use capitals, you also get to see the field id:

andrewballantyne · 2020-02-12T17:51:16Z

frontend/packages/console-shared/src/components/formik-fields/field-types.ts

+export enum VALIDATED {
+  default = 'default',
+  success = 'success',
+  error = 'error',
+}


Can we go with enum variables being PascalCase and enum types being ALL_CAPS?

Not sure we actually have a standard here, but I think that aligns with other enums I am seeing in the console.

Imported ValidatedOptions from Patternfly

That works too... note the PascalCase 😉

andrewballantyne · 2020-02-12T17:59:07Z

frontend/packages/dev-console/src/components/import/image-search/ImageSearch.tsx

+      return (
+        <span style={{ fontWeight: 'bold' }}>
+          <LoadingInline />
+        </span>
+      );
+    }
+    if (!values.isSearchingForImage && validated === VALIDATED.success) {
+      return (
+        <span style={{ fontWeight: 'bold', color: 'var(--pf-global--success-color--200)' }}>
+          <CheckCircleIcon /> Validated
+        </span>
+      );
+    }
+
+    return '';
+  };
+
+  const getHelpTextInvalid =
+    validated === VALIDATED.error ? (
+      <span style={{ color: 'var(--pf-global--danger-color--200)' }}>
+        <ExclamationCircleIcon />
+        &nbsp;
+        {values.searchTerm === '' ? 'Required' : values.isi.status}
+      </span>


Definitely should be putting this stuff into sass. Please create a styles file and move this content into there. Inline styles are only useful when we have dynamic values, not for static values.

Heh, I highlighted this whole area because there were multiple inline styles haha

andrewballantyne · 2020-02-12T18:09:30Z

frontend/packages/dev-console/src/components/import/image-search/ImageSearch.tsx

+    return '';
+  };
+
+  const getHelpTextInvalid =


Variables which start with get should not be immediately evaluated... get is typically used for a lazy-retrieval, and not for sometime that is immediately available. Suggest renaming to invalidHelpText or something similar.

andrewballantyne · 2020-02-12T18:12:36Z

frontend/packages/dev-console/src/components/import/image-search/ImageSearch.tsx

+        {values.searchTerm === '' ? 'Required' : values.isi.status}
+      </span>
+    ) : (
+      ''


You should almost never have to equate something down to an empty string. Controlled input values is the only thing I can think of... but you're creating a DOM element, which a falsy value should do fine.

Ie:

const invalidHelpText = validated === VALIDATED.error && ( <span className="odc-..."> <ExclamationCircleIcon /> {' '} {values.searchTerm === '' ? 'Required' : values.isi.status} </span> );

andrewballantyne · 2020-02-12T18:37:22Z

Fyi there's a pr by @jeff-phillips-18 that willl clash here.

@christianvogt do you mean PR #4268? Because this is Deploy Image, and that is Import Git.

Ah, I guess you mean in the Formik elements, not the ImageSearch stuff...

sahil143 · 2020-02-13T09:25:47Z

There are a slew of visual issues I find with the validation text (see below). We shouldn't be showing internal variable ids in error messages.

@andrewballantyne We show the same errors in current implementation as well.

And In the UX doc, It specifically says Note: We will show a detailed error message specifying why we couldn’t load the image.
https://docs.google.com/document/d/1cUF_DXuNkMLeIPNsG1pEHA8t-5iq_JVkRJvZkGPVSKU/edit#

invincibleJai · 2020-02-13T11:40:38Z

frontend/packages/dev-console/src/components/import/image-search/ImageSearch.tsx

        name="searchTerm"
-        label="Image Name"
-        onSearch={handleSearch}
+        placeholder="Enter an image name"


@sahil143 seems the removal of data-test-id="deploy-image-search-term" willl impact integration tests

@invincibleJai added data-test-id

Good catch @invincibleJai - we need to be careful not to remove data-test-ids.

andrewballantyne · 2020-02-13T14:15:25Z

There are a slew of visual issues I find with the validation text (see below). We shouldn't be showing internal variable ids in error messages.

@andrewballantyne We show the same errors in current implementation as well.

And In the UX doc, It specifically says Note: We will show a detailed error message specifying why we couldn’t load the image.
https://docs.google.com/document/d/1cUF_DXuNkMLeIPNsG1pEHA8t-5iq_JVkRJvZkGPVSKU/edit#

A detailed error message is not a detailed debug error message. Exposing our internal names of the field helps no one but the developers debugging (and we have better tools than an error message). This is not the same thing as say explaining a lack of permissions to access an image vs "no can do, stuff happened".

~~We should clean up our past mistakes and hide the specifics of our field names.~~

Apparently this is a server error... that sucks. Wish those could be cleaner.

openshift-ci-robot · 2020-02-20T15:17:48Z

@spadgett: This pull request references Bugzilla bug 1797702, which is invalid:

expected the bug to target the "4.5.0" release, but it targets "4.4.0" instead

Comment /bugzilla refresh to re-evaluate validity if changes to the Bugzilla bug are made, or edit the title of this pull request to link to a different bug.

In response to this:

/bugzilla refresh

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

christianvogt · 2020-02-20T16:24:50Z

I agree that the internal registry error handling shouldn't failed because of user input. So it's an exceptional case. Looking closer at the code, while error dialogs is the general solution to exceptional error handling, for these forms it may make more sense to keep the error closer to the input fields.

For the sake of completing this PR, could we just wrap the internal registry form in a FormGroup and do the same inline error? This may be the least effort fix here.

add validated text show field required when searchTerm is empty create scss file for image search component, use patternfly validatedOption enum add data-test-id to ImageSearch component add classes for success help text s remove styles removed funtional test because Input search button is removed and no longer used remove $ fix functional tests show inline error for ImageStream add error refactor reorder Imports

sahil143 · 2020-02-20T19:18:01Z

For the sake of completing this PR, could we just wrap the internal registry form in a FormGroup and do the same inline error? This may be the least effort fix here.

This sounds good, made the changes accordingly. If there is any we would show it inline. (Mock error in the screenshot, Not actual one)

Also, did some refactor to keep it consistent after the rebase because PR #4376 made some changes to InputField.

External Registery:
Success

Error:

sahil143 · 2020-02-20T19:26:09Z

/bugzilla refresh

openshift-ci-robot · 2020-02-20T19:26:13Z

@sahil143: This pull request references Bugzilla bug 1797702, which is valid.

In response to this:

/bugzilla refresh

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

christianvogt · 2020-02-20T20:57:43Z

The design doc had two criteria, but isn't clear what the final outcome was.

validate when the user leaves the field
validate while the user types after some time lapse has passed from last key stroke
- this part isn't done but I'd rather see it added in another PR. Please log another issue for this.

christianvogt · 2020-02-20T20:58:34Z

/lgtm
/approve

openshift-bot · 2020-02-20T21:04:15Z

/retest

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

andrewballantyne · 2020-02-20T21:04:22Z

The design doc had two criteria, but isn't clear what the final outcome was.
...

validate while the user types after some time lapse has passed from last key stroke

this part isn't done but I'd rather see it added in another PR. Please log another issue for this.

@christianvogt I think we need to update Git and Deploy Image as the user types at the same time too. Perhaps we just enhance https://issues.redhat.com/browse/ODC-2451

andrewballantyne · 2020-02-20T21:06:39Z

/retest

EDIT: Looks like a connection error on the CI server

openshift-ci-robot · 2020-02-20T21:15:39Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: christianvogt, jeff-phillips-18, sahil143, serenamarie125

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:

~~frontend/OWNERS~~ [christianvogt]

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

openshift-bot · 2020-02-20T21:17:13Z

/retest

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

christianvogt · 2020-02-20T23:23:33Z

/cherrypick release-4.4

openshift-cherrypick-robot · 2020-02-20T23:23:34Z

@christianvogt: once the present PR merges, I will cherry-pick it on top of release-4.4 in a new PR and assign it to you.

In response to this:

/cherrypick release-4.4

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

openshift-cherrypick-robot · 2020-02-20T23:31:50Z

@christianvogt: new pull request created: #4403

In response to this:

/cherrypick release-4.4

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

openshift-ci-robot · 2020-02-20T23:33:37Z

@sahil143: All pull requests linked via external trackers have merged. Bugzilla bug 1797702 has been moved to the MODIFIED state.

In response to this:

Bug 1797702: remove search button and search status/result for deploy image

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

openshift-ci-robot added the bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. label Feb 4, 2020

openshift-ci-robot added the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Feb 4, 2020

sahil143 force-pushed the deploy-image branch from 32e10df to 75e61f4 Compare February 4, 2020 17:33

openshift-ci-robot added component/dev-console Related to dev-console component/shared Related to console-shared labels Feb 4, 2020

openshift-ci-robot requested review from andrewballantyne and kyoto February 4, 2020 17:37

serenamarie125 reviewed Feb 4, 2020

View reviewed changes

openshift-ci-robot added the kind/bug Categorizes issue or PR as related to a bug. label Feb 4, 2020

sahil143 force-pushed the deploy-image branch from 75e61f4 to 8890ac1 Compare February 7, 2020 10:48

andrewballantyne suggested changes Feb 12, 2020

View reviewed changes

openshift-ci-robot assigned andrewballantyne Feb 12, 2020

sahil143 force-pushed the deploy-image branch from 8890ac1 to 9c4bbb3 Compare February 13, 2020 09:29

invincibleJai reviewed Feb 13, 2020

View reviewed changes

sahil143 force-pushed the deploy-image branch from 9c4bbb3 to 2374d49 Compare February 13, 2020 12:03

openshift-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Feb 20, 2020

sahil143 force-pushed the deploy-image branch from 1b6406d to c7c4ce0 Compare February 20, 2020 19:11

openshift-ci-robot added the bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. label Feb 20, 2020

openshift-ci-robot removed bugzilla/invalid-bug Indicates that a referenced Bugzilla bug is invalid for the branch this PR is targeting. needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. labels Feb 20, 2020

openshift-ci-robot assigned christianvogt Feb 20, 2020

openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Feb 20, 2020

openshift-merge-robot merged commit 779792d into openshift:master Feb 20, 2020

openshift-cherrypick-robot mentioned this pull request Feb 20, 2020

[release-4.4] Bug 1805440: remove search button and search status/result for deploy image #4403

Closed

andrewballantyne mentioned this pull request Feb 21, 2020

Fix Deploy Image flake #4411

Merged

spadgett added this to the v4.5 milestone Feb 22, 2020

sahil143 mentioned this pull request Feb 24, 2020

[release-4.4] Bug 1805440: remove search button and search status/result for deploy image #4433

Merged

rohitkrai03 mentioned this pull request Feb 26, 2020

Bug 1798404: Set target-port as the first port when route target-port is empty in edit forms #4123

Merged

Bug 1797702: remove search button and search status/result for deploy image #4187

Bug 1797702: remove search button and search status/result for deploy image #4187

Conversation

sahil143 commented Feb 4, 2020 • edited

openshift-ci-robot commented Feb 4, 2020

sahil143 commented Feb 4, 2020

openshift-ci-robot commented Feb 4, 2020

serenamarie125 commented Feb 4, 2020

serenamarie125 left a comment

Choose a reason for hiding this comment

andrewballantyne commented Feb 4, 2020

andrewballantyne commented Feb 4, 2020

andrewballantyne commented Feb 4, 2020

openshift-ci-robot commented Feb 7, 2020

sahil143 commented Feb 7, 2020

andrewballantyne commented Feb 7, 2020

christianvogt commented Feb 12, 2020

serenamarie125 commented Feb 12, 2020

andrewballantyne left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrewballantyne commented Feb 12, 2020 • edited

sahil143 commented Feb 13, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrewballantyne commented Feb 13, 2020 • edited

openshift-ci-robot commented Feb 20, 2020

christianvogt commented Feb 20, 2020

sahil143 commented Feb 20, 2020

sahil143 commented Feb 20, 2020

openshift-ci-robot commented Feb 20, 2020

christianvogt commented Feb 20, 2020

christianvogt commented Feb 20, 2020

openshift-bot commented Feb 20, 2020

andrewballantyne commented Feb 20, 2020 • edited

andrewballantyne commented Feb 20, 2020 • edited

openshift-ci-robot commented Feb 20, 2020

openshift-bot commented Feb 20, 2020

christianvogt commented Feb 20, 2020

openshift-cherrypick-robot commented Feb 20, 2020

openshift-cherrypick-robot commented Feb 20, 2020

openshift-ci-robot commented Feb 20, 2020

sahil143 commented Feb 4, 2020 •

edited

andrewballantyne commented Feb 12, 2020 •

edited

andrewballantyne commented Feb 13, 2020 •

edited

andrewballantyne commented Feb 20, 2020 •

edited

andrewballantyne commented Feb 20, 2020 •

edited