Show image history

[jelly]

A new History tab has been added to the images view which fetches the history on demand.

The comment field always seems to be empty.. and therefore cut off.

@garrett please take a look:

On Mobile

On tablet

[garrett]

The comment field always seems to be empty.. and therefore cut off.

Are we able to see if there are any comments and hide the column if there aren't any?

And can we not show anything if it's just <missing> in the ID?

And mobile has doubling up of frames and padding it could do without.... :frowning_face:

Once these things are solved, I like it though!

[jelly]

Found one with comments:

Now only showing Comments when there are available, fixed the showing of size to be reported in MB instead of MiB show our UI is consistent.

Padding comes from PF, it's not really double padding:

Going to argue this is a PF bug somewhere... where it applies the padding from an expendable row and ignores the padding which should be set by the .compact class. Having a table nested in a table seems to be the issue as far as I can see.

.pf-m-grid-md.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
    border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
  }
  .pf-m-grid-md.pf-c-table tbody.pf-m-expanded {
    border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
  }
  .pf-m-grid-md.pf-c-table tbody.pf-m-expanded tr:not(.pf-c-table__expandable-row) {
    border-bottom: 0;
  }
  .pf-m-grid-md.pf-c-table tbody.pf-m-expanded:not(:last-of-type) {
    border-bottom: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
  }
  .pf-m-grid-md.pf-c-table tr.pf-m-selected {
    --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
    --pf-c-table__expandable-row--after--BorderColor: transparent;
  }
  .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) {
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
    grid-auto-columns: max-content;
    grid-column-gap: var(--pf-c-table-tr--responsive--GridColumnGap);
    padding: var(--pf-c-table-tr--responsive--PaddingTop) var(--pf-c-table-tr--responsive--PaddingRight) var(--pf-c-table-tr--responsive--PaddingBottom) var(--pf-c-table-tr--responsive--PaddingLeft);
  }

While we want to see

.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row) {
  --pf-c-table--cell--FontSize: var(--pf-c-table--m-compact--FontSize);
  --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-compact--cell--PaddingTop);
  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-compact--cell--PaddingBottom);
}

[garrett]

Padding comes from PF, it's not really double padding:

I understand that... but it is literally double padding. There's padding, a frame, and padding again. I'm not talking about individual HTML elements, but from a layout / design standpoint. There shouldn't be. We already have padding and a frame, we don't need two borders with padding with each doubled up for the same element. It's just way too much in mobile mode and the data is constrained by all the redundant space and borders.

It's because we're nesting multiple elements within each other.

This is one of the (many) reasons we made the Machines page has sub-pages, not expandable tables with tabs and stuff like in Cockpit-Podman.

(But we had and still have some CSS hacks to strip away the redundant padding and borders around Cockpit.)

[jelly]

What do you think of:

[jelly]

Nice, thanks!

Tests are unhappy, two small comments and please add release note, thanks!

Test should be fixed, React keeps a tbody around from the History tab.. which is kinda annoying. Also added a pixel test for the history table