From f5cbcc2bd0b1bde799150bd63a390952343f9ba7 Mon Sep 17 00:00:00 2001 From: Kanstantsin_Yarmolenka Date: Wed, 3 Dec 2025 22:41:40 +0300 Subject: [PATCH 1/4] feat: make use of sortable-componet for steps in create test cases --- app/package-lock.json | 106 ++++++++++---- app/package.json | 2 +- .../attachmentArea/attachmentArea.scss | 15 ++ .../attachmentArea/attachmentArea.tsx | 14 +- .../attachmentArea/messages.ts | 4 + .../testCaseDetails/steps/hoc.tsx | 16 +++ .../testCaseDetails/steps/hooks.ts | 23 +++ .../testCaseDetails/steps/messages.ts | 12 ++ .../testCaseDetails/steps/steps.scss | 52 ++++++- .../testCaseDetails/steps/steps.tsx | 132 ++++++++++++------ .../testCaseDetails/steps/types.ts | 11 ++ .../testCaseDetails/testCaseDetails.tsx | 8 ++ .../deleteTestPlanModal/useDeleteTestPlan.ts | 2 +- .../useDeleteTestPlanModal.tsx | 2 +- app/src/routes/pageSwitcher.jsx | 16 +-- app/webpack/base.config.js | 8 ++ 16 files changed, 334 insertions(+), 89 deletions(-) create mode 100644 app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/hoc.tsx create mode 100644 app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/hooks.ts create mode 100644 app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/messages.ts create mode 100644 app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/types.ts diff --git a/app/package-lock.json b/app/package-lock.json index db4445cdea..7ff1a16d6a 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -12,7 +12,7 @@ "@formatjs/intl-pluralrules": "1.3.9", "@formatjs/intl-relativetimeformat": "4.5.1", "@formatjs/intl-utils": "1.6.0", - "@reportportal/ui-kit": "^0.0.1-alpha.126", + "@reportportal/ui-kit": "^0.0.1-alpha.139", "axios": "^1.8.2", "c3": "0.7.20", "chart.js": "2.9.4", @@ -2585,26 +2585,29 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.6.9", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz", - "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==", + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz", + "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==", + "license": "MIT", "dependencies": { - "@floating-ui/utils": "^0.2.9" + "@floating-ui/utils": "^0.2.10" } }, "node_modules/@floating-ui/dom": { - "version": "1.6.13", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz", - "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==", + "version": "1.7.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz", + "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==", + "license": "MIT", "dependencies": { - "@floating-ui/core": "^1.6.0", - "@floating-ui/utils": "^0.2.9" + "@floating-ui/core": "^1.7.3", + "@floating-ui/utils": "^0.2.10" } }, "node_modules/@floating-ui/react": { "version": "0.26.28", "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz", "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==", + "license": "MIT", "dependencies": { "@floating-ui/react-dom": "^2.1.2", "@floating-ui/utils": "^0.2.8", @@ -2616,11 +2619,12 @@ } }, "node_modules/@floating-ui/react-dom": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz", - "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==", + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz", + "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==", + "license": "MIT", "dependencies": { - "@floating-ui/dom": "^1.0.0" + "@floating-ui/dom": "^1.7.4" }, "peerDependencies": { "react": ">=16.8.0", @@ -2628,9 +2632,10 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.2.9", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz", - "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==" + "version": "0.2.10", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz", + "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==", + "license": "MIT" }, "node_modules/@formatjs/ecma402-abstract": { "version": "1.11.4", @@ -4269,9 +4274,9 @@ "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==" }, "node_modules/@reportportal/ui-kit": { - "version": "0.0.1-alpha.127", - "resolved": "https://registry.npmjs.org/@reportportal/ui-kit/-/ui-kit-0.0.1-alpha.127.tgz", - "integrity": "sha512-TzbOmQAIXag302rrBi4/w9wfR3nAA31/3NXt0aRvkHuU4mIeUdL0LjYUc+BjfwH6YmGd0CWu10joi7JkU3vWuA==", + "version": "0.0.1-alpha.139", + "resolved": "https://registry.npmjs.org/@reportportal/ui-kit/-/ui-kit-0.0.1-alpha.139.tgz", + "integrity": "sha512-rPgagrDi/1ifwNRq+22/vOezOneCr/wwqKiV8j9Qwu6CiVPs7FwDdBSybWn2QPoYiZLxzAQYyPjreXvjT2diEw==", "license": "Apache-2.0", "dependencies": { "@floating-ui/react": "^0.26.16", @@ -4282,6 +4287,8 @@ "framer-motion": "^10.15.2", "rc-scrollbars": "^1.1.6", "react-datepicker": "^7.6.0", + "react-dnd": "^16.0.1", + "react-dnd-html5-backend": "^16.0.1", "react-dropzone": "^14.3.8" }, "engines": { @@ -4304,12 +4311,14 @@ "node_modules/@reportportal/ui-kit/node_modules/classnames": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", - "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", + "license": "MIT" }, "node_modules/@reportportal/ui-kit/node_modules/clsx": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", "engines": { "node": ">=6" } @@ -4318,6 +4327,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/kossnocorp" @@ -4327,6 +4337,7 @@ "version": "6.1.12", "resolved": "https://registry.npmjs.org/downshift/-/downshift-6.1.12.tgz", "integrity": "sha512-7XB/iaSJVS4T8wGFT3WRXmSF1UlBHAA40DshZtkrIscIN+VC+Lh363skLxFTvJwtNgHxAMDGEHT4xsyQFWL+UA==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.14.8", "compute-scroll-into-view": "^1.0.17", @@ -4342,6 +4353,7 @@ "version": "10.18.0", "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.18.0.tgz", "integrity": "sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==", + "license": "MIT", "dependencies": { "tslib": "^2.4.0" }, @@ -4365,6 +4377,7 @@ "version": "7.6.0", "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.6.0.tgz", "integrity": "sha512-9cQH6Z/qa4LrGhzdc3XoHbhrxNcMi9MKjZmYgF/1MNNaJwvdSjv3Xd+jjvrEEbKEf71ZgCA3n7fQbdwd70qCRw==", + "license": "MIT", "dependencies": { "@floating-ui/react": "^0.27.0", "clsx": "^2.1.1", @@ -4376,12 +4389,13 @@ } }, "node_modules/@reportportal/ui-kit/node_modules/react-datepicker/node_modules/@floating-ui/react": { - "version": "0.27.8", - "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.8.tgz", - "integrity": "sha512-EQJ4Th328y2wyHR3KzOUOoTW2UKjFk53fmyahfwExnFQ8vnsMYqKc+fFPOkeYtj5tcp1DUMiNJ7BFhed7e9ONw==", + "version": "0.27.16", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.16.tgz", + "integrity": "sha512-9O8N4SeG2z++TSM8QA/KTeKFBVCNEz/AGS7gWPJf6KFRzmRWixFRnCnkPHRDwSVZW6QPDO6uT0P2SpWNKCc9/g==", + "license": "MIT", "dependencies": { - "@floating-ui/react-dom": "^2.1.2", - "@floating-ui/utils": "^0.2.9", + "@floating-ui/react-dom": "^2.1.6", + "@floating-ui/utils": "^0.2.10", "tabbable": "^6.0.0" }, "peerDependencies": { @@ -4389,6 +4403,36 @@ "react-dom": ">=17.0.0" } }, + "node_modules/@reportportal/ui-kit/node_modules/react-dnd": { + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz", + "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==", + "license": "MIT", + "dependencies": { + "@react-dnd/invariant": "^4.0.1", + "@react-dnd/shallowequal": "^4.0.1", + "dnd-core": "^16.0.1", + "fast-deep-equal": "^3.1.3", + "hoist-non-react-statics": "^3.3.2" + }, + "peerDependencies": { + "@types/hoist-non-react-statics": ">= 3.3.1", + "@types/node": ">= 12", + "@types/react": ">= 16", + "react": ">= 16.14" + }, + "peerDependenciesMeta": { + "@types/hoist-non-react-statics": { + "optional": true + }, + "@types/node": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, "node_modules/@reportportal/ui-kit/node_modules/react-dropzone": { "version": "14.3.8", "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.8.tgz", @@ -4409,7 +4453,8 @@ "node_modules/@reportportal/ui-kit/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==" + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "license": "MIT" }, "node_modules/@rtsao/scc": { "version": "1.1.0", @@ -25395,9 +25440,10 @@ } }, "node_modules/tabbable": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", - "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.3.0.tgz", + "integrity": "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==", + "license": "MIT" }, "node_modules/table": { "version": "6.9.0", diff --git a/app/package.json b/app/package.json index 4c723a9a33..b05f1d6c13 100644 --- a/app/package.json +++ b/app/package.json @@ -27,7 +27,7 @@ "@formatjs/intl-pluralrules": "1.3.9", "@formatjs/intl-relativetimeformat": "4.5.1", "@formatjs/intl-utils": "1.6.0", - "@reportportal/ui-kit": "^0.0.1-alpha.126", + "@reportportal/ui-kit": "^0.0.1-alpha.139", "axios": "^1.8.2", "c3": "0.7.20", "chart.js": "2.9.4", diff --git a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/attachmentArea.scss b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/attachmentArea.scss index 3d76b00152..c14294fca8 100644 --- a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/attachmentArea.scss +++ b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/attachmentArea.scss @@ -118,3 +118,18 @@ .dropzone-wrapper { width: 100%; } + +.drag-handle { + cursor: grab; + touch-action: none; + transition: transform 0.15s ease; + + &:active, + &--active { + cursor: grabbing; + } + + &:hover { + transform: scale(1.1); + } +} diff --git a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/attachmentArea.tsx b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/attachmentArea.tsx index 6ff3b29903..a989339e50 100644 --- a/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/attachmentArea.tsx +++ b/app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/attachmentArea.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { PropsWithChildren } from 'react'; +import { PropsWithChildren, Ref } from 'react'; import { useIntl } from 'react-intl'; import { isNumber } from 'es-toolkit/compat'; import { noop } from 'es-toolkit'; @@ -59,6 +59,8 @@ interface AttachmentAreaProps { canAttachFiles?: boolean; onRemove?: () => void; onMove?: (direction: 'up' | 'down') => void; + dragHandleRef?: Ref; + isDraggingActive?: boolean; } export const AttachmentArea = ({ @@ -78,6 +80,8 @@ export const AttachmentArea = ({ canAttachFiles = true, onRemove, onMove = noop, + dragHandleRef, + isDraggingActive = false, }: PropsWithChildren) => { const { formatMessage } = useIntl(); const { attachedFiles, addFiles, removeFile, downloadFile } = useTmsFileUpload({ @@ -118,7 +122,13 @@ export const AttachmentArea = ({ > -