Bug 1872283: Align UI with gitops-backend and remove mock-data #6373

divyanshiGupta · 2020-08-19T13:21:25Z

In this PR I have removed any usage of mock-data and aligned UI with gitops-backend. Some fields in the environment data returned by backend (Cluster URL, Service source URL etc) are optional and thus I have added some empty states for these fields. Also refactored some code.

Screenshots:
When environment(s) info is not available:

When environment(s) info is available:

Updates:

Test setup:
Follow steps in : #6137
Public repo - https://github.com/rhd-gitops-example/gitops
Private repo - https://github.com/rhd-gitops-example/gitops-private

divyanshiGupta · 2020-08-19T13:25:39Z

/assign @rohitkrai03

divyanshiGupta · 2020-08-19T13:38:23Z

/cc: @serenamarie125

serenamarie125 · 2020-08-19T21:05:38Z

FYI @bkrikori

serenamarie125 · 2020-08-19T21:10:13Z

This is looking good @divyanshiGupta ! I've asked Beth to give some input on the empty state copy. I think we may want to change a bit of the wording!

nemesis09 · 2020-08-21T03:06:20Z

/retest

bkrikori · 2020-08-21T17:44:02Z

Suggestions from Jake and I regarding wording

Environment details not found —> Sorry, the environment details you were looking for can't be found. You don't have permission to view these details, or the page hasn't loaded correctly. Try reloading the page or visit the help menu to find more information.
Commit details not available —> Commit details not available
Pod Info Not Available —> Pod info not available - is it possible to put a box around this to separate it from “Commit details not available” and keep the image/box shop?
Cluster URL not available —> Cluster URL not available
Info not available —> Info not available
Service source URL not available —> Service source URL not available

japhilli-RH · 2020-08-21T17:50:00Z

Just to elaborate--

I think if we have the space to (a full page rather than a card), we should give users as much information as possible (like with environment details).
All error messages should be in sentence case.
On the cards, the boxes around "Pod info not available" will help delineate it from other gray error text on the card. As it stands now, it almost looks like the cards have crashed, which might makes users think it's a problem loading rather than purposeful restricted access.

openshift-ci-robot · 2020-08-25T11:46:06Z

@divyanshiGupta: This pull request references Bugzilla bug 1872283, 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.

3 validation(s) were run on this bug

bug is open, matching expected state (open)
bug target release (4.6.0) matches configured target release for branch (4.6.0)
bug is in the state ASSIGNED, which is one of the valid states (NEW, ASSIGNED, ON_DEV, POST, POST)

In response to this:

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.

divyanshiGupta · 2020-08-25T12:15:41Z

Suggestions from Jake and I regarding wording

1. Environment details not found —> Sorry, the environment details you were looking for can't be found. You don't have permission to view these details, or the page hasn't loaded correctly. Try reloading the page or visit the help menu to find more information.

@bkrikori which help menu are you suggesting here? As of now there is no help menu for this page. For the time being we can just keep it as Try reloading the page or contact the admin for permission related queries or something like this.

cc: @rohitkrai03

openshift-ci-robot · 2020-08-25T13:34:38Z

@divyanshiGupta: This pull request references Bugzilla bug 1872283, which is valid.

3 validation(s) were run on this bug

bug is open, matching expected state (open)
bug target release (4.6.0) matches configured target release for branch (4.6.0)
bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, ON_DEV, POST, POST)

In response to this:

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.

divyanshiGupta · 2020-08-26T11:42:38Z

cc: @serenamarie125

serenamarie125 · 2020-08-27T12:34:42Z

FYI @beaumorley @lwrigh this the PR associated with @bkrikori designs

serenamarie125 · 2020-08-27T12:38:10Z

FYI @divyanshiGupta unfortunately both Beth and Jake were interns, and they are no longer with Red Hat UXD. @divyanshiGupta were you able to make the changes re: sentence style as well as wording? If so I will provide approval. We could then get Laura and Beau to take a look at your responses to the formatting piece, and we can evaluate if it's possible to get in. Does that make sense?

divyanshiGupta · 2020-08-27T13:15:38Z

@serenamarie125 I made most of the changes Beth asked for but I had one concern #6373 (comment) regarding wordings suggested by Beth for the details page empty state. If you can confirm what should be done here it will be helpful.

