refactor(AnalyticalTable): remove deprecated props & enums (#6021)

BREAKING CHANGE: The `TableScaleWidthMode` enum has been removed, please use `AnalyticalTableScaleWidthMode` instead. BREAKING CHANGE: The `TableSelectionBehavior` enum has been removed, please use `AnalyticalTableSelectionBehavior` instead. BREAKING CHANGE: The `TableSelectionMode ` enum has been removed, please use `AnalyticalTableSelectionMode` instead. BREAKING CHANGE: The `TableVisibleRowCountMode` enum has been removed, please use `AnalyticalTableVisibleRowCountMode ` instead. BREAKING CHANGE: The `alwaysShowSubComponent ` prop has been removed, please use `subComponentsBehavior` instead. BREAKING CHANGE: The default value (`true`) of the `sortable` prop has been removed, it is now required to explicitly set this prop, if the table should be sortable. BREAKING CHANGE: The `canReorder` [column property](https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-analyticaltable--docs#column-properties) has been removed, please use `disableDragAndDrop` instead.
SAP · Jul 8, 2024 · ca13875 · ca13875
1 parent 4c8043a
commit ca13875
Show file tree

Hide file tree

Showing 14 changed files with 109 additions and 134 deletions.
diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx
@@ -403,7 +403,7 @@ Please use the following components instead:
 - `headerContent` now only accepts the `ObjectPageHeader` component.
 - `headerTitle` now only accepts the `ObjectPageTitle` component.
 
-**Renamed props:**
+**Renamed Props:**
 
 - `a11yConfig.dynamicPageAnchorBar` has been renamed to `a11yConfig.objectPageAnchorBar`
 
@@ -470,6 +470,54 @@ function MyComponent() {
 }
 ```
 
+### AnalyticalTable
+
+**Renamed or Changed Props:**
+
+- `alwaysShowSubComponent` has been removed, please use `subComponentsBehavior` with `AnalyticalTableSubComponentsBehavior.Visibe` instead.
+- The default value of `sortable` (`true`) has been removed. To allow sorting in your table please set `sorting` to `true` yourself.
+
+**Renamed Enums:**
+
+Only the names of the following enums have changed, so it's sufficient to replace them with the new name.
+
+- `TableScaleWidthMode` is now `AnalyticalTableScaleWidthMode`
+- `TableSelectionBehavior` is now `AnalyticalTableSelectionBehavior`
+- `TableSelectionMode` is now `AnalyticalTableSelectionMode`
+- `TableVisibleRowCountMode` is now `AnalyticalTableVisibleRowCountMode`
+
+**[Column Properties](https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-analyticaltable--docs#column-properties) Changes**
+
+- `canReorder` has been removed, please use `disableDragAndDrop` instead.
+
+```jsx
+// v1
+const columns = [{ ...otherProperties, canReorder: false }];
+
+<AnalyticalTable
+  {...otherProps}
+  columns={columns}
+  alwaysShowSubComponent
+  scaleWidthMode={TableScaleWidthMode.Grow}
+  selectionBehavior={TableSelectionBehavior.Row}
+  selectionMode={TableSelectionMode.MultiSelect}
+  visibleRowCountMode={TableVisibleRowCountMode.Interactive}
+/>;
+
+// v2
+const columns = [{ ...otherProps, disableDragAndDrop: true }];
+
+<AnalyticalTable
+  {...otherProps}
+  columns={columns}
+  subComponentsBehavior={AnalyticalTableSubComponentsBehavior.Visible}
+  scaleWidthMode={AnalyticalTableScaleWidthMode.Grow}
+  selectionBehavior={AnalyticalTableSelectionBehavior.Row}
+  selectionMode={AnalyticalTableSelectionMode.MultiSelect}
+  visibleRowCountMode={AnalyticalTableVisibleRowCountMode.Interactive}
+/>;
+```
+
 ### Expandable Text
 
 The prop `portalContainer` has been removed as it is no longer needed due to the [popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) which is now used in the UI5 Web Components.

diff --git a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
@@ -16,6 +16,7 @@
       },
       "removedProps": ["portalContainer"]
     },
+    "AnalyticalTable": {},
     "Avatar": {},
     "Badge": {
       "newComponent": "Tag"
@@ -596,6 +597,9 @@
   "renamedEnums": {
     "MessageBoxActions": "MessageBoxAction",
     "MessageBoxTypes": "MessageBoxType",
+    "TableScaleWidthMode": "AnalyticalTableScaleWidthMode",
+    "TableSelectionBehavior": "AnalyticalTableSelectionBehavior",
+    "TableVisibleRowCountMode": "AnalyticalTableVisibleRowCountMode",
     "Themes": "Theme"
   },
   "enumProperties": {

diff --git a/packages/cli/src/scripts/codemod/transforms/v2/main.cts b/packages/cli/src/scripts/codemod/transforms/v2/main.cts
@@ -54,7 +54,6 @@ function extractValueFromProp(
   const prop = j(el).find(j.JSXAttribute, { name: { name: propName } });
 
   if (prop.size()) {
-    const s = prop.get();
     const stringLiteral = prop.find(j.StringLiteral);
     const numericLiteral = prop.find(j.NumericLiteral);
     prop.remove();
@@ -112,6 +111,39 @@ export default function transform(file: FileInfo, api: API, options?: Options):
       });
     }
 
+    if (componentName === 'AnalyticalTable') {
+      jsxElements.forEach((el) => {
+        const alwaysShowSubComponent = j(el).find(j.JSXAttribute, { name: { name: 'alwaysShowSubComponent' } });
+        if (alwaysShowSubComponent.size() > 0) {
+          const attr = alwaysShowSubComponent.get();
+
+          if (
+            attr.value.value === null ||
+            (attr.value.value?.type === 'JSXAttribute' && attr.value.value === true) ||
+            (attr.value.value?.type === 'JSXExpressionContainer' && attr.value.value.expression.value === true)
+          ) {
+            j(el)
+              .find(j.JSXOpeningElement)
+              .get()
+              .value.attributes.push(
+                j.jsxAttribute(j.jsxIdentifier('subComponentsBehavior'), j.stringLiteral('Visible'))
+              );
+          }
+          alwaysShowSubComponent.remove();
+          isDirty = true;
+        }
+
+        const sortable = j(el).find(j.JSXAttribute, { name: { name: 'sortable' } });
+        if (sortable.size() === 0) {
+          j(el)
+            .find(j.JSXOpeningElement)
+            .get()
+            .value.attributes.push(j.jsxAttribute(j.jsxIdentifier('sortable'), null));
+          isDirty = true;
+        }
+      });
+    }
+
     // Special Handling for logic inversions, etc.
     if (componentName === 'Button') {
       jsxElements.forEach((el) => {

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -92,9 +92,15 @@ describe('AnalyticalTable', () => {
   it('sorting', () => {
     const sort = cy.spy().as('onSortSpy');
     cy.mount(<AnalyticalTable data={data} columns={columns} onSort={sort} />);
+
+    cy.findByText('Name').click();
+    cy.get('[ui5-popover]').should('not.exist');
+
+    cy.mount(<AnalyticalTable data={data} columns={columns} onSort={sort} sortable />);
     cy.get('[aria-rowindex="3"] > [aria-colindex="1"]').should('text', 'X');
 
     cy.findByText('Name').click();
+    cy.get('[ui5-popover]').should('be.visible');
     cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
     cy.get('@onSortSpy').should('have.been.calledWithMatch', {
       detail: { column: { id: 'name' }, sortDirection: 'asc' }
@@ -752,7 +758,7 @@ describe('AnalyticalTable', () => {
     const GroupBySelectTable = (props: PropTypes) => {
       const { onRowSelect } = props;
       const [relevantPayload, setRelevantPayload] = useState<Record<string, any>>({});
-      const tableInstance = useRef<Record<string, any>>();
+      const tableInstance = useRef<Record<string, any>>(null);
 
       useEffect(() => {
         if (tableInstance.current) {
@@ -804,7 +810,7 @@ describe('AnalyticalTable', () => {
     cy.findByTestId('isSelected').should('have.text', 'true');
 
     cy.findByText('Friend Name').click();
-    cy.findByText('Group').click();
+    cy.findByText('Group').realClick();
     cy.get('[aria-rowindex="7"] > [aria-colindex="3"] > [title="Expand Node"] > [ui5-icon]').click();
 
     cy.findByText('25').click();
@@ -1456,7 +1462,7 @@ describe('AnalyticalTable', () => {
   it('Alternate Row Color', () => {
     const standardRowColor = cssVarToRgb(ThemingParameters.sapList_Background);
     const alternatingRowColor = cssVarToRgb(ThemingParameters.sapList_AlternatingBackground);
-    cy.mount(<AnalyticalTable data={data} columns={columns} alternateRowColor minRows={7} />);
+    cy.mount(<AnalyticalTable data={data} columns={columns} alternateRowColor minRows={7} sortable />);
     cy.get('[data-component-name="AnalyticalTableContainer"]').should('have.css', 'background-color', standardRowColor);
 
     function testAlternateRowColor() {
@@ -1779,6 +1785,8 @@ describe('AnalyticalTable', () => {
       }
     ];
     cy.mount(<AnalyticalTable data={data} columns={columns} />);
+    cy.get('[data-column-id="name"]').should('not.have.attr', 'aria-haspopup', 'menu').click();
+    cy.mount(<AnalyticalTable data={data} columns={columns} sortable />);
     cy.get('[data-column-id="name"]').should('have.attr', 'aria-haspopup', 'menu').click();
     cy.get('[ui5-popover]').should('be.visible');
     cy.get('[data-column-id="age"]').should('not.have.attr', 'aria-haspopup');
@@ -2193,7 +2201,7 @@ describe('AnalyticalTable', () => {
 
   it("Expandable: don't scroll when expanded/collapsed", () => {
     const TestComp = () => {
-      const tableInstanceRef = useRef();
+      const tableInstanceRef = useRef<{ toggleRowExpanded?: (e: string) => void }>({});
       return (
         <>
           <button
@@ -2236,7 +2244,7 @@ describe('AnalyticalTable', () => {
 
     cy.mount(<AnalyticalTable data={[...data, ...data]} columns={columns} visibleRows={5} groupable />);
     cy.findByText('Name').click();
-    cy.findByText('Group').click();
+    cy.findByText('Group').realClick();
     cy.findByText('A (2)').trigger('keydown', {
       key: 'Enter'
     });
@@ -2539,7 +2547,7 @@ describe('AnalyticalTable', () => {
     cy.findByText('Aggregated').should('not.exist');
 
     cy.findByText('Name').click();
-    cy.findByText('Group').click();
+    cy.findByText('Group').realClick();
     cy.findByText('Simon').should('be.visible').should('have.length', 1);
     cy.findAllByText('Aggregated').should('be.visible').should('have.length', 2);
     cy.get('[ui5-icon][name="navigation-right-arrow"]').should('be.visible').should('have.length', 2);

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx
@@ -356,7 +356,7 @@ const TableWithSubcomponents = (props) => {
       data={props.data}
       columns={props.columns}
       renderRowSubComponent={renderRowSubComponent}
-      alwaysShowSubComponent={false} //default value
+      subComponentsBehavior={AnalyticalTableSubComponentsBehavior.Expandable} //default value
     />
   );
 };

diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
@@ -32,7 +32,7 @@
 }
 
 .text {
-  cursor: pointer;
+  cursor: inherit;
   color: inherit;
   font-family: inherit;
   width: 100%;

diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
@@ -82,7 +82,7 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
               onSort={onSort}
               onGroupBy={onGroupByChanged}
               headerTooltip={column.headerTooltip}
-              isDraggable={(column.canReorder || !column.disableDragAndDrop) && !resizeInfo.isResizingColumn}
+              isDraggable={!column.disableDragAndDrop && !resizeInfo.isResizingColumn}
               virtualColumn={virtualColumn}
               columnVirtualizer={columnVirtualizer}
               isRtl={isRtl}

diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -3,7 +3,6 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
 import {
   debounce,
-  deprecationNotice,
   enrichEventWithDetails,
   useI18nBundle,
   useIsomorphicId,
@@ -151,7 +150,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     selectionBehavior = AnalyticalTableSelectionBehavior.Row,
     selectionMode = AnalyticalTableSelectionMode.None,
     showOverlay,
-    sortable = true,
+    sortable,
     style,
     subComponentsBehavior = AnalyticalTableSubComponentsBehavior.Expandable,
     subRowsKey = 'subRows',
@@ -172,25 +171,14 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     onAutoResize,
     NoDataComponent = DefaultNoDataComponent,
     additionalEmptyRowsCount = 0,
-    alwaysShowSubComponent: _omit,
     ...rest
   } = props;
 
   useStylesheet(styleData, AnalyticalTable.displayName);
 
-  useEffect(() => {
-    if (props.alwaysShowSubComponent != undefined) {
-      deprecationNotice(
-        'alwaysShowSubComponent',
-        '`alwaysShowSubComponent` is deprecated. Please use `subComponentsBehavior` instead!'
-      );
-    }
-  }, [props.alwaysShowSubComponent]);
-
   const alwaysShowSubComponent =
     subComponentsBehavior === AnalyticalTableSubComponentsBehavior.Visible ||
-    subComponentsBehavior === AnalyticalTableSubComponentsBehavior.IncludeHeight ||
-    props.alwaysShowSubComponent;
+    subComponentsBehavior === AnalyticalTableSubComponentsBehavior.IncludeHeight;
 
   const uniqueId = useIsomorphicId();
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');

diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
@@ -9,10 +9,6 @@ import type {
   AnalyticalTableSubComponentsBehavior,
   AnalyticalTableVisibleRowCountMode,
   IndicationColor,
-  TableScaleWidthMode,
-  TableSelectionBehavior,
-  TableSelectionMode,
-  TableVisibleRowCountMode,
   TextAlign,
   VerticalAlign
 } from '../../../enums/index.js';
@@ -301,14 +297,6 @@ export interface AnalyticalTableColumnDefinition {
   PopInHeader?: string | ComponentType<any> | ((props?: any) => ReactNode);
 
   //use useDragAndDrop
-  /**
-   * Defines if the column is reorderable by dragging and dropping columns.
-   *
-   * Defaults to: `true`
-   *
-   * @deprecated please use `disableDragAndDrop` instead.
-   */
-  canReorder?: boolean;
   /**
    * Defines if the column is reorderable by dragging and dropping columns.
    */
@@ -392,10 +380,7 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    *
    * __Note:__ When `"Auto"` or `"AutoWithEmptyRows"` is enabled, we recommend using a fixed height for the parent container.
    */
-  visibleRowCountMode?:
-    | AnalyticalTableVisibleRowCountMode
-    | keyof typeof AnalyticalTableVisibleRowCountMode
-    | TableVisibleRowCountMode;
+  visibleRowCountMode?: AnalyticalTableVisibleRowCountMode | keyof typeof AnalyticalTableVisibleRowCountMode;
   /**
    * Specifies the number of additional empty rows added to the bottom of a table that is normally __non__ scrollable.
    * Use this prop if you want to ensure that the table is scrollable.
@@ -518,10 +503,7 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    *
    * __Default:__ `"Row"`
    */
-  selectionBehavior?:
-    | AnalyticalTableSelectionBehavior
-    | keyof typeof AnalyticalTableSelectionBehavior
-    | TableSelectionBehavior;
+  selectionBehavior?: AnalyticalTableSelectionBehavior | keyof typeof AnalyticalTableSelectionBehavior;
   /**
    * Defines the `SelectionMode` of the table.
    *
@@ -531,7 +513,7 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    *
    * @default `"None"`
    */
-  selectionMode?: AnalyticalTableSelectionMode | keyof typeof AnalyticalTableSelectionMode | TableSelectionMode;
+  selectionMode?: AnalyticalTableSelectionMode | keyof typeof AnalyticalTableSelectionMode;
 
   /**
    * Defines the column growing behaviour. Possible Values:
@@ -547,7 +529,7 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    * @default `"Default"`
    *
    */
-  scaleWidthMode?: AnalyticalTableScaleWidthMode | keyof typeof AnalyticalTableScaleWidthMode | TableScaleWidthMode;
+  scaleWidthMode?: AnalyticalTableScaleWidthMode | keyof typeof AnalyticalTableScaleWidthMode;
   /**
    * Defines the number of the CSS `scaleX(sx: number)` function. `sx` is representing the abscissa of the scaling vector.
    */
@@ -620,12 +602,6 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    * __Note:__ Subcomponents can affect performance, especially when used in a tree table (`isTreeTable={true}`). If you face performance issues, please try memoizing your subcomponent.
    */
   renderRowSubComponent?: (row?: any) => ReactNode;
-  /**
-   * Defines whether a subcomponent should be rendered as expandable container or directly at the bottom of the row.
-   *
-   * @deprecated please use `subComponentsBehavior` instead.
-   */
-  alwaysShowSubComponent?: boolean;
   /**
    * Defines the rendering and height calculation behavior of subcomponents when `renderRowSubComponent` is used.
    *

diff --git a/packages/main/src/enums/TableScaleWidthMode.ts b/packages/main/src/enums/TableScaleWidthMode.ts
diff --git a/packages/main/src/enums/TableSelectionBehavior.ts b/packages/main/src/enums/TableSelectionBehavior.ts