equinor · srvEq · Dec 6, 2024
diff --git a/components/DurationComponent.tsx b/components/DurationComponent.tsx
@@ -9,7 +9,7 @@ import { ChangeEvent, useEffect, useState } from "react";
 import { sortSearch } from "@/utils/sortSearch";
 
 type DurationComponent = {
-  selectedNode: NodeDataCommon;
+  selectedNode: NodeDataCommon | undefined;
   onChangeDuration: (e: {
     duration: number | null;
     unit: string | null;
@@ -23,16 +23,18 @@ export function DurationComponent({
   disabled,
 }: DurationComponent) {
   const [duration, setDuration] = useState<number | null>(
-    selectedNode.duration
+    selectedNode?.duration ?? null
   );
-  const [unit, setUnit] = useState<string | null>(selectedNode.unit);
+  const [unit, setUnit] = useState<string | null>(selectedNode?.unit ?? null);
   const [unitSearchInput, setUnitSearchInput] = useState("");
 
   const timeDefinitionDisplayNames = getTimeDefinitionDisplayNames();
 
   useEffect(() => {
-    setDuration(selectedNode.duration);
-    setUnit(selectedNode.unit);
+    if (selectedNode) {
+      setDuration(selectedNode.duration);
+      setUnit(selectedNode.unit);
+    }
   }, [selectedNode]);
 
   const parseValue = (value: string) =>

diff --git a/components/canvas/ChoiceNode.tsx b/components/canvas/ChoiceNode.tsx
@@ -47,7 +47,7 @@ export const ChoiceNode = ({
   const { addNode, isNodeButtonDisabled } = useNodeAdd();
   const connectionNodeId = useStore((state) => state.connectionNodeId);
   const lastChild = children[children?.length - 1];
-  const isEditingNode = useIsEditingNode(selected);
+  const { isEditingNode, editNodeData } = useIsEditingNode(selected, data);
 
   useEffect(() => {
     setHovering(false);
@@ -183,6 +183,7 @@ export const ChoiceNode = ({
         includeRole={false}
         includeDuration={false}
         includeEstimate={false}
+        editNodeData={editNodeData}
       />
       {renderNodeButtons()}
     </div>

diff --git a/components/canvas/EditableNodeTooltipSection.tsx b/components/canvas/EditableNodeTooltipSection.tsx
@@ -17,6 +17,7 @@ type EditableNodeTooltipSectionProps = {
   isEditing?: boolean;
   variant: "description" | "duration" | "role";
   nodeData: NodeDataCommon;
+  editNodeData: NodeDataCommon | undefined;
 };
 
 export const EditableNodeTooltipSection = ({
@@ -25,6 +26,7 @@ export const EditableNodeTooltipSection = ({
   isEditing,
   variant = "description",
   nodeData,
+  editNodeData,
 }: EditableNodeTooltipSectionProps) => {
   const { patchDescription, patchDuration, patchRole } =
     useNodeUpdate(nodeData);
@@ -39,7 +41,7 @@ export const EditableNodeTooltipSection = ({
       case "duration":
         return (
           <DurationComponent
-            selectedNode={nodeData}
+            selectedNode={editNodeData}
             onChangeDuration={({ duration, unit }) =>
               patchDuration(duration, unit)
             }
@@ -49,7 +51,7 @@ export const EditableNodeTooltipSection = ({
       case "role":
         return (
           <NodeInput
-            initialValue={text}
+            initialValue={editNodeData?.role}
             id={`${nodeData.id}-role`}
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
               patchRole(e.target.value)
@@ -61,7 +63,7 @@ export const EditableNodeTooltipSection = ({
         return (
           <MarkdownEditor
             canEdit={nodeData.userCanEdit}
-            defaultText={text || ""}
+            defaultText={editNodeData?.description || ""}
             label={"Description"}
             onChange={patchDescription}
           />

diff --git a/components/canvas/GenericNode.tsx b/components/canvas/GenericNode.tsx
@@ -41,7 +41,7 @@ export const GenericNode = ({
   const [hovering, setHovering] = useState(false);
   const [hoveringShape, setHoveringShape] = useState(false);
   const { addNode, isNodeButtonDisabled } = useNodeAdd();
-  const isEditingNode = useIsEditingNode(selected);
+  const { isEditingNode, editNodeData } = useIsEditingNode(selected, data);
 
   const handleQIPRContainerOnClick = useQIPRContainerOnClick(data);
   const shouldDisplayQIPR = useShouldDisplayQIPR(tasks, hovering, selected);
@@ -120,6 +120,7 @@ export const GenericNode = ({
         includeRole={false}
         includeDuration={false}
         includeEstimate={false}
+        editNodeData={editNodeData}
       />
       {renderNodeButtons()}
     </div>

diff --git a/components/canvas/MainActivityNode.tsx b/components/canvas/MainActivityNode.tsx
@@ -50,7 +50,7 @@ export const MainActivityNode = ({
   const [hoveringShape, setHoveringShape] = useState(false);
   const { addNode, isNodeButtonDisabled } = useNodeAdd();
 
-  const isEditingNode = useIsEditingNode(selected);
+  const { isEditingNode, editNodeData } = useIsEditingNode(selected, data);
 
   const handleQIPRContainerOnClick = useQIPRContainerOnClick(data);
   const shouldDisplayQIPR = useShouldDisplayQIPR(tasks, hovering, selected);
@@ -158,6 +158,7 @@ export const MainActivityNode = ({
         includeDuration={false}
         includeEstimate
         estimate={formattedDurationSum}
+        editNodeData={editNodeData}
       />
       {renderNodeButtons()}
     </div>

diff --git a/components/canvas/NodeInput.tsx b/components/canvas/NodeInput.tsx
@@ -1,12 +1,16 @@
 import { TextField, TextFieldProps } from "@equinor/eds-core-react";
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 
 export type NodeInputProps = Omit<TextFieldProps, "value"> & {
-  initialValue?: string;
+  initialValue?: string | null;
 };
 
 export const NodeInput = (props: NodeInputProps) => {
   const [value, setValue] = useState(props.initialValue || "");
+  useEffect(() => {
+    if (props.initialValue) setValue(props.initialValue);
+  }, [props.initialValue]);
+
   return (
     <TextField
       {...(props as TextFieldProps)}

diff --git a/components/canvas/NodeTooltip.tsx b/components/canvas/NodeTooltip.tsx
@@ -46,6 +46,7 @@ type NodeTooltipProps = Pick<NodeTooltipContainerProps, "position"> & {
   nodeData: NodeDataCommon;
   isHovering?: boolean;
   isEditing?: boolean;
+  editNodeData: NodeDataCommon | undefined;
 } & Field<"includeDescription", "description"> &
   Field<"includeDuration", "duration"> &
   Field<"includeEstimate", "estimate"> &
@@ -64,6 +65,7 @@ export const NodeTooltip = ({
   isEditing,
   position,
   nodeData,
+  editNodeData,
 }: NodeTooltipProps) => {
   const editingStyle = { minWidth: "300px" };
   const tooltipStyle = isEditing ? editingStyle : undefined;
@@ -85,6 +87,7 @@ export const NodeTooltip = ({
           text={description}
           variant="description"
           isEditing={isEditing}
+          editNodeData={editNodeData}
         />
       )}
       {shouldDisplayRole && (
@@ -94,6 +97,7 @@ export const NodeTooltip = ({
           text={role}
           variant="role"
           isEditing={isEditing}
+          editNodeData={editNodeData}
         />
       )}
       {shouldDisplayDuration && (
@@ -103,6 +107,7 @@ export const NodeTooltip = ({
           nodeData={nodeData}
           text={duration}
           isEditing={isEditing}
+          editNodeData={editNodeData}
         />
       )}
       {shouldDisplayEstimate && (
@@ -111,6 +116,7 @@ export const NodeTooltip = ({
           text={estimate}
           variant="duration"
           nodeData={nodeData}
+          editNodeData={editNodeData}
         />
       )}
     </NodeTooltipContainer>

diff --git a/components/canvas/SubActivityNode.tsx b/components/canvas/SubActivityNode.tsx
@@ -56,7 +56,7 @@ export const SubActivityNode = ({
   const [hoveringShape, setHoveringShape] = useState(false);
   const connectionNodeId = useStore((state) => state.connectionNodeId);
   const { addNode, isNodeButtonDisabled } = useNodeAdd();
-  const isEditingNode = useIsEditingNode(selected);
+  const { isEditingNode, editNodeData } = useIsEditingNode(selected, data);
 
   const handleQIPRContainerOnClick = useQIPRContainerOnClick(data);
   const shouldDisplayQIPR = useShouldDisplayQIPR(tasks, hovering, selected);
@@ -198,6 +198,7 @@ export const SubActivityNode = ({
         includeDuration
         duration={formatDuration(duration, unit)}
         includeEstimate={false}
+        editNodeData={editNodeData}
       />
       {renderNodeButtons()}
     </div>

diff --git a/components/canvas/WaitingNode.tsx b/components/canvas/WaitingNode.tsx
@@ -57,7 +57,7 @@ export const WaitingNode = ({
   const [hoveringShape, setHoveringShape] = useState(false);
   const connectionNodeId = useStore((state) => state.connectionNodeId);
   const { addNode, isNodeButtonDisabled } = useNodeAdd();
-  const isEditingNode = useIsEditingNode(selected);
+  const { isEditingNode, editNodeData } = useIsEditingNode(selected, data);
 
   const handleQIPRContainerOnClick = useQIPRContainerOnClick(data);
   const shouldDisplayQIPR = useShouldDisplayQIPR(tasks, hovering, selected);
@@ -194,6 +194,7 @@ export const WaitingNode = ({
         includeDuration
         duration={formatDuration(duration, unit)}
         includeEstimate={false}
+        editNodeData={editNodeData}
       />
       {renderNodeButtons()}
     </div>

diff --git a/components/canvas/hooks/useIsEditingNode.ts b/components/canvas/hooks/useIsEditingNode.ts
@@ -1,6 +1,21 @@
+import { NodeDataCommon } from "@/types/NodeData";
 import { useCanvasType } from "./useCanvasType";
+import { useEffect, useState } from "react";
 
-export const useIsEditingNode = (selected: boolean) => {
+export const useIsEditingNode = (selected: boolean, data: NodeDataCommon) => {
+  const [editNodeData, seteditNodeData] = useState<NodeDataCommon | undefined>(
+    undefined
+  );
   const canvasType = useCanvasType();
-  return canvasType === "main" && selected;
+  const isEditingNode = canvasType === "main" && selected;
+  useEffect(() => {
+    if (isEditingNode) {
+      seteditNodeData(data);
+    }
+  }, [isEditingNode]);
+  return {
+    editNodeData,
+    seteditNodeData,
+    isEditingNode,
+  };
 };