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

Add FormHeader and update helm form title to be reactive #5851

Merged

Conversation

rohitkrai03
Copy link
Contributor

@rohitkrai03 rohitkrai03 commented Jun 29, 2020

Fixes: https://issues.redhat.com/browse/ODC-4229

Analysis / Root cause: Latest changes to helm install/upgrade form needed the subtitle for the form to change when user toggle between form view and yaml view. but the page title for the form was at page level and had no idea of the form context.

Solution Description:

  • Created a new reusable FormHeader component that abstracts the page title logic and implements the current design properly.
  • Brought the header at form level to make it reactive to the form context,
  • Added new unit tests for the form component.

Screen shots / Gifs for design review:
cc: @openshift/team-devconsole-ux @parvathyvr

Peek 2020-06-29 23-55

Unit test coverage report:
image

Browser conformance:

  • Chrome
  • Firefox
  • Safari
  • Edge

@debsmita1
Copy link
Contributor

tried this out locally and it works fine
/lgtm

@openshift-ci-robot openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Jun 30, 2020
@rohitkrai03
Copy link
Contributor Author

/assign @christianvogt

@openshift-ci-robot openshift-ci-robot removed the lgtm Indicates that a PR is ready to be merged. label Jun 30, 2020
@rohitkrai03
Copy link
Contributor Author

/retest

1 similar comment
@rohitkrai03
Copy link
Contributor Author

/retest

@rohitkrai03 rohitkrai03 force-pushed the reactive-form-header branch 2 times, most recently from c2a485e to 80ee293 Compare July 1, 2020 15:54
Copy link

@parvathyvr parvathyvr left a comment

Choose a reason for hiding this comment

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

@rohitkrai03 The text message under "Upgrade Helm Release' are as follows:
For the 'Form view'- Upgrade by selecting a new chart version or manually changing the form values.For more information on the chart, refer to this README.
For the 'YAML view '- Upgrade by selecting a new chart version or manually changing YAML.For more information on the chart, refer to this README.

@rohitkrai03 rohitkrai03 changed the title Add FormFooter and update helm form title to be reactive Add FormHeader and update helm form title to be reactive Jul 2, 2020
@rohitkrai03
Copy link
Contributor Author

rohitkrai03 commented Jul 2, 2020

Upgrade by selecting a new chart version or manually changing YAML.

@parvathyvr Updated the sub title for upgrade form.

@christianvogt
Copy link
Contributor

Missing dismiss x here to regain the real estate for the yaml editor:
image

design:
image

Operands UI has the description from the right column flowing above the form on mobile where as here is flows under:
image

vs

image

@rohitkrai03
Copy link
Contributor Author

@parvathyvr @beaumorley @serenamarie125 Updated the grid layout for the form based on our conversation from yesterday's Helm meeting so that the form can acquire more real estate than before. It follows the same breaking points as the OLM form now. Please take a look at the below gif. cc: @christianvogt

Grid Demo

@christianvogt
Copy link
Contributor

/lgtm
/approve

@openshift-ci-robot openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Jul 2, 2020
@openshift-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: christianvogt, debsmita1, rohitkrai03

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-ci-robot openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jul 2, 2020
@rohitkrai03
Copy link
Contributor Author

/retest

@openshift-merge-robot openshift-merge-robot merged commit fe0da2d into openshift:master Jul 2, 2020
@spadgett spadgett added this to the v4.6 milestone Jul 8, 2020
@rohitkrai03 rohitkrai03 deleted the reactive-form-header branch July 24, 2021 06:55
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 component/shared Related to console-shared 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

7 participants