Add modal to acknowledge user about status change on marking progress to 100% by RishiChaubey31 · Pull Request #1322 · RealDevSquad/website-status

RishiChaubey31 · 2025-01-17T19:29:39Z

Date: 23-01-2025

Developer Name: Rishi Chaubey

Issue Ticket Number

Closes Modal creation to acknowledge user about status change upon user marking 100% task completion #1188

Description

Whenever the user marks the progress to 100%, a modal is displayed
The modal acknowledges the user about changing his task status
For now the modal button does nothing but in near future we will we migrating the status change option to here
This is the test PR Tests / Add modal to acknowledge user about status change on marking progress to 100% #1324

Documentation Updated?

Yes
No

Under Feature Flag

Yes
No

Database Changes

Yes
No

Breaking Changes

Yes
No

Development Tested?

Yes
No

Screenshots

Screenshot 1

screen-recording-2-1_5AsnMDLX.mp4

left one is the created modal and right one is the design approved

Test Coverage

Screenshot 1

Additional Notes

This is the required Design Document
This the Figma File

vercel · 2025-01-17T19:29:42Z

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

A member of the Team first needs to authorize it.

…ithub.com/RishiChaubey31/website-status into completion-modal

src/components/Modal/modal.module.scss

yarn.lock

src/components/Modal/CompletionModal.tsx

AnujChhikara · 2025-01-27T09:43:05Z

Also, could you please mention in the design doc that the scope of this task is limited to displaying the modal and does not include changing the status of the task?

RishiChaubey31 · 2025-01-27T10:36:53Z

Also, could you please mention in the design doc that the scope of this task is limited to displaying the modal and does not include changing the status of the task?

I have mentioned this info in the design doc.

src/components/tasks/card/progressContainer/index.tsx

VinuB-Dev · 2025-01-31T04:15:38Z

We have a reusable modal component, why are we not using it here?

VinuB-Dev · 2025-01-31T04:30:06Z

Can you also mention which option was selected among the 2 options provided in the figma design? I can't see that in the design doc, please add it there also.

src/components/Modal/modal.module.scss

RishiChaubey31 · 2025-01-31T10:10:56Z

We have a reusable modal component, why are we not using it here?

Can you also mention which option was selected among the 2 options provided in the figma design? I can't see that in the design doc, please add it there also.

We have a reusable modal component, why are we not using it here?

the reusable modal component is different from what my modal design looks

the 1st option was selected as per mentioned by Ankush in the design doc comments

src/styles/variables.scss

src/components/tasks/card/progressContainer/index.tsx

src/components/Modal/CompletionModal.tsx

VinuB-Dev · 2025-02-08T15:21:01Z

@RishiChaubey31 Can you please check this #1322 (comment)
this will make sure we don't add manual height and width, which might impact responsiveness.

src/components/tasks/card/progressContainer/index.tsx

src/components/Modal/modal.module.scss

VinuB-Dev · 2025-02-08T16:22:04Z

Last comment, other changes look good.
Will approve it once the border rem/px has clarity and modifications if required are done.

src/components/Modal/CompletionModal.tsx

AnujChhikara

LGTM

src/components/Modal/modal.module.scss

iamitprakash · 2025-02-09T20:06:15Z

yarn.lock

 "@floating-ui/react-dom@^2.1.2":
  version "2.1.2"
-  resolved "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31"


why this and if this then where is package file ..?

I ran the yarn install @floating-ui/react-dom then the yarn lock file got changed, I did not change it manually.
This package was already present in the package.json file but was missing in my node modules, hence I ran this command.

