fix(VariantManagement): fix delete button alignment & pop-in behavior (#7496)

Fixes #7476

Author: Lukas742

packages/main/src/components/VariantManagement/ManageViewsDialog.tsx

@@ -23,9 +23,11 @@ import { Bar } from '../../webComponents/Bar/index.js';
 import { Button } from '../../webComponents/Button/index.js';
 import type { DialogPropTypes } from '../../webComponents/Dialog/index.js';
 import { Dialog } from '../../webComponents/Dialog/index.js';
-import type { InputDomRef } from '../../webComponents/index.js';
-import { Icon, Input } from '../../webComponents/index.js';
+import { Icon } from '../../webComponents/Icon/index.js';
+import type { InputDomRef } from '../../webComponents/Input/index.js';
+import { Input } from '../../webComponents/Input/index.js';
 import { Table } from '../../webComponents/Table/index.js';
+import type { TablePropTypes } from '../../webComponents/Table/index.js';
 import { TableHeaderCell } from '../../webComponents/TableHeaderCell/index.js';
 import { TableHeaderRow } from '../../webComponents/TableHeaderRow/index.js';
 import { FlexBox } from '../FlexBox/index.js';
@@ -90,7 +92,7 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
   const headerRow = (
     <TableHeaderRow sticky>
       {showOnlyFavorites && <TableHeaderCell key="favorite-variant-item" />}
-      <TableHeaderCell importance={10} min-width="18rem">
+      <TableHeaderCell importance={10} minWidth="14rem">
         {viewHeaderText}
       </TableHeaderCell>
       {showShare && (
@@ -104,12 +106,11 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
         </TableHeaderCell>
       )}
       {showApplyAutomatically && (
-        <TableHeaderCell minWidth={hasApplyAutomaticallyText ? '25rem' : '5rem'}>
+        <TableHeaderCell minWidth={hasApplyAutomaticallyText ? '12.5rem' : '5rem'}>
           {applyAutomaticallyHeaderText}
         </TableHeaderCell>
       )}
-      {showCreatedBy && <TableHeaderCell minWidth="10rem">{createdByHeaderText}</TableHeaderCell>}
-      <TableHeaderCell importance={9} width="3rem" key="delete-variant-item" />
+      {showCreatedBy && <TableHeaderCell minWidth="7.125rem">{createdByHeaderText}</TableHeaderCell>}
     </TableHeaderRow>
   );
 
@@ -155,11 +156,12 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
     }
   };
   const deletedTableRows = useRef(new Set([]));
-  const handleDelete = (e) => {
-    deletedTableRows.current.add(e.target.dataset.children);
+  const handleDelete: TablePropTypes['onRowActionClick'] = (e) => {
+    const variantChild = e.detail.row.dataset.id;
+    deletedTableRows.current.add(variantChild);
     setChildrenProps((prev) =>
       prev
-        .filter((item) => item.children !== e.target.dataset.children)
+        .filter((item) => item.children !== variantChild)
         .map((item) => {
           if (Object.prototype.hasOwnProperty.call(changedTableRows.current, item.children)) {
             return { ...item, ...changedTableRows.current[item.children] };
@@ -260,7 +262,12 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
         />
       }
     >
-      <Table headerRow={headerRow} role="table" overflowMode={TableOverflowMode.Popin}>
+      <Table
+        headerRow={headerRow}
+        overflowMode={TableOverflowMode.Popin}
+        rowActionCount={1}
+        onRowActionClick={handleDelete}
+      >
         {filteredProps.map((itemProps) => {
           return (
             <ManageViewsTableRows
@@ -270,7 +277,6 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
               changedVariantNames={changedVariantNames}
               variantNames={variantNames}
               handleRowChange={handleTableRowChange}
-              handleDelete={handleDelete}
               defaultView={defaultView}
               setDefaultView={setDefaultView}
               showShare={showShare}

packages/main/src/components/VariantManagement/ManageViewsTableRows.tsx

@@ -1,4 +1,3 @@
-import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import IconMode from '@ui5/webcomponents/dist/types/IconMode.js';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import declineIcon from '@ui5/webcomponents-icons/dist/decline.js';
@@ -20,14 +19,19 @@ import {
   VIEW,
 } from '../../i18n/i18n-defaults.js';
 import { trimAndRemoveSpaces } from '../../internal/utils.js';
-import { Button, CheckBox, Icon, Input, RadioButton, TableCell, TableRow } from '../../webComponents/index.js';
+import { CheckBox } from '../../webComponents/CheckBox/index.js';
+import { Icon } from '../../webComponents/Icon/index.js';
+import { Input } from '../../webComponents/Input/index.js';
+import { RadioButton } from '../../webComponents/RadioButton/index.js';
+import { TableCell } from '../../webComponents/TableCell/index.js';
+import { TableRow } from '../../webComponents/TableRow/index.js';
+import { TableRowAction } from '../../webComponents/TableRowAction/index.js';
 import { Text } from '../../webComponents/Text/index.js';
 import type { VariantItemPropTypes } from './VariantItem.js';
 
 interface ManageViewsTableRowsProps extends Partial<VariantItemPropTypes> {
   variantNames: string[];
   handleRowChange: (e: Event, payload: any) => void;
-  handleDelete: (e: any) => void;
   defaultView: string;
   setDefaultView: (view: string) => void;
   showShare: boolean;
@@ -46,7 +50,6 @@ export const ManageViewsTableRows = (props: ManageViewsTableRowsProps) => {
     changedVariantNames,
     setChangedVariantNames,
     handleRowChange,
-    handleDelete,
     defaultView,
     setDefaultView,
     showShare,
@@ -170,7 +173,11 @@ export const ManageViewsTableRows = (props: ManageViewsTableRowsProps) => {
     );
   };
   return (
-    <TableRow data-id={children} key={`${children}`}>
+    <TableRow
+      data-id={children}
+      key={`${children}`}
+      actions={!(hideDelete ?? global) && <TableRowAction icon={declineIcon} text={a11yDeleteText} />}
+    >
       {showOnlyFavorites && (
         <TableCell>
           {isDefault ? (
@@ -213,18 +220,6 @@ export const ManageViewsTableRows = (props: ManageViewsTableRowsProps) => {
           <Text>{author}</Text>
         </TableCell>
       )}
-      <TableCell>
-        {!(hideDelete ?? global) && (
-          <Button
-            tooltip={a11yDeleteText}
-            accessibleName={a11yDeleteText}
-            icon={declineIcon}
-            design={ButtonDesign.Transparent}
-            onClick={handleDelete}
-            data-children={children}
-          />
-        )}
-      </TableCell>
     </TableRow>
   );
 };

packages/main/src/components/VariantManagement/VariantManagement.cy.tsx

@@ -667,11 +667,12 @@ describe('VariantManagement', () => {
     cy.get('[icon="navigation-down-arrow"]').click();
     cy.findByText('Manage').click();
 
-    cy.get('[ui5-button][tooltip="Delete View"]').each(($btn) => {
-      if ($btn[0].getAttribute('data-children') !== 'VariantItem 3') {
-        cy.wrap($btn).click();
+    cy.get('[ui5-table-row-action][text="Delete View"]').each(($action) => {
+      if ($action.parent().attr('data-id') !== 'VariantItem 3') {
+        cy.wrap($action).click();
       }
     });
+
     cy.findByText('Save').click();
     cy.get('@saveView').should('have.been.calledOnce');
     cy.findByText(

packages/main/src/components/VariantManagement/index.tsx

@@ -251,6 +251,7 @@ const VariantManagement = forwardRef<HTMLDivElement, VariantManagementPropTypes>
           }
           if (deletedRows.has(castChild.props.children)) {
             callbackProperties.deletedVariants.push(castChild.props);
+            deletedRows.delete(castChild.props.children);
             return false;
           }
           if (Object.keys(updatedProps).length > 0) {

packages/main/src/webComponents/Table/Table.stories.tsx

@@ -297,8 +297,8 @@ export const withRowActions: Story = {
             key={`${row.name}-${row.age}`}
             actions={
               <>
-                <TableRowAction icon={editIcon}>Edit</TableRowAction>
-                <TableRowAction icon={saveIcon}>Save</TableRowAction>
+                <TableRowAction icon={editIcon} text="Edit" />
+                <TableRowAction icon={saveIcon} text="Save" />
                 <TableRowActionNavigation interactive={!!(index % 2)} />
               </>
             }