[RHOAIENG-6982] About Modal in the Dashboard #2984

jeff-phillips-18 · 2024-07-08T15:20:50Z

Description

Add an About dialog to the Dashboard UI using existing PatternFLy component.
https://www.patternfly.org/components/about-modal

This provides a place for UI users to see the current product version they are using, which can be useful for support and analytics use cases.

Screen shots

How Has This Been Tested?

Tested locally

Test Impact

Added e2e mock tests
Added jest test

Request review criteria:

Self checklist (all need to be checked):

The developer has manually tested the changes and verified that the changes work
Commits have been squashed into descriptive, self-contained units of work (e.g. 'WIP' and 'Implements feedback' style messages have been removed)
Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
The developer has added tests or explained why testing cannot be added (unit or cypress tests for related changes)

If you have UI changes:

Included any necessary screenshots or gifs if it was a UI change.
Included tags to the UX team if it was a UI/UX change (find relevant UX in the SMEs section).

/cc @simrandhaliw

simrandhaliw · 2024-07-08T16:05:43Z

@jeff-phillips-18 Could you provide a similar screenshot for the RHOAI About modal as well? (I can only see ODH About modal above)

jeff-phillips-18 · 2024-07-09T17:00:27Z

@simrandhaliw This is as close as I can get for now. The backend code that supplies some of the fields is not available on any server I know of. (I can install the image to a server if you need to see it full blown)

simrandhaliw · 2024-07-09T18:12:28Z

Thanks, @jeff-phillips-18. I assume that once all fields can render properly on a proper server, for RHOAI, we will display the correct logo and product name title.

However, I noticed that the version field labels for both ODH and RHOAI do not match the designs. I will loop in @bredamc and @kaedward to ensure they are aware.

For ODH, there has been an addition of 'Operator' in the label, whereas the designs specify 'Open Data Hub version'. I'm unsure if this addition is accurate.

Regarding RHOAI, the label does not display the product edition, i.e., 'Self-Managed' or 'Cloud Service'. So the version label should be either 'OpenShift AI Self-Managed version' or 'OpenShift AI Cloud Service version'.

andrewballantyne

Initial, just code, feedback

backend/src/routes/api/odh-subscription/index.ts

frontend/src/app/App.scss

jeff-phillips-18 · 2024-07-09T22:06:55Z

However, I noticed that the version field labels for both ODH and RHOAI do not match the designs. I will loop in @bredamc and @kaedward to ensure they are aware.

For ODH, there has been an addition of 'Operator' in the label, whereas the designs specify 'Open Data Hub version'. I'm unsure if this addition is accurate.

Regarding RHOAI, the label does not display the product edition, i.e., 'Self-Managed' or 'Cloud Service'. So the version label should be either 'OpenShift AI Self-Managed version' or 'OpenShift AI Cloud Service version'.

These values are not right here since they are retrieved from the backend (this is not yet available on any RHOAI server that I know of). As for the Operator in the ODH version label. We can file an issue to have that changed but would not be part of this PR.

simrandhaliw · 2024-07-09T22:55:37Z

Other than what I mentioned earlier, everything else looks good to me.

andrewballantyne · 2024-07-10T14:07:33Z

These values are not right here since they are retrieved from the backend

@jeff-phillips-18 @simrandhaliw the Operator team is aware of these needs right? Because we should be aligning with the product and the product should be aligning with the UX.

jeff-phillips-18 · 2024-07-10T16:54:14Z

@simrandhaliw Can you point me to where the designs specify 'Open Data Hub version'.?

simrandhaliw · 2024-07-10T17:56:05Z

@jeff-phillips-18 Sure thing, here is the design frame where we display Open Data Hub version.

frontend/src/app/AboutDialog.scss

frontend/src/utilities/useWatchOperatorSubscriptionStatus.tsx

frontend/src/app/AboutDialog.scss

