Revert "Removed Request for task button on task details page"

__tests__/Unit/Components/Tasks/TaskDetails.test.tsx

@@ -487,6 +487,32 @@ describe('Update Progress button', () => {
             );
         });
     });
+
+    it('renders the Request for Task button when ?dev=true query parameter is present', async () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <TaskDetails taskID={details.taskID} />
+            </Provider>,
+            { query: { dev: 'true' } }
+        );
+
+        await waitFor(() => {
+            const requestForTaskButton = screen.getByTestId(
+                'request-task-button'
+            );
+            expect(requestForTaskButton).toBeInTheDocument();
+        });
+    });
+
+    it('Should not render the Request for Task button when ?dev=true query parameter is absent', () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <TaskDetails taskID={details.taskID} />
+            </Provider>
+        );
+        const requestForTaskButton = screen.queryByText('Request for Task');
+        expect(requestForTaskButton).not.toBeInTheDocument();
+    });
 });
 
 describe('Task details Edit mode ', () => {
@@ -591,6 +617,88 @@ describe('Task details Edit mode ', () => {
     });
 });
 
+describe('Task Details > Task Request', () => {
+    it('should show task request button when dev is true', async () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <TaskDetails taskID={details.taskID} />
+            </Provider>,
+            { query: { dev: 'true' } }
+        );
+
+        await waitFor(() => {
+            expect(
+                screen.queryByRole('button', { name: /request for task/i })
+            ).not.toBeNull();
+        });
+    });
+    it('should not show task request button when dev is false', async () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <TaskDetails taskID={details.taskID} />
+            </Provider>
+        );
+
+        await waitFor(() => {
+            expect(
+                screen.queryByRole('button', { name: /request for task/i })
+            ).toBeNull();
+        });
+    });
+
+    it('Task request modal should open on clicking request task button', async () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <TaskDetails taskID={details.taskID} />
+                <ToastContainer />
+            </Provider>,
+            { query: { dev: 'true' } }
+        );
+        await waitFor(() => {
+            expect(
+                screen.queryByRole('button', { name: /request for task/i })
+            ).not.toBeNull();
+        });
+
+        const taskRequestButton = screen.getByRole('button', {
+            name: /request for task/i,
+        });
+        fireEvent.click(taskRequestButton);
+
+        await waitFor(() => {
+            const taskRequestModalTitle = screen.getByText(/Task Request/i);
+            expect(taskRequestModalTitle).toBeInTheDocument();
+        });
+    });
+
+    it('Error toast should be shown on error', async () => {
+        server.use(...taskRequestErrorHandler);
+
+        renderWithRouter(
+            <Provider store={store()}>
+                <TaskDetails taskID={details.taskID} />
+                <ToastContainer />
+            </Provider>,
+            { query: { dev: 'true' } }
+        );
+        await waitFor(() => {
+            screen.getByRole('button', { name: /request for task/i });
+        });
+
+        const taskRequestButton = screen.getByRole('button', {
+            name: /request for task/i,
+        });
+        fireEvent.click(taskRequestButton);
+        const createRequestButton = screen.getByText(/Create Request/i);
+        await waitFor(() => {
+            fireEvent.click(createRequestButton);
+        });
+        await waitFor(() => {
+            expect(screen.queryByText(/taskId not provided/i)).not.toBeNull();
+        });
+    });
+});
+
 describe('TaskDependency', () => {
     it('should renders task titles', () => {
         render(

src/components/taskDetails/index.tsx

@@ -21,7 +21,11 @@ import Layout from '@/components/Layout';
 import TaskDependency from '@/components/taskDetails/taskDependency';
 import { useGetProgressDetailsQuery } from '@/app/services/progressesApi';
 import { ProgressDetailsData } from '@/types/standup.type';
+import { useAddOrUpdateMutation } from '@/app/services/taskRequestApi';
 import Progress from '../ProgressCard';
+import TaskManagementModal from '../issues/TaskManagementModal';
+import { TASK_REQUEST_TYPES } from '@/constants/tasks';
+import { TaskRequestData } from '../issues/constants';
 import ProgressContainer from '../tasks/card/progressContainer';
 import DevFeature from '../DevFeature';
 import Suggestions from '../tasks/SuggestionBox/Suggestions';
@@ -64,9 +68,15 @@ type Props = {
 };
 const TaskDetails: FC<Props> = ({ taskID }) => {
     const router = useRouter();
+    const { query } = router;
+    const isDevModeEnabled = query.dev === 'true' ? true : false;
 
-    const { isUserAuthorized } = useUserData();
-
+    const { isUserAuthorized, data: userData } = useUserData();
+    const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
+    const toggleTaskRequestModal = () => {
+        setIsTaskModalOpen(!isTaskModalOpen);
+    };
+    const [requestId, setRequestId] = useState<string>();
     const [newEndOnDate, setNewEndOnDate] = useState('');
     const [isEditing, setIsEditing] = useState<boolean>(false);
     const { data, isError, isLoading, isFetching } =
@@ -112,6 +122,7 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
 
         setEditedTaskDetails((prev) => ({ ...prev, status: newStatus }));
     };
+    const [addOrUpdateTaskRequest] = useAddOrUpdateMutation();
 
     useEffect(() => {
         if (data?.taskData) {
@@ -176,6 +187,25 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
         }));
     }
 
+    const handleCreateTaskRequest = async (data: TaskRequestData) => {
+        const requestData = {
+            taskId: taskID,
+            userId: userData?.id || '',
+            requestType: TASK_REQUEST_TYPES.ASSIGNMENT,
+            proposedStartDate: data.startedOn,
+            proposedDeadline: data.endsOn,
+            description: data.description,
+        };
+        if (!requestData.description) delete requestData.description;
+        try {
+            const response = await addOrUpdateTaskRequest(requestData).unwrap();
+            setRequestId(response.data.id);
+            toast(SUCCESS, response.message);
+        } catch (error: any) {
+            toast(ERROR, error.data.message);
+        }
+    };
+
     function renderLoadingComponent() {
         if (isLoading) {
             return <p className={styles.textCenter}>Loading...</p>;
@@ -463,6 +493,29 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
                                     Update Progress
                                 </button>
                             </TaskContainer>
+                            <div>
+                                <TaskContainer
+                                    hasImg={false}
+                                    title="Request for task"
+                                >
+                                    <button
+                                        data-testid="request-task-button"
+                                        className={styles.button}
+                                        onClick={toggleTaskRequestModal}
+                                    >
+                                        Request for task
+                                    </button>
+                                    <TaskManagementModal
+                                        isUserAuthorized={false}
+                                        isOpen={isTaskModalOpen}
+                                        toggle={toggleTaskRequestModal}
+                                        requestId={requestId}
+                                        handleCreateTaskRequest={
+                                            handleCreateTaskRequest
+                                        }
+                                    />
+                                </TaskContainer>
+                            </div>
                         </section>
                     </section>
                 </div>