Change token secret to have middle truncation

[ashley-o0o]

Closes: RHOAIENG-11861

Description

Updated token secrets to have middle truncation.
Due to PatternFly not having a true fix for this yet, I’m using our InlineTruncatedClipoardCopy.tsx work around for this fix. A few modifications added to that file to allow for middle truncation.

How Has This Been Tested?

Tested locally.

• Create a model mesh server with a model that requires a token
• View the Token secret in the Models and model servers table

Test Impact

No new tests added

Screenshots

Before:

After:

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

[codecov]

Codecov Report

Attention: Patch coverage is 85.71429% with 1 line in your changes missing coverage. Please review.

Project coverage is 85.26%. Comparing base (01165de) to head (c82491d).
Report is 30 commits behind head on main.

Files with missing lines	Patch %	Lines
...ts/ModelMeshSection/ServingRuntimeTokenDisplay.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3505      +/-   ##
==========================================
- Coverage   85.60%   85.26%   -0.35%     
==========================================
  Files        1347     1356       +9     
  Lines       30704    31080     +376     
  Branches     8554     8660     +106     
==========================================
+ Hits        26285    26500     +215     
- Misses       4419     4580     +161     

Files with missing lines	Coverage Δ
...nd/src/components/InlineTruncatedClipboardCopy.tsx	77.77% <100.00%> (+27.77%)	⬆️
...ts/ModelMeshSection/ServingRuntimeTokenDisplay.tsx	9.09% <0.00%> (ø)

... and 136 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 01165de...c82491d. Read the comment docs.

---- 🚨 Try these New Features:

• Flaky Tests Detection - Detect and resolve failed and flaky tests
• JS Bundle Analysis - Avoid shipping oversized bundles

[christianvogt]

@ashley-o0o i think the tooltip is likely ok. Before the change I could scroll the input to see the full value. With the truncation and no tooltip there's no way to see the value without copying it.

I suggest you keep the tooltip and have UX see it. At the very least having the tooltip remains consistent with all other truncation scenarios.

[christianvogt]

/lgtm
/approve

[jenny-s51]

Looks good @ashley-o0o ! FWIW, PF Topology has a truncateMiddle util which would have been awesome to use here, but it's not available for consumers to import outside of Topology.

Left a comment / suggested solution for this in patternfly/patternfly-react#10892 (comment) - looks like the PF team has prioritized this issue for the Q1 milestone 🎉

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: christianvogt, jenny-s51

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