diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx index 5a74e761d8f..3961b06b0a6 100644 --- a/docs/MigrationGuide.mdx +++ b/docs/MigrationGuide.mdx @@ -355,7 +355,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` @@ -422,6 +422,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 }]; + +; + +// v2 +const columns = [{ ...otherProps, disableDragAndDrop: true }]; + +; +``` + ### 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 index ba330927254..d4d51e157ac 100644 --- 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 index ac56997fe46..0ff9731e39f 100644 --- 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 index 8c091693a12..99a47bdece3 100644 --- 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(); + + cy.findByText('Name').click(); + cy.get('[ui5-popover]').should('not.exist'); + + cy.mount(); 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>({}); - const tableInstance = useRef>(); + const tableInstance = useRef>(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(); @@ -1454,7 +1460,7 @@ describe('AnalyticalTable', () => { it('Alternate Row Color', () => { const standardRowColor = cssVarToRgb(ThemingParameters.sapList_Background); const alternatingRowColor = cssVarToRgb(ThemingParameters.sapList_AlternatingBackground); - cy.mount(); + cy.mount(); cy.get('[data-component-name="AnalyticalTableContainer"]').should('have.css', 'background-color', standardRowColor); function testAlternateRowColor() { @@ -1777,6 +1783,8 @@ describe('AnalyticalTable', () => { } ]; cy.mount(); + cy.get('[data-column-id="name"]').should('not.have.attr', 'aria-haspopup', 'menu').click(); + cy.mount(); 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'); @@ -2191,7 +2199,7 @@ describe('AnalyticalTable', () => { it("Expandable: don't scroll when expanded/collapsed", () => { const TestComp = () => { - const tableInstanceRef = useRef(); + const tableInstanceRef = useRef<{ toggleRowExpanded?: (e: string) => void }>({}); return ( <>