[CSM Portal Microapp] Add create service request flow to the microapp

[2003dinijay]

Summary

Adds the "Create service request" flow to the CSM Portal microapp, matching how it already works in the webapp (CreateServiceRequestPage.tsx).

• New Fab ("Create service request") on the Service Requests tab of the Operations page, using the same floating-icon pattern the Support page already uses for "Create case".
• New NewServiceRequestPage at /operations/service-requests/new: cascading Project → Deployment → Deployed Product → Catalog → Catalog Item picker, followed by a dynamically generated form built from that catalog item's ServiceNow variables, plus attachments.
• New supporting infra ported from the webapp, none of which previously existed in the microapp:
  • types/catalog.dto.ts — catalog / catalog-item / catalog-item-variable DTOs
  • services/catalogs.ts — POST /catalogs/search and the catalog-item-variables endpoint
  • utils/catalogVariables.ts — ServiceNow variable classification (context/hidden/attachment/date-time/description fields) and value encoding, mirroring the webapp's features/csm-operations/utils/catalogVariables.ts
  • components/operations/CatalogVariableFields.tsx — renders the dynamic per-variable inputs
  • ServiceRequestCreatePayloadDto / CaseVariableDto added to types/case.dto.ts, and services/cases.ts's create call extended to accept the new payload type

Two deliberate mobile deviations from the webapp, consistent with this app's existing NewCasePage.tsx:

• Single-column Stack layout instead of the webapp's responsive Grid/Card.
• The catalog item's "Description" variable renders as a plain multiline TextField instead of a rich-text editor (the microapp has no rich-text component).

Review fixes

Addressed CodeRabbit findings on NewServiceRequestPage.tsx:

• The submit catch block now captures and logs the underlying error via Logger.warn before showing the existing generic user-facing message.
• Every field's disabled state (project/deployment/product/catalog/catalog item selects, the dynamic variable fields, attachments, and Cancel) now also checks isSubmitting, not just createCase.isPending — the case-create mutation resolves before attachment uploads finish, so createCase.isPending alone was letting the form re-enable mid-submission.

Test plan

• tsc -b passes with no errors
• eslint passes on all new/changed files
• Verified in a headless browser: the Fab renders correctly on the Service Requests tab, and /operations/service-requests/new renders the full cascading form with correct disabled/helper-text states at each step
• Manual end-to-end verification inside the native app shell (submit a real service request) — not possible from this environment, since the app requires the WSO2 native device-auth bridge to obtain a token

Summary by CodeRabbit

• New Features
  • Added the ability to create service requests from the Operations area.
  • Added guided selection of projects, deployments, products, catalogs, and catalog items.
  • Added dynamic request forms with required fields, date/time inputs, and file attachments.
  • Added validation, loading states, error messages, and automatic navigation to the created case.
  • Added a floating “Create service request” action to the service requests view.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a catalog-driven service request creation flow to the operations microapp, including cascading lookups, dynamic variable fields, attachment uploads, validation, case creation support, and routing from the Service Requests tab.

Changes

Service request creation

Layer / File(s)	Summary
Catalog contracts and queries apps/csm-portal/microapp/src/types/catalog.dto.ts, apps/csm-portal/microapp/src/config/endpoints.ts, apps/csm-portal/microapp/src/services/catalogs.ts	Adds catalog DTOs, search and variable endpoints, paginated catalog retrieval, and React Query options.
Variable classification and rendering apps/csm-portal/microapp/src/utils/catalogVariables.ts, apps/csm-portal/microapp/src/components/operations/CatalogVariableFields.tsx	Classifies ServiceNow variables, filters editable fields, encodes values, handles datetime conversion, and renders matching controls.
Service request form and submission apps/csm-portal/microapp/src/types/case.dto.ts, apps/csm-portal/microapp/src/services/cases.ts, apps/csm-portal/microapp/src/pages/NewServiceRequestPage.tsx	Implements cascading selections, dynamic fields, required-field validation, service-request creation, attachment uploads, and post-submit navigation.
Operations entry points apps/csm-portal/microapp/src/App.tsx, apps/csm-portal/microapp/src/components/operations/ServiceRequestsTab.tsx, apps/csm-portal/microapp/src/pages/OperationsPage.tsx	Registers the new route and adds a floating action button for opening the creation form.

Estimated code review effort: 4 (Complex) | ~45 minutes

Possibly related PRs

• wso2-open-operations/cs-tools#937: Adds related Operations and service-request creation flow work.
• wso2-open-operations/cs-tools#1116: Evolves shared case-creation plumbing used by this service request flow.
• wso2-open-operations/cs-tools#1149: Changes the AttachmentsField API used by the new page.

Suggested labels: Type/New Feature, Area/Frontend

Suggested reviewers: copilot, hesara2003, rashmika998, rksk

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is missing most required template sections such as Purpose, Goals, Approach, and Release note.	Add the missing template sections and fill in documentation, tests, security, and other required PR metadata.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	Docstring coverage is 88.24% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly matches the main change by describing the new create service request flow.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

apps/csm-portal/microapp/src/services/catalogs.ts (1)

29-29: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Duplicated pagination limit constant.

SEARCH_PAGE_LIMIT = 50 is duplicated from deployments.ts per the comment. Consider extracting a shared constant (e.g., in a common config/util module) so both call sites stay in sync if the backend's effective cap changes.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/csm-portal/microapp/src/services/catalogs.ts` at line 29, Extract
SEARCH_PAGE_LIMIT into a shared configuration or utility module, then update the
references in catalogs.ts and deployments.ts to import and reuse that single
constant. Preserve the existing value of 50 and pagination behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/csm-portal/microapp/src/pages/NewServiceRequestPage.tsx`:
- Around line 187-189: Update the disabled conditions for ProjectSelect, the
form controls, all other inputs, and the Cancel button in NewServiceRequestPage
to use isSubmitting alongside their existing field-specific conditions instead
of relying on createCase.isPending alone. Preserve each control’s current
validation/loading conditions while keeping every control non-interactive until
attachment uploads and the full submission complete.
- Around line 175-177: Update the submission catch block in
NewServiceRequestPage to capture the thrown error and log it with Logger.warn
before calling setSubmitError. Preserve the existing generic user-facing error
message and finally behavior.

---

Nitpick comments:
In `@apps/csm-portal/microapp/src/services/catalogs.ts`:
- Line 29: Extract SEARCH_PAGE_LIMIT into a shared configuration or utility
module, then update the references in catalogs.ts and deployments.ts to import
and reuse that single constant. Preserve the existing value of 50 and pagination
behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: ef06412b-c99a-4e85-8bd4-41d16417319d

📥 Commits

Reviewing files that changed from the base of the PR and between 53bdaae and 7e31cb9.

📒 Files selected for processing (12)

• apps/csm-portal/microapp/src/App.tsx
• apps/csm-portal/microapp/src/components/operations/CatalogVariableFields.tsx
• apps/csm-portal/microapp/src/components/operations/ServiceRequestsTab.tsx
• apps/csm-portal/microapp/src/config/endpoints.ts
• apps/csm-portal/microapp/src/pages/NewServiceRequestPage.tsx
• apps/csm-portal/microapp/src/pages/OperationsPage.tsx
• apps/csm-portal/microapp/src/services/cases.ts
• apps/csm-portal/microapp/src/services/catalogs.ts
• apps/csm-portal/microapp/src/types/case.dto.ts
• apps/csm-portal/microapp/src/types/catalog.dto.ts
• apps/csm-portal/microapp/src/types/index.ts
• apps/csm-portal/microapp/src/utils/catalogVariables.ts