lwrigh · 2020-08-27T18:42:47Z

Regarding the wording I would suggest this:

Environmental details were not found. Try reloading the page or contacting an administrator.

openshift-ci-robot · 2020-08-28T13:58:40Z

@divyanshiGupta: This pull request references Bugzilla bug 1872283, which is valid.

3 validation(s) were run on this bug

bug is open, matching expected state (open)
bug target release (4.6.0) matches configured target release for branch (4.6.0)
bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, ON_DEV, POST, POST)

In response to this:

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.

divyanshiGupta · 2020-08-28T14:00:02Z

@lwrigh done

rohitkrai03 · 2020-09-02T12:01:05Z

frontend/packages/dev-console/src/components/gitops/GitOpsEmptyState.tsx

+  <EmptyState variant={EmptyStateVariant.full}>
+    <p className="odc-gitops-empty-state__msg">{emptyStateMsg}</p>
+    <EmptyStateIcon variant="container" component={gitopsImage} />
+  </EmptyState>


Better to use PF standard way of rendering empty state.

Suggested change

<EmptyState variant={EmptyStateVariant.full}>

<p className="odc-gitops-empty-state__msg">{emptyStateMsg}</p>

<EmptyStateIcon variant="container" component={gitopsImage} />

</EmptyState>

<EmptyState variant={EmptyStateVariant.full}>

<EmptyStateIcon variant="container" component={gitopsImage} />

<EmptyStateBody>{emptyStateMsg}</EmptyStateBody>

</EmptyState>

I was trying to keep it similar to what we have for helm empty-state #6019 (review).

frontend/packages/dev-console/src/components/gitops/details/CommitDetails.tsx

rohitkrai03

Although some of the refactoring does makes sense and it makes the code more readable, let's wait for 4.7 for major refactorings.

frontend/packages/dev-console/src/components/gitops/utils/useTransformedEnvsData.tsx

openshift-ci-robot · 2020-09-02T13:50:26Z

@divyanshiGupta: This pull request references Bugzilla bug 1872283, which is valid.

3 validation(s) were run on this bug

bug is open, matching expected state (open)
bug target release (4.6.0) matches configured target release for branch (4.6.0)
bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, ON_DEV, POST, POST)

In response to this:

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.

rohitkrai03

/lgtm

Tried it locally with proper gitops pipelines setup. Works as expected.

openshift-ci-robot · 2020-09-03T14:30:40Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: divyanshiGupta, 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:

~~frontend/packages/dev-console/OWNERS~~ [rohitkrai03]

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-09-03T14:36:38Z

/retest

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

openshift-bot · 2020-09-03T14:56:12Z

/retest

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

openshift-ci-robot · 2020-09-03T18:49:30Z

@divyanshiGupta: All pull requests linked via external trackers have merged:

openshift/console#6373

Bugzilla bug 1872283 has been moved to the MODIFIED state.

In response to this:

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-09-04T07:29:25Z

@divyanshiGupta: Bugzilla bug 1872283 is in an unrecognized state (MODIFIED) and will not be moved to the MODIFIED state.

In response to this:

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 component/dev-console Related to dev-console label Aug 19, 2020

openshift-ci-robot requested review from jerolimov and rottencandy August 19, 2020 13:21

divyanshiGupta changed the title ~~Integrate~~ Align UI with gitops-backend and remove mock-data Aug 19, 2020

openshift-ci-robot assigned rohitkrai03 Aug 19, 2020

divyanshiGupta changed the title ~~Align UI with gitops-backend and remove mock-data~~ Bug 1872283: Align UI with gitops-backend and remove mock-data Aug 25, 2020

openshift-ci-robot added the bugzilla/severity-high Referenced Bugzilla bug's severity is high for the branch this PR is targeting. label Aug 25, 2020

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

divyanshiGupta force-pushed the gitops-backend branch from d19c74c to 5bca0e4 Compare August 25, 2020 13:33

divyanshiGupta force-pushed the gitops-backend branch 2 times, most recently from f3fefe1 to f2fcefe Compare August 26, 2020 11:37

divyanshiGupta force-pushed the gitops-backend branch from f2fcefe to 06b9129 Compare August 28, 2020 13:59

divyanshiGupta force-pushed the gitops-backend branch from 06b9129 to 53b37f4 Compare September 2, 2020 12:05

