Update modals and generate meaningful k8s name for images #1529

DaoDaoNoCode · 2023-07-17T20:57:35Z

Closes #1433 #1435 #1388 #1326

Description

This PR did the following things:

Add the comment back as mentioned in Refactor BYON images table #1506 (comment) since we are not going to fix it in this phase and I removed it by mistake
Enhance the status toggle of Enable column in the table, for the error images, it will set default to disabled and the user cannot enable it. Also, add the sort to the Enable column as @vconzola requested here Refactor BYON images table #1506 (comment)

Generate a meaning k8s name for the image stream that user imports, before the change, it was byon-${timestamp}, but now it's custom-${translated-k8s-name} where translated-k8s-name is the translation of the display name that user inputs. Also, add a tooltip next to the image name so the user could easily locate the image stream resource on the cluster.

Refactor the Import/Update modal of the custom notebook images, change the labels, and add helper text/tooltips based on the mockups

Highlights: Refactor the table for adding/editing packages and software in the modal. Take the software as an example, when the user starts to add software or edit software, he will be in the edit mode, which only allows the user to confirm or abandon the current change (the user cannot edit multiple lines at the same time and cannot submit or exit the modal).

What's more, when the user hits Enter in the edit mode, it will automatically confirm the current row and move to the next row. If the row is already the last row, it will create a new entry, which helps the user to quickly input and move on without clicking with the mouse every time. When the user hits Esc in the edit mode, it will abandon the current change of the row and exit the edit mode.

Edit mode: close button hidden, Submit and Cancel button disabled, other rows cannot be edited and removed, either

Non-edit mode: You can do anything you want

How Has This Been Tested?

Try to create some images with the correct path (like quay.io/opendatahub/workbench-images:jupyter-minimal-ubi8-python-3.8-pr-89) and incorrect path (like quay.io/opendatahub/workbench-images:invalid-tag) and you could check the status of the toggle on the Enable column. Try to create more and sort by the Enable column
Try to import/edit the image in every situation, play around with the edit mode of the software/packages

Test Impact

TBD

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 tests & storybook 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.

After the PR is posted & before it merges:

The developer has tested their solution on a cluster by using the image produced by the PR to main

DaoDaoNoCode · 2023-07-17T21:01:07Z

@vconzola Could you please check the UX updates in this PR? Thanks!

vconzola · 2023-07-18T18:05:07Z

lgtm

manaswinidas

Tested all changes on my end, looks fine.

/lgtm

andrewballantyne

Some changes needed

frontend/src/concepts/dashboard/DashboardInlineHelpIcon.tsx

frontend/src/concepts/dashboard/DashboardSmallTextList.tsx

frontend/src/pages/BYONImages/BYONImageModal/ManageBYONImageModal.tsx

frontend/src/pages/BYONImages/utils.ts

andrewballantyne

Looking good... let me run a few visual tests. One question...

andrewballantyne · 2023-07-25T15:30:07Z

frontend/src/pages/BYONImages/BYONImagesTableRow.tsx

          >
-            <FlexItem>{obj.display_name}</FlexItem>
-            <FlexItem>
-              <ImageErrorStatus image={obj} />
-            </FlexItem>
+            <ResourceNameTooltip resource={convertBYONImageToK8sResource(obj)}>
+              {obj.display_name}
+            </ResourceNameTooltip>
+            <ImageErrorStatus image={obj} />
          </Flex>


This seems like you'll not get spacing, why this change?

I think this is the magic of Flex, they become flex items by nature and it auto fits them. So although looks weird in code, this works out.

FYI, you're going to run into a conflict -- Gage kept the FlexItems. Perhaps you should match his implementation to avoid conflicts

andrewballantyne · 2023-07-25T15:48:20Z

I think this works great overall.

