fix(VariantManagement): update "Manage Views" dialog to latest specs (#8080)

Implements focus behavior when deleting rows and adds a
IllustratedMessage when no rows (views) are defined.

Fixes #8079

Author: Lukas742

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

@@ -2,7 +2,10 @@ import BarDesign from '@ui5/webcomponents/dist/types/BarDesign.js';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import TableOverflowMode from '@ui5/webcomponents/dist/types/TableOverflowMode.js';
 import { getScopedVarName } from '@ui5/webcomponents-base/dist/CustomElementsScope.js';
+import { isPhone as getIsPhone } from '@ui5/webcomponents-base/dist/Device.js';
+import NoEntriesIllu from '@ui5/webcomponents-fiori/dist/illustrations/NoEntries.js';
 import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
+import type { Ui5DomRef } from '@ui5/webcomponents-react-base';
 import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import type { MouseEventHandler, ReactElement } from 'react';
 import { Children, isValidElement, useEffect, useId, useRef, useState } from 'react';
@@ -13,6 +16,8 @@ import {
   CANCEL,
   CREATED_BY,
   DEFAULT,
+  NO_VIEWS_DEFINED_TITLE,
+  NO_VIEWS_DEFINED_SUBTITLE,
   MANAGE_VIEWS,
   SAVE,
   SEARCH,
@@ -22,15 +27,18 @@ import {
 import type { CommonProps } from '../../types/CommonProps.js';
 import { Bar } from '../../webComponents/Bar/index.js';
 import { Button } from '../../webComponents/Button/index.js';
+import type { ButtonDomRef } from '../../webComponents/Button/index.js';
 import type { DialogPropTypes } from '../../webComponents/Dialog/index.js';
 import { Dialog } from '../../webComponents/Dialog/index.js';
 import { Icon } from '../../webComponents/Icon/index.js';
+import { IllustratedMessage } from '../../webComponents/IllustratedMessage/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 type { TableDomRef, TablePropTypes } from '../../webComponents/Table/index.js';
 import { TableHeaderCell } from '../../webComponents/TableHeaderCell/index.js';
 import { TableHeaderRow } from '../../webComponents/TableHeaderRow/index.js';
+import type { TableRowDomRef } from '../../webComponents/TableRow/index.js';
 import { FlexBox } from '../FlexBox/index.js';
 import type { VariantItemPropTypes } from '../VariantItem/index.js';
 import { classNames, styleData } from './ManageViewsDialog.module.css.js';
@@ -59,6 +67,8 @@ export interface ManageViewsDialogPropTypes {
   onManageViewsCancel?: VariantManagementPropTypes['onManageViewsCancel'];
 }
 
+const isPhone = getIsPhone();
+
 export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
   const {
     children,
@@ -74,6 +84,8 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
   } = props;
   const uniqueId = useId();
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
+  const tableRef = useRef<TableDomRef>(null);
+  const cancelBtnRef = useRef<ButtonDomRef>(null);
   const cancelText = i18nBundle.getText(CANCEL);
   const saveText = i18nBundle.getText(SAVE);
   const viewHeaderText = i18nBundle.getText(VIEW);
@@ -158,18 +170,21 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
   };
   const deletedTableRows = useRef(new Set([]));
   const handleDelete: TablePropTypes['onRowActionClick'] = (e) => {
-    const variantChild = e.detail.row.dataset.id;
+    const { nextElementSibling, previousElementSibling, dataset } = e.detail.row;
+    const variantChild = dataset.id;
+
     deletedTableRows.current.add(variantChild);
-    setChildrenProps((prev) =>
-      prev
-        .filter((item) => item.children !== variantChild)
-        .map((item) => {
-          if (Object.prototype.hasOwnProperty.call(changedTableRows.current, item.children)) {
-            return { ...item, ...changedTableRows.current[item.children] };
-          }
-          return item;
-        }),
-    );
+    let nextFocusElement: Ui5DomRef | null = null;
+    if (nextElementSibling?.hasAttribute('ui5-table-row')) {
+      nextFocusElement = nextElementSibling as TableRowDomRef;
+    } else if (previousElementSibling?.hasAttribute('ui5-table-row')) {
+      nextFocusElement = previousElementSibling as TableRowDomRef;
+    } else {
+      nextFocusElement = cancelBtnRef.current;
+    }
+    void nextFocusElement?.focus();
+
+    setChildrenProps((prev) => prev.filter((item) => item.children !== variantChild));
   };
 
   const handleSave = (e) => {
@@ -222,6 +237,7 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
   return (
     <Dialog
       open
+      stretch={isPhone}
       className={classNames.manageViewsDialog}
       data-component-name="VariantManagementManageViewsDialog"
       onClose={onAfterClose}
@@ -255,7 +271,7 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
               <Button design={ButtonDesign.Emphasized} onClick={handleSave}>
                 {saveText}
               </Button>
-              <Button design={ButtonDesign.Transparent} onClick={handleCancel}>
+              <Button design={ButtonDesign.Transparent} onClick={handleCancel} ref={cancelBtnRef}>
                 {cancelText}
               </Button>
             </>
@@ -264,10 +280,19 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
       }
     >
       <Table
+        ref={tableRef}
         headerRow={headerRow}
         overflowMode={TableOverflowMode.Popin}
         rowActionCount={1}
         onRowActionClick={handleDelete}
+        noData={
+          <IllustratedMessage
+            name={NoEntriesIllu}
+            design={'Medium'}
+            titleText={i18nBundle.getText(NO_VIEWS_DEFINED_TITLE)}
+            subtitleText={i18nBundle.getText(NO_VIEWS_DEFINED_SUBTITLE)}
+          />
+        }
       >
         {filteredProps.map((itemProps) => {
           return (

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

@@ -666,8 +666,9 @@ describe('VariantManagement', () => {
 
     cy.get('[icon="navigation-down-arrow"]').click();
     cy.findByText('Manage').click();
+    cy.get('[ui5-table-row-action][text="Delete View"]').as('deleteActions');
 
-    cy.get('[ui5-table-row-action][text="Delete View"]').each(($action) => {
+    cy.get('@deleteActions').each(($action) => {
       if ($action.parent().attr('data-id') !== 'VariantItem 3') {
         cy.wrap($action).click();
       }
@@ -678,6 +679,21 @@ describe('VariantManagement', () => {
     cy.findByText(
       '{"nativeDetail":1,"deletedVariants":[{"children":"VariantItem 1"},{"selected":true,"children":"VariantItem 2"}],"prevVariants":[{"children":"VariantItem 1"},{"selected":true,"children":"VariantItem 2"},{"isDefault":true,"children":"VariantItem 3"}],"updatedVariants":[],"variants":[{"isDefault":true,"children":"VariantItem 3"}]}',
     );
+
+    cy.get('[icon="navigation-down-arrow"]').click();
+    cy.findByText('Manage').click();
+
+    cy.get('@deleteActions').first().click();
+    cy.focused().should('have.attr', 'ui5-table-row');
+    cy.focused().should('have.attr', 'data-id', 'VariantItem 2');
+
+    cy.get('@deleteActions').last().click();
+    cy.focused().should('have.attr', 'ui5-table-row');
+    cy.focused().should('have.attr', 'data-id', 'VariantItem 2');
+
+    // no other rows remaining
+    cy.get('@deleteActions').first().click();
+    cy.findByText('Cancel').should('be.focused');
   });
 
   it('Manage Views input validation', () => {

packages/main/src/i18n/messagebundle.properties

@@ -1,6 +1,6 @@
 #__ldi.translation.uuid=75c9c970-7315-49ab-bdac-9584ee66d3b8
 
-# https://openui5.hana.ondemand.com/topic/831039835e7c4da3a8a0b49567573afe
+# https://sdk.openui5.org/#/topic/831039835e7c4da3a8a0b49567573afe/
 
 #XTXT
 TARGET=Target
@@ -204,6 +204,12 @@ SELECT_VIEW=Select View
 #XACT: Label for the search variant input inside the VariantManagement Manage Views table
 SEARCH_VARIANT=Search variant
 
+#XHED: Heading text for the IllustratedMessage component in the VariantManagement Manage Views dialog when no rows (views) are defined.
+NO_VIEWS_DEFINED_TITLE=No views available
+
+#XMSG: Subheading text for the IllustratedMessage component in the Variant Management Manage Views dialog when no rows (views) are defined.
+NO_VIEWS_DEFINED_SUBTITLE=Please create some views.
+
 #XBUT: Used in the MessageView component for filtering message types, should show messages of all types when selected
 ALL=All