frontend/src/__tests__/cypress/cypress/tests/mocked/application.cy.ts

backend/src/routes/api/operator-subscription-status/index.ts

frontend/src/app/AboutDialog.tsx

jeff-phillips-18 · 2024-07-11T15:35:25Z

the Operator team is aware of these needs right? Because we should be aligning with the product and the product should be aligning with the UX.

@andrewballantyne https://issues.redhat.com/browse/RHOAIENG-9751 tracks this issue

christianvogt · 2024-07-12T14:38:34Z

frontend/src/__tests__/cypress/cypress/pages/aboutDialog.ts

+  isAdminAccessLevel(): Chainable<JQuery<HTMLElement>> {
+    return aboutDialog.getAccessLevel().should('contain.text', 'Administrator');
+  }
+
+  isUserAccessLevel(): Chainable<JQuery<HTMLElement>> {
+    return aboutDialog.getAccessLevel().should('contain.text', 'Non-administrator');
+  }


Suggested change

isAdminAccessLevel(): Chainable<JQuery<HTMLElement>> {

return aboutDialog.getAccessLevel().should('contain.text', 'Administrator');

}

isUserAccessLevel(): Chainable<JQuery<HTMLElement>> {

return aboutDialog.getAccessLevel().should('contain.text', 'Non-administrator');

}

isAdminAccessLevel(): Chainable<JQuery<HTMLElement>> {

return this.getAccessLevel().should('contain.text', 'Administrator');

}

isUserAccessLevel(): Chainable<JQuery<HTMLElement>> {

return this.getAccessLevel().should('contain.text', 'Non-administrator');

}

christianvogt · 2024-07-12T14:40:41Z

frontend/src/__tests__/cypress/cypress/pages/appChrome.ts

+  showHelpMenu(): void {
+    cy.get('#help-icon-toggle').click();
+  }
+
+  showAboutDialog(): void {
+    cy.findByTestId('help-about-item').click();
+  }
+


These aren't used.

christianvogt · 2024-07-12T14:49:23Z

frontend/src/__tests__/cypress/cypress/pages/aboutDialog.ts

+    cy.testA11y();
+  }
+
+  getText(): Chainable<JQuery<HTMLElement>> {


Selector functions should follow the naming convention using the prefix find instead of get.

frontend/src/app/AboutDialog.tsx

christianvogt · 2024-07-12T15:35:49Z

Works well.

I don't see the "edition" as requested in the final copy doc from UX: <Product name (excluding “Red Hat”) with Edition> version
These values are currently hard coded. Perhaps that's ok and there were some conversations around this already.

jeff-phillips-18 · 2024-07-12T17:59:37Z

Works well.

I don't see the "edition" as requested in the final copy doc from UX: <Product name (excluding “Red Hat”) with Edition> version These values are currently hard coded. Perhaps that's ok and there were some conversations around this already.

These values will be return the the RHOAI operator, I just don't have access to a server with the latest installed. See https://issues.redhat.com/browse/RHOAIENG-9326

christianvogt · 2024-07-12T18:03:44Z

Ah i see, the cluster i was testing on also didn't have dsciStatus?.release?.name set which is why it falls back to the hard coded values.

christianvogt · 2024-07-12T19:16:32Z

/lgtm
/approve

openshift-ci · 2024-07-12T19:16:39Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: christianvogt

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:

~~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-ci bot requested a review from simrandhaliw July 8, 2024 15:20

jeff-phillips-18 requested review from andrewballantyne and christianvogt July 9, 2024 14:48

andrewballantyne requested changes Jul 9, 2024

View reviewed changes

backend/src/routes/api/odh-subscription/index.ts Outdated Show resolved Hide resolved

frontend/src/app/App.scss Outdated Show resolved Hide resolved

openshift-ci bot assigned andrewballantyne Jul 9, 2024

jeff-phillips-18 force-pushed the about-dialog branch from 7aa670c to cf73910 Compare July 10, 2024 15:39

andrewballantyne reviewed Jul 10, 2024

View reviewed changes

frontend/src/app/AboutDialog.scss Show resolved Hide resolved

andrewballantyne reviewed Jul 10, 2024

View reviewed changes

frontend/src/utilities/useWatchOperatorSubscriptionStatus.tsx Outdated Show resolved Hide resolved

christianvogt reviewed Jul 10, 2024

View reviewed changes

jeff-phillips-18 force-pushed the about-dialog branch from cf73910 to cce485a Compare July 11, 2024 15:32

jeff-phillips-18 force-pushed the about-dialog branch from cce485a to e70db94 Compare July 11, 2024 15:35

christianvogt reviewed Jul 12, 2024

View reviewed changes

[RHOAIENG-6982] About Modal in the Dashboard

f81f563

jeff-phillips-18 force-pushed the about-dialog branch from e70db94 to f81f563 Compare July 12, 2024 18:08

openshift-ci bot assigned christianvogt Jul 12, 2024

openshift-ci bot added the lgtm label Jul 12, 2024

openshift-ci bot added the approved label Jul 12, 2024

openshift-merge-bot bot merged commit cb6e509 into opendatahub-io:main Jul 12, 2024
6 checks passed

jeff-phillips-18 deleted the about-dialog branch November 12, 2024 12:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RHOAIENG-6982] About Modal in the Dashboard #2984

