🐾 Enhance the DetailsItem component to enable both hyperlink and edit

[sgratch]

References:
#1106
#1124

Up till now the DetailsItem component supported 2 modes:

1. A non editable content (w/o hyperlink).
2. An editable content while both content and pencil icon are an inline button for triggering the onEdit callback.

This PR enhances the DetailsItem component by replacing the editable mode style (2) such that only the pencil icon is an inline button for triggering the onEdit callback, while the field's context element is now separated from the edit button and can be used as read only text element, a hyperlink button etc.

Screencast of 2 examples for the editable mode usage (readable text and hyperlink)

Screencast.from.2024-04-24.17-44-09.webm

Future enhancement:

We can consider adding a 'Edit' label next to the pencil icon:

pencil icon with a label

[yaacov]

Nice,
The idea is to be able to support external links in the "value" part of the item, makes sense to me.

my concern is that we will have two identical items that will behave differntly without visual indication, one will have "value"+"pencil" where the "value" will work as an "edit button", and in the other the "value" will work as "external link". Can you think of another way to have "value" as a "external link" while keeping only one behavior, maybe switching to only support the pencilOnlyButton mode ?

[yaacov]

Ref: #1124

[sgratch]

Another suggestion for enhancement:

Why not adding the console's commonly used Annotations field to the providers details? This will enable the user to easily add annotations like for the external provider console link. E.g.

We already support the forklift.konveyor.io/defaultTransferNetwork annotation and might support more in the future so it seems relevant to add this field

[sgratch]

my concern is that we will have two identical items that will behave differntly without visual indication, one will have "value"+"pencil" where the "value" will work as an "edit button", and in the other the "value" will work as "external link". Can you think of another way to have "value" as a "external link" while keeping only one behavior, maybe switching to only support the pencilOnlyButton mode ?

The reason I used this "combined" solution is since other details pages used the same style. For example, check the Secret details page (Labels and Annotations are both editable fields, each label, if added, can be clicked as well):

Anyway, I agree that it's confusing and also suggested in main comment above to consider adding an 'Edit' label next to the pencil icon, as done for the Console's Labels field. Maybe it's even better to implement that for all editable fields in the provider details page. Something like this:

Screencast.from.2024-04-21.21-58-45.webm

WDYT?

[yaacov]

Another suggestion for enhancement:
Why not adding the console's commonly used Annotations field to the providers details? This will enable the user to easily add annotations like for the external provider console link

That is an excellent suggestion and in line with the product plan, we can add an enhancement feature and prioritize according to our capacity.

[yaacov]

consider adding an 'Edit' label next to the pencil icon, as done for the Console's Labels field. Maybe it's even better to implement that for all editable fields in the provider details page

Adding Edit next to each Pencil icon, is another enhancement we can consider, my concern with adding Edit always is that is does not align with the current console design, usually in the console they add Pencil when it's a one-item view and the Pencil is placed next to the item the user will edit, and when the view is large, like we have in Labels and Annotations they put the item in a box, and put Edit + Icon on the top right corner of this box.

[yaacov]

Please, make only one way of rendering the component, always separating the content from the icon button.

See: #1122 (comment)

[sgratch]

consider adding an 'Edit' label next to the pencil icon, as done for the Console's Labels field. Maybe it's even better to implement that for all editable fields in the provider details page

Adding Edit next to each Pencil icon, is another enhancement we can consider, my concern with adding Edit always is that is does not align with the current console design, usually in the console they add Pencil when it's a one-item view and the Pencil is placed next to the item the user will edit, and when the view is large, like we have in Labels and Annotations they put the item in a box, and put Edit + Icon on the top right corner of this box.

Yes I agree. In general, I think it's confusing for the user to use 2 kind of edit button styles within the same page.
I'll add only the pencil icon style and we can enhance it later.

[yaacov]

Suggested change

	export const EditableContentPencilOnlyButton: React.FC<{
	export const EditableContentButton: React.FC<{

[yaacov]

no need to change the element name, we only have one EditableContentButton

[sgratch]

I actually like to name the element with it's style, so that we will be able to add other styles in the future (e.g. w/o edit label etc) and since the console itself includes few edit styles already.
But if you think it's redundant then ok.

[yaacov]

But if you think it's redundant then ok.

yes, I do :-)

[yaacov]

Suggested change

	* @param {Function} onEdit - Function to be called when the button with the pencil icon is clicked.
	* @param {Function} onEdit - Function to be called when the button is clicked.

we only have one button

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[sgratch]

Updated the main comment with a screencast.