feat(images): Implement design for image table MAASENG-4360

[rumanowskak]

Done

• Added tooltip for delete icon in Images Table
• Aligned header text starting from "Release title" to the text "Ubuntu" in header belowe

QA steps

• On MAAS-UI go to configuration/images
• Hover over delete icon to see the tooltip
• Look at header if "Release title" is aligned with the "Ubuntu" text

Fixes

Resolves MAASENG-4360

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[abuyukyi101198]

Looks good! However, there is an easy miss in the design, where when aligning the "Release title" to the left, the other column headers chould not move, as in all column headers should be left-aligned properly.

Managing to shift the second header as the same amount as the width of the now display: none .select should align all headers correctly.

[rumanowskak]

@abuyukyi101198 I tried to just shift the second header "Architecture" but it didn't shift the rest of them, so I did it this way.

[abuyukyi101198]

The alignment seems to shift in later headers. CSS may not be enough to fix the alignment.

[abuyukyi101198]

Since this is a generic component, we cannot directly refer to image-specific classes like .release. It seems that the alignment is not solvable with pure CSS. Maybe we can add an empty th element after the first visible header programmatically. I'm not a huge fan of this solution, but CSS just doesn't seem to work.

In GenericTable.tsx:

<DynamicTable className="p-generic-table" variant={variant}>
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.filter(filterHeaders).map((header, index) => (
              <>
                <TableHeader header={header} key={header.id} />
                {index === 2 ? <th className="select-alignment" /> : null} <-- add this aligner th
              </>
            ))}
          </tr>
        ))}
      </thead>

And in GenricTable/_index.scss:

.group-select,
  .select,
  .select-alignment { <-- add select-alignment
    width: 2rem;
  }

[abuyukyi101198]

LGTM!