feat(1263): Add purpose & status to task card, based on task card in website-my #1319

Saitharun279 · 2025-01-16T21:26:49Z

Date: 17 January, 2025

Developer Name: Saitharun B

Issue Ticket Number

Closes feat : add missing features in Task Card Component #1263

Description

Added code changes to let task owner do the following:

Task Status Updation
View purpose of the task

Documentation Updated?

Yes
No

Under Feature Flag

Yes
No

Database Changes

Yes
No

Breaking Changes

Yes
No

Development Tested?

Yes
No

Screenshots

Web

local_testing.mov

mobile

local.testing.moble.mov

Test Coverage

Screenshot

Additional Notes

design doc link

…card

vercel · 2025-01-16T21:26:53Z

@Saitharun279 is attempting to deploy a commit to the RDS-Team Team on Vercel.

A member of the Team first needs to authorize it.

tejaskh3

Please update this branch with develop.
please pass me the link to the design you have updated.
and if there is any design doc created for this task, please attach that to this PR details.

Saitharun279 · 2025-01-17T22:17:14Z

Updated this branch with develop.
I didn't make any design made for this, the task card here is being updated with reference from task card in my site.
Reference images have been included in the design doc.
Attached design doc link.

AnujChhikara

Hello @Saitharun279, could you please check if we can use predefined color variables from variables.scss instead of adding random colors?

AnujChhikara · 2025-01-18T04:25:10Z

src/components/tasks/card/index.tsx

+                            Purpose:{' '}
+                        </b>
+                        <span className={styles.cardPurposeText}>
+                            {editedTaskDetails.purpose}


do we have purpose field when we create the TCR from status site?

I just checked, it is not present in the TCR.
I think it needs to be added.

AnujChhikara · 2025-01-18T04:30:02Z

src/components/tasks/card/card.module.scss


+.cardPurposeAndStatusFont {
+    font-size: 1.1rem;
+    color: #555;


Can we use a predefined color from variables.scss here?

All the colors that I used are not present in variables.css. I have taken them from my site.
should i add them in variables.scss ?

AnujChhikara · 2025-01-18T04:34:47Z

Could you write tests for your changes?
Could you please include the mobile view in the screenshot as well?

Saitharun279 · 2025-01-18T09:48:00Z

Could you write tests for your changes?

Added tests.

Could you please include the mobile view in the screenshot as well?

Attached mobile video

yesyash · 2025-01-18T19:12:32Z

src/components/tasks/card/card.module.scss

 }

+.taskStatusUpdate {
+    border: 1px solid #000000b3;


are there existing css variables we can use instead of hardcoding the color?

Didn't find any existing css variables for this one.

src/components/tasks/card/card.module.scss

yesyash · 2025-01-18T19:13:35Z

src/components/tasks/card/index.tsx

    };
    const isEditable = shouldEdit && isUserAuthorized && isEditMode;
+    const isSelfTask = editedTaskDetails.assignee === data?.username;
+    const verifiedTask =


should this be named isTaskCompleted as we're doing a check on the percentage this task has be completed?

The dropdown to update task staus should only be shown for non verified tasks, this variable verifiedTask is to check if task status is verified.

The check for 100 percent completion can be removed, as the status updation API allows update to Verified when percentage is 100.
I will remove this percentage check in next commit.

I think the variable can be renamed to isVerifiedTask.

Removed 100 percentage check and modified variable name to isVerifiedTask

src/components/tasks/card/card.module.scss

yesyash · 2025-01-18T19:35:10Z

src/components/tasks/card/TaskStatusEditMode.tsx

    const [updateTask] = useUpdateTaskMutation();
