feat: disable moving flow to a folder

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"

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",