support better handling of name and description in import pipeline modal

[pnaik1]

https://issues.redhat.com/browse/RHOAIENG-14617

Description

The name and description for the import pipeline/ pipeline version modal now has a max limit of 255
the submit button is disbaled if the name is duplicated

How Has This Been Tested?

1. Create a pipeline using import pipeline modal with name larger character set
2. Verify for the helperText
3. Verify that the name gets trim after 255 character is achieved
4. Verify that when duplicated name is typed the submit button is disabled with error helperText

Test Impact

N/A

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

[pnaik1]

cc @yannnz , Can you have a look at the screenshot?

• added a helperText below the Pipeline name and Pipeline description

• I have disabled the submit button and indicated an error when pipeline already exists

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 85.30%. Comparing base (b5f39ca) to head (b590435).
Report is 17 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3508      +/-   ##
==========================================
+ Coverage   85.22%   85.30%   +0.07%     
==========================================
  Files        1356     1354       -2     
  Lines       31111    31086      -25     
  Branches     8681     8684       +3     
==========================================
+ Hits        26514    26517       +3     
+ Misses       4597     4569      -28     

Files with missing lines	Coverage Δ
frontend/src/concepts/k8s/NameDescriptionField.tsx	92.50% <100.00%> (ø)
...ts/pipelines/content/import/PipelineImportBase.tsx	95.23% <100.00%> (+0.07%)	⬆️

... and 39 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 b5f39ca...b590435. Read the comment docs.

[yannnz]

Based on the new UI guideline Anges is working on, it looks like the error message is right below the field.

UI guideline

Double check with @angesDing and @simrandhaliw

[Gkrumbach07]

code and functionality looks good. lets just update the base component to match new UX guidelines

[nding-anges]

Hi @yannnz, thank you for pointing that out. I have a question: should the name field include helper text to inform users that the name cannot be duplicated? If yes, for showing multiple helper text under a field, there is a design pattern that outlines how to display multiple helper texts underneath the field, as well as how to indicate an error status for each helper text.d as well as how to show an error status for each of helper text.

[yannnz]

@nding-anges I would say a system doesn't support duplicated name seems a common way in many websites. It is not that special that UI always needs to point it out. Unless we allow duplicated names in our system in other flows.

[simrandhaliw]

@nding-anges I would say a system doesn't support duplicated name seems a common way in many websites. It is not that special that UI always needs to point it out. Unless we allow duplicated names in our system in other flows.

Agreed!

[DaoDaoNoCode]

The UX feedback is addressed.
/lgtm

[Gkrumbach07]

/approve

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: DaoDaoNoCode, Gkrumbach07

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 [Gkrumbach07]

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