fix(mcp): Adding custom date time picker for generate keys and minor bug fixes

[preetriti1]

Commit Type

• feature - New functionality
• fix - Bug fix
• refactor - Code restructuring without behavior change
• perf - Performance improvement
• docs - Documentation update
• test - Test-related changes
• chore - Maintenance/tooling

Risk Level

• Low - Minor changes, limited scope
• Medium - Moderate changes, some user impact
• High - Major changes, significant user/system impact

What & Why

Adding custom date time picker option while regenerating MCP API Keys.
Retaining casing of workflow names while creating new MCP server with existing workflows.
enabling option in accordian so all options can be collapsed.

Impact of Change

• Users: Users will be able to provide custom date time input for regenerating keys
• Developers: Added new library for date time picker which can be used in other UI components now.
• System: No significant change

Test Plan

• Unit tests added/updated
• E2E tests added/updated
• Manual testing completed
• Tested in:

Contributors

@kewear @bonicaayala

Screenshots/Videos

[github-actions]

🤖 AI PR Validation Report

PR Review Results

Thank you for your submission! Here's detailed feedback on your PR title and body compliance:

✅ PR Title

• Current: fix(mcp): Adding custom date time picker for generate keys and minor bug fixes
• Issue: The title is fine and follows the conventional format (scope + short description). It succinctly describes the primary change.
• Recommendation: (Optional) If you want to be extra explicit, you could mention the UI area changed: e.g. fix(mcp): Add custom date/time picker to Generate Keys panel and minor MCP server fixes.

---

✅ Commit Type

• Properly selected (fix).
• Commit Type note: Only one box is checked which is correct for this PR.

---

⚠️ Risk Level

• Assessment: The PR body and labels declare Low risk and there is a risk:low label on the PR, but based on the code diff I recommend Medium risk.
  • Reason: This PR includes not only UI/logic changes and unit-test updates, but also adds new UI libraries (date/time picker), and the pnpm lock / dependency snapshot contains many Fluent UI and related dependency updates/resolutions. Broad dependency changes and new dependencies increase surface area for regressions beyond a simple low-risk UI fix.
  • Action: Either change the risk label to risk:medium or add a clear justification in the PR body explaining why the dependency and lockfile updates are safe to be considered low risk (compatibility, smoke tests, gating, and why no E2E runs are required).

---

✅ What & Why

• Current: "Adding custom date time picker option while regenerating MCP API Keys. Retaining casing of workflow names while creating new MCP server with existing workflows. enabling option in accordian so all options can be collapsed."
• Issue: None — this is present and concise.
• Recommendation: Optionally list the specific files/components changed (GenerateKeys, CreateServer) and the new small behavior notes (e.g., manual freeform time parsing, min-date validation) to tie description to code for reviewers.

---

⚠️ Impact of Change

• The section is present and useful, but please expand to explicitly call out dependency changes and potential knock-on effects.
• Recommendation: Add short, specific bullets:
  • Users: Users can set a custom expiry by choosing a custom date/time in Generate Keys.
  • Developers: New dependencies added: @fluentui/react-datepicker-compat and @fluentui/react-timepicker-compat (see package.json and pnpm lock changes). Many Fluent UI packages in pnpm-lock were updated/resolved — this can affect other components.
  • System: Potential impact on bundle size and behavior due to new libraries and broad lockfile updates. Recommend confirming CI builds and smoke tests in staging.

---

✅ Test Plan

• Assessment: Unit tests were added/updated — I verified changes in libs/designer/.../__test__ including expanded mocks and many new unit tests around the custom date/time picker. Manual testing is indicated as completed.
• Note: E2E tests are not present. If you intentionally omitted E2E tests, add a short rationale (e.g., covered by unit tests + manual testing + follow-up e2e task) or add one if you have coverage for integration between date & time pickers in the app shell.

---

✅ Contributors

• Contributors listed (@kewear @bonicaayala) — good. If there were other reviewers/PM/designers who contributed ideas, consider adding them here.

---

✅ Screenshots/Videos

• A screenshot is included for the date/time picker — good for UI review.

---

Summary Table

Section	Status	Recommendation
Title	✅	Title is clear; optional slight wording improvement suggested.
Commit Type	✅	Correctly set to fix.
Risk Level	⚠️	Change label to risk:medium or justify why low is accurate given lockfile/dependency changes.
What & Why	✅	Good; optionally tie to specific files/components.
Impact of Change	⚠️	Expand to call out added dependencies and lockfile changes and their potential impact.
Test Plan	✅	Unit tests present; note missing E2E — justify or add if needed.
Contributors	✅	OK — include more names if applicable.
Screenshots/Videos	✅	Screenshot included.

---

Summary & Actions

• Advised risk level: medium — this is higher than the PR's selected Low. Please update the PR label to risk:medium or add an explicit explanation in the PR body and/or a checklist showing why the dependency and pnpm-lock changes are safe (e.g., results of CI, staging run, compatibility verification, bundle size check).
• Please expand the Impact of Change section to explicitly call out the new packages and the pnpm-lock changes and any testing you ran to validate cross-package compatibility.
• If E2E tests are not added, add a short sentence explaining why they are unnecessary for this change or plan for an E2E test / integration test to be added in a follow-up PR.
• Ensure the CI runs (build + tests) pass with the updated lockfile and new dependencies. If you have validated those, add a short line in the Test Plan: e.g., "CI: build and unit tests passed on branch ".

Please update the PR body/labels accordingly and re-submit or leave a comment linking to the verification you performed. Thank you for the thorough PR and the added tests — they help a lot in review!

---

Last updated: Thu, 05 Feb 2026 10:00:49 GMT

[Copilot]

Pull request overview

This PR adds a custom date-time picker for MCP API key expiration, fixes workflow name casing when creating/updating MCP servers, and enables the collapsible property on the servers accordion.

Changes:

• Added custom date-time picker with new Fluent UI dependencies (@fluentui/react-datepicker-compat and @fluentui/react-timepicker-compat) allowing users to specify a custom expiration date/time for API keys
• Fixed workflow name casing preservation by mapping selected lowercase workflow values back to their original cased labels when creating/updating servers
• Added collapsible={true} property to the MCP servers accordion to allow users to collapse all server sections

Reviewed changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
libs/designer/src/lib/ui/mcp/servers/servers.tsx	Added collapsible property to Accordion component for better UX
libs/designer/src/lib/ui/mcp/panel/styles.ts	Added styles for date-time picker container and time picker component
libs/designer/src/lib/ui/mcp/panel/server/generatekeys.tsx	Implemented custom date-time picker component with manual time parsing, added "Custom" duration option, and integrated with key generation flow
libs/designer/src/lib/ui/mcp/panel/server/create.tsx	Fixed workflow name casing by looking up original cased labels from workflowOptions when submitting server tools
libs/designer/src/lib/ui/mcp/panel/server/test/generatekeys.spec.tsx	Added comprehensive unit tests for custom date-time picker component covering various time formats and user interactions
libs/designer/src/lib/ui/mcp/panel/server/test/create.spec.tsx	Updated test expectations to reflect tools as array format with proper casing
libs/designer/package.json	Added Fluent UI date picker and time picker dependencies
apps/Standalone/package.json	Added Fluent UI date picker and time picker dependencies for standalone app
Localize/lang/strings.json	Added localization strings for custom date-time picker UI elements

[github-actions]

📊 Coverage check completed. See workflow run for details.

[github-actions]

📊 Coverage check completed. See workflow run for details.

[github-actions]

📊 Coverage check completed. See workflow run for details.