From 0ffc8dd96f7908c3f29e5c4f7aad816454968ca2 Mon Sep 17 00:00:00 2001
From: "kasia.oczkowska" <katarzyna.oczkowska@theworkingroup.net>
Date: Mon, 31 Mar 2025 13:04:10 +0100
Subject: [PATCH 1/2] feat: disable moving flow to a folder

---
 .../FlowFolderChangeDialog/index.jsx          | 32 ++++++++++++++++++-
 packages/web/src/locales/en.json              |  1 +
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/FlowFolderChangeDialog/index.jsx b/packages/web/src/components/FlowFolderChangeDialog/index.jsx
index bdbc3fe0..469fee71 100644
--- a/packages/web/src/components/FlowFolderChangeDialog/index.jsx
+++ b/packages/web/src/components/FlowFolderChangeDialog/index.jsx
@@ -13,6 +13,8 @@ import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
 import * as React from 'react';
 
+import useFlow from 'hooks/useFlow';
+import useCurrentUser from 'hooks/useCurrentUser';
 import useFolders from 'hooks/useFolders';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useFlowFolder from 'hooks/useFlowFolder';
@@ -25,8 +27,13 @@ function FlowFolderChangeDialog(props) {
   const { data: folders, isLoading: isFoldersLoading } = useFolders();
   const { data: flowFolder, isLoading: isFlowFolderLoading } =
     useFlowFolder(flowId);
+  const { data: flowData, isPending: isFlowPending } = useFlow(flowId);
+  const flow = flowData?.data;
+  const { data: userData, isPending: isCurrentUserPending } = useCurrentUser();
+  const currentUser = userData?.data;
 
   const [selectedFolder, setSelectedFolder] = React.useState(null);
+  const [canMoveFlow, setCanMoveFlow] = React.useState(false);
 
   const uncategorizedFolder = { id: null, name: 'Uncategorized' };
 
@@ -54,6 +61,16 @@ function FlowFolderChangeDialog(props) {
     [flowFolder],
   );
 
+  React.useEffect(
+    function updateCanMoveFlow() {
+      if (flow?.user_id && currentUser?.id) {
+        // TODO: flow.user_id is currently unavailable, preventing this from running. Remove this comment once it becomes available.
+        setCanMoveFlow(flow.user_id === currentUser.id);
+      }
+    },
+    [currentUser?.id, flow?.user_id],
+  );
+
   return (
     <Dialog open={open} onClose={onClose}>
       <DialogTitle>{formatMessage('flowFolderChangeDialog.title')}</DialogTitle>
@@ -88,7 +105,13 @@ function FlowFolderChangeDialog(props) {
             isOptionEqualToValue={(option, value) => option.id === value.id}
             getOptionLabel={(option) => option.name}
             loading={isFoldersLoading || isFlowFolderLoading}
-            disabled={isFoldersLoading || isFlowFolderLoading}
+            disabled={
+              isFoldersLoading ||
+              isFlowFolderLoading ||
+              isCurrentUserPending ||
+              isFlowPending
+            }
+            readOnly={!canMoveFlow}
             renderInput={(params) => (
               <TextField
                 {...params}
@@ -116,11 +139,18 @@ function FlowFolderChangeDialog(props) {
           onClick={handleConfirm}
           data-test="flow-folder-change-dialog-confirm-button"
           loading={isUpdateFlowFolderPending}
+          disabled={!canMoveFlow}
         >
           {formatMessage('flowFolderChangeDialog.confirm')}
         </LoadingButton>
       </DialogActions>
 
+      {!canMoveFlow && (
+        <Alert severity="info">
+          {formatMessage('flowFolder.cannotMoveFlow')}
+        </Alert>
+      )}
+
       {createUpdateFlowFolderError && (
         <Alert
           data-test="flow-folder-change-dialog-error-alert"
diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json
index 32945a16..b196a5c4 100644
--- a/packages/web/src/locales/en.json
+++ b/packages/web/src/locales/en.json
@@ -372,6 +372,7 @@
   "flowFolderChangeDialog.uncategorizedFolder": "Uncategorized",
   "flowFolderChangeDialog.successfullyUpdatedFolder": "The flow has been successfully moved to the new folder!",
   "flowFolder.uncategorized": "Uncategorized",
+  "flowFolder.cannotMoveFlow": "A flow can only be moved to a folder by the flow owner.",
   "footer.docsLinkText": "Documentation",
   "footer.tosLinkText": "Terms of Service",
   "footer.privacyPolicyLinkText": "Privacy",

From d199935f20877db13ab195ea4201f5fe56b4fe25 Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Tue, 1 Apr 2025 23:26:57 +0000
Subject: [PATCH 2/2] feat(FlowFolderChangeDialog): allow action only for flow
 owners

---
 .../FlowFolderChangeDialog/index.jsx          | 27 +++----------------
 1 file changed, 4 insertions(+), 23 deletions(-)

diff --git a/packages/web/src/components/FlowFolderChangeDialog/index.jsx b/packages/web/src/components/FlowFolderChangeDialog/index.jsx
index 469fee71..0384e211 100644
--- a/packages/web/src/components/FlowFolderChangeDialog/index.jsx
+++ b/packages/web/src/components/FlowFolderChangeDialog/index.jsx
@@ -14,7 +14,6 @@ import CloseIcon from '@mui/icons-material/Close';
 import * as React from 'react';
 
 import useFlow from 'hooks/useFlow';
-import useCurrentUser from 'hooks/useCurrentUser';
 import useFolders from 'hooks/useFolders';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useFlowFolder from 'hooks/useFlowFolder';
@@ -29,11 +28,8 @@ function FlowFolderChangeDialog(props) {
     useFlowFolder(flowId);
   const { data: flowData, isPending: isFlowPending } = useFlow(flowId);
   const flow = flowData?.data;
-  const { data: userData, isPending: isCurrentUserPending } = useCurrentUser();
-  const currentUser = userData?.data;
 
   const [selectedFolder, setSelectedFolder] = React.useState(null);
-  const [canMoveFlow, setCanMoveFlow] = React.useState(false);
 
   const uncategorizedFolder = { id: null, name: 'Uncategorized' };
 
@@ -61,16 +57,6 @@ function FlowFolderChangeDialog(props) {
     [flowFolder],
   );
 
-  React.useEffect(
-    function updateCanMoveFlow() {
-      if (flow?.user_id && currentUser?.id) {
-        // TODO: flow.user_id is currently unavailable, preventing this from running. Remove this comment once it becomes available.
-        setCanMoveFlow(flow.user_id === currentUser.id);
-      }
-    },
-    [currentUser?.id, flow?.user_id],
-  );
-
   return (
     <Dialog open={open} onClose={onClose}>
       <DialogTitle>{formatMessage('flowFolderChangeDialog.title')}</DialogTitle>
@@ -105,13 +91,8 @@ function FlowFolderChangeDialog(props) {
             isOptionEqualToValue={(option, value) => option.id === value.id}
             getOptionLabel={(option) => option.name}
             loading={isFoldersLoading || isFlowFolderLoading}
-            disabled={
-              isFoldersLoading ||
-              isFlowFolderLoading ||
-              isCurrentUserPending ||
-              isFlowPending
-            }
-            readOnly={!canMoveFlow}
+            disabled={isFoldersLoading || isFlowFolderLoading || isFlowPending}
+            readOnly={!flow?.isOwner}
             renderInput={(params) => (
               <TextField
                 {...params}
@@ -139,13 +120,13 @@ function FlowFolderChangeDialog(props) {
           onClick={handleConfirm}
           data-test="flow-folder-change-dialog-confirm-button"
           loading={isUpdateFlowFolderPending}
-          disabled={!canMoveFlow}
+          disabled={!flow?.isOwner}
         >
           {formatMessage('flowFolderChangeDialog.confirm')}
         </LoadingButton>
       </DialogActions>
 
-      {!canMoveFlow && (
+      {!flow?.isOwner && (
         <Alert severity="info">
           {formatMessage('flowFolder.cannotMoveFlow')}
         </Alert>