feat: deployment page and stepper UI with watsonx Orchestrate integration#12303
Draft
viktoravelino wants to merge 28 commits intorelease-1.9.0from
Draft
feat: deployment page and stepper UI with watsonx Orchestrate integration#12303viktoravelino wants to merge 28 commits intorelease-1.9.0from
viktoravelino wants to merge 28 commits intorelease-1.9.0from
Conversation
Implement a multi-step deployment creation flow with 4 steps (Provider, Type, Attach Flows, Review). State is centralized in a scoped DeploymentStepperContext to avoid prop-drilling across step components. Includes bug fixes for version re-selection and connection pre-selection.
…t stepper Fetch real flows from the API (scoped to current folder) and versions per-flow lazily when selected. Enrich selectedVersionByFlow context to store versionTag alongside versionId so the review step can display it without re-fetching. Remove MOCK_FLOWS_WITH_VERSIONS from mock-data.
Rename all new deployment files to kebab-case per project conventions, fix context re-render issues with useMemo/useCallback, replace raw Tailwind colors with design tokens, add missing data-testid and ARIA attributes, fix Deploy button disabled on review step, and move shared FlowTabType to a dedicated types file.
- Rename ProviderInstance -> ProviderAccount to match backend naming - Update ProviderAccount fields to match DeploymentProviderAccountGetResponse (provider_key, provider_url, provider_tenant_id, created_at, updated_at) - Update ProviderCredentials fields to match DeploymentProviderAccountCreateRequest (provider_key, provider_url, api_key) - Rename all "instance" UI terminology to "environment" (tabs, labels, components) - Auto-select watsonx Orchestrate on mount as the only supported provider - Remove Kubernetes from mock providers; update mock data to use watsonx_orchestrate only
…h mock data - Add useGetProviderAccounts hook (GET /deployments/providers) replacing direct MOCK_PROVIDER_INSTANCES import in step-provider.tsx - Add useGetDeployments hook (GET /deployments) replacing direct MOCK_DEPLOYMENTS import in deployments-page.tsx - Replace fake setTimeout loading state with hook isLoading state - Register DEPLOYMENTS and DEPLOYMENT_PROVIDER_ACCOUNTS URL constants - Real API calls are commented out with TODO markers for easy swap when backend is ready
Contributor
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
…oyment stepper - Extract RadioSelectItem component (label + sr-only input + checkbox indicator) used by version, connection, and environment selectors - Fix step-type.tsx type cards with label/input pattern (matching ProviderCard) - Add role="radiogroup" wrapper to EnvironmentList - Fix envVars key: use stable crypto.randomUUID() id instead of array index
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
…and real API call - Add `name` field to ProviderAccount, ProviderCredentials, and mock data - Switch connection selection from single to multi-select (CheckboxSelectItem) - Allow creating new connections inline from the attach flows step - Lift connections state up to DeploymentStepperContext - Move ConnectionItem type from step-attach-flows to shared types.ts - Wire up real API call in useGetProviderAccounts (remove mock)
…data
- Add usePostDeployment and usePostProviderAccount mutation hooks
- Wire Deploy button in stepper modal: creates provider account if needed,
then POSTs to /api/v1/deployments with WXO provider_data shape
- Fix environment_variables payload: wrap values as { value, source: "raw" }
to satisfy EnvVarValueSpec schema
- Fix connection app_id: prefix with conn_ so WXO name validation passes
(names must start with a letter)
- Multi-select connections with checkbox UI; persist connections in context
so they survive back/forward navigation
- Update Deployment type to match API response shape; remove mock fields
(url, status, health, lastModifiedBy)
- Wire useGetDeployments to real API; load provider ID from useGetProviderAccounts
- Update deployments table to display real fields: name, type, attached_count,
provider name, updated_at
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
Implements a chat interface to test deployments directly from the UI. Wires up two entry points: the stepper modal "Test" button (inline transition) and the deployments table play button (standalone dialog). - Add usePostDeploymentExecution and useGetDeploymentExecution hooks hitting POST/GET /api/v1/deployments/executions - Build test-deployment-modal: ChatHeader, ChatMessages, ChatInput, ChatMessageBubble with user/bot avatars, loading dots, tool traces - useDeploymentChat hook: recursive setTimeout polling (max 30 × 1.5s), thread_id persistence for multi-turn, watsonx response parsing (response_type/type text, wxo_thread_id extraction) - Stepper modal transitions inline to TestDeploymentContent on Test click - Deployments table play button opens standalone TestDeploymentModal
- Add dropdown action menu (Duplicate, Update, Delete) to each row - Replace left-border type badge with icon-based badge (Bot for Agent, Plug for MCP)
- Add POST /deployments/variables/detections backend endpoint that scans flow version data for credential fields (load_from_db=True globals and password=True fallbacks) and returns detected variable names - Derive meaningful env var names from the model field's category when no global variable is linked (e.g. OPENAI_API_KEY from category "OpenAI") - Add DetectEnvVarsRequest/DetectedEnvVar/DetectEnvVarsResponse schemas - Add usePostDetectDeploymentEnvVars frontend mutation hook - Pre-populate Create Connection env var rows with detected keys/values when attaching a flow version; global variable selections render as tags via InputComponent with global variable picker support
- Default to "Create Connection" tab when no connections exist - Show empty state with icon, description, and shortcut link when the Available Connections tab has no items
Match new design reference with Deployment/Attached Flows columns and a masked Configuration section showing env variable keys.
github-actions
bot
added
enhancement
…al flow
- Add useDeleteDeployment hook (DELETE /deployments/{id}, refetches list)
- Show spinner + faded row while deletion is in progress; fix race where
deleteTarget was cleared before isPending resolved by using separate deletingId state
- Redesign StepDeployStatus with animated spinner, ping ring, and success checkmark
- After deploy, "Test" closes the stepper and opens the standalone TestDeploymentModal
(consistent UI, correct providerId, chat reset on close)
- Prevent closing the stepper modal while deployment is in progress
github-actions
bot
added
enhancement
- Split step-attach-flows.tsx (656→274 lines) into FlowListPanel, VersionPanel, and ConnectionPanel sub-components - Extract Watsonx parser utilities into watsonx-result-parsers.ts, reducing use-deployment-chat.ts from 384 to 277 lines - Surface detectEnvVars errors via setErrorData instead of silently resetting state - Add EnvVarEntry named type to types.ts, replacing inline shape repeated across two files - Move import json to module level in deployments.py (PEP 8) - Fix URL construction in useGetDeploymentExecution to use axios params option, consistent with other hooks - Remove commented-out MOCK_CONNECTIONS dead code - Add TODO comment to hardcoded "watsonx-orchestrate" provider key
…ment UI - Fix barrel imports: import directly from source files in deployments-page, step-provider, and step-attach-flows - Replace useEffect auto-select with derived effectiveFlowId in step-attach-flows - Fix async state init bug for environmentTab using useRef guard pattern - Fix stale closure in handleAddEnvVar with functional setState - Wrap useState initial value in lazy initializer for envVars - Wrap all 8 handlers in useCallback; wrap panel components in memo() - Remove mock-data.ts; move PROVIDERS constant inline to step-provider - Drop MOCK_CONNECTIONS (was empty array) from context - Simplify step-provider UI: remove provider selection radio group since only one provider exists; show watsonx Orchestrate as a static display
github-actions
bot
added
enhancement
Adds a primary-colored Deploy button at the far right of the canvas toolbar. Clicking it saves the flow, creates a version snapshot, and opens the deployment stepper modal with the current flow and version pre-selected in the Attach Flows step, including auto-detection of environment variable keys.
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ENABLE_DEPLOYMENTSfeature flagProviderInstance→ProviderAccount, "instance" → "environment" throughout UIuseGetProviderAccountsanduseGetDeploymentsreact-query hooks with mock data and commented-out real API calls (swap when backend is ready)<button role=\"radio\">with semantic<label>+<input type=\"radio\">in ProviderCardTest plan
ENABLE_DEPLOYMENTS=truefeature flag