From a63caa642ef0598935bfbbb6dbe83b23e1bb0bb0 Mon Sep 17 00:00:00 2001
From: Bhargav <BJP232004@GMAIL.COM>
Date: Mon, 21 Sep 2026 09:16:46 +0000
Subject: [PATCH] fix(web): align connect-data-source popup title with icon in
 body (#14686)

---
 .../components/ConnectDataSourcePopup.spec.ts |  3 +-
 web/src/components/ConnectDataSourcePopup.vue | 30 +++++++++++++++----
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/web/src/components/ConnectDataSourcePopup.spec.ts b/web/src/components/ConnectDataSourcePopup.spec.ts
index 5f25bfe7e0..131bbe437d 100644
--- a/web/src/components/ConnectDataSourcePopup.spec.ts
+++ b/web/src/components/ConnectDataSourcePopup.spec.ts
@@ -48,7 +48,7 @@ const SUMMARY_URL = `${store.state.API_ENDPOINT}/api/:org/summary`;
 const ODialogStub = {
   name: "ODialog",
   inheritAttrs: false,
-  props: ["open", "size", "showClose", "title"],
+  props: ["open", "size", "showClose"],
   emits: ["update:open"],
   template: `
     <div
@@ -56,7 +56,6 @@ const ODialogStub = {
       :data-open="String(open)"
       :data-size="size"
     >
-      <h2 data-test="connect-data-source-popup-title">{{ title }}</h2>
       <slot />
       <button
         data-test="o-dialog-close-btn"
diff --git a/web/src/components/ConnectDataSourcePopup.vue b/web/src/components/ConnectDataSourcePopup.vue
index ab426a129c..a0a74d887f 100644
--- a/web/src/components/ConnectDataSourcePopup.vue
+++ b/web/src/components/ConnectDataSourcePopup.vue
@@ -240,16 +240,34 @@ const handleOpenChange = (open: boolean) => {
   <ODialog
     data-test="connect-data-source-popup-dialog"
     :open="isOpen"
-    :title="t('connectDataSourcePopup.title')"
     size="sm"
+    :show-close="false"
     @update:open="handleOpenChange"
   >
     <div class="flex flex-col gap-4">
-      <div
-        class="rounded-default bg-icon-chip-primary-bg flex h-12 w-12 shrink-0 items-center justify-center"
-        aria-hidden="true"
-      >
-        <OIcon name="database" size="md" class="text-icon-chip-primary-text" />
+      <!-- Header: data-source badge, title to its right, close button on the far right -->
+      <div class="flex items-start gap-3">
+        <div
+          class="rounded-default bg-icon-chip-primary-bg flex h-12 w-12 shrink-0 items-center justify-center"
+          aria-hidden="true"
+        >
+          <OIcon name="database" size="md" class="text-icon-chip-primary-text" />
+        </div>
+
+        <h2 data-test="connect-data-source-popup-title" class="flex-1 self-center">
+          {{ t("connectDataSourcePopup.title") }}
+        </h2>
+
+        <OButton
+          variant="ghost"
+          size="icon-sm"
+          class="-me-1 shrink-0"
+          :aria-label="t('common.close')"
+          data-test="connect-data-source-popup-close-btn"
+          @click="dismiss"
+        >
+          <OIcon name="close" size="sm" />
+        </OButton>
       </div>
 
       <p data-test="connect-data-source-popup-description" class="text-text-secondary">