Skip to content

Conversation

@MayankBansal12
Copy link
Member

@MayankBansal12 MayankBansal12 commented Jan 21, 2026

Date: 22-01-2026

Developer Name: @MayankBansal12


Issue Ticket Number

Description

  • Show TaskStatus DropDown to backlog task status so task status can be changed

Documentation Updated?

  • Yes
  • No

Under Feature Flag

  • Yes
  • No

Database Changes

  • Yes
  • No

Breaking Changes

  • Yes
  • No

Development Tested?

  • Yes
  • No

Screenshots

demo
Screencast.from.2026-01-22.01-02-22.mp4

Additional Notes

  • There is another bug where the task with backlog is shown as ASSIGNED, will fix that in another PR

@vercel
Copy link

vercel bot commented Jan 21, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
status-app Ready Ready Preview, Comment Jan 21, 2026 7:31pm

@coderabbitai
Copy link

coderabbitai bot commented Jan 21, 2026

Walkthrough

This change simplifies the TaskStatusDropdown component by removing conditional rendering logic for backlog status. The component now unconditionally delegates status display and selection to the TaskStatusSelect component, eliminating a branching condition.

Changes

Cohort / File(s) Summary
Status Dropdown Refactoring
src/components/tasks/TaskStatusDropdown.tsx
Removed conditional backlog status rendering; TaskStatusSelect component now handles all status display and selection unconditionally

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

  • AnujChhikara
  • iamitprakash
  • yesyash

Poem

🐰 With whiskers twitched and nose held high,
We hopped through code to simplify,
The backlog branch? Now gone, hooray!
Less conditionals to clutter our day,
Dropdown logic, clean and bright! 🌟

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: enabling the task status dropdown for backlog task status, which aligns with the code changes that removed conditional rendering preventing dropdown display.
Description check ✅ Passed The description clearly explains the purpose of the PR—showing the TaskStatus dropdown for backlog task status to enable status changes—which directly relates to the changeset modifications.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@src/components/tasks/TaskStatusDropdown.tsx`:
- Around line 163-167: The select's value can be initialized to BACKLOG while
BACKLOG is removed from options by EXCLUDED_STATUSES, causing an unmatched
value; in TaskStatusDropdown/TaskStatusSelect adjust the options or state
initialization so the select value always matches an available option: either
(A) when oldStatus === "BACKLOG" include "BACKLOG" in the options fed to
TaskStatusSelect (override EXCLUDED_STATUSES for this case), or (B) initialize
newStatus to a valid option (e.g., the first entry from the filtered options)
instead of oldStatus; update the logic around newStatus, oldStatus,
EXCLUDED_STATUSES, TaskStatusSelect and handleChange accordingly so the rendered
<select> value and options are consistent.

expect(msgTag).toBeNull();
});
it('should show text Backlog when a task with Backlog status is passed down.', () => {
it.skip('should show text Backlog when a task with Backlog status is passed down.', () => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

skipping the test since it's hotfix, will fix tests in another PR

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@coderabbitai can we please raise an PR for writing test for this feature

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧩 Analysis chain

@AnujChhikara I'll create a GitHub issue to track this follow-up work (I cannot create PRs directly, but an issue will ensure the test work is tracked and can be addressed in a subsequent PR).


🏁 Script executed:

#!/bin/bash
# Create a GitHub issue for writing tests for the backlog feature
gh issue create \
  --title "Write test for Backlog task status dropdown feature" \
  --body "## Context
A test was skipped in PR `#1391` as part of a hotfix to show task status dropdown for backlog task status.

**Skipped test:**
\`\`\`typescript
it.skip('should show text Backlog when a task with Backlog status is passed down.', () => {
    const oldProgress = 100;
    const oldStatus = BACKEND_TASK_STATUS.BACKLOG;

    render(
        <TaskStatusDropdown
            oldProgress={oldProgress}
            oldStatus={oldStatus}
            onChange={onChange}
        />
    );
    const element = screen.getByTestId('task-status-backlog');
    expect(element).toHaveTextContent('Backlog');
});
\`\`\`

**File:** \`__tests__/Unit/Components/Tasks/TaskStatusDropdown.test.tsx\`

## Task
- [ ] Unskip and fix the test for backlog status display
- [ ] Ensure the test properly validates the backlog status behavior in TaskStatusDropdown component
- [ ] Verify all related test cases are passing

## References
- PR: `#1391`
- Comment: https://github.com/RealDevSquad/website-status/pull/1391#discussion_r2714057902
- Requested by: `@AnujChhikara`" \
  --assignee AnujChhikara

Length of output: 58


@AnujChhikara I've created issue #1396 to track the test work for the backlog feature: #1396

The issue includes:

  • Context from this hotfix PR
  • The skipped test code that needs to be fixed
  • A checklist of tasks to complete
  • Assignment to you for tracking

This ensures the follow-up work won't be forgotten and can be addressed in a subsequent PR.


🧬 Code Graph Analysis Results

[File: src/constants/constants.ts, Lines: 55-58]

