Merge pull request #491 from tapdata/feat/TAP-9248-alpha-beta-connector-warnings-limit-recommended

refactor(SceneDialog.vue): update connector item styles and enhance t…

Author: feynmx

packages/business/src/components/create-connection/SceneDialog.vue

@@ -81,11 +81,8 @@ export default {
             'MongoDB Atlas',
             'PostgreSQL',
             'Clickhouse',
-            'Elasticsearch',
-            'Dummy',
             'Kafka-Enhanced',
             'Doris',
-            'BigQuery',
           ],
         },
         {
@@ -959,7 +956,7 @@ export default {
           <div
             v-for="item in specialScene[currentScene]"
             :key="item.key"
-            class="connector-item rounded-lg p-3 overflow-hidden bg-card dark:bg-white/10 clickable"
+            class="connector-item rounded-xl p-3 overflow-hidden bg-card dark:bg-white/10 clickable"
             @click="handleSelectSpecial(item)"
           >
             <div class="flex gap-3">
@@ -982,7 +979,7 @@ export default {
             <div
               v-for="item in demoDatabase"
               :key="`demo-${item.pdkId}`"
-              class="connector-item rounded-lg p-3 overflow-hidden bg-white clickable"
+              class="connector-item rounded-xl p-3 overflow-hidden bg-white clickable"
               :class="{ active: item.pdkId === selected.pdkId }"
               @click="handleSelect(item, true)"
             >
@@ -1012,7 +1009,7 @@ export default {
           <div
             v-for="item in sceneDatabases"
             :key="item.type"
-            class="connector-item rounded-lg p-3 overflow-hidden bg-card dark:bg-white/10 clickable"
+            class="connector-item rounded-xl p-3 overflow-hidden bg-card dark:bg-white/10 clickable"
             :class="{ active: item.pdkId === selected.pdkId }"
             @click="handleSelect(item)"
           >
@@ -1039,11 +1036,28 @@ export default {
                     class="ml-auto color-success"
                     >verified</VIcon
                   >
-                  <ElTag
+                  <el-tooltip
                     v-else-if="item.qcType"
-                    class="text-uppercase ml-auto px-1 connector-item-tag"
-                    >{{ item.qcType }}
-                  </ElTag>
+                    :hide-after="0"
+                    :enterable="false"
+                    :content="
+                      $t(
+                        item.qcType === 'Beta'
+                          ? 'public_connector_beta_tip'
+                          : 'public_connector_alpha_tip',
+                      )
+                    "
+                  >
+                    <ElTag
+                      :type="item.qcType === 'Beta' ? 'primary' : 'warning'"
+                      class="text-uppercase ml-auto px-1 connector-item-tag tag-amber"
+                    >
+                      <span class="flex align-center gap-0.5">
+                        <el-icon><i-lucide-badge-alert /></el-icon>
+                        {{ item.qcType }}
+                      </span>
+                    </ElTag>
+                  </el-tooltip>
                 </div>
               </div>
             </div>

packages/business/src/locale/lang/en.js

@@ -1740,4 +1740,8 @@ export default {
     'If a task or data source with the same name exists, cancel the import.',
   packages_business_import_reuse_existing_tip:
     'If a task name conflict, replace the task; if a data source name conflict, reuse the existing data source in the system.',
+  public_connector_beta_tip:
+    'Currently in testing. We are continuously optimizing the experience.',
+  public_connector_alpha_tip:
+    'Under active development. Some features may still be incomplete.',
 }

packages/business/src/locale/lang/zh-CN.js

@@ -1549,4 +1549,6 @@ export default {
     '若任务名或数据源名冲突，则终止导入操作，不导入任何内容。',
   packages_business_import_reuse_existing_tip:
     '若任务名冲突则替换任务，数据源名冲突则复用系统中已有数据源。',
+  public_connector_beta_tip: '正在测试阶段，我们正在不断优化体验',
+  public_connector_alpha_tip: '正在持续开发中，部分功能可能还在完善',
 }

packages/business/src/locale/lang/zh-TW.js

@@ -1538,4 +1538,6 @@ export default {
     '若任務名或數據源名衝突，則終止導入操作，不導入任何內容。',
   packages_business_import_reuse_existing_tip:
     '若任務名衝突則替換任務，數據源名衝突則重用系統中已有數據源。',
+  public_connector_beta_tip: '正在測試階段，我們正在不斷優化體驗',
+  public_connector_alpha_tip: '正在持續開發中，部分功能可能還在完善',
 }

packages/types/src/daas-components.d.ts

@@ -89,6 +89,7 @@ declare module 'vue' {
     ElUpload: typeof import('element-plus/es')['ElUpload']
     IFluentFolderLink16Regular: typeof import('~icons/fluent/folder-link16-regular')['default']
     ILucideActivity: typeof import('~icons/lucide/activity')['default']
+    ILucideBadgeAlert: typeof import('~icons/lucide/badge-alert')['default']
     ILucideCalendar: typeof import('~icons/lucide/calendar')['default']
     ILucideCalendarDays: typeof import('~icons/lucide/calendar-days')['default']
     ILucideChartColumn: typeof import('~icons/lucide/chart-column')['default']
@@ -251,6 +252,7 @@ declare global {
   const ElUpload: typeof import('element-plus/es')['ElUpload']
   const IFluentFolderLink16Regular: typeof import('~icons/fluent/folder-link16-regular')['default']
   const ILucideActivity: typeof import('~icons/lucide/activity')['default']
+  const ILucideBadgeAlert: typeof import('~icons/lucide/badge-alert')['default']
   const ILucideCalendar: typeof import('~icons/lucide/calendar')['default']
   const ILucideCalendarDays: typeof import('~icons/lucide/calendar-days')['default']
   const ILucideChartColumn: typeof import('~icons/lucide/chart-column')['default']