Node resource table and modals

[dpanshug]

RHOAIENG-16256

Description

Added table and modal for Node resource for Hardware profile

How Has This Been Tested?

Currently this table and modal are standalone components and are not used anywhere, to tests you can import <ManageNodeResourceSection /> to any form page, like i have tested this in ManageAcceleratorProfile

Test Impact

Add unit tests for validation utility functions

Request review criteria:

Self checklist (all need to be checked):

• 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)

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

@vconzola

[dpanshug]

WIP: needs some clarification around UX and data validation
discussing here: https://redhat-internal.slack.com/archives/C07C0FNHVPT/p1733920395039179

[codecov]

Codecov Report

Attention: Patch coverage is 22.13740% with 102 lines in your changes missing coverage. Please review.

Project coverage is 84.90%. Comparing base (5d3efb2) to head (b0426f6).
Report is 16 commits behind head on main.

Files with missing lines	Patch %	Lines
...eProfiles/nodeResource/ManageNodeResourceModal.tsx	3.22%	30 Missing ⚠️
...s/hardwareProfiles/nodeResource/CountFormField.tsx	4.34%	22 Missing ⚠️
...hardwareProfiles/nodeResource/NodeResourceForm.tsx	4.54%	21 Missing ⚠️
...ardwareProfiles/nodeResource/NodeResourceTable.tsx	34.61%	17 Missing ⚠️
...ges/hardwareProfiles/ManageNodeResourceSection.tsx	0.00%	10 Missing ⚠️
...wareProfiles/nodeResource/NodeResourceTableRow.tsx	83.33%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3565      +/-   ##
==========================================
- Coverage   85.20%   84.90%   -0.31%     
==========================================
  Files        1381     1402      +21     
  Lines       31592    32168     +576     
  Branches     8832     9020     +188     
==========================================
+ Hits        26919    27311     +392     
- Misses       4673     4857     +184     

Files with missing lines	Coverage Δ
...d/src/pages/hardwareProfiles/nodeResource/const.ts	100.00% <100.00%> (ø)
...d/src/pages/hardwareProfiles/nodeResource/utils.ts	100.00% <100.00%> (ø)
...wareProfiles/nodeResource/NodeResourceTableRow.tsx	83.33% <83.33%> (ø)
...ges/hardwareProfiles/ManageNodeResourceSection.tsx	0.00% <0.00%> (ø)
...ardwareProfiles/nodeResource/NodeResourceTable.tsx	34.61% <34.61%> (ø)
...hardwareProfiles/nodeResource/NodeResourceForm.tsx	4.54% <4.54%> (ø)
...s/hardwareProfiles/nodeResource/CountFormField.tsx	4.34% <4.34%> (ø)
...eProfiles/nodeResource/ManageNodeResourceModal.tsx	3.22% <3.22%> (ø)

... and 57 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 065da14...b0426f6. Read the comment docs.

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign manosnoam for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• frontend/OWNERS

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

[dpanshug]

@kaedward @vconzola i have updated the mocks, please review the error message for field validation.

[vconzola]

I believe there should be a space between the numbers and the units in the table, e.g., "1 GiB", not "1GiB", bur defer to @kaedward. Also, the units in the table should match the units in the dropdown, e.g., "GiB", not "Gi".

[Gkrumbach07]

Could you also update the other table node table to now use your view only table

[DaoDaoNoCode]

I think all the tables should use compact variant.

[dpanshug]

I believe there should be a space between the numbers and the units in the table, e.g., "1 GiB", not "1GiB", bur defer to @kaedward. Also, the units in the table should match the units in the dropdown, e.g., "GiB", not "Gi".

@vconzola this formatting is consistent across the Dashboard, and you can see the same approach on the spawner page under cluster storage. Do you recommend we change it?

[vconzola]

@dpanshug Please keep the units and spacing consistent with what's in the dashboard today - don't change it. I thought I got it right everywhere in the mockups, but I guess not. Apologies for the confusion.

[DaoDaoNoCode]

This field should also be disabled if it's CPU or RAM based on what I saw in the mockups (Or probably disable it based on the identifier field, WDYT? @Gkrumbach07 )

[DaoDaoNoCode]

In the mockup, there is a description under this section title. Also, the button is a link style below the table but not next to the section title. However, the description is missed here in this PR and the button becomes the secondary button next to the title.

I am OK with changing the edit and delete icon to the kebab menu. However, I am not sure about the description and also the add button because it can affect how we show the empty state.

Can you check and help confirm that @vconzola?

[vconzola]

Please implement as shown in the mockup including the description, the action icons in place of a kebab and the link button for Add resource. Thanks.

[DaoDaoNoCode]

@dpanshug Please refer to the implementation here

[Gkrumbach07]

this is not the latest mocks. did you verify with the latest

[DaoDaoNoCode]

Where is the latest mock? I checked this one https://www.figma.com/design/UFhLtsPxoETwd39pnMsASV/Hardware-profiles?node-id=0-1&p=f&t=52XPdoeFVdZ2Bkl6-0.

[dpanshug]

@vconzola For the button we have discussed before here. Can you confirm if it should be in table toolbar or the bottom of the table when the table is not empty?