fix: hide drag handles when admin.isSortable: false

The ability to disable sorting in array and block fields was added with
payloadcms#5962.

However, the drag handles are still visible and look interactive
on hover.

This commit hides the drag handles when `admin.isSortable: false`.

packages/payload/src/admin/components/forms/field-types/Array/ArrayRow.tsx

@@ -106,11 +106,15 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
         className={classNames}
         collapsed={row.collapsed}
         collapsibleStyle={fieldHasErrors ? 'error' : 'default'}
-        dragHandleProps={{
-          id: row.id,
-          attributes,
-          listeners,
-        }}
+        dragHandleProps={
+          isSortable
+            ? {
+                id: row.id,
+                attributes,
+                listeners,
+              }
+            : undefined
+        }
         header={
           <div className={`${baseClass}__row-header`}>
             <RowLabel

packages/payload/src/admin/components/forms/field-types/Blocks/BlockRow.tsx

@@ -104,11 +104,15 @@ export const BlockRow: React.FC<BlockFieldProps> = ({
         className={classNames}
         collapsed={row.collapsed}
         collapsibleStyle={fieldHasErrors ? 'error' : 'default'}
-        dragHandleProps={{
-          id: row.id,
-          attributes,
-          listeners,
-        }}
+        dragHandleProps={
+          isSortable
+            ? {
+                id: row.id,
+                attributes,
+                listeners,
+              }
+            : undefined
+        }
         header={
           <div className={`${baseClass}__block-header`}>
             <span className={`${baseClass}__block-number`}>

test/fields/e2e.spec.ts

@@ -765,10 +765,22 @@ describe('fields', () => {
       })
     })
 
-    test('should have disabled admin sorting', async () => {
-      await page.goto(url.create)
-      const field = page.locator('#field-collapsedByDefaultBlocks .array-actions__action-chevron')
-      expect(await field.count()).toEqual(0)
+    describe('admin.isSortable: false', () => {
+      beforeAll(async () => {
+        await page.goto(url.create)
+      })
+
+      test('the move action should be hidden', async () => {
+        await expect(
+          page.locator('#field-collapsedByDefaultBlocks .array-actions__action-chevron'),
+        ).toHaveCount(0)
+      })
+
+      test('the drag handle should be hidden', async () => {
+        await expect(
+          page.locator('#field-collapsedByDefaultBlocks .collapsible__drag'),
+        ).toHaveCount(0)
+      })
     })
   })
 
@@ -790,12 +802,6 @@ describe('fields', () => {
       await expect(field).toHaveValue('defaultValue')
     })
 
-    test('should have disabled admin sorting', async () => {
-      await page.goto(url.create)
-      const field = page.locator('#field-disableSortItems .array-actions__action-chevron')
-      expect(await field.count()).toEqual(0)
-    })
-
     test('should render RowLabel using a function', async () => {
       const label = 'custom row label as function'
       await page.goto(url.create)
@@ -918,6 +924,23 @@ describe('fields', () => {
         ).toHaveValue(`${assertGroupText3} duplicate`)
       })
     })
+
+    describe('admin.isSortable: false', () => {
+      beforeAll(async () => {
+        await page.goto(url.create)
+      })
+
+      test('the move action should be hidden', async () => {
+        const locator = await expect(
+          page.locator('#field-disableSortItems .array-actions__action-chevron'),
+        ).toHaveCount(0)
+      })
+
+      test('the drag handle should be hidden', async () => {
+        await expect(page.locator('#field-disableSortItems .collapsible__drag')).toHaveCount(0)
+      })
+    })
+
     test('should bulk update', async () => {
       await Promise.all([
         payload.create({