From 83f9b86d2a35c2b60b744bd52810b9c4a82db5d5 Mon Sep 17 00:00:00 2001 From: Viktor Avelino <64113566+viktoravelino@users.noreply.github.com> Date: Fri, 10 Apr 2026 15:58:16 -0400 Subject: [PATCH] feat: watsonx Orchestrate deployment UI polish (#12621) * feat: add credentials help link to deployment stepper and add-provider modal Add a descriptive hint below the watsonx Orchestrate provider card in both the deployment stepper and the add-provider modal, linking users to the IBM docs to find their credentials. * feat: add Beta badge to deployments tab and provider card * fix: keep provider selector visible when selected provider has no deployments The environment dropdown was hidden whenever deployments.length was 0, stranding users on the empty state with no way to switch providers. * feat: use watsonx Orchestrate logo in deployment provider UI Replaces the generic Bot icon with a dedicated WatsonxOrchestrate SVG in the deployment stepper and add-environment modal, wired through the existing IBM icon barrel and the eager/lazy icon registries. * fix: tighten Beta badge styling in main page header Constrain height, padding, font size and color so the Beta badge renders consistently alongside the tab label instead of inheriting oversized default sizing. * fix: rename "Deployment Providers" tab to "Deployment Environments" Aligns the sub-tab label with the environment-centric terminology introduced in #12551. --- src/frontend/src/icons/IBM/index.tsx | 8 +++++ .../icons/IBM/watsonx/WatsonxOrchestrate.jsx | 18 ++++++++++ src/frontend/src/icons/eagerIconImports.ts | 3 +- src/frontend/src/icons/lazyIconImports.ts | 4 +++ .../MainPage/components/header/index.tsx | 17 ++++++++- .../deployment-stepper-modal.test.tsx | 2 +- .../components/add-provider-modal.tsx | 35 ++++++++++++++----- .../components/deployments-content.tsx | 2 +- .../components/step-provider.tsx | 33 +++++++++++++---- .../components/sub-tab-toggle.tsx | 2 +- 10 files changed, 104 insertions(+), 20 deletions(-) create mode 100644 src/frontend/src/icons/IBM/watsonx/WatsonxOrchestrate.jsx diff --git a/src/frontend/src/icons/IBM/index.tsx b/src/frontend/src/icons/IBM/index.tsx index cd22fcf6f7..b893afc3c6 100644 --- a/src/frontend/src/icons/IBM/index.tsx +++ b/src/frontend/src/icons/IBM/index.tsx @@ -1,6 +1,7 @@ import React, { forwardRef } from "react"; import SvgIBM from "./ibm/IBM"; import SvgWatsonxAI from "./watsonx/WatsonxAI"; +import SvgWatsonxOrchestrate from "./watsonx/WatsonxOrchestrate"; export const WatsonxAiIcon = forwardRef< SVGSVGElement, @@ -9,6 +10,13 @@ export const WatsonxAiIcon = forwardRef< return ; }); +export const WatsonxOrchestrateIcon = forwardRef< + SVGSVGElement, + React.PropsWithChildren<{}> +>((props, ref) => { + return ; +}); + export const IBMIcon = forwardRef>( (props, ref) => { return ; diff --git a/src/frontend/src/icons/IBM/watsonx/WatsonxOrchestrate.jsx b/src/frontend/src/icons/IBM/watsonx/WatsonxOrchestrate.jsx new file mode 100644 index 0000000000..acdbbe6b54 --- /dev/null +++ b/src/frontend/src/icons/IBM/watsonx/WatsonxOrchestrate.jsx @@ -0,0 +1,18 @@ +const SvgWatsonxOrchestrate = (props) => ( + + + + + + + +); +export default SvgWatsonxOrchestrate; diff --git a/src/frontend/src/icons/eagerIconImports.ts b/src/frontend/src/icons/eagerIconImports.ts index 4329f4bc35..c06c5d6a64 100644 --- a/src/frontend/src/icons/eagerIconImports.ts +++ b/src/frontend/src/icons/eagerIconImports.ts @@ -52,7 +52,7 @@ import { HCDIcon } from "@/icons/HCD"; import { HomeAssistantIcon } from "@/icons/HomeAssistant"; import { HuggingFaceIcon } from "@/icons/HuggingFace"; import { HackerNewsIcon } from "@/icons/hackerNews"; -import { IBMIcon, WatsonxAiIcon } from "@/icons/IBM"; +import { IBMIcon, WatsonxAiIcon, WatsonxOrchestrateIcon } from "@/icons/IBM"; import { IcosaIcon } from "@/icons/Icosa"; import { IFixIcon } from "@/icons/IFixIt"; import { JSIcon } from "@/icons/JSicon"; @@ -235,6 +235,7 @@ export const eagerIconsMapping = { VertexAI: VertexAIIcon, vLLM: VllmIcon, WatsonxAI: WatsonxAiIcon, + WatsonxOrchestrate: WatsonxOrchestrateIcon, Weaviate: WeaviateIcon, Wikipedia: WikipediaIcon, Windsurf: WindsurfIcon, diff --git a/src/frontend/src/icons/lazyIconImports.ts b/src/frontend/src/icons/lazyIconImports.ts index 92c1b0abba..be20d2ab72 100644 --- a/src/frontend/src/icons/lazyIconImports.ts +++ b/src/frontend/src/icons/lazyIconImports.ts @@ -290,6 +290,10 @@ export const lazyIconsMapping = { import("@/icons/IBM").then((mod) => ({ default: mod.WatsonxAiIcon, })), + WatsonxOrchestrate: () => + import("@/icons/IBM").then((mod) => ({ + default: mod.WatsonxOrchestrateIcon, + })), Icosa: () => import("@/icons/Icosa").then((mod) => ({ default: mod.IcosaIcon })), IFixIt: () => diff --git a/src/frontend/src/pages/MainPage/components/header/index.tsx b/src/frontend/src/pages/MainPage/components/header/index.tsx index 64947004d6..6c16c3d3b1 100644 --- a/src/frontend/src/pages/MainPage/components/header/index.tsx +++ b/src/frontend/src/pages/MainPage/components/header/index.tsx @@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import ForwardedIconComponent from "@/components/common/genericIconComponent"; import ShadTooltip from "@/components/common/shadTooltipComponent"; +import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { SidebarTrigger } from "@/components/ui/sidebar"; @@ -151,10 +152,24 @@ const HeaderComponent = ({ : "border-border text-muted-foreground hover:text-foreground" } text-nowrap px-2 pb-2 pt-1 text-mmd`} > -
+
{type === "mcp" ? t("mainPage.mcpServer") : type.charAt(0).toUpperCase() + type.slice(1)} + {type === "deployments" && ( + + Beta + + )}
))} diff --git a/src/frontend/src/pages/MainPage/pages/deploymentsPage/__tests__/deployment-stepper-modal.test.tsx b/src/frontend/src/pages/MainPage/pages/deploymentsPage/__tests__/deployment-stepper-modal.test.tsx index 4d35d84f33..76d5d30fb1 100644 --- a/src/frontend/src/pages/MainPage/pages/deploymentsPage/__tests__/deployment-stepper-modal.test.tsx +++ b/src/frontend/src/pages/MainPage/pages/deploymentsPage/__tests__/deployment-stepper-modal.test.tsx @@ -251,7 +251,7 @@ describe("Create mode — step navigation", () => { id: "watsonx", type: "watsonx", name: "watsonx Orchestrate", - icon: "Bot", + icon: "WatsonxOrchestrate", }, initialInstance: makeInstance(), }); diff --git a/src/frontend/src/pages/MainPage/pages/deploymentsPage/components/add-provider-modal.tsx b/src/frontend/src/pages/MainPage/pages/deploymentsPage/components/add-provider-modal.tsx index 99c7e1d4d5..d2d7b88fc9 100644 --- a/src/frontend/src/pages/MainPage/pages/deploymentsPage/components/add-provider-modal.tsx +++ b/src/frontend/src/pages/MainPage/pages/deploymentsPage/components/add-provider-modal.tsx @@ -1,5 +1,6 @@ import { useState } from "react"; import ForwardedIconComponent from "@/components/common/genericIconComponent"; +import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Dialog, @@ -71,17 +72,35 @@ export default function AddProviderModal({ Add Environment - - Configure your watsonx Orchestrate credentials below. + + Add a new watsonx Orchestrate environment.
-
- - watsonx Orchestrate +
+
+ + watsonx Orchestrate + + Beta + +
+

+ Configure your watsonx Orchestrate credentials below. Sign in or + sign up to{" "} + + find your credentials + + . +

- {providers.length >= 1 && deployments.length > 0 && ( + {providers.length >= 1 && (
Environment: