- edit workflow back-end implementation

- clone workflow back-end implementation
- added loading and redirecting to form submissions
- fixed form intake in progress bug
- fixed rendering bug

src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx

@@ -26,6 +26,7 @@ export default function WorkflowEditableStepComponent({
 }: Props) {
 
     const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
+    const [isAdding, setIsAdding] = useState(false);
 
     const teacherOptions: Option[] = useMemo(() => 
         entityTeachers
@@ -85,13 +86,17 @@ export default function WorkflowEditableStepComponent({
     );
 
     const handleAddSelectComponent = () => {
-        setSelects((prev) => {
-            const updated = [...prev, null];
-            onSelectChange(updated.length, updated.length - 1, null);
-            return updated;
-        });
+        setIsAdding(true); // I hate to use flags... but it was the only way i was able to prevent onSelectChange to cause parent component from re-rendering in the midle of EditableWorkflowStep rerender.
+        setSelects(prev => [...prev, null]);
     };
 
+    useEffect(() => {
+        if (isAdding) {
+            onSelectChange(selects.length, selects.length - 1, null);
+            setIsAdding(false); 
+        }
+    }, [selects.length, isAdding, onSelectChange]);
+
     const handleSelectChangeAt = (numberOfSelects: number, index: number, option: Option | null) => {
         const updated = [...selects];
         updated[index] = option;