Small fix for State Updates hook error showinig in the console

frontend/src/modules/Nodes/components/NodeElement/NodeElement.tsx

@@ -115,8 +115,8 @@ export const NodeElement: React.FC<{ nodeKey: string; node: NodeDTO }> = ({ node
       const errorWithDetails = result.error as ErrorWithDetails;
       setSubmitNodeResponseError({
         nodeName: node.name,
-        name: `${errorWithDetails.detail[0].type ?? "Error msg"}: `,
-        msg: errorWithDetails.detail[0].msg,
+        name: `${errorWithDetails?.detail?.length > 0 ? errorWithDetails?.detail[0].type : "Error msg"}: `,
+        msg: errorWithDetails?.detail?.length > 0 ? errorWithDetails?.detail[0].msg : "",
       });
       setRunningNodeInfo({
         timestampOfRun: formatDate(new Date()),

frontend/src/modules/Nodes/components/RunningJob/RunningJob.tsx

@@ -7,7 +7,7 @@ import { RunningJobNodeProgressTracker } from "./RunningJobNodeProgressTracker";
 import { RunningJobParameters } from "./RunningJobParameters";
 
 export const RunningJob: React.FC = () => {
-  const { runningNodeInfo, setRunningNodeInfo, updateAllButtonPressed, setUpdateAllButtonPressed, runStatus } = useNodesContext();
+  const { runStatus } = useNodesContext();
 
   return (
     <div className={styles.wrapper} data-testid="running-job-wrapper">
@@ -17,12 +17,7 @@ export const RunningJob: React.FC = () => {
           <RunningJobParameters />
         </div>
         <div className={styles.statesColumnWrapper} data-testid="states-column-wrapper">
-          <StateUpdates
-            runningNodeInfo={runningNodeInfo}
-            setRunningNodeInfo={setRunningNodeInfo}
-            updateAllButtonPressed={updateAllButtonPressed}
-            setUpdateAllButtonPressed={setUpdateAllButtonPressed}
-          />
+          <StateUpdates />
         </div>
       </div>
     </div>

frontend/src/modules/Nodes/components/StateUpdates/StateUpdateElement.tsx

@@ -1,36 +1,35 @@
 import React, { useState } from "react";
 // eslint-disable-next-line css-modules/no-unused-class
 import styles from "../RunningJob/RunningJob.module.scss";
-import { RunningNodeInfo, StateUpdateObject } from "../../context/NodesContext";
+import { StateUpdateObject, useNodesContext } from "../../context/NodesContext";
 import { CircularProgress } from "@mui/material";
 import { CheckMarkBeforeIcon } from "../../../../ui-lib/Icons/CheckMarkBeforeIcon";
 import { SnapshotsApi } from "../../../Snapshots/api/SnapshotsApi";
 import { CheckMarkAfterIcon } from "../../../../ui-lib/Icons/CheckMarkAfterIcon";
 import { useSnapshotsContext } from "../../../Snapshots/context/SnapshotsContext";
 import { ValueRow } from "./ValueRow";
 
-export interface StateUpdateProps {
-  key: string;
+interface StateUpdateProps {
+  keyValue: string;
   index: number;
   stateUpdateObject: StateUpdateObject;
-  runningNodeInfo?: RunningNodeInfo;
-  setRunningNodeInfo?: (a: RunningNodeInfo) => void;
-  updateAllButtonPressed: boolean;
 }
 
 export const StateUpdateElement: React.FC<StateUpdateProps> = (props) => {
-  const { key, index, stateUpdateObject, runningNodeInfo, setRunningNodeInfo, updateAllButtonPressed } = props;
+  const { keyValue, index, stateUpdateObject } = props;
   const [runningUpdate, setRunningUpdate] = React.useState<boolean>(false);
   const [parameterUpdated, setParameterUpdated] = useState<boolean>(false);
   const [customValue, setCustomValue] = useState<string | number>(JSON.stringify(stateUpdateObject.val ?? stateUpdateObject.new ?? ""));
   const previousValue = JSON.stringify(stateUpdateObject.val ?? stateUpdateObject.new ?? "");
+  const { runningNodeInfo, setRunningNodeInfo, updateAllButtonPressed } = useNodesContext();
+
   const { secondId, fetchOneSnapshot, trackLatestSidePanel, latestSnapshotId } = useSnapshotsContext();
 
   const handleUpdateClick = async () => {
     if (runningNodeInfo && runningNodeInfo.idx && stateUpdateObject && ("val" in stateUpdateObject || "new" in stateUpdateObject)) {
       setRunningUpdate(true);
       const stateUpdateValue = customValue ? customValue : (stateUpdateObject.val ?? stateUpdateObject.new!);
-      const response = await SnapshotsApi.updateState(runningNodeInfo?.idx, key, stateUpdateValue);
+      const response = await SnapshotsApi.updateState(runningNodeInfo?.idx, keyValue, stateUpdateValue);
 
       const stateUpdate = { ...stateUpdateObject, stateUpdated: response.result! };
       if (response.isOk && response.result && trackLatestSidePanel) {
@@ -39,20 +38,19 @@ export const StateUpdateElement: React.FC<StateUpdateProps> = (props) => {
       if (setRunningNodeInfo) {
         setRunningNodeInfo({
           ...runningNodeInfo,
-          state_updates: { ...runningNodeInfo.state_updates, [key]: stateUpdate },
+          state_updates: { ...runningNodeInfo.state_updates, [keyValue]: stateUpdate },
         });
       }
       setParameterUpdated(response.result!);
       setRunningUpdate(false);
     }
   };
   return (
-    // {!runningUpdate && !parameterUpdated && (
-    <div key={`${key}-wrapper`} className={styles.stateUpdateWrapper} data-testid={`state-update-wrapper-${key}`}>
+    <div key={`${keyValue}-wrapper`} className={styles.stateUpdateWrapper} data-testid={`state-update-wrapper-${keyValue}`}>
       <div className={styles.stateUpdateOrderNumberAndTitleWrapper}>
         <div className={styles.stateUpdateOrderNumber}>{index + 1}</div>
         <div className={styles.stateUpdateOrderKey} data-testid={`state-update-key-${index}`}>
-          {key}
+          {keyValue}
         </div>
       </div>
       <div className={styles.stateUpdateValueWrapper} data-testid={`state-update-value-wrapper-${index}`}>

frontend/src/modules/Nodes/components/StateUpdates/StateUpdates.tsx

@@ -1,32 +1,28 @@
-import React from "react";
-import { RunningNodeInfo, StateUpdate } from "../../context/NodesContext";
+import React, { useCallback } from "react";
+import { StateUpdate, useNodesContext } from "../../context/NodesContext";
 import { SnapshotsApi } from "../../../Snapshots/api/SnapshotsApi";
 // eslint-disable-next-line css-modules/no-unused-class
 import styles from "../RunningJob/RunningJob.module.scss";
-import { StateUpdateElement, StateUpdateProps } from "./StateUpdateElement";
+import { StateUpdateElement } from "./StateUpdateElement";
 import { Button } from "@mui/material";
-// import { ErrorStatusWrapper } from "../../../common/Error/ErrorStatusWrapper";
 import { useSnapshotsContext } from "../../../Snapshots/context/SnapshotsContext";
 
-export const StateUpdates: React.FC<{
-  runningNodeInfo: RunningNodeInfo | undefined;
-  setRunningNodeInfo: (a: RunningNodeInfo) => void;
-  updateAllButtonPressed: boolean;
-  setUpdateAllButtonPressed: (a: boolean) => void;
-}> = (props) => {
+export const StateUpdates: React.FC = () => {
   const { trackLatestSidePanel, fetchOneSnapshot, latestSnapshotId, secondId } = useSnapshotsContext();
-  const { runningNodeInfo, setRunningNodeInfo, updateAllButtonPressed, setUpdateAllButtonPressed } = props;
+  const { runningNodeInfo, updateAllButtonPressed, setUpdateAllButtonPressed } = useNodesContext();
 
-  const handleClick = async (stateUpdates: StateUpdate) => {
-    const litOfUpdates = Object.entries(stateUpdates ?? {})
+  const stateUpdates = runningNodeInfo?.state_updates ?? {};
+
+  const handleStateUpdates = async (updates: StateUpdate) => {
+    const listOfUpdates = Object.entries(updates)
       .filter(([, stateUpdateObject]) => !stateUpdateObject.stateUpdated)
-      .map(([key, stateUpdateObject]) => {
-        return {
-          data_path: key,
-          value: stateUpdateObject.val ?? stateUpdateObject.new!,
-        };
-      });
-    const result = await SnapshotsApi.updateStates(runningNodeInfo?.idx ?? "", litOfUpdates);
+      .map(([key, stateUpdateObject]) => ({
+        data_path: key,
+        value: stateUpdateObject.val ?? stateUpdateObject.new!,
+      }));
+
+    const result = await SnapshotsApi.updateStates(runningNodeInfo?.idx ?? "", listOfUpdates);
+
     if (result.isOk) {
       setUpdateAllButtonPressed(result.result!);
       if (result.result && trackLatestSidePanel) {
@@ -35,45 +31,36 @@ export const StateUpdates: React.FC<{
     }
   };
 
+  const handleOnClick = useCallback(() => handleStateUpdates(stateUpdates), [stateUpdates]);
+
+  const pendingUpdatesCount = Object.entries(stateUpdates).filter(([, stateUpdateObject]) => !stateUpdateObject.stateUpdated).length;
+
   return (
     <>
-      {/*{Object.entries(runningNodeInfo?.state_updates ?? {}).filter(([, stateUpdateObject]) => !stateUpdateObject.stateUpdated).length >*/}
-      {/*  0 && (*/}
       <div className={styles.stateWrapper} data-testid="state-wrapper">
         <div className={styles.stateTitle} data-testid="state-title">
           State updates&nbsp;
-          {runningNodeInfo?.state_updates && Object.keys(runningNodeInfo?.state_updates).length > 0
-            ? `(${Object.keys(runningNodeInfo?.state_updates).length})`
-            : ""}
+          {Object.keys(stateUpdates).length > 0 ? `(${Object.keys(stateUpdates).length})` : ""}
         </div>
+
         {updateAllButtonPressed ||
-          (Object.entries(runningNodeInfo?.state_updates ?? {}).filter(([, stateUpdateObject]) => !stateUpdateObject.stateUpdated).length >
-            0 && (
+          (pendingUpdatesCount > 0 && (
             <Button
               className={styles.updateAllButton}
               data-testid="update-all-button"
               disabled={updateAllButtonPressed}
-              onClick={() => handleClick(runningNodeInfo?.state_updates ?? {})}
+              onClick={handleOnClick}
             >
               Accept All
             </Button>
           ))}
       </div>
-      {/*// )}*/}
-      {runningNodeInfo?.state_updates && (
-        <div className={styles.stateUpdatesTopWrapper} data-testid="state-updates-top-wrapper">
-          {Object.entries(runningNodeInfo?.state_updates ?? {}).map(([key, stateUpdateObject], index) =>
-            StateUpdateElement({
-              key,
-              index,
-              stateUpdateObject,
-              runningNodeInfo,
-              setRunningNodeInfo,
-              updateAllButtonPressed,
-            } as StateUpdateProps)
-          )}
 
-          {/*{runningNodeInfo?.error && <ErrorStatusWrapper error={runningNodeInfo?.error} />}*/}
+      {Object.keys(stateUpdates).length > 0 && (
+        <div className={styles.stateUpdatesTopWrapper} data-testid="state-updates-top-wrapper">
+          {Object.entries(stateUpdates).map(([key, stateUpdateObject], index) => (
+            <StateUpdateElement key={key} keyValue={key} index={index} stateUpdateObject={stateUpdateObject} />
+          ))}
         </div>
       )}
     </>

frontend/src/modules/Project/Project.module.scss

@@ -23,20 +23,6 @@
 
 }
 
-.projectPageLayout {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--background-color);
-  max-width: 100%;
-  padding-left: 70px;
-  padding-right: 70px;
-  position: relative;
-}
-
-.projectActions {
-  padding-right: 20px;
-}
-
 .pageActions {
   border-radius: 45px;
   height: fit-content;