rohitkrai03 suggested changes Sep 2, 2020

View reviewed changes

frontend/packages/dev-console/src/components/gitops/utils/useTransformedEnvsData.tsx Outdated Show resolved Hide resolved

divyanshiGupta force-pushed the gitops-backend branch 2 times, most recently from 6372a22 to db72938 Compare September 2, 2020 13:48

divyanshiGupta force-pushed the gitops-backend branch from db72938 to 7b23e20 Compare September 2, 2020 13:55

Use gitops-backend and remove mock-data

7b23e20

rohitkrai03 approved these changes Sep 3, 2020

View reviewed changes

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

openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Sep 3, 2020

openshift-merge-robot merged commit 6b18c38 into openshift:master Sep 3, 2020

spadgett added this to the v4.6 milestone Sep 11, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug 1872283: Align UI with gitops-backend and remove mock-data #6373

Bug 1872283: Align UI with gitops-backend and remove mock-data #6373

divyanshiGupta commented Aug 19, 2020 •

edited

divyanshiGupta commented Aug 19, 2020

divyanshiGupta commented Aug 19, 2020

serenamarie125 commented Aug 19, 2020

serenamarie125 commented Aug 19, 2020

nemesis09 commented Aug 21, 2020

bkrikori commented Aug 21, 2020

japhilli-RH commented Aug 21, 2020

openshift-ci-robot commented Aug 25, 2020

divyanshiGupta commented Aug 25, 2020 •

edited

openshift-ci-robot commented Aug 25, 2020

divyanshiGupta commented Aug 26, 2020

serenamarie125 commented Aug 27, 2020

serenamarie125 commented Aug 27, 2020

divyanshiGupta commented Aug 27, 2020 •

edited

lwrigh commented Aug 27, 2020

openshift-ci-robot commented Aug 28, 2020

divyanshiGupta commented Aug 28, 2020

rohitkrai03 Sep 2, 2020

divyanshiGupta Sep 2, 2020 •

edited

rohitkrai03 left a comment

openshift-ci-robot commented Sep 2, 2020

rohitkrai03 left a comment

openshift-ci-robot commented Sep 3, 2020

openshift-bot commented Sep 3, 2020

openshift-bot commented Sep 3, 2020

openshift-ci-robot commented Sep 3, 2020

openshift-ci-robot commented Sep 4, 2020

Bug 1872283: Align UI with gitops-backend and remove mock-data #6373

Bug 1872283: Align UI with gitops-backend and remove mock-data #6373

Conversation

divyanshiGupta commented Aug 19, 2020 • edited

divyanshiGupta commented Aug 19, 2020

divyanshiGupta commented Aug 19, 2020

serenamarie125 commented Aug 19, 2020

serenamarie125 commented Aug 19, 2020

nemesis09 commented Aug 21, 2020

bkrikori commented Aug 21, 2020

japhilli-RH commented Aug 21, 2020

openshift-ci-robot commented Aug 25, 2020

divyanshiGupta commented Aug 25, 2020 • edited

openshift-ci-robot commented Aug 25, 2020

divyanshiGupta commented Aug 26, 2020

serenamarie125 commented Aug 27, 2020

serenamarie125 commented Aug 27, 2020

divyanshiGupta commented Aug 27, 2020 • edited

lwrigh commented Aug 27, 2020

openshift-ci-robot commented Aug 28, 2020

divyanshiGupta commented Aug 28, 2020

rohitkrai03 Sep 2, 2020

Choose a reason for hiding this comment

divyanshiGupta Sep 2, 2020 • edited

Choose a reason for hiding this comment

rohitkrai03 left a comment

Choose a reason for hiding this comment

openshift-ci-robot commented Sep 2, 2020

rohitkrai03 left a comment

Choose a reason for hiding this comment

openshift-ci-robot commented Sep 3, 2020

openshift-bot commented Sep 3, 2020

openshift-bot commented Sep 3, 2020

openshift-ci-robot commented Sep 3, 2020

openshift-ci-robot commented Sep 4, 2020

divyanshiGupta commented Aug 19, 2020 •

edited

divyanshiGupta commented Aug 25, 2020 •

edited

divyanshiGupta commented Aug 27, 2020 •

edited

divyanshiGupta Sep 2, 2020 •

edited