diff --git a/package-lock.json b/package-lock.json index 79c44d9657..f412115c3b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "24.0.2-dev1", "license": "AGPL-3.0+", "dependencies": { + "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration": "^1.2.4", "@greenbone/opensight-ui-components-mantinev7": "^0.0.7-alpha3", "@mantine/core": "^7.12.1", "@reduxjs/toolkit": "^2.4.0", @@ -38,7 +39,6 @@ "moment-timezone": "^0.5.46", "prop-types": "^15.8.1", "react": "^18.3.1", - "react-beautiful-dnd": "^13.1.1", "react-dom": "^18.3.1", "react-i18next": "^15.1.3", "react-redux": "^9.1.2", @@ -106,6 +106,104 @@ "node": ">=6.0.0" } }, + "node_modules/@atlaskit/ds-lib": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@atlaskit/ds-lib/-/ds-lib-3.3.0.tgz", + "integrity": "sha512-8bgJRFvL4C9dOc3XQ0nJLze4OSXtfemmE2os2h/T80hSdQO57hPMnXB22Pl6nT/6nEP7kZ4kAH6hDuJ3vBUNPA==", + "dependencies": { + "@atlaskit/platform-feature-flags": "^0.3.0", + "@babel/runtime": "^7.0.0", + "bind-event-listener": "^3.0.0", + "react-uid": "^2.2.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@atlaskit/platform-feature-flags": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@atlaskit/platform-feature-flags/-/platform-feature-flags-0.3.0.tgz", + "integrity": "sha512-/0u5fFJ0Rw2j4M5wzsXgaHO6Ey12oekPCDTRvmmAIp4GO9T2Swbl80bavLAPSOmSHMhHTSuvRxiJveZXfQ21IQ==", + "dependencies": { + "@babel/runtime": "^7.0.0" + } + }, + "node_modules/@atlaskit/pragmatic-drag-and-drop": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@atlaskit/pragmatic-drag-and-drop/-/pragmatic-drag-and-drop-1.4.0.tgz", + "integrity": "sha512-qRY3PTJIcxfl/QB8Gwswz+BRvlmgAC5pB+J2hL6dkIxgqAgVwOhAamMUKsrOcFU/axG2Q7RbNs1xfoLKDuhoPg==", + "dependencies": { + "@babel/runtime": "^7.0.0", + "bind-event-listener": "^3.0.0", + "raf-schd": "^4.0.3" + } + }, + "node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@atlaskit/pragmatic-drag-and-drop-hitbox/-/pragmatic-drag-and-drop-hitbox-1.0.3.tgz", + "integrity": "sha512-/Sbu/HqN2VGLYBhnsG7SbRNg98XKkbF6L7XDdBi+izRybfaK1FeMfodPpm/xnBHPJzwYMdkE0qtLyv6afhgMUA==", + "dependencies": { + "@atlaskit/pragmatic-drag-and-drop": "^1.1.0", + "@babel/runtime": "^7.0.0" + } + }, + "node_modules/@atlaskit/pragmatic-drag-and-drop-live-region": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@atlaskit/pragmatic-drag-and-drop-live-region/-/pragmatic-drag-and-drop-live-region-1.1.0.tgz", + "integrity": "sha512-yypZcF34p6XlPLH10FpMdRAfWHDRhsI3JY99Bedsv0IF+E3UWEpMDZ7BgepfYQfyIRSbbkFW52m4zmqTq7bA6g==", + "dependencies": { + "@babel/runtime": "^7.0.0" + } + }, + "node_modules/@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll/-/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll-1.2.1.tgz", + "integrity": "sha512-6mQeAHXJuc35SKrDRI0wes/rCqpno2PgEdgkUSuBl0ge/hrrScqAVhIO7d8mL+q+gxSJxGlug01WcsPOiHlqog==", + "dependencies": { + "@atlaskit/pragmatic-drag-and-drop": "^1.2.0", + "@babel/runtime": "^7.0.0", + "css-box-model": "^1.2.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration/-/pragmatic-drag-and-drop-react-beautiful-dnd-migration-1.2.4.tgz", + "integrity": "sha512-mIL57bAalzI6YeYDbr4RXvq8L6D3GouD8Tg2HQYfVpI4C1urxdlsVxz/1kLQg7NwROLpim/wMqBKUDpdPBpT4A==", + "dependencies": { + "@atlaskit/pragmatic-drag-and-drop": "^1.4.0", + "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0", + "@atlaskit/pragmatic-drag-and-drop-live-region": "^1.1.0", + "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^1.2.0", + "@atlaskit/tokens": "^2.0.0", + "@babel/runtime": "^7.0.0", + "@emotion/react": "^11.7.1", + "bind-event-listener": "^3.0.0", + "tiny-invariant": "^1.2.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@atlaskit/tokens": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@atlaskit/tokens/-/tokens-2.4.0.tgz", + "integrity": "sha512-GfDX+1j4WJLBOMaBib/Gaa73FaDsNReHCy5qxaoYnNyVQJC0LWtiFT15l4VaIyDhtI3Vl+WWsdkUWDu10Mksag==", + "dependencies": { + "@atlaskit/ds-lib": "^3.3.0", + "@atlaskit/platform-feature-flags": "^0.3.0", + "@babel/runtime": "^7.0.0", + "@babel/traverse": "^7.23.2", + "@babel/types": "^7.20.0", + "bind-event-listener": "^3.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@babel/cli": { "version": "7.25.9", "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.25.9.tgz", @@ -3738,15 +3836,6 @@ "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==", "license": "MIT" }, - "node_modules/@types/hoist-non-react-statics": { - "version": "3.3.5", - "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", - "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", - "dependencies": { - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0" - } - }, "node_modules/@types/lodash": { "version": "4.17.13", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.13.tgz", @@ -3786,25 +3875,6 @@ "@types/react": "*" } }, - "node_modules/@types/react-redux": { - "version": "7.1.34", - "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.34.tgz", - "integrity": "sha512-GdFaVjEbYv4Fthm2ZLvj1VSCedV7TqE5y1kNwnjSdBOTXuRSgowux6J8TAct15T3CKBr63UMk+2CO7ilRhyrAQ==", - "dependencies": { - "@types/hoist-non-react-statics": "^3.3.0", - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0", - "redux": "^4.0.0" - } - }, - "node_modules/@types/react-redux/node_modules/redux": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", - "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", - "dependencies": { - "@babel/runtime": "^7.9.2" - } - }, "node_modules/@types/react-transition-group": { "version": "4.4.11", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz", @@ -4881,6 +4951,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/bind-event-listener": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/bind-event-listener/-/bind-event-listener-3.0.0.tgz", + "integrity": "sha512-PJvH288AWQhKs2v9zyfYdPzlPqf5bXbGMmhmUIY9x4dAUGIWgomO771oBQNwJnMQSnUIXhKu6sgzpBRXTlvb8Q==" + }, "node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -9584,67 +9659,6 @@ "node": ">=0.10.0" } }, - "node_modules/react-beautiful-dnd": { - "version": "13.1.1", - "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz", - "integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==", - "deprecated": "react-beautiful-dnd is now deprecated. Context and options: https://github.com/atlassian/react-beautiful-dnd/issues/2672", - "dependencies": { - "@babel/runtime": "^7.9.2", - "css-box-model": "^1.2.0", - "memoize-one": "^5.1.1", - "raf-schd": "^4.0.2", - "react-redux": "^7.2.0", - "redux": "^4.0.4", - "use-memo-one": "^1.1.1" - }, - "peerDependencies": { - "react": "^16.8.5 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/react-beautiful-dnd/node_modules/memoize-one": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", - "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" - }, - "node_modules/react-beautiful-dnd/node_modules/react-is": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" - }, - "node_modules/react-beautiful-dnd/node_modules/react-redux": { - "version": "7.2.9", - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz", - "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==", - "dependencies": { - "@babel/runtime": "^7.15.4", - "@types/react-redux": "^7.1.20", - "hoist-non-react-statics": "^3.3.2", - "loose-envify": "^1.4.0", - "prop-types": "^15.7.2", - "react-is": "^17.0.2" - }, - "peerDependencies": { - "react": "^16.8.3 || ^17 || ^18" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } - } - }, - "node_modules/react-beautiful-dnd/node_modules/redux": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", - "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", - "dependencies": { - "@babel/runtime": "^7.9.2" - } - }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -9887,6 +9901,26 @@ "react-dom": ">=16.6.0" } }, + "node_modules/react-uid": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/react-uid/-/react-uid-2.3.3.tgz", + "integrity": "sha512-iNpDovcb9qBpBTo8iUgqRSQOS8GV3bWoNaTaUptHkXtAooXSo0OWe7vN6TqqB8x3x0bNBbQx96kkmSltQ5h9kQ==", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -11408,14 +11442,6 @@ } } }, - "node_modules/use-memo-one": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz", - "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/use-sidecar": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", diff --git a/package.json b/package.json index 81ceef84e1..cdd5bef110 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "node": ">=18.0" }, "dependencies": { + "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration": "^1.2.4", "@greenbone/opensight-ui-components-mantinev7": "^0.0.7-alpha3", "@mantine/core": "^7.12.1", "@reduxjs/toolkit": "^2.4.0", @@ -61,7 +62,6 @@ "moment-timezone": "^0.5.46", "prop-types": "^15.8.1", "react": "^18.3.1", - "react-beautiful-dnd": "^13.1.1", "react-dom": "^18.3.1", "react-i18next": "^15.1.3", "react-redux": "^9.1.2", diff --git a/src/web/components/comment/__tests__/__snapshots__/comment.jsx.snap b/src/web/components/comment/__tests__/__snapshots__/comment.jsx.snap deleted file mode 100644 index 515b1eac68..0000000000 --- a/src/web/components/comment/__tests__/__snapshots__/comment.jsx.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`Comment tests > should render comment 1`] = `null`; diff --git a/src/web/components/sortable/emptyrow.jsx b/src/web/components/sortable/emptyrow.jsx index 6b0d71ec15..e3a5274d00 100644 --- a/src/web/components/sortable/emptyrow.jsx +++ b/src/web/components/sortable/emptyrow.jsx @@ -7,22 +7,18 @@ import React from 'react'; import styled from 'styled-components'; -import {Droppable} from 'react-beautiful-dnd'; +import {Droppable} from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration'; import PropTypes from 'web/utils/proptypes'; -import {styledExcludeProps} from 'web/utils/styledConfig'; import Theme from 'web/utils/theme'; -const EmptyGridRow = styledExcludeProps(styled.div, [ - 'active', - 'isDraggingOver', -])` +const EmptyGridRow = styled.div` margin: 8px 0px; min-height: 50px; - display: ${props => (props.active ? 'flex' : 'none')}; + display: ${props => (props.$active ? 'flex' : 'none')}; border: 1px dashed ${Theme.lightGray}; - background: ${props => (props.isDraggingOver ? Theme.lightBlue : 'none')}; + background: ${props => (props.$isDraggingOver ? Theme.lightBlue : 'none')}; height: ${props => props.height}px; `; @@ -31,10 +27,10 @@ const EmptyRow = ({children, active = false, height}) => ( {(provided, snapshot) => ( {children} {provided.placeholder} @@ -44,10 +40,9 @@ const EmptyRow = ({children, active = false, height}) => ( ); EmptyRow.propTypes = { + children: PropTypes.node, active: PropTypes.bool, height: PropTypes.number.isRequired, }; export default EmptyRow; - -// vim: set ts=2 sw=2 tw=80: diff --git a/src/web/components/sortable/grid.jsx b/src/web/components/sortable/grid.jsx index 8f585f4ab1..86281cfafa 100644 --- a/src/web/components/sortable/grid.jsx +++ b/src/web/components/sortable/grid.jsx @@ -3,12 +3,11 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ - import {v4 as uuid} from 'uuid'; -import React from 'react'; +import {useState} from 'react'; -import {DragDropContext} from 'react-beautiful-dnd'; +import {DragDropContext} from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration'; import {DEFAULT_ROW_HEIGHT} from 'gmp/commands/dashboards'; @@ -31,65 +30,46 @@ const createNewRow = item => ({ const findRowIndex = (rows, rowid) => rows.findIndex(row => row.id === rowid); -class Grid extends React.Component { - constructor(props) { - super(props); - - this.state = { - isDragging: false, - isInteracting: false, - }; - - this.handleDragEnd = this.handleDragEnd.bind(this); - this.handleDragStart = this.handleDragStart.bind(this); - this.handleRowResize = this.handleRowResize.bind(this); - this.handleOnBeforeCapture = this.handleOnBeforeCapture.bind(this); - } - - notifyChange(items) { - const {onChange} = this.props; +const Grid = props => { + const [isDragging, setIsDragging] = useState(false); + const [isInteracting, setIsInteracting] = useState(false); + const [dragSourceRowId, setDragSourceRowId] = useState(undefined); + const notifyChange = items => { + const {onChange} = props; if (isDefined(onChange)) { onChange(items); } - } - - handleRowResize(rowId, height) { - const {onRowResize} = this.props; + }; + const handleRowResize = (rowId, height) => { + const {onRowResize} = props; if (isDefined(onRowResize)) { onRowResize(rowId, height); } - } + }; - handleOnBeforeCapture() { - this.setState({ - isInteracting: true, - }); - } + const handleOnBeforeCapture = () => { + setIsInteracting(true); + }; - handleDragStart(drag) { + const handleDragStart = drag => { const {droppableId: rowId} = drag.source; + setIsDragging(true); + setDragSourceRowId(rowId); + }; - this.setState({ - isDragging: true, - dragSourceRowId: rowId, - }); - } - - handleDragEnd(result) { - this.setState({ - isDragging: false, - dragSourceRowId: undefined, - isInteracting: false, - }); + const handleDragEnd = result => { + setIsDragging(false); + setDragSourceRowId(undefined); + setIsInteracting(false); // dropped outside the list or at same position if (!result.destination) { return; } - let {items = []} = this.props; + let {items = []} = props; // we are mutating the items => create copy items = [...items]; @@ -135,86 +115,83 @@ class Grid extends React.Component { // remove empty rows items = items.filter(row => row.items.length > 0); - this.notifyChange(items); - } + notifyChange(items); + }; - render() { - const {isInteracting, isDragging, dragSourceRowId} = this.state; - const {maxItemsPerRow, maxRows, items = [], children} = this.props; - const showEmptyRow = !isDefined(maxRows) || items.length < maxRows; + const {maxItemsPerRow, maxRows, items = [], children} = props; + const showEmptyRow = !isDefined(maxRows) || items.length < maxRows; - let emptyRowHeight = DEFAULT_ROW_HEIGHT; - if (isDragging) { - const dragRow = items.find(row => row.id === dragSourceRowId); - const {height = DEFAULT_ROW_HEIGHT} = dragRow; - emptyRowHeight = height; - } - const getRowHeight = row => row.height; - const getRowItems = row => row.items; - return ( - - - {({width: fullWidth}) => ( - - {items.map(row => { - let height = getRowHeight(row); - if (!isDefined(height)) { - height = DEFAULT_ROW_HEIGHT; - } - let rowItems = getRowItems(row); - if (!isDefined(rowItems)) { - rowItems = []; - } - - const {length: itemCount} = rowItems; - - const isRowFull = - isDefined(maxItemsPerRow) && maxItemsPerRow <= itemCount; - const disabled = isRowFull && dragSourceRowId !== row.id; - - const itemHeight = - height - GRID_ITEM_MARGIN.top - GRID_ITEM_MARGIN.bottom; - const itemWidth = - fullWidth / itemCount - - (GRID_ITEM_MARGIN.left + GRID_ITEM_MARGIN.right); - - const {id: rowId} = row; - return ( - this.handleRowResize(rowId, h)} - > - {rowItems.map((id, index) => ( - - {children} - - ))} - - ); - })} - {showEmptyRow && ( - - )} - - )} - - - ); + let emptyRowHeight = DEFAULT_ROW_HEIGHT; + if (isDragging) { + const dragRow = items.find(row => row.id === dragSourceRowId); + const {height = DEFAULT_ROW_HEIGHT} = dragRow; + emptyRowHeight = height; } -} + const getRowHeight = row => row.height; + const getRowItems = row => row.items; + return ( + + + {({width: fullWidth}) => ( + + {items.map(row => { + let height = getRowHeight(row); + if (!isDefined(height)) { + height = DEFAULT_ROW_HEIGHT; + } + let rowItems = getRowItems(row); + if (!isDefined(rowItems)) { + rowItems = []; + } + + const {length: itemCount} = rowItems; + + const isRowFull = + isDefined(maxItemsPerRow) && maxItemsPerRow <= itemCount; + const disabled = isRowFull && dragSourceRowId !== row.id; + + const itemHeight = + height - GRID_ITEM_MARGIN.top - GRID_ITEM_MARGIN.bottom; + const itemWidth = + fullWidth / itemCount - + (GRID_ITEM_MARGIN.left + GRID_ITEM_MARGIN.right); + + const {id: rowId} = row; + return ( + handleRowResize(rowId, h)} + > + {rowItems.map((id, index) => ( + + {children} + + ))} + + ); + })} + {showEmptyRow && ( + + )} + + )} + + + ); +}; const rowPropType = PropTypes.shape({ id: PropTypes.string.isRequired, @@ -232,5 +209,3 @@ Grid.propTypes = { }; export default Grid; - -// vim: set ts=2 sw=2 tw=80: diff --git a/src/web/components/sortable/item.jsx b/src/web/components/sortable/item.jsx index 07735a9f4a..fe7630774a 100644 --- a/src/web/components/sortable/item.jsx +++ b/src/web/components/sortable/item.jsx @@ -7,10 +7,9 @@ import React from 'react'; import styled from 'styled-components'; -import {Draggable} from 'react-beautiful-dnd'; +import {Draggable} from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration'; import PropTypes from 'web/utils/proptypes'; -import {styledExcludeProps} from 'web/utils/styledConfig'; export const GRID_ITEM_MARGIN = { top: 5, @@ -19,7 +18,7 @@ export const GRID_ITEM_MARGIN = { right: 8, }; -const GridItem = styledExcludeProps(styled.div, ['isDragging'])` +const GridItem = styled.div` display: flex; flex-grow: 1; flex-shrink: 1; @@ -33,15 +32,12 @@ const GridItem = styledExcludeProps(styled.div, ['isDragging'])` const Item = ({children, index, id, ...props}) => ( - {( - provided, - snapshot, // eslint-disable-line no-shadow - ) => ( + {(provided, snapshot) => ( {children({ @@ -61,5 +57,3 @@ Item.propTypes = { }; export default Item; - -// vim: set ts=2 sw=2 tw=80: diff --git a/src/web/components/sortable/row.jsx b/src/web/components/sortable/row.jsx index aaac70ad25..7ed8053e61 100644 --- a/src/web/components/sortable/row.jsx +++ b/src/web/components/sortable/row.jsx @@ -3,81 +3,75 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ -import React from 'react'; +import {useCallback, useRef} from 'react'; import styled from 'styled-components'; -import {Droppable} from 'react-beautiful-dnd'; +import {Droppable} from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration'; import {isDefined} from 'gmp/utils/identity'; import PropTypes from 'web/utils/proptypes'; -import {styledExcludeProps} from 'web/utils/styledConfig'; import Theme from 'web/utils/theme'; import Resizer from './resizer'; const MIN_HEIGHT = 175; -const GridRow = styledExcludeProps(styled.div, ['isDraggingOver'])` +const GridRow = styled.div` display: flex; - height: ${props => props.height}px; + height: ${props => props.$height}px; min-height: ${MIN_HEIGHT}px; - background: ${props => (props.isDraggingOver ? Theme.lightBlue : 'none')}; + background: ${props => (props.$isDraggingOver ? Theme.lightBlue : 'none')}; `; -class Row extends React.Component { - constructor(...args) { - super(...args); +const Row = ({children, dropDisabled, id, height, onResize}) => { + const rowRef = useRef(null); - this.handleResize = this.handleResize.bind(this); - } + const handleResize = useCallback( + diffY => { + if (isDefined(onResize)) { + const box = rowRef.current.getBoundingClientRect(); + const newHeight = box.height + diffY; - handleResize(diffY) { - const {onResize} = this.props; - - if (isDefined(onResize)) { - const box = this.row.getBoundingClientRect(); - const height = box.height + diffY; - - if (height > MIN_HEIGHT) { - onResize(height); + if (newHeight > MIN_HEIGHT) { + onResize(newHeight); + } } - } - } - - render() { - const {children, dropDisabled, id, height} = this.props; - return ( - - - {(provided, snapshot) => ( - { - this.row = ref; - provided.innerRef(ref); - }} - isDraggingOver={snapshot.isDraggingOver} - height={height} - > - {children} - {provided.placeholder} - - )} - - - - ); - } -} + }, + [onResize], + ); + + return ( + <> + + {(provided, snapshot) => ( + { + rowRef.current = ref; + provided.innerRef(ref); + }} + $isDraggingOver={snapshot.isDraggingOver} + $height={height} + > + {children} + {provided.placeholder} + + )} + + + + ); +}; Row.propTypes = { + children: PropTypes.node.isRequired, dropDisabled: PropTypes.bool, height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), id: PropTypes.string.isRequired, @@ -85,5 +79,3 @@ Row.propTypes = { }; export default Row; - -// vim: set ts=2 sw=2 tw=80: diff --git a/src/web/pages/tasks/__tests__/listpage.jsx b/src/web/pages/tasks/__tests__/listpage.jsx index f6d004ac38..b065e5e269 100644 --- a/src/web/pages/tasks/__tests__/listpage.jsx +++ b/src/web/pages/tasks/__tests__/listpage.jsx @@ -365,25 +365,25 @@ describe('TaskPage ToolBarIcons test', () => { const divs = baseElement.querySelectorAll('div'); - fireEvent.click(divs[6]); + fireEvent.click(divs[5]); expect(handleTaskWizardClick).toHaveBeenCalled(); - expect(divs[6]).toHaveTextContent('Task Wizard'); + expect(divs[5]).toHaveTextContent('Task Wizard'); - fireEvent.click(divs[7]); + fireEvent.click(divs[6]); expect(handleAdvancedTaskWizardClick).toHaveBeenCalled(); - expect(divs[7]).toHaveTextContent('Advanced Task Wizard'); + expect(divs[6]).toHaveTextContent('Advanced Task Wizard'); - fireEvent.click(divs[8]); + fireEvent.click(divs[7]); expect(handleModifyTaskWizardClick).toHaveBeenCalled(); - expect(divs[8]).toHaveTextContent('Modify Task Wizard'); + expect(divs[7]).toHaveTextContent('Modify Task Wizard'); - fireEvent.click(divs[10]); + fireEvent.click(divs[9]); expect(handleTaskCreateClick).toHaveBeenCalled(); - expect(divs[10]).toHaveTextContent('New Task'); + expect(divs[9]).toHaveTextContent('New Task'); - fireEvent.click(divs[11]); + fireEvent.click(divs[10]); expect(handleContainerTaskCreateClick).toHaveBeenCalled(); - expect(divs[11]).toHaveTextContent('New Container Task'); + expect(divs[10]).toHaveTextContent('New Container Task'); }); test('should not show icons if user does not have the right permissions', () => {