+    const [updateSelfTask] = useUpdateSelfTaskMutation();

    const onChangeUpdateTaskStatus = ({


can we update this function to use try catch to make this cleaner and easier to update? example:

const onChangeUpdateTaskStatus = async ({ newStatus, newProgress, }: taskStatusUpdateHandleProp) => { setSaveStatus(PENDING); const payload: { status: string; percentCompleted?: number } = { status: newStatus, }; if (newProgress !== undefined) { payload.percentCompleted = newProgress; } setEditedTaskDetails((prev: CardTaskDetails) => ({ ...prev, ...payload, })); try{ if (isDevMode && isSelfTask){ await updateSelfTask({ id: task.id, task: payload }) } else { await updateTask({ id: task.id, task: payload }); } } catch(error){ setSaveStatus(ERROR_STATUS); } finally { setTimeout(() => { setSaveStatus(''); }, 3000); } };

should we call setEditedTaskDetails after the API call is successful preventing any inconsistent states?

can we remove the setTimeout from the finally block?

Will update in next commit.

But not sure about removing setTimeout, will check and update that as well.

yesyash · 2025-01-18T19:58:34Z

please fix the pr title to make changes being made in this pr more clear.
Example: refactor(970): moves notices for joining to its own component website-www#972

…and toast messages.

graphite-app · 2025-05-29T15:37:14Z

src/components/tasks/card/TaskStatusEditMode.tsx

+        try {
+            if (isDevMode && isSelfTask) {
+                await updateSelfTask({ id: task.id, task: payload }).unwrap();
+            }
+            toast(SUCCESS, STATUS_UPDATE_SUCCESSFUL);


The success toast is displayed unconditionally, regardless of whether updateSelfTask was executed or successful. Consider moving the toast inside the if block after the await call to ensure it only appears when the operation actually succeeds:

try { if (isDevMode && isSelfTask) { await updateSelfTask({ id: task.id, task: payload }).unwrap(); toast(SUCCESS, STATUS_UPDATE_SUCCESSFUL); } }

This way, the success message will only be shown when the task update operation is both attempted and completed successfully.

Suggested change

try {

if (isDevMode && isSelfTask) {

await updateSelfTask({ id: task.id, task: payload }).unwrap();

}

toast(SUCCESS, STATUS_UPDATE_SUCCESSFUL);

try {

if (isDevMode && isSelfTask) {

await updateSelfTask({ id: task.id, task: payload }).unwrap();

toast(SUCCESS, STATUS_UPDATE_SUCCESSFUL);

}

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

graphite-app · 2025-05-29T15:37:16Z

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

+    it('change task status from BLOCKED to IN_PROGRESS when  and isDevMode are true', async () => {
+        const setEditedTaskDetails = jest.fn();
+
+        renderWithRouter(
+            <Provider store={store()}>
+                <TaskStatusEditMode
+                    task={BLOCKED_TASK}
+                    setEditedTaskDetails={setEditedTaskDetails}
+                    isDevMode={true}
+                    isSelfTask={true}
+                />
+            </Provider>
+        );
+
+        const statusSelect = screen.getByLabelText('Status:');
+        expect(statusSelect).toHaveValue('BLOCKED');
+
+        fireEvent.change(statusSelect, { target: { value: 'IN_PROGRESS' } });
+        expect(statusSelect).toHaveValue('IN_PROGRESS');
+    });


This test verifies the UI state changes but doesn't confirm the actual API call functionality. Consider adding an assertion to verify that updateSelfTaskMutation is called with the correct parameters:

expect(updateSelfTaskSpy).toHaveBeenCalledWith({ id: BLOCKED_TASK.id, task: expect.objectContaining({ status: 'IN_PROGRESS' }) });

This would ensure the status update is properly propagated to the API layer, not just reflected in the UI component.

Suggested change

it('change task status from BLOCKED to IN_PROGRESS when and isDevMode are true', async () => {

const setEditedTaskDetails = jest.fn();

renderWithRouter(

<Provider store={store()}>

<TaskStatusEditMode

task={BLOCKED_TASK}

setEditedTaskDetails={setEditedTaskDetails}

isDevMode={true}

isSelfTask={true}

/>

</Provider>

);

const statusSelect = screen.getByLabelText('Status:');

expect(statusSelect).toHaveValue('BLOCKED');

fireEvent.change(statusSelect, { target: { value: 'IN_PROGRESS' } });

expect(statusSelect).toHaveValue('IN_PROGRESS');

});

it('change task status from BLOCKED to IN_PROGRESS when isSelfTask and isDevMode are true', async () => {

const setEditedTaskDetails = jest.fn();

const updateSelfTaskSpy = jest.fn().mockResolvedValue({});

jest.spyOn(taskHooks, 'useUpdateSelfTaskMutation').mockReturnValue([updateSelfTaskSpy, { isLoading: false }]);

renderWithRouter(

<Provider store={store()}>

<TaskStatusEditMode

task={BLOCKED_TASK}

setEditedTaskDetails={setEditedTaskDetails}

isDevMode={true}

isSelfTask={true}

/>

</Provider>

);

const statusSelect = screen.getByLabelText('Status:');

expect(statusSelect).toHaveValue('BLOCKED');

fireEvent.change(statusSelect, { target: { value: 'IN_PROGRESS' } });

expect(statusSelect).toHaveValue('IN_PROGRESS');

expect(updateSelfTaskSpy).toHaveBeenCalledWith({

id: BLOCKED_TASK.id,

task: expect.objectContaining({ status: 'IN_PROGRESS' })

});

});

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

Saitharun279 added 4 commits January 8, 2025 23:12

feat: RealDevSquad#1263 Added code changes for purpose field in task …

96602a6

…card

feat: RealDevSquad#1263 | Added status field in Task Card

8f34209

feat | issue#1263 prettier-fix

c790c99

feat | issue#1263 Added feature flag

045a8d6

Merge branch 'develop' into feature/issue#1263-purpose_status

d615a30

Saitharun279 changed the title ~~Feature/issue#1263 purpose status~~ Add missing features to task card issue#1263-1 ( purpose & status ) Jan 16, 2025

Saitharun279 changed the title ~~Add missing features to task card issue#1263-1 ( purpose & status )~~ Add missing features to task card issue#1263 -1 ( purpose & status ) Jan 16, 2025

Achintya-Chatterjee assigned Saitharun279 Jan 16, 2025

tejaskh3 suggested changes Jan 17, 2025

View reviewed changes

Merge branch 'develop' into feature/issue#1263-purpose_status

2088552

AnujChhikara reviewed Jan 18, 2025

View reviewed changes

feat:issue#1263 | Added unit tests

90f78e4

yesyash requested changes Jan 18, 2025

View reviewed changes

Saitharun279 changed the title ~~Add missing features to task card issue#1263 -1 ( purpose & status )~~ Adding 2 of the missing features ( purpose & status ) to task card issue#1263 Jan 18, 2025

Saitharun279 changed the title ~~Adding 2 of the missing features ( purpose & status ) to task card issue#1263~~ Adding 2 of the missing features ( purpose & status ) to task card Jan 18, 2025

Saitharun279 changed the title ~~Adding 2 of the missing features ( purpose & status ) to task card~~ feat(1263): Add purpose & status to task card, based on task card in website-my Jan 18, 2025

Saitharun279 added 2 commits January 19, 2025 01:39

feat/RealDevSquad#1263 | Used existing css variables

a30aebe

feat/RealDevSquad#1263 | Removed percentage check and renamed variable

f89f1a8

Saitharun279 changed the title ~~feat(1263): Add purpose & status to task card, based on task card in website-my~~ feat(1263): Add purpose & status to task card, based on task card in website-my #1263 Jan 18, 2025

Saitharun279 changed the title ~~feat(1263): Add purpose & status to task card, based on task card in website-my #1263~~ feat(1263): Add purpose & status to task card, based on task card in website-my Jan 18, 2025

feat:RealDevSquad#1262 | Modifed task status update to use try catch …

de52c89

…and toast messages.

graphite-app bot reviewed May 29, 2025

View reviewed changes

feat(1263): Add purpose & status to task card, based on task card in website-my #1319

Are you sure you want to change the base?

feat(1263): Add purpose & status to task card, based on task card in website-my #1319

Uh oh!

Conversation

Saitharun279 commented Jan 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue Ticket Number

Description

Documentation Updated?

Under Feature Flag

Database Changes

Breaking Changes

Development Tested?

Screenshots

Test Coverage

Additional Notes

Uh oh!

vercel bot commented Jan 16, 2025

Uh oh!

tejaskh3 left a comment

Choose a reason for hiding this comment

Uh oh!

Saitharun279 commented Jan 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AnujChhikara left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AnujChhikara commented Jan 18, 2025

Uh oh!

Saitharun279 commented Jan 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yesyash commented Jan 18, 2025

Uh oh!

graphite-app bot May 29, 2025

Choose a reason for hiding this comment

Uh oh!

graphite-app bot May 29, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Saitharun279 commented Jan 16, 2025 •

edited

Loading

Saitharun279 commented Jan 17, 2025 •

edited

Loading

Saitharun279 commented Jan 18, 2025 •

edited

Loading