auto scroll to next step

package-lock.json

@@ -20,6 +20,7 @@
         "react-router-dom": "^6.10.0",
         "react-scripts": "5.0.1",
         "react-stl-viewer": "^2.2.5",
+        "uuid": "^9.0.0",
         "web-vitals": "^2.1.4"
       }
     },
@@ -16455,6 +16456,14 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sockjs/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -17649,9 +17658,9 @@
       }
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
       "bin": {
         "uuid": "dist/bin/uuid"
       }

package.json

@@ -15,6 +15,7 @@
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
     "react-stl-viewer": "^2.2.5",
+    "uuid": "^9.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/Components/PageContent/index.js

@@ -1,4 +1,4 @@
-import { Content, Footer } from "antd/es/layout/layout";
+import { Content } from "antd/es/layout/layout";
 import AppRoutes from "../AppRoutes";
 
 function PageContent() {

src/Pages/GroupTasks/GroupTasksViewModal.js

@@ -375,26 +375,32 @@ export default function GroupTasksViewModal({ isOpen }) {
                 description={
                   groupTaskSteps[index].Status ===
                   Constants.GROUP_TASKS_STATUS.INPUT_REQUIRED ? (
-                    <InputRequiredHandler
-                      webSocketContext={webSocketContext}
-                      currentGroupTask={currentGroupTask}
-                      groupTaskParameters={groupTask.parameters}
-                      groupTaskStepInputs={
-                        groupTaskSteps[index] !== undefined &&
-                        groupTaskSteps[index].Inputs !== "" &&
-                        groupTaskSteps[index].Inputs
-                      }
-                      notificationApi={notificationApi}
-                      step={index + 1}
-                      taskLockedByUserId={groupTaskSteps[index].LockedByUserId}
-                    />
+                    <div id={`${currentGroupTask.Id}-scroll-${index}`}>
+                      <InputRequiredHandler
+                        webSocketContext={webSocketContext}
+                        currentGroupTask={currentGroupTask}
+                        groupTaskParameters={groupTask.parameters}
+                        groupTaskStepInputs={
+                          groupTaskSteps[index] !== undefined &&
+                          groupTaskSteps[index].Inputs !== "" &&
+                          groupTaskSteps[index].Inputs
+                        }
+                        notificationApi={notificationApi}
+                        step={index + 1}
+                        taskLockedByUserId={
+                          groupTaskSteps[index].LockedByUserId
+                        }
+                      />
+                    </div>
                   ) : (
                     groupTaskSteps[index].Log.length > 0 && (
-                      <GroupTaskStepLogHandler
-                        currentGroupTaskId={currentGroupTask.Id}
-                        log={groupTaskSteps[index].Log}
-                        files={groupTaskSteps[index].Files}
-                      />
+                      <div id={`${currentGroupTask.Id}-scroll-${index}`}>
+                        <GroupTaskStepLogHandler
+                          currentGroupTaskId={currentGroupTask.Id}
+                          log={groupTaskSteps[index].Log}
+                          files={groupTaskSteps[index].Files}
+                        />
+                      </div>
                     )
                   )
                 }

src/utils.js

@@ -232,6 +232,8 @@ export function WebSocketProvider({
           break;
         case ReceivedMessagesCommands.NewGroupTaskStep:
           setGroupTasksSteps((arr) => [...arr, body]);
+
+          scrollToNextStep(body.GroupTasksId, body.Step);
           break;
         case ReceivedMessagesCommands.UpdateGroupTaskStep:
           setGroupTasksSteps((arr) => {
@@ -241,6 +243,8 @@ export function WebSocketProvider({
 
             return newArr;
           });
+
+          scrollToNextStep(body.GroupTasksId, body.Step);
           break;
         case ReceivedMessagesCommands.UpdateGroupTask:
           setGroupTasks((arr) => {
@@ -578,6 +582,16 @@ export function WebSocketProvider({
   );
 }
 
+function scrollToNextStep(groupTaskId, step) {
+  setTimeout(
+    () =>
+      document
+        .getElementById(`${groupTaskId}-scroll-${step - 1}`)
+        ?.scrollIntoView({ behavior: "smooth" }),
+    200
+  );
+}
+
 // https://stackoverflow.com/a/52486921
 function setNativeValue(element, value) {
   let lastValue = element.value;