stable

Clone or download

Read-only

refactor: Replace table by flexbox

No functional change expected in the Artifact Modal links field. Very long artifact titles should still be cut with an ellipsis. The link type selectors should still be aligned on the left. Notes: The table layout was causing several problems: 1. It prevented us from adding a tlp-alert on top of the last row, due to a limitation in hybrids templating [0] that is very likely caused by restrictions on HTML table elements themselves [1]. Trying to put a template part at the beginning of the `<tfoot>` wrecked the following template. Option props became `<!--[object Object]-->` and then on a subsequent render, back to actual Option objects. 2. It prevented us from lifting the Link type selector up into ArtifactCreatorElement. It would make more sense to have the entire "row" as a dedicated element for creation. Either it's "selection mode" and we have the usual lazybox, or it's "creation mode" and we have the whole inline form as a self-contained element. The table structure meant we could not do that, because a `<tfoot>` can only contain `<tr>` elements. Since the table's only purpose was column alignment, we completely replace it by divs and spans. We get the same alignment, with less HTML, less CSS and no restrictions. An all-around win! Additionally, with the table layout, there was a weird "yanking" effect when the field only contains read-only links and then you add a new link. With the table layout, the whole right column would be yanked to the left (as the action button column changed to >0 width). This is now fixed as well: the existing rows are not affected by new rows. [0] https://hybrids.js.org/#/component-model/templates?id=table-family-elements [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot#technical_summary part of story #28823 [modal] create artifact Change-Id: Ic8171d766b1aa46fcbafb275c427cf8a4469b9f2

Modified Files

Name
M plugins/tracker/scripts/lib/artifact-modal/src/adapters/UI/fields/link-field/LinkField.ts +52 −79 Go to diff View file
M plugins/tracker/scripts/lib/artifact-modal/src/adapters/UI/fields/link-field/LinkedArtifactTemplate.test.ts +2 −2 Go to diff View file
M plugins/tracker/scripts/lib/artifact-modal/src/adapters/UI/fields/link-field/LinkedArtifactTemplate.ts +41 −72 Go to diff View file
M plugins/tracker/scripts/lib/artifact-modal/src/adapters/UI/fields/link-field/NewLinkTemplate.test.ts +2 −2 Go to diff View file
M plugins/tracker/scripts/lib/artifact-modal/src/adapters/UI/fields/link-field/NewLinkTemplate.ts +34 −48 Go to diff View file
R plugins/tracker/scripts/lib/artifact-modal/src/adapters/UI/fields/link-field/creation/artifact-creator.scss Go to diff View file
M plugins/tracker/scripts/lib/artifact-modal/src/adapters/UI/fields/link-field/dropdown/LinkableArtifactTemplate.ts +1 −1 Go to diff View file
A plugins/tracker/scripts/lib/artifact-modal/src/adapters/UI/fields/link-field/dropdown/_linkable_item.scss +52 −0 Go to diff View file
M plugins/tracker/scripts/lib/artifact-modal/src/adapters/UI/fields/link-field/link-field.scss +66 −124 Go to diff View file