From 8d4d3badf3556675405b2dbdf308764a97064033 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 1 May 2025 19:29:59 -0300
Subject: [PATCH] agent: Add design adjustments to MCP config flow (#29765)
Mostly somewhat small UI tweaks around the MCP extension config flow and
the settings section.
Release Notes:
- N/A
---
assets/icons/hammer.svg | 1 +
crates/agent/src/assistant_configuration.rs | 64 +++++++++++++------
.../configure_context_server_modal.rs | 6 +-
crates/icons/src/icons.rs | 1 +
4 files changed, 49 insertions(+), 23 deletions(-)
create mode 100644 assets/icons/hammer.svg
diff --git a/assets/icons/hammer.svg b/assets/icons/hammer.svg
new file mode 100644
index 0000000000..ccc0d30e3d
--- /dev/null
+++ b/assets/icons/hammer.svg
@@ -0,0 +1 @@
+
diff --git a/crates/agent/src/assistant_configuration.rs b/crates/agent/src/assistant_configuration.rs
index a399641091..a23ce99b12 100644
--- a/crates/agent/src/assistant_configuration.rs
+++ b/crates/agent/src/assistant_configuration.rs
@@ -257,7 +257,11 @@ impl AssistantConfiguration {
)
}
- fn render_context_servers_section(&mut self, cx: &mut Context) -> impl IntoElement {
+ fn render_context_servers_section(
+ &mut self,
+ window: &mut Window,
+ cx: &mut Context,
+ ) -> impl IntoElement {
let context_servers = self.context_server_manager.read(cx).all_servers().clone();
const SUBHEADING: &str = "Connect to context servers via the Model Context Protocol either via Zed extensions or directly.";
@@ -276,7 +280,7 @@ impl AssistantConfiguration {
.children(
context_servers
.into_iter()
- .map(|context_server| self.render_context_server(context_server, cx)),
+ .map(|context_server| self.render_context_server(context_server, window, cx)),
)
.child(
h_flex()
@@ -305,7 +309,7 @@ impl AssistantConfiguration {
.style(ButtonStyle::Filled)
.layer(ElevationIndex::ModalSurface)
.full_width()
- .icon(IconName::DatabaseZap)
+ .icon(IconName::Hammer)
.icon_size(IconSize::Small)
.icon_position(IconPosition::Start)
.on_click(|_event, window, cx| {
@@ -327,6 +331,7 @@ impl AssistantConfiguration {
fn render_context_server(
&self,
context_server: Arc,
+ window: &mut Window,
cx: &mut Context,
) -> impl use<> + IntoElement {
let tools_by_source = self.tools.read(cx).tools_by_source(cx);
@@ -356,24 +361,26 @@ impl AssistantConfiguration {
.map_or([].as_slice(), |tools| tools.as_slice());
let tool_count = tools.len();
+ let border_color = cx.theme().colors().border.opacity(0.6);
+
v_flex()
.id(SharedString::from(context_server.id()))
.border_1()
.rounded_md()
- .border_color(cx.theme().colors().border)
- .bg(cx.theme().colors().background.opacity(0.25))
+ .border_color(border_color)
+ .bg(cx.theme().colors().background.opacity(0.2))
+ .overflow_hidden()
.child(
h_flex()
.p_1()
.justify_between()
- .when(are_tools_expanded && tool_count > 1, |element| {
- element
- .border_b_1()
- .border_color(cx.theme().colors().border)
- })
+ .when(
+ error.is_some() || are_tools_expanded && tool_count > 1,
+ |element| element.border_b_1().border_color(border_color),
+ )
.child(
h_flex()
- .gap_2()
+ .gap_1p5()
.child(
Disclosure::new(
"tool-list-disclosure",
@@ -419,7 +426,7 @@ impl AssistantConfiguration {
}
None => Indicator::dot().color(Color::Muted).into_any_element(),
})
- .child(Label::new(context_server.id()))
+ .child(Label::new(context_server.id()).ml_0p5())
.when(is_running, |this| {
this.child(
Label::new(if tool_count == 1 {
@@ -470,12 +477,29 @@ impl AssistantConfiguration {
.map(|parent| {
if let Some(error) = error {
return parent.child(
- div().py_1p5().px_2().child(
- Label::new(error)
- .color(Color::Muted)
- .buffer_font(cx)
- .size(LabelSize::Small),
- ),
+ h_flex()
+ .p_2()
+ .gap_2()
+ .items_start()
+ .child(
+ h_flex()
+ .flex_none()
+ .h(window.line_height() / 1.6_f32)
+ .justify_center()
+ .child(
+ Icon::new(IconName::XCircle)
+ .size(IconSize::XSmall)
+ .color(Color::Error),
+ ),
+ )
+ .child(
+ div().w_full().child(
+ Label::new(error)
+ .buffer_font(cx)
+ .color(Color::Muted)
+ .size(LabelSize::Small),
+ ),
+ ),
);
}
@@ -510,7 +534,7 @@ impl AssistantConfiguration {
}
impl Render for AssistantConfiguration {
- fn render(&mut self, _window: &mut Window, cx: &mut Context) -> impl IntoElement {
+ fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {
v_flex()
.id("assistant-configuration")
.key_context("AgentConfiguration")
@@ -527,7 +551,7 @@ impl Render for AssistantConfiguration {
.overflow_y_scroll()
.child(self.render_command_permission(cx))
.child(Divider::horizontal().color(DividerColor::Border))
- .child(self.render_context_servers_section(cx))
+ .child(self.render_context_servers_section(window, cx))
.child(Divider::horizontal().color(DividerColor::Border))
.child(self.render_provider_configuration_section(cx)),
)
diff --git a/crates/agent/src/assistant_configuration/configure_context_server_modal.rs b/crates/agent/src/assistant_configuration/configure_context_server_modal.rs
index b200e156d1..b24a3a4d66 100644
--- a/crates/agent/src/assistant_configuration/configure_context_server_modal.rs
+++ b/crates/agent/src/assistant_configuration/configure_context_server_modal.rs
@@ -198,10 +198,10 @@ impl ConfigureContextServerModal {
.update(cx, {
|workspace, cx| {
let status_toast = StatusToast::new(
- format!("{} MCP configured successfully", id),
+ format!("{} configured successfully.", id),
cx,
|this, _cx| {
- this.icon(ToastIcon::new(IconName::DatabaseZap).color(Color::Muted))
+ this.icon(ToastIcon::new(IconName::Hammer).color(Color::Muted))
.action("Dismiss", |_, _| {})
},
);
@@ -276,7 +276,7 @@ impl Render for ConfigureContextServerModal {
.header(ModalHeader::new().headline(format!("Configure {}", configuration.id)))
.section(
Section::new()
- .child(div().py_2().child(MarkdownElement::new(
+ .child(div().pb_2().text_sm().child(MarkdownElement::new(
configuration.installation_instructions.clone(),
default_markdown_style(window, cx),
)))
diff --git a/crates/icons/src/icons.rs b/crates/icons/src/icons.rs
index 32ee3f80ef..c370eb7adf 100644
--- a/crates/icons/src/icons.rs
+++ b/crates/icons/src/icons.rs
@@ -137,6 +137,7 @@ pub enum IconName {
GitBranchSmall,
Github,
Globe,
+ Hammer,
Hash,
HistoryRerun,
Image,