[Customer Portal][Web] Improve Issue Flow with Create Case Fallback

[dileepapeiris]

Description

This pull request introduces a user experience improvement to the issue description flow in the customer portal. The main enhancement is providing users with a clear "Create Case" option if the automated help API fails, making it easier to escalate issues. Additionally, there are minor UI adjustments for layout consistency.

User experience improvements:

• Added a "Create Case" button (with a PlusCircle icon) that appears when the automated help API fails, allowing users to directly create a support case. This button is disabled if projectId is not available and triggers navigation to the case creation page, passing a skipChat flag in state. [1] [2] [3] [4] [5]

UI/layout adjustments:

• Adjusted the alignment of the state filter in TimeCardsDateFilter by removing the flex: 1 property and adding marginLeft: "auto" to ensure correct positioning.

Summary by CodeRabbit

• New Features

  • Added a "Create Case" button to the issue describe page that appears when API submission fails, enabling case creation for the current project.

• Style

  • Refined layout alignment in the time tracking filter section.
  • Increased spacing between action buttons on the describe issue page.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR makes two UI adjustments to the customer portal: realigning the state filter in TimeCardsDateFilter to right-align without flex expansion, and adding error handling with a Create Case button to DescribeIssuePage that appears when API submission fails.

Changes

Cohort / File(s)	Summary
Layout Adjustment apps/customer-portal/webapp/src/components/project-details/time-tracking/TimeCardsDateFilter.tsx	Changed State Filter layout Box from flex: 1 with minWidth to minWidth with marginLeft: "auto" for right-alignment.
Error Handling & Create Case Button apps/customer-portal/webapp/src/pages/DescribeIssuePage.tsx	Added PlusCircle icon import, local state to track API failures, handleCreateCase callback for navigation, and conditional Create Case button rendering next to Submit button on API failure. Increased layout gap before action buttons.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• PR #230: Modifies DescribeIssuePage.tsx to add create-case related UI and submission error handling, overlapping with the same page's error flow logic.
• PR #243: Adds handleCreateCase navigation for the create-case/describe-issue flow routing, directly related to the navigation callback introduced here.
• PR #287: Modifies TimeCardsDateFilter.tsx State Filter component that this PR adjusts the layout of.

Suggested labels

Type/New Feature, Type/Improvement, Type/UX, App/Customer Portal, Area/Frontend, Platform/Web

Suggested reviewers

• Rashmika998
• shayanmalinda

Poem

🐰 A filter now dances to the right,
While errors bring cases to light,
With plus-circle cheer,
Users can veer
To create, when things aren't quite right! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description provides clear context for the changes but does not follow the required template structure with sections like Purpose, Goals, Approach, User Stories, Release Notes, etc.	Restructure the description to follow the repository's template, including Purpose, Goals, Approach, User Stories, Release Notes, Documentation, Testing, and other required sections.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main changes: adding a 'Create Case' button and making layout tweaks to UI components.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (1)

apps/customer-portal/webapp/src/pages/DescribeIssuePage.tsx (1)

195-203: Disable the Create Case action while submit is in progress.

When isSubmitting is true, users can still click Create Case, which can trigger competing actions during an active retry.

Suggested tweak

               {hasApiFailed && (
                 <Button
                   variant="contained"
                   color="primary"
                   startIcon={<PlusCircle size={18} />}
                   onClick={handleCreateCase}
-                  disabled={!projectId}
+                  disabled={!projectId || isSubmitting}
                 >
                   Create Case
                 </Button>
               )}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/customer-portal/webapp/src/pages/DescribeIssuePage.tsx` around lines 195
- 203, The Create Case button allows clicks while a submission is in progress;
update the Button rendering (the block guarded by hasApiFailed) to also disable
when isSubmitting is true by adding isSubmitting to the disabled expression
(e.g., disabled={!projectId || isSubmitting}) so that the Button
(startIcon={<PlusCircle ... />} onClick={handleCreateCase}) is inactive during
retries.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@apps/customer-portal/webapp/src/pages/DescribeIssuePage.tsx`:
- Around line 195-203: The Create Case button allows clicks while a submission
is in progress; update the Button rendering (the block guarded by hasApiFailed)
to also disable when isSubmitting is true by adding isSubmitting to the disabled
expression (e.g., disabled={!projectId || isSubmitting}) so that the Button
(startIcon={<PlusCircle ... />} onClick={handleCreateCase}) is inactive during
retries.

---

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3456bdc and 35696bd.

📒 Files selected for processing (2)

• apps/customer-portal/webapp/src/components/project-details/time-tracking/TimeCardsDateFilter.tsx
• apps/customer-portal/webapp/src/pages/DescribeIssuePage.tsx