fix: adjust tables

src/shared/components/EmptyListComponent/EmptyListComponent.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
-import { Button, IllustratedMessage } from '@ui5/webcomponents-react';
+import { Button, IllustratedMessage, Title } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations';
 import { ExternalLink } from 'shared/components/ExternalLink/ExternalLink';
 
@@ -41,8 +41,12 @@ export const EmptyListComponent = ({
   return (
     <IllustratedMessage
       name={image}
-      design="Auto"
-      titleText={titleText}
+      design="Scene"
+      title={
+        <Title level="H2" size="H2">
+          {titleText}
+        </Title>
+      }
       subtitle={
         <p className="emptyListComponent__subtitle sap-margin-top-small">
           {subtitle}

src/shared/components/GenericList/GenericList.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { Table } from '@ui5/webcomponents-react-compat/dist/components/Table/index.js';
+import { Table } from '@ui5/webcomponents-react';
 import { useNavigate } from 'react-router-dom';
 import {
   BodyFallback,
@@ -45,19 +45,19 @@ const defaultSearch = {
 };
 
 export const GenericList = ({
-  entries,
-  actions,
+  entries = [],
+  actions = [],
   extraHeaderContent,
   title,
   headerRenderer,
   rowRenderer,
   testid,
-  serverDataError,
-  serverDataLoading,
+  serverDataError = null,
+  serverDataLoading = false,
   pagination,
   sortBy,
-  notFoundMessage,
-  searchSettings,
+  notFoundMessage = 'components.generic-list.messages.not-found',
+  searchSettings = defaultSearch,
   disableMargin,
   emptyListProps = null,
   columnLayout = null,
@@ -308,14 +308,14 @@ export const GenericList = ({
 
   const handleRowClick = e => {
     const item = (
-      e.target.children[nameColIndex].children[0].innerText ??
-      e.target.children[nameColIndex].innerText
+      e.detail.row.children[nameColIndex].children[0].innerText ??
+      e.detail.row.children[nameColIndex].innerText
     )?.trimEnd();
 
     const hasNamepace = namespaceColIndex !== -1;
     const itemNamespace = hasNamepace
-      ? e?.target?.children[namespaceColIndex]?.children[0]?.innerText ??
-        e?.target?.children[namespaceColIndex]?.innerText
+      ? e?.detail?.row.children[namespaceColIndex]?.children[0]?.innerText ??
+        e?.detail?.row.children[namespaceColIndex]?.innerText
       : '';
 
     const selectedEntry = entries.find(entry => {
@@ -347,7 +347,7 @@ export const GenericList = ({
         }
       }
       setEntrySelected(
-        selectedEntry?.metadata?.name ?? e.target.children[0].innerText,
+        selectedEntry?.metadata?.name ?? e.detail.row.children[0].innerText,
       );
       setEntrySelectedNamespace(selectedEntry?.metadata?.namespace ?? '');
       if (!enableColumnLayout) {
@@ -370,7 +370,7 @@ export const GenericList = ({
                 midColumn: {
                   resourceName:
                     selectedEntry?.metadata?.name ??
-                    e.target.children[0].innerText,
+                    e.detail.row.children[0].innerText,
                   resourceType: resourceType,
                   namespaceId: selectedEntry?.metadata?.namespace,
                 },
@@ -393,16 +393,14 @@ export const GenericList = ({
       title={title}
       headerActions={!headerActionsEmpty && headerActions}
       data-testid={testid}
-      disableMargin={disableMargin}
-      className={className}
+      disableMargin
+      className={`${className} ${disableMargin ? {} : 'sap-margin-small'}`}
     >
       <Table
         className={`ui5-generic-list ${
           hasDetailsView && filteredEntries.length ? 'cursor-pointer' : ''
         }`}
-        onMouseDown={() => {
-          window.getSelection().removeAllRanges();
-        }}
+        overflowMode="Popin"
         onRowClick={e => {
           const selection = window.getSelection().toString();
           if (!hasDetailsView || selection.length > 0) return;
@@ -414,9 +412,8 @@ export const GenericList = ({
             () => handleRowClick(e),
           );
         }}
-        columns={
+        headerRow={
           <HeaderRenderer
-            entries={entries}
             actions={actions}
             headerRenderer={headerRenderer}
             disableHiding={disableHiding}
@@ -486,12 +483,3 @@ GenericList.propTypes = {
   noHideFields: PropTypes.arrayOf(PropTypes.string),
   customRowClick: PropTypes.func,
 };
-
-GenericList.defaultProps = {
-  entries: [],
-  actions: [],
-  serverDataError: null,
-  serverDataLoading: false,
-  notFoundMessage: 'components.generic-list.messages.not-found',
-  searchSettings: defaultSearch,
-};

src/shared/components/GenericList/GenericList.scss

@@ -1,5 +1,6 @@
 .ui5-generic-list {
-  display: block;
+  display: initial;
+  padding-bottom: 0;
 
   .body-fallback {
     font-size: 18px;
@@ -8,6 +9,14 @@
     text-align: center;
     color: var(--sapList_TextColor);
   }
+
+  ui5-table-row:last-of-type {
+    border-bottom: none;
+  }
+
+  p {
+    margin: 0;
+  }
 }
 
 .cursor-pointer {

src/shared/components/GenericList/components.js

@@ -1,74 +1,65 @@
 import { useState } from 'react';
-import { Button, FlexBox, Icon, Text } from '@ui5/webcomponents-react';
-import { TableCell } from '@ui5/webcomponents-react-compat/dist/components/TableCell/index.js';
-import { TableColumn } from '@ui5/webcomponents-react-compat/dist/components/TableColumn/index.js';
-import { TableRow } from '@ui5/webcomponents-react-compat/dist/components/TableRow/index.js';
-
+import {
+  Button,
+  FlexBox,
+  Icon,
+  Text,
+  TableCell,
+  TableRow,
+  TableHeaderRow,
+  TableHeaderCell,
+} from '@ui5/webcomponents-react';
 import ListActions from 'shared/components/ListActions/ListActions';
 
 export const BodyFallback = ({ children }) => (
-  // TODO replace once new Table component is available in ui5-webcomponents-react
-  <tr>
-    <td colSpan="100%">
+  <TableRow>
+    <TableCell style={{ gridColumn: '1 / -1' }}>
       <div className="body-fallback">{children}</div>
-    </td>
-  </tr>
+    </TableCell>
+  </TableRow>
 );
 
 export const HeaderRenderer = ({
-  slot,
   actions,
   headerRenderer,
   disableHiding = true,
   displayArrow = false,
   noHideFields,
 }) => {
   let emptyColumn = null;
-  if (actions.length) {
+  if (actions?.length) {
     emptyColumn = (
-      <TableColumn
-        slot={slot}
-        key="actions-column"
-        aria-label="actions-column"
-        minWidth={850}
-      >
+      <TableHeaderCell key="actions-column" aria-label="actions-column">
         <Text />
-      </TableColumn>
+      </TableHeaderCell>
     );
   }
+
   const Header = (
-    <>
+    <TableHeaderRow slot="headerRow">
       {headerRenderer().map((h, index) => {
         return (
-          <TableColumn
-            slot={`${slot}-${index}`}
+          <TableHeaderCell
             key={typeof h === 'object' ? index : h}
-            minWidth={
-              Array.isArray(noHideFields) && noHideFields.length !== 0
-                ? noHideFields.find(field => field === h)
-                  ? ''
-                  : 850
-                : h === 'Popin'
-                ? 15000
-                : disableHiding
-                ? ''
-                : h !== 'Name' && h !== ''
-                ? 850
-                : ''
-            }
             aria-label={`${typeof h === 'object' ? index : h}-column`}
+            importance={h === 'Popin' ? -1 : 0}
+            minWidth={h === 'Popin' ? '100%' : null}
           >
-            <Text>{h}</Text>
-          </TableColumn>
+            {h === 'Popin' ? null : <Text>{h}</Text>}
+          </TableHeaderCell>
         );
       })}
       {emptyColumn}
       {displayArrow && (
-        <TableColumn slot={slot} key="arrow-column" aria-label="arrow-column">
+        <TableHeaderCell
+          key="arrow-column"
+          aria-label="arrow-column"
+          horizontalAlign="End"
+        >
           <Text />
-        </TableColumn>
+        </TableHeaderCell>
       )}
-    </>
+    </TableHeaderRow>
   );
 
   return Header;
@@ -133,7 +124,7 @@ const DefaultRowRenderer = ({
   );
 
   return (
-    <TableRow>
+    <TableRow interactive={hasDetailsView}>
       {cells}
       {!!actions.length && actionsCell}
       {displayArrow && (

src/shared/components/Link/Link.tsx

@@ -26,7 +26,8 @@ export const Link = ({
   const setLayout = useSetRecoilState(columnLayoutState);
   const navigate = useNavigate();
 
-  function handleOnlick(resetLayout: any, url: any) {
+  function handleOnlick(resetLayout: any, url: any, e: any) {
+    e.stopPropagation();
     if (resetLayout)
       setLayout({
         midColumn: null,
@@ -42,7 +43,7 @@ export const Link = ({
       design={design}
       className={className}
       data-testid={dataTestId}
-      onClick={() => (onClick ? onClick() : handleOnlick(resetLayout, url))}
+      onClick={e => (onClick ? onClick() : handleOnlick(resetLayout, url, e))}
     >
       {children}
     </UI5Link>

src/shared/components/PodTemplate/components.js

@@ -1,17 +1,14 @@
 import { useTranslation } from 'react-i18next';
 import { getPorts } from '../GetContainersPorts';
 import { useUrl } from 'hooks/useUrl';
+import { List, Label, Text, Title } from '@ui5/webcomponents-react';
 import {
-  List,
-  Label,
-  Text,
-  Title,
+  Table as UI5Table,
+  TableHeaderCell,
+  TableRow,
+  TableCell,
   ListItemGroup,
 } from '@ui5/webcomponents-react';
-import { Table as UI5Table } from '@ui5/webcomponents-react-compat/dist/components/Table/index.js';
-import { TableColumn } from '@ui5/webcomponents-react-compat/dist/components/TableColumn/index.js';
-import { TableRow } from '@ui5/webcomponents-react-compat/dist/components/TableRow/index.js';
-import { TableCell } from '@ui5/webcomponents-react-compat/dist/components/TableCell/index.js';
 import { Labels } from '../Labels/Labels';
 import { PodTemplateRow } from './PodTemplateRow';
 import { Link } from '../Link/Link';
@@ -24,9 +21,9 @@ function Table({ items, columns, rowRenderer }) {
   return (
     <UI5Table
       columns={columns.map(column => (
-        <TableColumn style={{ width: '50%' }}>
+        <TableHeaderCell style={{ width: '50%' }}>
           <Title level="H5">{column}</Title>
-        </TableColumn>
+        </TableHeaderCell>
       ))}
     >
       {items.map((item, index) => (

src/shared/components/ResourcesList/ResourcesList.js

@@ -404,7 +404,7 @@ export function ResourceListRenderer({
   );
 
   const headerRenderer = () => {
-    return customColumns?.map(col => col?.header || null);
+    return customColumns?.map(col => col?.header || null).filter(Boolean);
   };
 
   const rowRenderer = entry => {
@@ -420,7 +420,7 @@ export function ResourceListRenderer({
       return col?.value ? col.value(entry) : null;
     });
 
-    return rowColumns;
+    return rowColumns.filter(Boolean);
   };
 
   const handleShowCreate = () => {