* Add modal to acknowledge user about status change on marking progress to 100% (#1322) * initial commit * refactor code * added feature flag * refactored some code * changed casing and removed comments * changed to predefined colouring * removed unnecessary useCallbacks * removed onstatus function * resolved commented changes * decereased the mismatch between the modal and design doc modal * changed button color * font change * used the already created modal component * dimensional changes * refactored function * small refactoring * async await updated * applied callback on close icon * refactored to named exports * removed a div element * rounded off the rem values * put the close icon inside button wrapper * rounded off rems * rounded off rem values * Fixed: Added a button to close model. (#1312) * Close button added * Added cross button on update modal * Formatting done * All Test Passed * Unnecessery Code Removed * Fix test to check if setIsOpen is called on close button click * Tests / Add modal to acknowledge user about status change on marking progress to 100% (#1324) * initial changes * removed unnecessary lines * removed the onStatusChange tests * added one more check to ensure that the onclose() function is working * added more tests * added should before each line * added braces * added dev flag tests * added the testid check * added skip to tests * added skeleton components to pass linitng checks * added one more test case * removed skips * added a getAllByRole --------- Co-authored-by: Rishi Chaubey <155433512+RishiChaubey31@users.noreply.github.com> Co-authored-by: Aditya Zende <adityazende6710@gmail.com>

Merge pull request RealDevSquad#1292 from AnujChhikara/feature/show-progress-updater-info Feature: Display User Details for Task Progress Updates Merge pull request RealDevSquad#1294 from Hariom01010/fix/Update-users-self-api-endpoint Updated deprecated /users/self API endpoint to the current working endpoint /users?profile=true Update Progress Fetching Logic to Include `dev` Query Parameter (RealDevSquad#1308) * added dev query in getProgressApi hook * fix test naming * add dev=flase test * improve the progresses test Merge pull request RealDevSquad#1315 from VinuB-Dev/remove-ff/tasks-page-shimmer-cards chore: Remove feature flag for shimmer card addition in tasks page. Refactor Tooltip Component to Auto-calculate Position (RealDevSquad#1309) * refactor: tooltip component to auto-calculate position instead of requiring manual input * chore: Declared tooltip constant outside the tooltip functions to reuse the same in showTooltip and hideTooltip functions. * Auto Placement Tooltip changes: - Removed unnecessary comments. - Added aria role and describedby using unique id for tooltip. - Simplified the JSDoc for the component. - Added multiple additional test cases for the tooltip. --------- Co-authored-by: Achintya Chatterjee <55826451+Achintya-Chatterjee@users.noreply.github.com> Merge pull request RealDevSquad#1323 from iAmAshuSahoo/develop feat: add shimmer effect in the task details page Add modal to acknowledge user about status change on marking progress to 100% (RealDevSquad#1322) * initial commit * refactor code * added feature flag * refactored some code * changed casing and removed comments * changed to predefined colouring * removed unnecessary useCallbacks * removed onstatus function * resolved commented changes * decereased the mismatch between the modal and design doc modal * changed button color * font change * used the already created modal component * dimensional changes * refactored function * small refactoring * async await updated * applied callback on close icon * refactored to named exports * removed a div element * rounded off the rem values * put the close icon inside button wrapper * rounded off rems * rounded off rem values Fixed: Added a button to close model. (RealDevSquad#1312) * Close button added * Added cross button on update modal * Formatting done * All Test Passed * Unnecessery Code Removed * Fix test to check if setIsOpen is called on close button click Tests / Add modal to acknowledge user about status change on marking progress to 100% (RealDevSquad#1324) * initial changes * removed unnecessary lines * removed the onStatusChange tests * added one more check to ensure that the onclose() function is working * added more tests * added should before each line * added braces * added dev flag tests * added the testid check * added skip to tests * added skeleton components to pass linitng checks * added one more test case * removed skips * added a getAllByRole Merge pull request RealDevSquad#1333 from RishiChaubey31/fix/add-testid-to-modal test: Add data-testid to modal and update related tests chore-remove-feature-flag-from-display-userdetails-for-progresses-updates (RealDevSquad#1330) chore: remove feature flag done (RealDevSquad#1334) * chore/remove-featurew-flag-DONE * change in task-status.tsx file , reintialize the COMPLETED value * revert back from COMPLETED to DONE * resolve test cases * resolve test cases * Update TaskDropDown.tsx * Update TaskDropDown.tsx * Update TaskDropDown.tsx --------- Co-authored-by: Vikas Singh <59792866+vikasosmium@users.noreply.github.com> Co-authored-by: Achintya Chatterjee <55826451+Achintya-Chatterjee@users.noreply.github.com> initial commit refactored code added tests removed status freeze on verfied refactored some parts refactor and remove progress update on status change code refactoring after featureflag removal initial commit

--------- Co-authored-by: Achintya Chatterjee <55826451+Achintya-Chatterjee@users.noreply.github.com> Fixes date picker alignment and date value not showing up while editing on task details page (RealDevSquad#1260) * fix: date picker alignment and prefilled * fix: test cases for dates and details * update: test files * refactor: detail content component * fix: useEffect to be conditional * Improved test coverage for taskDates * revert back to original change * fix: edge case of invalid date * fix: redundancy in detailsContent * added more restriction to date validation * fix: test case for invalid-date * fix: test case with await * updated test case for failure onsave * refactor: detailsContent * update test case for isValidDate utils * updated feature flag * fix: test case name --------- Co-authored-by: Achintya Chatterjee <55826451+Achintya-Chatterjee@users.noreply.github.com> Co-authored-by: Yash Raj <56453897+yesyash@users.noreply.github.com> add loading skeleton for user profile in the navbar (RealDevSquad#1270) * add loading skeleton for user profile in the navbar * Add tests for NavBar skeleton loader, user info, and GitHub login button FF removal for PR RealDevSquad#1260 (RealDevSquad#1275) * remove FF * fix: tests Remove dev flag to show the new UI changes (RealDevSquad#1277) * fix: remove dev flag and related test and old UI code * fix: change received value * chore: change component name Fix shimmer card component in mine page (RealDevSquad#1284) * fix: remove dev flag and related test and old UI code * fix: change received value * chore: change component name * fix: change shimmer card ui * fix: change shimmer card style and made it similar to task card feat: added modal for updating task progress and task percentage. (RealDevSquad#1290) * feat: added modal for updating task progress - Require users to provide a task update before modifying progress percentage. - Restrict progress updates to tasks with status In Progress only. - Addressed the issue where users could update progress without providing updates or changing task status. - Ensures better task tracking and accountability. * fix: added the missing props * fix: preserve modal styling after task progress update Resolves an issue where the task update modal's styling was reverting to default styles after submitting progress updates. The implementation now maintains consistent styling throughout the update process by properly managing the props on modal state and preventing unintended style resets. * fix: restore progress bar in task details section Reimplements the progress bar in task details section to be visible in both default and dev mode, while ensuring updates are only possible through the task update modal. Progress bar now maintains a read-only state in the details view while remaining interactive in the modal. * Test: progress update flow modal (RealDevSquad#1291) * fix: failing tests accroding to the component change * test(TaskUpdateModal): add unit tests for TaskUpdateModal component - Test rendering of modal in open and closed states - Verify functionality of close button - Ensure correct props are passed to ProgressContainer and ProgressForm - Mock dependencies (Modal, ProgressContainer, ProgressForm) for isolation - Validate display of current date * fix: test cases after the component gets changed * fix: improve test coverage for TaskUpdateModal component Prevent Unauthorized Message on Mine page when load (RealDevSquad#1296) * fix useAuthentication hook * fix tests * fix flaky tests * wrap async calls with waitFor chore: remove feature flag from the new progress update flow modal (RealDevSquad#1298) feat: add shimmer cards for task loading in dev mode (RealDevSquad#1300) - Added shimmer cards to display while tasks are being fetched in dev mode. - Implemented tests to ensure correct rendering and behavior of shimmer cards. fix_updating_progress_slider_from_mobile (RealDevSquad#1304) Merge pull request RealDevSquad#1292 from AnujChhikara/feature/show-progress-updater-info Feature: Display User Details for Task Progress Updates Merge pull request RealDevSquad#1294 from Hariom01010/fix/Update-users-self-api-endpoint Updated deprecated /users/self API endpoint to the current working endpoint /users?profile=true Update Progress Fetching Logic to Include `dev` Query Parameter (RealDevSquad#1308) * added dev query in getProgressApi hook * fix test naming * add dev=flase test * improve the progresses test Merge pull request RealDevSquad#1315 from VinuB-Dev/remove-ff/tasks-page-shimmer-cards chore: Remove feature flag for shimmer card addition in tasks page. Refactor Tooltip Component to Auto-calculate Position (RealDevSquad#1309) * refactor: tooltip component to auto-calculate position instead of requiring manual input * chore: Declared tooltip constant outside the tooltip functions to reuse the same in showTooltip and hideTooltip functions. * Auto Placement Tooltip changes: - Removed unnecessary comments. - Added aria role and describedby using unique id for tooltip. - Simplified the JSDoc for the component. - Added multiple additional test cases for the tooltip. --------- Co-authored-by: Achintya Chatterjee <55826451+Achintya-Chatterjee@users.noreply.github.com> Merge pull request RealDevSquad#1323 from iAmAshuSahoo/develop feat: add shimmer effect in the task details page Add modal to acknowledge user about status change on marking progress to 100% (RealDevSquad#1322) * initial commit * refactor code * added feature flag * refactored some code * changed casing and removed comments * changed to predefined colouring * removed unnecessary useCallbacks * removed onstatus function * resolved commented changes * decereased the mismatch between the modal and design doc modal * changed button color * font change * used the already created modal component * dimensional changes * refactored function * small refactoring * async await updated * applied callback on close icon * refactored to named exports * removed a div element * rounded off the rem values * put the close icon inside button wrapper * rounded off rems * rounded off rem values Fixed: Added a button to close model. (RealDevSquad#1312) * Close button added * Added cross button on update modal * Formatting done * All Test Passed * Unnecessery Code Removed * Fix test to check if setIsOpen is called on close button click Tests / Add modal to acknowledge user about status change on marking progress to 100% (RealDevSquad#1324) * initial changes * removed unnecessary lines * removed the onStatusChange tests * added one more check to ensure that the onclose() function is working * added more tests * added should before each line * added braces * added dev flag tests * added the testid check * added skip to tests * added skeleton components to pass linitng checks * added one more test case * removed skips * added a getAllByRole Merge pull request RealDevSquad#1333 from RishiChaubey31/fix/add-testid-to-modal test: Add data-testid to modal and update related tests chore-remove-feature-flag-from-display-userdetails-for-progresses-updates (RealDevSquad#1330) chore: remove feature flag done (RealDevSquad#1334) * chore/remove-featurew-flag-DONE * change in task-status.tsx file , reintialize the COMPLETED value * revert back from COMPLETED to DONE * resolve test cases * resolve test cases * Update TaskDropDown.tsx * Update TaskDropDown.tsx * Update TaskDropDown.tsx --------- Co-authored-by: Vikas Singh <59792866+vikasosmium@users.noreply.github.com> Co-authored-by: Achintya Chatterjee <55826451+Achintya-Chatterjee@users.noreply.github.com> initial commit refactored code added tests removed status freeze on verfied refactored some parts refactor and remove progress update on status change code refactoring after featureflag removal initial commit

… to 100% (RealDevSquad#1322) * initial commit * refactor code * added feature flag * refactored some code * changed casing and removed comments * changed to predefined colouring * removed unnecessary useCallbacks * removed onstatus function * resolved commented changes * decereased the mismatch between the modal and design doc modal * changed button color * font change * used the already created modal component * dimensional changes * refactored function * small refactoring * async await updated * applied callback on close icon * refactored to named exports * removed a div element * rounded off the rem values * put the close icon inside button wrapper * rounded off rems * rounded off rem values

initial commit

32f7640

RishiChaubey31 and others added 5 commits January 18, 2025 01:06

Merge branch 'develop' into completion-modal

75de25d

refactor code

5a76c17

Merge branches 'completion-modal' and 'completion-modal' of https://g…

d0f8800

…ithub.com/RishiChaubey31/website-status into completion-modal

added feature flag

f5b85c8

refactored some code

05f13b3

AnujChhikara reviewed Jan 24, 2025

View reviewed changes

RishiChaubey31 added 2 commits January 25, 2025 21:12

changed casing and removed comments

69c099f

changed to predefined colouring

1ea3c04

AnujChhikara reviewed Jan 25, 2025

View reviewed changes

src/components/Modal/CompletionModal.tsx Outdated Show resolved Hide resolved

RishiChaubey31 assigned RishiChaubey31 and unassigned RishiChaubey31 Jan 25, 2025

RishiChaubey31 requested review from Achintya-Chatterjee and AnujChhikara January 26, 2025 08:26

removed unnecessary useCallbacks

7de0eb0

RishiChaubey31 mentioned this pull request Jan 27, 2025

Tests / Add modal to acknowledge user about status change on marking progress to 100% #1324

Merged

10 tasks

shobhan-sundar-goutam reviewed Jan 28, 2025

View reviewed changes

removed onstatus function

ece64b7

RishiChaubey31 removed the request for review from Achintya-Chatterjee January 28, 2025 22:42

RishiChaubey31 added 3 commits January 29, 2025 19:10

resolved commented changes

ca1cdce

decereased the mismatch between the modal and design doc modal

5a7af17

changed button color

355ddd3

VinuB-Dev reviewed Jan 31, 2025

View reviewed changes

src/components/Modal/modal.module.scss Outdated Show resolved Hide resolved

applied callback on close icon

2d90041

RishiChaubey31 commented Feb 7, 2025

View reviewed changes

Achintya-Chatterjee reviewed Feb 7, 2025

View reviewed changes

src/components/Modal/CompletionModal.tsx Show resolved Hide resolved

refactored to named exports

60d234e

mbramani approved these changes Feb 8, 2025

View reviewed changes

src/components/tasks/card/progressContainer/index.tsx Outdated Show resolved Hide resolved

removed a div element

583113d

VinuB-Dev reviewed Feb 8, 2025

View reviewed changes

src/components/Modal/modal.module.scss Outdated Show resolved Hide resolved

rounded off the rem values

82fa7ab

VinuB-Dev reviewed Feb 8, 2025

View reviewed changes

src/components/Modal/CompletionModal.tsx Outdated Show resolved Hide resolved

put the close icon inside button wrapper

fb3a4aa

MayankBansal12 approved these changes Feb 8, 2025

View reviewed changes

AnujChhikara previously approved these changes Feb 8, 2025

View reviewed changes

Achintya-Chatterjee previously approved these changes Feb 8, 2025

View reviewed changes

VinuB-Dev approved these changes Feb 9, 2025

View reviewed changes

shobhan-sundar-goutam suggested changes Feb 9, 2025

View reviewed changes

src/components/Modal/modal.module.scss Show resolved Hide resolved

rounded off rems

94dcd45

RishiChaubey31 dismissed stale reviews from Achintya-Chatterjee and AnujChhikara via 94dcd45 February 9, 2025 04:24

rounded off rem values

7276ebf

AnujChhikara approved these changes Feb 9, 2025

View reviewed changes

shobhan-sundar-goutam approved these changes Feb 9, 2025

View reviewed changes

iamitprakash requested changes Feb 9, 2025

View reviewed changes

iamitprakash merged commit 115bbfa into RealDevSquad:develop Feb 10, 2025
1 check passed

pankajjs mentioned this pull request Feb 11, 2025

Dev to Main Sync #1329

Merged

10 tasks

Conversation

RishiChaubey31 commented Jan 17, 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 17, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

AnujChhikara commented Jan 27, 2025

Uh oh!

RishiChaubey31 commented Jan 27, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

VinuB-Dev commented Jan 31, 2025

Uh oh!

VinuB-Dev commented Jan 31, 2025

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

VinuB-Dev commented Feb 8, 2025

Uh oh!

Uh oh!

Uh oh!

VinuB-Dev commented Feb 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

AnujChhikara left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

iamitprakash Feb 9, 2025

Choose a reason for hiding this comment

Uh oh!

RishiChaubey31 Feb 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

RishiChaubey31 commented Jan 17, 2025 •

edited

Loading

RishiChaubey31 commented Jan 31, 2025 •

edited

Loading

VinuB-Dev commented Feb 8, 2025 •

edited

Loading