Update 'Resource name' fields to meet UX guidelines: Cluster storage #3483

jeff-phillips-18 · 2024-11-15T16:55:06Z

Description

Updates create/edit cluster storage modals to use K8sNameDescriptionField component in order to meet current UX guidelines.

Screen shots

Create cluster storage

Create cluster storage - edit resource name

Edit cluster storage

How Has This Been Tested?

Navigate to a project and go to the Cluster storage tab
- Select Add cluster storage
- Enter a name
- Verify the Add storage button is enabled
- View the resource name via the Edit resource name link.
- Change the resource name to something invalid (ie. contains a space)
- Verify the Add storage button is disabled
- Change the resource name to something valid
- Enter a description
- Verify the Add storage button is enabled
- Save the storage.
- Verify the cluster storage is created with the correct Display name and Resource Name and Description.
Navigate to a project and go to the Cluster storage tab
- Select a kebab for an existing cluster storage item
- Select Edit storage
- Verify the name, resource name, and description are shown correctly
- Verify the resource name is not editable
Navigate to a project and go to the Workbenches tab
- Select Create workbench
- Enter a name
- Select an Image
- Verify the Create workbench button is enabled
- Click the Create storage button
  - Enter a name
  - Enter a valid mount path
  - Verify the Create button is enabled
  - View the resource name via the Edit resource name link.
  - Change the resource name to something invalid (ie. contains a space)
  - Verify the Create button is disabled
  - Change the resource name to something valid
  - Enter a description
  - Verify the Create button is enabled
  - Save the storage.
- In the Cluster storage list, select the kebab next to the new storage to be created
  - Verify the cluster storage is created with the correct Display name and Resource Name and Description.

Test Impact

Updated unit tests for new fields

Request review criteria:

The developer has manually tested the changes and verified that the changes work
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)
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.

/cc @simrandhaliw

codecov · 2024-11-15T17:44:52Z

Codecov Report

Attention: Patch coverage is 91.52542% with 5 lines in your changes missing coverage. Please review.

Project coverage is 85.54%. Comparing base (6b956b3) to head (e305f08).
Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
...cts/screens/detail/storage/ClusterStorageModal.tsx	66.66%	2 Missing ⚠️
frontend/src/api/k8s/pvcs.ts	75.00%	1 Missing ⚠️
.../src/concepts/k8s/K8sNameDescriptionField/utils.ts	80.00%	1 Missing ⚠️
...creens/spawner/storage/CreateNewStorageSection.tsx	93.75%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3483      +/-   ##
==========================================
- Coverage   85.56%   85.54%   -0.03%     
==========================================
  Files        1342     1342              
  Lines       31003    31016      +13     
  Branches     8663     8675      +12     
==========================================
+ Hits        26529    26532       +3     
- Misses       4474     4484      +10

Files with missing lines	Coverage Δ
...8sNameDescriptionField/K8sNameDescriptionField.tsx	`100.00% <100.00%> (ø)`
...ojects/screens/detail/storage/BaseStorageModal.tsx	`80.95% <100.00%> (-1.66%)`	⬇️
...src/pages/projects/screens/detail/storage/utils.ts	`78.57% <ø> (ø)`
.../screens/spawner/storage/WorkbenchStorageModal.tsx	`3.57% <ø> (ø)`
...rc/pages/projects/screens/spawner/storage/utils.ts	`65.71% <100.00%> (-2.29%)`	⬇️
frontend/src/pages/projects/types.ts	`100.00% <ø> (ø)`
frontend/src/utilities/useGenericObjectState.ts	`100.00% <100.00%> (ø)`
frontend/src/api/k8s/pvcs.ts	`92.85% <75.00%> (-3.15%)`	⬇️
.../src/concepts/k8s/K8sNameDescriptionField/utils.ts	`98.38% <80.00%> (-1.62%)`	⬇️
...creens/spawner/storage/CreateNewStorageSection.tsx	`96.42% <93.75%> (-3.58%)`	⬇️
... and 1 more

... and 3 files with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6b956b3...e305f08. Read the comment docs.

christianvogt · 2024-11-27T19:52:36Z

frontend/src/pages/projects/screens/spawner/storage/utils.ts

