Implements task status flow

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

@@ -529,32 +529,6 @@ describe('Task details Edit mode ', () => {
         });
     });
 
-    test('Should set new status on click at any option', async () => {
-        server.use(...taskDetailsHandler);
-        renderWithRouter(
-            <Provider store={store()}>
-                <TaskDetails taskID={details.taskID} />
-            </Provider>,
-            { query: { dev: 'true' } }
-        );
-        await waitFor(() => {
-            const editButton = screen.getByRole('button', { name: 'Edit' });
-            fireEvent.click(editButton);
-        });
-        const opt = screen.getByRole('option', { name: /COMPLETED/i });
-        fireEvent.click(opt);
-
-        await waitFor(async () => {
-            const saveButton = await screen.findByRole('button', {
-                name: 'Save',
-            });
-            fireEvent.click(saveButton);
-        });
-        expect(screen.findByText(/COMPLETED/i)).not.toBeNull();
-
-        expect(screen.queryByText(/Successfully saved/i)).toBeNull();
-    });
-
     test('Should render assignee dropdown', async () => {
         renderWithRouter(
             <Provider store={store()}>

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

@@ -0,0 +1,162 @@
+import TaskDropDown from '@/components/tasks/TaskDropDown';
+import TaskDropDownModel from '@/components/tasks/TaskDropDownModel';
+import { MSG_ON_0_PROGRESS, MSG_ON_100_PROGRESS } from '@/constants/constants';
+import { BACKEND_TASK_STATUS } from '@/constants/task-status';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+const onChange = jest.fn();
+
+describe('TaskDropDown', () => {
+    beforeEach(() => {
+        onChange.mockReset();
+    });
+    it('should display model informing user that proceeding further will make progress 100%, on task status change from in progress to needs review', () => {
+        const oldProgress = 80;
+        const oldStatus = BACKEND_TASK_STATUS.IN_PROGRESS;
+
+        render(
+            <TaskDropDown
+                isDevMode={true}
+                oldProgress={oldProgress}
+                oldStatus={oldStatus}
+                onChange={onChange}
+            />
+        );
+
+        const msg = `The progress of current task is ${oldProgress}%. ${MSG_ON_100_PROGRESS}`;
+        fireEvent.change(screen.getByTestId('task-status'), {
+            target: { value: BACKEND_TASK_STATUS.NEEDS_REVIEW },
+        });
+
+        const msgTag = screen.getByTestId('msg');
+        expect(msgTag).toBeInTheDocument();
+        expect(msgTag).toHaveTextContent(msg);
+    });
+    it('should display model informing user that proceeding further will make progress 0%, on task status change from needs review to in progress', () => {
+        const oldProgress = 100;
+        const oldStatus = BACKEND_TASK_STATUS.NEEDS_REVIEW;
+
+        render(
+            <TaskDropDown
+                isDevMode={true}
+                oldProgress={oldProgress}
+                oldStatus={oldStatus}
+                onChange={onChange}
+            />
+        );
+
+        const msg = `The progress of current task is ${oldProgress}%. ${MSG_ON_0_PROGRESS}`;
+        fireEvent.change(screen.getByTestId('task-status'), {
+            target: { value: BACKEND_TASK_STATUS.IN_PROGRESS },
+        });
+
+        const msgTag = screen.getByTestId('msg');
+        expect(msgTag).toBeInTheDocument();
+        expect(msgTag).toHaveTextContent(msg);
+    });
+    it('should send changed status and progress if user click the proceed button of the model, on task status change from needs review to in progress', () => {
+        const oldProgress = 100;
+        const oldStatus = BACKEND_TASK_STATUS.NEEDS_REVIEW;
+
+        render(
+            <TaskDropDown
+                isDevMode={true}
+                oldProgress={oldProgress}
+                oldStatus={oldStatus}
+                onChange={onChange}
+            />
+        );
+
+        fireEvent.change(screen.getByTestId('task-status'), {
+            target: { value: BACKEND_TASK_STATUS.IN_PROGRESS },
+        });
+        fireEvent.click(screen.getByTestId('proceed'));
+        expect(onChange).toHaveBeenCalledWith({
+            newStatus: BACKEND_TASK_STATUS.IN_PROGRESS,
+            newProgress: 0,
+        });
+        expect(onChange).toHaveBeenCalledTimes(1);
+    });
+    it('should send reset status and progress if user click the cancel button of the model, on task status change from needs review to in progress', () => {
+        const oldProgress = 100;
+        const oldStatus = BACKEND_TASK_STATUS.NEEDS_REVIEW;
+
+        render(
+            <TaskDropDown
+                isDevMode={true}
+                oldProgress={oldProgress}
+                oldStatus={oldStatus}
+                onChange={onChange}
+            />
+        );
+
+        fireEvent.change(screen.getByTestId('task-status'), {
+            target: { value: BACKEND_TASK_STATUS.IN_PROGRESS },
+        });
+        fireEvent.click(screen.getByTestId('cancel'));
+        expect(onChange).toHaveBeenCalledTimes(0);
+        expect(screen.getByTestId('task-status')).toHaveValue(oldStatus);
+    });
+    it('should not show any model info on change of status from in progress to backlog', () => {
+        const oldProgress = 80;
+        const oldStatus = BACKEND_TASK_STATUS.IN_PROGRESS;
+
+        render(
+            <TaskDropDown
+                isDevMode={true}
+                oldProgress={oldProgress}
+                oldStatus={oldStatus}
+                onChange={onChange}
+            />
+        );
+
+        fireEvent.change(screen.getByTestId('task-status'), {
+            target: { value: BACKEND_TASK_STATUS.BACKLOG },
+        });
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith({
+            newStatus: BACKEND_TASK_STATUS.BACKLOG,
+        });
+        const msgTag = screen.queryByTestId('msg');
+        expect(msgTag).toBeNull();
+    });
+    it('should not show any model info on change of status from in progress to blocked', () => {
+        const oldProgress = 70;
+        const oldStatus = BACKEND_TASK_STATUS.IN_PROGRESS;
+
+        render(
+            <TaskDropDown
+                isDevMode={true}
+                oldProgress={oldProgress}
+                oldStatus={oldStatus}
+                onChange={onChange}
+            />
+        );
+
+        fireEvent.change(screen.getByTestId('task-status'), {
+            target: { value: BACKEND_TASK_STATUS.BLOCKED },
+        });
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith({
+            newStatus: BACKEND_TASK_STATUS.BLOCKED,
+        });
+        const msgTag = screen.queryByTestId('msg');
+        expect(msgTag).toBeNull();
+    });
+    describe('TaskDropDownModel', () => {
+        const handleProceed = jest.fn();
+        const resetProgressAndStatus = jest.fn();
+        it('should render message sent to it', () => {
+            const msg = 'This is random msg';
+            render(
+                <TaskDropDownModel
+                    message={msg}
+                    handleProceed={handleProceed}
+                    resetProgressAndStatus={resetProgressAndStatus}
+                />
+            );
+            const msgTag = screen.queryByTestId('msg');
+            expect(msgTag).toHaveTextContent(msg);
+        });
+    });
+});

src/components/taskDetails/index.tsx

@@ -25,11 +25,10 @@ import Progress from '../ProgressCard';
 import ProgressContainer from '../tasks/card/progressContainer';
 import DevFeature from '../DevFeature';
 import Suggestions from '../tasks/SuggestionBox/Suggestions';
-import { BACKEND_TASK_STATUS } from '@/constants/task-status';
-import task from '@/interfaces/task.type';
+import task, { taskStatusUpdateHandleProp } from '@/interfaces/task.type';
 import { TASK_EXTENSION_REQUEST_URL } from '@/constants/url';
-
-const taskStatus = Object.entries(BACKEND_TASK_STATUS);
+import TaskDropDown from '../tasks/TaskDropDown';
+import { beautifyStatus } from '../tasks/card/TaskStatusEditMode';
 
 export function Button(props: ButtonProps) {
     const { buttonName, clickHandler, value } = props;
@@ -105,12 +104,20 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
         setShowSuggestion(false);
         setEditedTaskDetails((prev) => ({ ...prev, assignee: userName }));
     };
-    const handleTaskStatusUpdate = (
-        ev: React.ChangeEvent<HTMLSelectElement>
-    ) => {
-        const newStatus: string = ev.target.value;
-
-        setEditedTaskDetails((prev) => ({ ...prev, status: newStatus }));
+    const handleTaskStatusUpdate = ({
+        newStatus,
+        newProgress,
+    }: taskStatusUpdateHandleProp) => {
+        const payload: { status: string; percentCompleted?: number } = {
+            status: newStatus,
+        };
+        if (newProgress !== undefined) {
+            payload.percentCompleted = newProgress;
+        }
+        setEditedTaskDetails((prev) => ({
+            ...prev,
+            ...payload,
+        }));
     };
 
     useEffect(() => {
@@ -301,34 +308,25 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
                                     />
                                     <DevFeature>
                                         {isEditing && (
-                                            <label>
-                                                Status:
-                                                <select
-                                                    name="status"
-                                                    onChange={
-                                                        handleTaskStatusUpdate
-                                                    }
-                                                    value={
-                                                        editedTaskDetails?.status
-                                                    }
-                                                >
-                                                    {taskStatus.map(
-                                                        ([name, status]) => (
-                                                            <option
-                                                                key={status}
-                                                                value={status}
-                                                            >
-                                                                {name}
-                                                            </option>
-                                                        )
-                                                    )}
-                                                </select>
-                                            </label>
+                                            <TaskDropDown
+                                                isDevMode={true}
+                                                onChange={
+                                                    handleTaskStatusUpdate
+                                                }
+                                                oldStatus={
+                                                    taskDetailsData?.status
+                                                }
+                                                oldProgress={
+                                                    taskDetailsData?.percentCompleted
+                                                }
+                                            />
                                         )}
                                     </DevFeature>
                                     <Details
                                         detailType={'Status'}
-                                        value={taskDetailsData?.status}
+                                        value={beautifyStatus(
+                                            taskDetailsData?.status
+                                        )}
                                     />
                                     <Details
                                         detailType={'Link'}
@@ -339,6 +337,7 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
                                     />
                                     <ProgressContainer
                                         content={taskDetailsData}
+                                        key={taskDetailsData?.percentCompleted}
                                     />
                                 </div>
                             </TaskContainer>