feat: [EPMRPP-105379] make use of sortable component for steps in create test cases

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.132",
+    "@reportportal/ui-kit": "^0.0.1-alpha.139",
     "axios": "^1.8.2",
     "c3": "0.7.20",
     "chart.js": "2.9.4",

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);
+  }
+}

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<HTMLButtonElement>;
+  isDraggingActive?: boolean;
 }
 
 export const AttachmentArea = ({
@@ -78,6 +80,8 @@ export const AttachmentArea = ({
   canAttachFiles = true,
   onRemove,
   onMove = noop,
+  dragHandleRef,
+  isDraggingActive = false,
 }: PropsWithChildren<AttachmentAreaProps>) => {
   const { formatMessage } = useIntl();
   const { attachedFiles, addFiles, removeFile, downloadFile } = useTmsFileUpload({
@@ -118,7 +122,13 @@ export const AttachmentArea = ({
                     >
                       <ArrowUpIcon />
                     </Button>
-                    <Button variant="text" adjustWidthOn="content">
+                    <Button
+                      ref={dragHandleRef}
+                      variant="text"
+                      adjustWidthOn="content"
+                      className={cx('drag-handle', { 'drag-handle--active': isDraggingActive })}
+                      aria-label={formatMessage(attachmentAreaMessages.dragToReorder)}
+                    >
                       <DragNDropIcon />
                     </Button>
                     <Button

app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/attachmentArea/messages.ts

@@ -17,4 +17,8 @@ export const messages = defineMessages({
     id: 'createTestCaseModal.moveDown',
     defaultMessage: 'Move one position down',
   },
+  dragToReorder: {
+    id: 'createTestCaseModal.dragToReorder',
+    defaultMessage: 'Drag to reorder',
+  },
 });

app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/hoc.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+import { useHideOnDrag } from './hooks';
+
+interface HideOnDragProps {
+  isDragging: boolean;
+  children: ReactNode;
+}
+
+export const HideOnDrag = ({ isDragging, children }: HideOnDragProps) => {
+  const shouldHide = useHideOnDrag(isDragging);
+
+  if (shouldHide) return null;
+
+  return <>{children}</>;
+};

app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/hooks.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+const HIDE_DELAY_MS = 50;
+
+export const useHideOnDrag = (isDragging: boolean): boolean => {
+  const [shouldHide, setShouldHide] = useState<boolean>(false);
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    if (isDragging) {
+      timeoutId = setTimeout(() => setShouldHide(true), HIDE_DELAY_MS);
+    } else {
+      setShouldHide(false);
+    }
+
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [isDragging]);
+
+  return shouldHide;
+};

app/src/pages/inside/testCaseLibraryPage/createTestCaseModal/testCaseDetails/steps/messages.ts

@@ -0,0 +1,12 @@
+import { defineMessages } from 'react-intl';
+
+export const messages = defineMessages({
+  steps: {
+    id: 'CreateTestCaseModal.steps',
+    defaultMessage: 'Steps',
+  },
+  addStep: {
+    id: 'CreateTestCaseModal.addStep',
+    defaultMessage: 'Add Step',
+  },
+});