[RHOAIENG-6982] About Modal in the Dashboard #2984

jeff-phillips-18 commented Jul 8, 2024 •

edited

Loading

simrandhaliw commented Jul 8, 2024 •

edited

Loading

jeff-phillips-18 commented Jul 9, 2024

simrandhaliw commented Jul 9, 2024

andrewballantyne left a comment

jeff-phillips-18 commented Jul 9, 2024

simrandhaliw commented Jul 9, 2024

andrewballantyne commented Jul 10, 2024

jeff-phillips-18 commented Jul 10, 2024

simrandhaliw commented Jul 10, 2024

jeff-phillips-18 commented Jul 11, 2024

christianvogt Jul 12, 2024

christianvogt Jul 12, 2024

christianvogt Jul 12, 2024

christianvogt commented Jul 12, 2024

jeff-phillips-18 commented Jul 12, 2024

christianvogt commented Jul 12, 2024

christianvogt commented Jul 12, 2024

openshift-ci bot commented Jul 12, 2024

[RHOAIENG-6982] About Modal in the Dashboard #2984

[RHOAIENG-6982] About Modal in the Dashboard #2984

Conversation

jeff-phillips-18 commented Jul 8, 2024 • edited Loading

Description

Screen shots

How Has This Been Tested?

Test Impact

Request review criteria:

simrandhaliw commented Jul 8, 2024 • edited Loading

jeff-phillips-18 commented Jul 9, 2024

simrandhaliw commented Jul 9, 2024

andrewballantyne left a comment

Choose a reason for hiding this comment

jeff-phillips-18 commented Jul 9, 2024

simrandhaliw commented Jul 9, 2024

andrewballantyne commented Jul 10, 2024

jeff-phillips-18 commented Jul 10, 2024

simrandhaliw commented Jul 10, 2024

jeff-phillips-18 commented Jul 11, 2024

christianvogt Jul 12, 2024

Choose a reason for hiding this comment

christianvogt Jul 12, 2024

Choose a reason for hiding this comment

christianvogt Jul 12, 2024

Choose a reason for hiding this comment

christianvogt commented Jul 12, 2024

jeff-phillips-18 commented Jul 12, 2024

christianvogt commented Jul 12, 2024

christianvogt commented Jul 12, 2024

openshift-ci bot commented Jul 12, 2024

jeff-phillips-18 commented Jul 8, 2024 •

edited

Loading

simrandhaliw commented Jul 8, 2024 •

edited

Loading