✨ Upgrade @dnd-kit/sortable, refactor migration-targets

Upgrade `@dnd-kit` and `@dnd-kit/sortable` to latest.

Refactor the migration-targets page and target card components.
Simplified the components for more streamlined use on the custom
migration targets page and on the analysis wizard target selection
step.  The migration-targets page layout updated to use `Gallery`
instead of the custom grid.

Signed-off-by: Scott J Dickerson <[email protected]>

Author: sjd78

client/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/sortable": "^10.0.0",
     "@hookform/resolvers": "^2.9.11",
     "@hot-loader/react-dom": "^17.0.2",
     "@patternfly/patternfly": "5.2.1",

client/src/app/components/target-card/target-card.tsx

@@ -7,8 +7,6 @@ import {
   DropdownItem,
   Flex,
   FlexItem,
-  Button,
-  ButtonVariant,
   Label,
   CardHeader,
   PanelMain,
@@ -18,7 +16,7 @@ import {
   StackItem,
   Bullseye,
 } from "@patternfly/react-core";
-import { GripVerticalIcon, InfoCircleIcon } from "@patternfly/react-icons";
+import { InfoCircleIcon } from "@patternfly/react-icons";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 import { useTranslation } from "react-i18next";
 
@@ -41,8 +39,8 @@ export interface TargetCardProps {
   ) => void;
   onSelectedCardTargetChange?: (value: string) => void;
   selectedTargetLabels?: TargetLabel[];
-  handleProps?: any;
   readOnly?: boolean;
+  dndSortHandle?: React.ReactNode;
   onEdit?: () => void;
   onDelete?: () => void;
 }
@@ -60,7 +58,7 @@ export const TargetCard: React.FC<TargetCardProps> = ({
   selectedTargetLabels,
   onCardClick,
   onSelectedCardTargetChange,
-  handleProps,
+  dndSortHandle,
   onEdit,
   onDelete,
 }) => {
@@ -149,37 +147,20 @@ export const TargetCard: React.FC<TargetCardProps> = ({
       </CardHeader>
       <CardBody>
         <Flex>
-          <FlexItem>
-            {!readOnly && (
-              <Button
-                className="grabbable"
-                id="drag-button"
-                aria-label="drag button"
-                variant={ButtonVariant.plain}
-                {...handleProps}
-                {...handleProps?.listeners}
-                {...handleProps?.attributes}
-              >
-                <GripVerticalIcon />
-              </Button>
-            )}
-          </FlexItem>
+          <FlexItem>{dndSortHandle}</FlexItem>
           <FlexItem className={spacing.mlAuto}>
-            {readOnly && target.custom ? (
-              <Label color="grey">Custom</Label>
-            ) : (
-              target.custom && (
-                <KebabDropdown
-                  dropdownItems={[
-                    <DropdownItem key="edit-custom-card" onClick={onEdit}>
-                      {t("actions.edit")}
-                    </DropdownItem>,
-                    <DropdownItem key="delete-custom-card" onClick={onDelete}>
-                      {t("actions.delete")}
-                    </DropdownItem>,
-                  ]}
-                />
-              )
+            {target.custom && readOnly && <Label color="grey">Custom</Label>}
+            {target.custom && !readOnly && (
+              <KebabDropdown
+                dropdownItems={[
+                  <DropdownItem key="edit-custom-card" onClick={onEdit}>
+                    {t("actions.edit")}
+                  </DropdownItem>,
+                  <DropdownItem key="delete-custom-card" onClick={onDelete}>
+                    {t("actions.delete")}
+                  </DropdownItem>,
+                ]}
+              />
             )}
           </FlexItem>
         </Flex>

client/src/app/pages/migration-targets/components/dnd/grid.css

@@ -1,47 +1,47 @@
 import React from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { Item } from "./item";
-interface SortableItemProps {
+import { Target } from "@app/api/models";
+import { TargetItem } from "./target-item";
+
+interface SortableTargetItemProps {
   style?: React.CSSProperties;
-  id: number;
+  target: Target;
   onEdit?: () => void;
   onDelete?: () => void;
 }
-export const SortableItem: React.FC<SortableItemProps> = (
-  { style, id, onEdit, onDelete },
-  ...props
-) => {
+
+export const SortableTargetItem: React.FC<SortableTargetItemProps> = ({
+  style,
+  target,
+  onEdit,
+  onDelete,
+}) => {
   const {
     attributes,
     listeners,
     setNodeRef,
     transform,
     transition,
     setActivatorNodeRef,
-  } = useSortable({ id: id });
+  } = useSortable({ id: target.id });
 
-  const inlineStyles = {
+  const itemStyles = {
     transform: CSS.Transform.toString(transform),
     transition: [transition].filter(Boolean).join(", "),
-    height: 410,
-    width: "20em",
     ...style,
   } as React.CSSProperties;
 
   return (
-    <Item
+    <TargetItem
       ref={setNodeRef}
-      style={inlineStyles}
-      handleProps={{
-        ref: setActivatorNodeRef,
-        listeners: listeners,
-        attributes: attributes,
-      }}
+      style={itemStyles}
       onEdit={onEdit}
       onDelete={onDelete}
-      {...props}
-      id={id}
+      target={target}
+      activatorNodeRef={setActivatorNodeRef}
+      {...attributes}
+      {...listeners}
     />
   );
 };

client/src/app/pages/migration-targets/components/dnd/grid.tsx

@@ -0,0 +1,45 @@
+import React, { forwardRef } from "react";
+import { Button, ButtonVariant } from "@patternfly/react-core";
+import { GripVerticalIcon } from "@patternfly/react-icons";
+
+import { TargetCard } from "@app/components/target-card/target-card";
+import { Target } from "@app/api/models";
+
+interface TargetItemProps {
+  target: Target;
+  style?: React.CSSProperties;
+  onEdit?: () => void;
+  onDelete?: () => void;
+  activatorNodeRef?: (element: HTMLElement | null) => void;
+}
+
+export const TargetItem = forwardRef<HTMLDivElement, TargetItemProps>(
+  (
+    { target, style, onEdit, onDelete, activatorNodeRef, ...draggableProps },
+    draggableContainerRef
+  ) => {
+    return (
+      <div style={style} ref={draggableContainerRef}>
+        <TargetCard
+          item={target}
+          dndSortHandle={
+            <Button
+              ref={activatorNodeRef}
+              className="grabbable"
+              id="drag-button"
+              aria-label="drag button"
+              variant={ButtonVariant.plain}
+              {...draggableProps}
+            >
+              <GripVerticalIcon />
+            </Button>
+          }
+          onEdit={onEdit}
+          onDelete={onDelete}
+        />
+      </div>
+    );
+  }
+);
+
+TargetItem.displayName = "Item";