export const MSG_ON_100_PROGRESS =
    'Proceeding further will make task progress 100%.';

[File: src/constants/constants.ts, Lines: 57-58]

export const MSG_ON_0_PROGRESS =
    'Proceeding further will make task progress 0%.';

[File: src/constants/task-status.ts, Lines: 39-56]

export const BACKEND_TASK_STATUS = {
    UN_ASSIGNED,
    ASSIGNED,
    IN_PROGRESS,
    BACKLOG,
    BLOCKED,
    COMPLETED,
    NEEDS_REVIEW,
    IN_REVIEW,
    APPROVED,
    SMOKE_TESTING,
    SANITY_CHECK,
    REGRESSION_CHECK,
    MERGED,
    RELEASED,
    VERIFIED,
    DONE,
};

[File: src/components/tasks/TaskStatusDropdown.tsx, Lines: 62-176]

export function TaskStatusDropdown({
    isDevMode,
    onChange,
    oldStatus,
    oldProgress,
}: Props) {
    const [{ newStatus, newProgress }, setStatusAndProgress] = useState({
        newStatus: oldStatus,
        newProgress: oldProgress,
    });
    const [message, setMessage] = useState('');

    const getAvailableTaskStatuses = () => {
        return Object.entries(BACKEND_TASK_STATUS).filter(
            ([_, value]) => !EXCLUDED_STATUSES.includes(value)
        );
    };

    const taskStatus = getAvailableTaskStatuses();

    const isCurrentTaskStatusBlock = oldStatus === BACKEND_TASK_STATUS.BLOCKED;
    const isCurrentTaskStatusInProgress =
        oldStatus === BACKEND_TASK_STATUS.IN_PROGRESS;

    const shouldTaskProgressBe100 = (newStatus: string) => {
        const isNewStatusInProgress =
            newStatus === BACKEND_TASK_STATUS.IN_PROGRESS;
        const isNewTaskStatusBlock = newStatus === BACKEND_TASK_STATUS.BLOCKED;
        const isCurrProgress100 = oldProgress === 100;
        return (
            (isCurrentTaskStatusBlock || isCurrentTaskStatusInProgress) &&
            !isNewStatusInProgress &&
            !isNewTaskStatusBlock &&
            !isCurrProgress100
        );
    };

    const shouldTaskProgressBe0 = (newStatus: string) => {
        const isNewStatusInProgress =
            newStatus === BACKEND_TASK_STATUS.IN_PROGRESS;
        const isCurrProgress0 = oldProgress === 0;
        return (
            isNewStatusInProgress &&
            !isCurrentTaskStatusBlock &&
            !isCurrProgress0
        );
    };

    const resetProgressAndStatus = () => {
        setStatusAndProgress({
            newStatus: oldStatus,
            newProgress: oldProgress,
        });
        setMessage('');
    };

    const handleChange = (ev: React.ChangeEvent<HTMLSelectElement>) => {
        const newStatusValue = ev.target.value;
        setStatusAndProgress((prev) => ({
            ...prev,
            newStatus: newStatusValue,
        }));
        if (oldStatus === newStatusValue) {
            return;
        }
        if (isDevMode && newStatusValue !== BACKEND_TASK_STATUS.BACKLOG) {
            const msg = `The progress of current task is ${oldProgress}%. `;
            if (shouldTaskProgressBe100(newStatusValue)) {
                setStatusAndProgress((prev) => ({ ...prev, newProgress: 100 }));
                setMessage(msg + MSG_ON_100_PROGRESS);
                return;
            }
            if (shouldTaskProgressBe0(newStatusValue)) {
                setStatusAndProgress((prev) => ({ ...prev, newProgress: 0 }));
                setMessage(msg + MSG_ON_0_PROGRESS);
                return;
            }
        }
        onChange({ newStatus: newStatusValue });
    };

    const handleProceed = () => {
        const payload: { newStatus: string; newProgress?: number } = {
            newStatus,
        };
        if (newProgress != oldProgress) {
            payload.newProgress = newProgress;
        }
        onChange(payload);
        setMessage('');
    };

    return (
        <>
            <label
                className={
                    isDevMode ? styles.cardPurposeAndStatusFont : undefined
                }
                data-testid={isDevMode ? 'task-status-label' : undefined}
            >
                Status:{' '}
                <TaskStatusSelect
                    newStatus={newStatus}
                    handleChange={handleChange}
                    taskStatus={taskStatus}
                />
            </label>
            <TaskDropDownModel
                message={message}
                resetProgressAndStatus={resetProgressAndStatus}
                handleProceed={handleProceed}
            />
        </>
    );
}

@MayankBansal12 MayankBansal12 changed the title hotfix: show task status dropdown to show backlog task status hotfix: show task status dropdown to backlog task status Jan 21, 2026
@iamitprakash iamitprakash merged commit ca733ba into develop Jan 21, 2026
4 checks passed
@iamitprakash iamitprakash deleted the fix/backlog-status branch January 21, 2026 20:14
@MayankBansal12 MayankBansal12 mentioned this pull request Jan 21, 2026
10 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants