feat: can multi-select deployments when pressing shift

closes #1982

Author: jzsfkzm

apps/deploy-web/src/components/deployments/DeploymentList.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   Button,
   buttonVariants,
@@ -18,6 +18,7 @@ import {
 import { cn } from "@akashnetwork/ui/utils";
 import { Refresh, Rocket, Xmark } from "iconoir-react";
 import { useAtom } from "jotai";
+import { uniq } from "lodash";
 import Link from "next/link";
 import { NextSeo } from "next-seo";
 
@@ -64,6 +65,9 @@ export const DeploymentList: React.FunctionComponent = () => {
   const [isSignedInWithTrial] = useAtom(walletStore.isSignedInWithTrial);
   const { user } = useCustomUser();
 
+  const [lastSelectedDeploymentDseq, setLastSelectedDeploymentDseq] = useState<string | null>(null);
+  const [hoveredDelpoymentDseq, setHoveredDelpoymentDseq] = useState<string | null>(null);
+
   useEffect(() => {
     if (isWalletLoaded && isSettingsInit) {
       getDeployments();
@@ -110,10 +114,35 @@ export const DeploymentList: React.FunctionComponent = () => {
     setSearch(value);
   };
 
-  const onSelectDeployment = (checked: boolean, dseq: string) => {
+  const isBetweenDseqs = useCallback(
+    (dseq: string, dseqA: string, dseqB: string) => {
+      const dseqIndex = currentPageDeployments?.findIndex(d => d.dseq === dseq);
+      const dseqAIndex = currentPageDeployments?.findIndex(d => d.dseq === dseqA);
+      const dseqBIndex = currentPageDeployments?.findIndex(d => d.dseq === dseqB);
+
+      return (
+        dseqIndex !== undefined &&
+        dseqAIndex !== undefined &&
+        dseqBIndex !== undefined &&
+        ((dseqAIndex <= dseqIndex && dseqIndex <= dseqBIndex) || (dseqAIndex >= dseqIndex && dseqIndex >= dseqBIndex))
+      );
+    },
+    [currentPageDeployments]
+  );
+
+  const onSelectDeployment = (checked: boolean, dseq: string, eventShiftPressed: boolean) => {
+    const dseqs =
+      lastSelectedDeploymentDseq && eventShiftPressed
+        ? currentPageDeployments.filter(deployment => isBetweenDseqs(deployment.dseq, dseq, lastSelectedDeploymentDseq)).map(d => d.dseq)
+        : [dseq];
+
     setSelectedDeploymentDseqs(prev => {
-      return checked ? prev.concat([dseq]) : prev.filter(x => x !== dseq);
+      return checked ? uniq(prev.concat(dseqs)) : prev.filter(x => !dseqs.includes(x));
     });
+
+    if (!eventShiftPressed) {
+      setLastSelectedDeploymentDseq(dseq);
+    }
   };
 
   const onCloseSelectedDeployments = async () => {
@@ -148,6 +177,45 @@ export const DeploymentList: React.FunctionComponent = () => {
     setPageIndex(0);
   };
 
+  const [isShiftPressed, setIsShiftPressed] = useState(false);
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Shift") {
+        setIsShiftPressed(true);
+      }
+    };
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key === "Shift") {
+        setIsShiftPressed(false);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, []);
+
+  const onRowMouseEnter = (dseq: string) => {
+    setHoveredDelpoymentDseq(dseq);
+  };
+
+  const isRowHighlightedForMultipleSelection = useCallback(
+    (dseq: string) => {
+      if (!isShiftPressed || !hoveredDelpoymentDseq || !lastSelectedDeploymentDseq) {
+        return false;
+      }
+
+      const dseqIndex = currentPageDeployments?.findIndex(d => d.dseq === dseq);
+      return dseqIndex !== undefined && isBetweenDseqs(dseq, hoveredDelpoymentDseq, lastSelectedDeploymentDseq);
+    },
+    [isShiftPressed, hoveredDelpoymentDseq, lastSelectedDeploymentDseq, currentPageDeployments, isBetweenDseqs]
+  );
+
   return (
     <Layout isLoading={isLoadingDeployments || isLoadingProviders} isUsingSettings isUsingWallet>
       <NextSeo title="Deployments" />
@@ -293,6 +361,8 @@ export const DeploymentList: React.FunctionComponent = () => {
                   isSelectable
                   onSelectDeployment={onSelectDeployment}
                   checked={selectedDeploymentDseqs.includes(deployment.dseq)}
+                  onMouseEnter={onRowMouseEnter}
+                  isHighlighted={isRowHighlightedForMultipleSelection(deployment.dseq)}
                 />
               ))}
             </TableBody>

apps/deploy-web/src/components/deployments/DeploymentListRow.tsx

@@ -13,6 +13,7 @@ import {
   TableCell,
   TableRow
 } from "@akashnetwork/ui/components";
+import { cn } from "@akashnetwork/ui/utils";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import formatDistanceToNow from "date-fns/formatDistanceToNow";
@@ -50,14 +51,25 @@ import { LeaseChip } from "./LeaseChip";
 type Props = {
   deployment: NamedDeploymentDto;
   isSelectable?: boolean;
-  onSelectDeployment?: (isChecked: boolean, dseq: string) => void;
+  onSelectDeployment?: (isChecked: boolean, dseq: string, eventShiftPressed: boolean) => void;
+  onMouseEnter?: (dseq: string) => void;
   checked?: boolean;
   providers: Array<ApiProviderList> | undefined;
-  refreshDeployments: any;
+  refreshDeployments: () => void;
   children?: ReactNode;
+  isHighlighted?: boolean;
 };
 
-export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment, isSelectable, onSelectDeployment, checked, providers, refreshDeployments }) => {
+export const DeploymentListRow: React.FunctionComponent<Props> = ({
+  deployment,
+  isSelectable,
+  onSelectDeployment,
+  checked,
+  providers,
+  refreshDeployments,
+  onMouseEnter,
+  isHighlighted
+}) => {
   const router = useRouter();
   const [open, setOpen] = useState(false);
   const [isDepositingDeployment, setIsDepositingDeployment] = useState(false);
@@ -132,7 +144,7 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
     const response = await signAndBroadcastTx([message]);
     if (response) {
       if (onSelectDeployment) {
-        onSelectDeployment(false, deployment.dseq);
+        onSelectDeployment(false, deployment.dseq, false);
       }
 
       refreshDeployments();
@@ -168,7 +180,14 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
 
   return (
     <>
-      <TableRow className="cursor-pointer hover:bg-muted-foreground/10 [&>td]:p-2" role="link" onClick={viewDeployment}>
+      <TableRow
+        className={cn("cursor-pointer hover:bg-muted-foreground/10 [&>td]:p-2", {
+          "bg-muted-foreground/10": isHighlighted
+        })}
+        role="link"
+        onClick={viewDeployment}
+        onMouseEnter={() => onMouseEnter?.(deployment.dseq)}
+      >
         <TableCell>
           <div className="flex items-center justify-center">
             <SpecDetailList
@@ -296,9 +315,7 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
                 checked={checked}
                 onClick={event => {
                   event.stopPropagation();
-                }}
-                onCheckedChange={value => {
-                  onSelectDeployment && onSelectDeployment(value as boolean, deployment.dseq);
+                  onSelectDeployment?.(!checked, deployment.dseq, event.shiftKey);
                 }}
               />
             )}