+  const existingState = React.useMemo(
+    () => ({
+      name: existingName,
+      k8sName: existingK8sName,
+      description: existingDescription,
+      size: existingSize,
+      storageClassName: existingStorageClassName,
+    }),
+    [existingName, existingK8sName, existingDescription, existingSize, existingStorageClassName],


Using a memo here has no value because it is simply used as the default in useGenericObjectState and then saved a ref internally.

christianvogt · 2024-11-27T20:15:39Z

@jeff-phillips-18 cannot unset description

jeff-phillips-18 · 2024-11-29T12:17:37Z

@jeff-phillips-18 cannot unset description

@christianvogt Can't unset the description before this PR either. I'll fix it.

christianvogt · 2024-11-29T15:36:01Z

@jeff-phillips-18 Seems to work fine.

The one quirk with the new implementation is that after creating a new storage in the workbench form, it's not possible to edit the resource name even though the resource hasn't yet been created. Previously, editing the name would result in a new generated resource name.

christianvogt · 2024-11-29T16:22:09Z

frontend/src/api/k8s/pvcs.ts

+  if (!data.description && pvcResource.metadata.annotations?.['openshift.io/description']) {
+    pvcResource.metadata.annotations['openshift.io/description'] = undefined;
+  }


A test is a failing I suspect because it's looking for an empty description.

jeff-phillips-18 · 2024-12-02T14:33:45Z

The one quirk with the new implementation is that after creating a new storage in the workbench form, it's not possible to edit the resource name even though the resource hasn't yet been created. Previously, editing the name would result in a new generated resource name.

@christianvogt Fixed.

christianvogt · 2024-12-02T19:57:21Z

/lgtm
/approve

openshift-ci · 2024-12-02T19:57:30Z

[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:

~~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

jeff-phillips-18 requested review from christianvogt and jenny-s51 November 15, 2024 16:55

openshift-ci bot requested a review from simrandhaliw November 15, 2024 16:55

openshift-ci bot added the do-not-merge/work-in-progress This PR is in WIP state label Nov 15, 2024

jeff-phillips-18 force-pushed the storage-cluster-resource-name branch 2 times, most recently from 6fdbc3e to a29b4cf Compare November 27, 2024 16:10

jeff-phillips-18 changed the title ~~[WIP] Update 'Resource name' fields to meet UX guidelines: Cluster storage~~ Update 'Resource name' fields to meet UX guidelines: Cluster storage Nov 27, 2024

openshift-ci bot removed the do-not-merge/work-in-progress This PR is in WIP state label Nov 27, 2024

jeff-phillips-18 force-pushed the storage-cluster-resource-name branch from a29b4cf to 82f24d4 Compare November 27, 2024 19:08

christianvogt reviewed Nov 27, 2024

View reviewed changes

jeff-phillips-18 force-pushed the storage-cluster-resource-name branch 2 times, most recently from 0270ffd to 45c3834 Compare November 29, 2024 14:55

christianvogt reviewed Nov 29, 2024

View reviewed changes

jeff-phillips-18 force-pushed the storage-cluster-resource-name branch from 45c3834 to 361f1c5 Compare December 2, 2024 14:33

jeff-phillips-18 force-pushed the storage-cluster-resource-name branch from 361f1c5 to 22a250d Compare December 2, 2024 14:44

Update 'Resource name' fields to meet UX guidelines: Cluster storage

e305f08

jeff-phillips-18 force-pushed the storage-cluster-resource-name branch from 22a250d to e305f08 Compare December 2, 2024 17:48

openshift-ci bot assigned christianvogt Dec 2, 2024

openshift-ci bot added the lgtm label Dec 2, 2024

openshift-ci bot added the approved label Dec 2, 2024

openshift-merge-bot bot merged commit 6a6600c into opendatahub-io:main Dec 2, 2024
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update 'Resource name' fields to meet UX guidelines: Cluster storage #3483

Update 'Resource name' fields to meet UX guidelines: Cluster storage #3483

jeff-phillips-18 commented Nov 15, 2024 •

edited

Loading

codecov bot commented Nov 15, 2024 •

edited

Loading

christianvogt Nov 27, 2024

christianvogt commented Nov 27, 2024

jeff-phillips-18 commented Nov 29, 2024

christianvogt commented Nov 29, 2024

christianvogt Nov 29, 2024

jeff-phillips-18 Dec 2, 2024

jeff-phillips-18 commented Dec 2, 2024

christianvogt commented Dec 2, 2024

openshift-ci bot commented Dec 2, 2024

Update 'Resource name' fields to meet UX guidelines: Cluster storage #3483

Update 'Resource name' fields to meet UX guidelines: Cluster storage #3483

Conversation

jeff-phillips-18 commented Nov 15, 2024 • edited Loading

Description

Screen shots

Create cluster storage

Create cluster storage - edit resource name

Edit cluster storage

How Has This Been Tested?

Test Impact

Request review criteria:

codecov bot commented Nov 15, 2024 • edited Loading

Codecov Report

christianvogt Nov 27, 2024

Choose a reason for hiding this comment

christianvogt commented Nov 27, 2024

jeff-phillips-18 commented Nov 29, 2024

christianvogt commented Nov 29, 2024

christianvogt Nov 29, 2024

Choose a reason for hiding this comment

jeff-phillips-18 Dec 2, 2024

Choose a reason for hiding this comment

jeff-phillips-18 commented Dec 2, 2024

christianvogt commented Dec 2, 2024

openshift-ci bot commented Dec 2, 2024

jeff-phillips-18 commented Nov 15, 2024 •

edited

Loading

codecov bot commented Nov 15, 2024 •

edited

Loading