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 ( {formatMessage('flowFolderChangeDialog.title')} @@ -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) => ( {formatMessage('flowFolderChangeDialog.confirm')} + {!canMoveFlow && ( + + {formatMessage('flowFolder.cannotMoveFlow')} + + )} + {createUpdateFlowFolderError && (