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

Author: rumanowskak

src/app/base/components/GenericTable/GenericTable.tsx

@@ -167,8 +167,11 @@ const GenericTable = <T extends { id: string | number }>({
       <thead>
         {table.getHeaderGroups().map((headerGroup) => (
           <tr key={headerGroup.id}>
-            {headerGroup.headers.filter(filterHeaders).map((header) => (
-              <TableHeader header={header} key={header.id} />
+            {headerGroup.headers.filter(filterHeaders).map((header, index) => (
+              <>
+                <TableHeader header={header} key={header.id} />
+                {index === 2 ? <th className="select-alignment" /> : null}
+              </>
             ))}
           </tr>
         ))}

src/app/base/components/GenericTable/_index.scss

@@ -1,10 +1,18 @@
 .p-generic-table {
-  thead, tbody {
+
+  thead,
+  tbody {
     display: table-row-group;
     width: 100%;
   }
 
-  .group-select, .select {
+  .group-select,
+  .select,
+  .select-alignment {
     width: 2rem;
   }
+
+  th.select {
+    display: none;
+  }
 }

src/app/images/components/ImagesTable/useImageTableColumns/useImageTableColumns.tsx

@@ -181,7 +181,7 @@ const useImageTableColumns = ({
                     ? isCommissioningImage
                       ? "Cannot delete images of the default commissioning release."
                       : "Cannot delete images that are currently being imported."
-                    : null
+                    : "Deletes this image."
                 }
                 onDelete={() => onDelete(row)}
               />