feat: delete card button

components/canvas/ChoiceNode.tsx

@@ -6,6 +6,7 @@ import { NodeDataCommon } from "types/NodeData";
 import { NodeTypes } from "types/NodeTypes";
 import { ChoiceButton } from "./ChoiceButton";
 import { MergeButton } from "./MergeButton";
+import styles from "./Node.module.scss";
 import { NodeButtonsContainer } from "./NodeButtonsContainer";
 import { NodeCard } from "./NodeCard";
 import { NodeDescription } from "./NodeDescription";
@@ -19,6 +20,7 @@ import { useIsEditingNode } from "./hooks/useIsEditingNode";
 import { useNodeAdd } from "./hooks/useNodeAdd";
 import { isChoiceChild } from "./utils/nodeRelationsHelper";
 import { useNodeRef } from "./hooks/useNodeRef";
+import { NodeDelete } from "./NodeDelete";
 
 export const ChoiceNode = ({
   data,
@@ -42,6 +44,7 @@ export const ChoiceNode = ({
     shapeWidth,
     disabled,
     handleClickNode,
+    handleNodeDelete,
   } = data;
   const [hovering, setHovering] = useState(false);
   const [hoveringShape, setHoveringShape] = useState(false);
@@ -188,6 +191,16 @@ export const ChoiceNode = ({
         includeEstimate={false}
         nodeRef={ref}
       />
+      <div className={styles["node-rhombus-delete-container"]}>
+        {hovering && !merging && (
+          <NodeDelete
+            data={data}
+            userCanEdit={userCanEdit}
+            handleNodeDelete={handleNodeDelete}
+            title="Delete Choice"
+          />
+        )}
+      </div>
       {renderNodeButtons()}
     </div>
   );

components/canvas/LinkedProcessNode.tsx

@@ -26,9 +26,14 @@ import {
   isMainActivityColumn,
 } from "./utils/nodeRelationsHelper";
 import { useNodeRef } from "./hooks/useNodeRef";
+import { NodeDelete } from "./NodeDelete";
 
 export const LinkedProcessNode = ({
-  data: {
+  data,
+  selected,
+  dragging,
+}: NodeProps<NodeDataCommon>) => {
+  const {
     id,
     linkedProjectData,
     column,
@@ -44,10 +49,8 @@ export const LinkedProcessNode = ({
     shapeHeight,
     shapeWidth,
     disabled,
-  },
-  selected,
-  dragging,
-}: NodeProps<NodeDataCommon>) => {
+    handleNodeDelete,
+  } = data;
   const [hovering, setHovering] = useState(false);
   const [hoveringShape, setHoveringShape] = useState(false);
   const connectionNodeId = useStore((state) => state.connectionNodeId);
@@ -166,10 +169,20 @@ export const LinkedProcessNode = ({
           onMouseEnter={() => !dragging && setHoveringShape(true)}
           onMouseLeave={() => setHoveringShape(false)}
         >
-          <NodeDescription
-            header={name ?? undefined}
-            helperText={formattedUpdated}
-          />
+          <div className={styles["node__description-delete-container"]}>
+            <NodeDescription
+              header={name ?? undefined}
+              helperText={formattedUpdated}
+            />
+            {hovering && !merging && (
+              <NodeDelete
+                data={data}
+                userCanEdit={userCanEdit}
+                handleNodeDelete={handleNodeDelete}
+                title="Delete Linked Process"
+              />
+            )}
+          </div>
           {userAccesses && (
             <NodeUserDots
               userAccesses={userAccesses}

components/canvas/MainActivityNode.tsx

@@ -26,6 +26,8 @@ import { SourceHandle } from "./SourceHandle";
 import { SubActivityButton } from "./SubActivityButton";
 import { WaitingButton } from "./WaitingButton";
 import { useNodeRef } from "./hooks/useNodeRef";
+import styles from "./Node.module.scss";
+import { NodeDelete } from "./NodeDelete";
 
 export const MainActivityNode = ({
   data,
@@ -46,6 +48,7 @@ export const MainActivityNode = ({
     shapeWidth,
     totalDurations,
     disabled,
+    handleNodeDelete,
   } = data;
   const [hovering, setHovering] = useState(false);
   const [hoveringShape, setHoveringShape] = useState(false);
@@ -132,10 +135,20 @@ export const MainActivityNode = ({
           onMouseEnter={() => !dragging && setHoveringShape(true)}
           onMouseLeave={() => setHoveringShape(false)}
         >
-          <NodeDescription
-            header={!description ? getNodeTypeName(type) : undefined}
-            description={description}
-          />
+          <div className={styles["node__description-delete-container"]}>
+            <NodeDescription
+              header={!description ? getNodeTypeName(type) : undefined}
+              description={description}
+            />
+            {hovering && !merging && (
+              <NodeDelete
+                data={data}
+                userCanEdit={userCanEdit}
+                handleNodeDelete={handleNodeDelete}
+                title="Delete Main Activity"
+              />
+            )}
+          </div>
           {formattedDurationSumShort && (
             <NodeDuration duration={formattedDurationSumShort} />
           )}

components/canvas/Node.module.scss

@@ -37,6 +37,7 @@
   height: 70%;
   transform: rotate(45deg);
   border-radius: 4px;
+  align-items: center;
 }
 
 .node-shape--rhombus > * {
@@ -115,6 +116,7 @@
 
 .node-shape--rhombus .node__description {
   text-align: center;
+  -webkit-line-clamp: 3;
 }
 
 .node__placeholder-text {
@@ -134,3 +136,14 @@
 .node__userdots-container :hover {
   cursor: grab;
 }
+
+.node__description-delete-container {
+  display: flex;
+  flex: 1;
+}
+
+.node-rhombus-delete-container {
+  position: absolute;
+  top: -5px;
+  right: -10px;
+}

components/canvas/NodeDelete.tsx

@@ -0,0 +1,33 @@
+import { canDeleteNode } from "@/utils/canDeleteNode";
+import { Button, Icon } from "@equinor/eds-core-react";
+import { delete_forever } from "@equinor/eds-icons";
+import { Node } from "reactflow";
+
+type NodeDelete = {
+  data: Node["data"];
+  userCanEdit?: boolean;
+  handleNodeDelete?: () => void;
+  title: string;
+};
+
+export const NodeDelete = ({
+  data,
+  userCanEdit,
+  handleNodeDelete,
+  title,
+}: NodeDelete) => {
+  return (
+    <Button
+      disabled={!canDeleteNode(data) || !userCanEdit}
+      variant="ghost_icon"
+      title={title}
+      color="danger"
+      onClick={(event) => {
+        handleNodeDelete && handleNodeDelete();
+        event.stopPropagation();
+      }}
+    >
+      <Icon data={delete_forever} />
+    </Button>
+  );
+};

components/canvas/SubActivityNode.tsx

@@ -26,6 +26,7 @@ import { useShouldDisplayQIPR } from "./hooks/useShouldDisplayQIPR";
 import { FormatNodeText } from "./utils/FormatNodeText";
 import { isChoiceChild } from "./utils/nodeRelationsHelper";
 import { useNodeRef } from "./hooks/useNodeRef";
+import { NodeDelete } from "./NodeDelete";
 
 export const SubActivityNode = ({
   data,
@@ -52,6 +53,7 @@ export const SubActivityNode = ({
     shapeHeight,
     shapeWidth,
     disabled,
+    handleNodeDelete,
   } = data;
   const [hovering, setHovering] = useState(false);
   const [hoveringShape, setHoveringShape] = useState(false);
@@ -167,10 +169,20 @@ export const SubActivityNode = ({
           onMouseEnter={() => !dragging && setHoveringShape(true)}
           onMouseLeave={() => setHoveringShape(false)}
         >
-          <NodeDescription
-            header={!description ? getNodeTypeName(type) : undefined}
-            description={description}
-          />
+          <div className={styles["node__description-delete-container"]}>
+            <NodeDescription
+              header={!description ? getNodeTypeName(type) : undefined}
+              description={description}
+            />
+            {hovering && !merging && (
+              <NodeDelete
+                data={data}
+                userCanEdit={userCanEdit}
+                handleNodeDelete={handleNodeDelete}
+                title="Delete Sub Activity"
+              />
+            )}
+          </div>
           <div className={styles["node__role-container"]}>
             <FormatNodeText
               variant="caption"

components/canvas/WaitingNode.tsx

@@ -28,6 +28,7 @@ import { useQIPRContainerOnClick } from "./hooks/useQIPRContainerOnClick";
 import { useShouldDisplayQIPR } from "./hooks/useShouldDisplayQIPR";
 import { isChoiceChild } from "./utils/nodeRelationsHelper";
 import { useNodeRef } from "./hooks/useNodeRef";
+import { NodeDelete } from "./NodeDelete";
 
 export const WaitingNode = ({
   data,
@@ -53,6 +54,7 @@ export const WaitingNode = ({
     shapeHeight,
     shapeWidth,
     disabled,
+    handleNodeDelete,
   } = data;
   const [hovering, setHovering] = useState(false);
   const [hoveringShape, setHoveringShape] = useState(false);
@@ -168,10 +170,20 @@ export const WaitingNode = ({
           onMouseEnter={() => !dragging && setHoveringShape(true)}
           onMouseLeave={() => setHoveringShape(false)}
         >
-          <NodeDescription
-            header={!description ? getNodeTypeName(type) : undefined}
-            description={description}
-          />
+          <div className={styles["node__description-delete-container"]}>
+            <NodeDescription
+              header={!description ? getNodeTypeName(type) : undefined}
+              description={description}
+            />
+            {hovering && !merging && (
+              <NodeDelete
+                data={data}
+                userCanEdit={userCanEdit}
+                handleNodeDelete={handleNodeDelete}
+                title="Delete Waiting"
+              />
+            )}
+          </div>
           <div className={styles["node__waitingtime-container"]}>
             <Icon data={timeIcon} size={24} style={{ marginRight: 5 }} />
             <Typography variant="caption">

components/canvas/hooks/useFlowState.tsx

@@ -57,6 +57,12 @@ export const useFlowState = (
     setSelectedNode(node as Node<NodeDataCommon>);
   };
 
+  const handleNodeDelete = (id?: string) => {
+    const node = tempNodes.find((n) => n.id === id);
+    if (!node) return;
+    setNodeToBeDeleted(node as Node<NodeDataCommon>);
+  };
+
   const handleSetSelectedEdge = (selectedEdge: Edge | undefined) => {
     if (userCanEdit && !isEditingEdge) {
       const updatedEdges = edges.map((e) => {
@@ -99,6 +105,7 @@ export const useFlowState = (
       merging,
       mergeNode,
       handleClickNode,
+      handleNodeDelete,
       disabledNodeTypes
     );
     tempNodes = setMainActivitiesDurationSum(

components/canvas/utils/createNodes.tsx

@@ -13,6 +13,7 @@ const createNode = (
   merging: boolean,
   mergeNode: { mutate: (args: { sourceId: string; targetId: string }) => void },
   handleClickNode: (id: string) => void,
+  handleNodeDelete: (id: string) => void,
   disabledNodeTypes?: NodeTypes[],
   parent: NodeDataApi | null = null,
   column: Column | null = null,
@@ -53,6 +54,7 @@ const createNode = (
       data: {
         ...node,
         handleClickNode: () => handleClickNode(node.id),
+        handleNodeDelete: () => handleNodeDelete(node.id),
         handleMerge: (sourceId, targetId) =>
           sourceId && targetId && mergeNode.mutate({ sourceId, targetId }),
         mergeable:
@@ -105,6 +107,7 @@ const createNode = (
         merging,
         mergeNode,
         handleClickNode,
+        handleNodeDelete,
         disabledNodeTypes,
         node,
         column,
@@ -122,6 +125,7 @@ export const createNodes = (
   merging: boolean,
   mergeNode: { mutate: (args: { sourceId: string; targetId: string }) => void },
   handleClickNode: (id: string) => void,
+  handleNodeDelete: (id: string) => void,
   disabledNodeTypes: NodeTypes[] = []
 ) => {
   const root = apiNodes.find(
@@ -140,6 +144,7 @@ export const createNodes = (
     merging,
     mergeNode,
     handleClickNode,
+    handleNodeDelete,
     disabledNodeTypes
   );
 };

types/NodeData.ts

@@ -15,6 +15,7 @@ export type NodeData = {
   mergeOption?: boolean;
   handleMerge?: (sourceId: string | null, targetId: string | null) => void;
   handleClickNode?: () => void;
+  handleNodeDelete?: () => void;
   mergeable?: boolean;
   merging?: boolean;
   deletable: boolean;

utils/canDeleteNode.ts

@@ -8,6 +8,7 @@ export const canDeleteNode = (node: NodeDataCommon): boolean => {
     type === NodeTypes.mainActivity ||
     type === NodeTypes.subActivity ||
     type === NodeTypes.waiting ||
-    type === NodeTypes.choice
+    type === NodeTypes.choice ||
+    type === NodeTypes.linkedProcess
   );
 };