However, we should have a sit down with UX and get feedback on the keyboard actions. I'm not sure I like the escape/enter action flows -- double escape closes the modal without warning. Keyboard flow doesn't really get you back in once you escape out (we should probably focus the "add software" at that point -- but it is the next tab index so it's reasonable)

I think we are already are aware of the issue with a bad image -- I just worry it tosses everything away and it's not just inconvenient for an image name. Which I think now with the added flow of keyboard actions, one could quickly lose more.

Probably useful to incubate these and get feedback across the board on them though.

backend/src/routes/api/images/imageUtils.ts

andrewballantyne

FYI

andrewballantyne · 2023-07-26T21:26:14Z

frontend/src/pages/BYONImages/BYONImagesTableRow.tsx

          >
-            <FlexItem>{obj.display_name}</FlexItem>
-            <FlexItem>
-              <ImageErrorStatus image={obj} />
-            </FlexItem>
+            <ResourceNameTooltip resource={convertBYONImageToK8sResource(obj)}>
+              {obj.display_name}
+            </ResourceNameTooltip>
+            <ImageErrorStatus image={obj} />
          </Flex>


FYI, you're going to run into a conflict -- Gage kept the FlexItems. Perhaps you should match his implementation to avoid conflicts

andrewballantyne · 2023-07-27T20:24:55Z

/approve

@DaoDaoNoCode get someone else on the team to verify it again, I unfortunately lost my window to test the code again. Looks good though, thanks for making the desired changes.

openshift-ci · 2023-07-27T20:25:01Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: andrewballantyne, manaswinidas

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~~ [andrewballantyne]

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

DaoDaoNoCode · 2023-07-27T20:29:11Z

@andrewballantyne Sure, let me squash the commits first.

Gkrumbach07

it all works as described. few UX related issues though, not breaking.

invalid images will show enabled but be greyed out, you have to refresh for the UI to correct itself and show it to be not enabled and greyed out.
when adding software/packages, in edit mode for a row
1. make edits in one of the text boxes
2. cancel with either the X button or ESC
3. edit the row again
4. the last edits that were canceled are still there

Gkrumbach07 · 2023-07-31T19:45:52Z

/lgtm

openshift-ci bot requested review from alexcreasy and lucferbux July 17, 2023 20:57

DaoDaoNoCode requested a review from manaswinidas July 17, 2023 21:24

This was linked to issues Jul 17, 2023

Update all text items and field labels in modals #1433

Closed

[Bug]: Image Error has Misleading Enabled State #1388

Closed

Generate meaningful name for custom notebook image #1435

Closed

manaswinidas approved these changes Jul 18, 2023

View reviewed changes

openshift-ci bot assigned manaswinidas Jul 18, 2023

openshift-ci bot added the lgtm label Jul 18, 2023

andrewballantyne requested changes Jul 19, 2023

View reviewed changes

openshift-ci bot assigned andrewballantyne Jul 19, 2023

openshift-ci bot removed the lgtm label Jul 19, 2023

DaoDaoNoCode force-pushed the upstream-issue-1433 branch from eaf0e22 to 8de654f Compare July 21, 2023 14:09

andrewballantyne reviewed Jul 25, 2023

View reviewed changes

andrewballantyne approved these changes Jul 25, 2023

View reviewed changes

openshift-ci bot added lgtm approved labels Jul 25, 2023

DaoDaoNoCode force-pushed the upstream-issue-1433 branch from 8de654f to e233810 Compare July 25, 2023 17:08

openshift-ci bot removed the lgtm label Jul 25, 2023

DaoDaoNoCode linked an issue Jul 25, 2023 that may be closed by this pull request

[Tech Debt]: Cleanup Image Regex #1326

Closed

andrewballantyne reviewed Jul 26, 2023

View reviewed changes

backend/src/routes/api/images/imageUtils.ts Outdated Show resolved Hide resolved

andrewballantyne reviewed Jul 26, 2023

View reviewed changes

DaoDaoNoCode force-pushed the upstream-issue-1433 branch 2 times, most recently from 10f9b48 to 9750213 Compare July 28, 2023 13:17

DaoDaoNoCode force-pushed the upstream-issue-1433 branch 2 times, most recently from a4411a9 to 22aa0ff Compare July 28, 2023 16:57

Gkrumbach07 reviewed Jul 28, 2023

View reviewed changes

DaoDaoNoCode force-pushed the upstream-issue-1433 branch from 22aa0ff to f3e776c Compare July 31, 2023 19:24

Update modals and generate meaningful k8s name for images

3494a78

DaoDaoNoCode force-pushed the upstream-issue-1433 branch from f3e776c to 3494a78 Compare July 31, 2023 19:27

openshift-ci bot assigned Gkrumbach07 Jul 31, 2023

openshift-ci bot added the lgtm label Jul 31, 2023

openshift-merge-robot merged commit 3d68d79 into opendatahub-io:f/byon Jul 31, 2023
5 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update modals and generate meaningful k8s name for images #1529

Update modals and generate meaningful k8s name for images #1529

DaoDaoNoCode commented Jul 17, 2023 •

edited

DaoDaoNoCode commented Jul 17, 2023

vconzola commented Jul 18, 2023

manaswinidas left a comment

andrewballantyne left a comment

andrewballantyne left a comment

andrewballantyne Jul 25, 2023

andrewballantyne Jul 25, 2023

andrewballantyne Jul 26, 2023

andrewballantyne commented Jul 25, 2023

andrewballantyne left a comment

andrewballantyne Jul 26, 2023

andrewballantyne commented Jul 27, 2023

openshift-ci bot commented Jul 27, 2023

DaoDaoNoCode commented Jul 27, 2023

Gkrumbach07 left a comment

Gkrumbach07 commented Jul 31, 2023

Update modals and generate meaningful k8s name for images #1529

Update modals and generate meaningful k8s name for images #1529

Conversation

DaoDaoNoCode commented Jul 17, 2023 • edited

Description

How Has This Been Tested?

Test Impact

Request review criteria:

DaoDaoNoCode commented Jul 17, 2023

vconzola commented Jul 18, 2023

manaswinidas left a comment

Choose a reason for hiding this comment

andrewballantyne left a comment

Choose a reason for hiding this comment

andrewballantyne left a comment

Choose a reason for hiding this comment

andrewballantyne Jul 25, 2023

Choose a reason for hiding this comment

andrewballantyne Jul 25, 2023

Choose a reason for hiding this comment

andrewballantyne Jul 26, 2023

Choose a reason for hiding this comment

andrewballantyne commented Jul 25, 2023

andrewballantyne left a comment

Choose a reason for hiding this comment

andrewballantyne Jul 26, 2023

Choose a reason for hiding this comment

andrewballantyne commented Jul 27, 2023

openshift-ci bot commented Jul 27, 2023

DaoDaoNoCode commented Jul 27, 2023

Gkrumbach07 left a comment

Choose a reason for hiding this comment

Gkrumbach07 commented Jul 31, 2023

DaoDaoNoCode commented Jul 17, 2023 •

edited