fix(AnalyticalTable): adjust NoDataComponent height to "Auto" mode height (#8047)

Fixes #8046

Author: Lukas742

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

@@ -1,6 +1,10 @@
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
+import NoDataIllustration from '@ui5/webcomponents-fiori/dist/illustrations/NoData.js';
+import NoFilterResults from '@ui5/webcomponents-fiori/dist/illustrations/NoFilterResults.js';
 import paperPlaneIcon from '@ui5/webcomponents-icons/paper-plane.js';
+import { isIOS, isMac } from '@ui5/webcomponents-react-base/Device';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/ThemingParameters';
+import type { ComponentClass, ComponentProps } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState, version as reactVersion } from 'react';
 import type {
   AnalyticalTableCellInstance,
@@ -53,6 +57,7 @@ import {
   FileUploader,
   IndicationColor,
   Icon,
+  IllustratedMessage,
   Input,
   MessageViewButton,
   MultiComboBox,
@@ -80,7 +85,6 @@ import { useRowDisableSelection } from './pluginHooks/useRowDisableSelection';
 import { cssVarToRgb, cypressPassThroughTestsFactory } from '@/cypress/support/utils';
 import type { RowType } from '@/packages/main/src/components/AnalyticalTable/types/index.js';
 import { getUi5TagWithSuffix } from '@/packages/main/src/internal/utils.js';
-import { isIOS, isMac } from '@ui5/webcomponents-react-base/Device';
 
 const canUseVoiceOver = isIOS() || isMac();
 
@@ -1859,6 +1863,70 @@ describe('AnalyticalTable', () => {
     cy.findByText('No data found. Try adjusting the filter settings.').should('be.visible');
   });
 
+  it('NoDataComponent', () => {
+    const NoDataComponent = (
+      props: ComponentProps<Exclude<AnalyticalTablePropTypes['NoDataComponent'], ComponentClass<any>>>,
+    ) => {
+      return props.noDataReason === 'Filtered' ? (
+        <IllustratedMessage role={props.accessibleRole} name={NoFilterResults} />
+      ) : (
+        <IllustratedMessage role={props.accessibleRole} name={NoDataIllustration} />
+      );
+    };
+
+    cy.mount(<AnalyticalTable data={data} columns={columns} NoDataComponent={NoDataComponent} />);
+    cy.get('[data-component-name="AnalyticalTableBody"]').should('have.attr', 'style').and('include', 'height: 220px');
+    cy.mount(<AnalyticalTable data={[]} columns={columns} NoDataComponent={NoDataComponent} />);
+    cy.get('[data-component-name="AnalyticalTableNoDataContainer"]')
+      .should('have.attr', 'style')
+      .and('include', 'height: 220px');
+
+    cy.mount(
+      <div style={{ height: '400px' }}>
+        <AnalyticalTable
+          data={[...data, ...data]}
+          columns={columns}
+          NoDataComponent={NoDataComponent}
+          visibleRowCountMode="Auto"
+        />
+      </div>,
+    );
+    cy.get('[data-component-name="AnalyticalTableBody"]').should('have.attr', 'style').and('include', 'height: 352px');
+    cy.mount(
+      <div style={{ height: '400px' }}>
+        <AnalyticalTable data={[]} columns={columns} NoDataComponent={NoDataComponent} visibleRowCountMode="Auto" />
+      </div>,
+    );
+    cy.get('[data-component-name="AnalyticalTableNoDataContainer"]')
+      .should('have.attr', 'style')
+      .and('include', 'height: 352px');
+
+    cy.mount(
+      <div style={{ height: '400px' }}>
+        <AnalyticalTable
+          data={data}
+          columns={columns}
+          NoDataComponent={NoDataComponent}
+          visibleRowCountMode="AutoWithEmptyRows"
+        />
+      </div>,
+    );
+    cy.get('[data-component-name="AnalyticalTableBody"]').should('have.attr', 'style').and('include', 'height: 352px');
+    cy.mount(
+      <div style={{ height: '400px' }}>
+        <AnalyticalTable
+          data={[]}
+          columns={columns}
+          NoDataComponent={NoDataComponent}
+          visibleRowCountMode="AutoWithEmptyRows"
+        />
+      </div>,
+    );
+    cy.get('[data-component-name="AnalyticalTableNoDataContainer"]')
+      .should('have.attr', 'style')
+      .and('include', 'height: 352px');
+  });
+
   it('Alternate Row Color', () => {
     const standardRowColor = cssVarToRgb(ThemingParameters.sapList_Background);
     const alternatingRowColor = cssVarToRgb(ThemingParameters.sapList_AlternatingBackground);

packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx

@@ -627,6 +627,8 @@ export const NoData: Story = {
       NoDataComponent: NoDataComponent,
     };
 
+    const isAutoRowCount = args.visibleRowCountMode?.startsWith('Auto');
+
     return (
       <>
         <SegmentedButton onSelectionChange={handleChange} accessibleName="Select data view mode">
@@ -645,11 +647,15 @@ export const NoData: Story = {
           Table filtered
         </ToggleButton>
         {context.viewMode === 'story' ? (
-          <AnalyticalTable {...tableProps} />
+          <div style={{ height: isAutoRowCount ? '300px' : 'auto' }}>
+            <AnalyticalTable {...tableProps} />
+          </div>
         ) : (
           <>
             <hr />
-            <ToggleableTable {...tableProps} />
+            <div style={{ height: isAutoRowCount ? '300px' : 'auto' }}>
+              <ToggleableTable {...tableProps} />
+            </div>
           </>
         )}
       </>

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

@@ -579,7 +579,8 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
       return tableState.bodyHeight;
     }
     let rowNum;
-    if (visibleRowCountMode === AnalyticalTableVisibleRowCountMode.AutoWithEmptyRows) {
+    const noDataAuto = !rows.length && visibleRowCountMode.startsWith('Auto');
+    if (visibleRowCountMode === AnalyticalTableVisibleRowCountMode.AutoWithEmptyRows || noDataAuto) {
       rowNum = internalVisibleRowCount;
     } else {
       rowNum = rows.length < internalVisibleRowCount ? Math.max(rows.length, minRows) : internalVisibleRowCount;