fix(config-ui) - UI style fix for Azure DevOps Python Plugin deprecation notice

config-ui/src/plugins/register/azure/config.tsx

@@ -30,7 +30,7 @@ export const AzureConfig: IPluginConfig = {
   sort: 2,
   isDeprecated: true,
   deprecationMessage:
-    'This Python-based Azure DevOps plugin is DEPRECATED and will be removed in 3 months. Please migrate to the Go-based "Azure DevOps Go" plugin. See https://github.com/apache/devlake/issues/9092 for the deprecation plan and migration guide.',
+    'Python-based Azure DevOps plugin is DEPRECATED and will be removed in 3 months. Please migrate to the Go-based "Azure DevOps Go" plugin. See https://github.com/apache/devlake/issues/9092 for the deprecation plan and migration guide.',
   connection: {
     docLink: DOC_URL.PLUGIN.AZUREDEVOPS.BASIS,
     initialValues: {},

config-ui/src/routes/connection/connections.tsx

@@ -19,6 +19,7 @@
 import { useState, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { theme, Badge, Modal } from 'antd';
+import { WarningOutlined } from '@ant-design/icons';
 
 import { selectPlugins, selectAllConnections, selectWebhooks } from '@/features/connections';
 import { PATHS } from '@/config';
@@ -56,6 +57,9 @@ export const Connections = () => {
   const webhooks = useAppSelector(selectWebhooks);
 
   const filterWebhookPlugins = plugins.filter((p) => p !== 'webhook');
+  const deprecatedPlugin = filterWebhookPlugins
+    .map((plugin) => getPluginConfig(plugin))
+    .find((config) => config?.isDeprecated && config.deprecationMessage);
 
   const [firstPlugins, secondPlugins] = useMemo(
     () => splitPluginsByInitial(filterWebhookPlugins, (plugin) => getPluginConfig(plugin)?.name ?? plugin),
@@ -90,6 +94,16 @@ export const Connections = () => {
       </h5>
       <h2>Data Connections</h2>
       <h5>You can create and manage data connections for the following data sources and use them in your Projects.</h5>
+      {deprecatedPlugin?.deprecationMessage && (
+        <S.DeprecationAlert
+          closable
+          showIcon
+          type="warning"
+          icon={<WarningOutlined />}
+          message="Plugin deprecation notice"
+          description={deprecatedPlugin.deprecationMessage}
+        />
+      )}
       <h4>A-N</h4>
       <ul>
         {firstPlugins.map((plugin) => {
@@ -101,9 +115,6 @@ export const Connections = () => {
               {pluginConfig.isDeprecated && <span className="deprecated">Deprecated</span>}
               <span className="logo">{pluginConfig.icon({ color: colorPrimary })}</span>
               <span className="name">{pluginConfig.name}</span>
-              {pluginConfig.isDeprecated && pluginConfig.deprecationMessage && (
-                <span className="deprecation-note">{pluginConfig.deprecationMessage}</span>
-              )}
               <span className="count">
                 {connectionCount ? (
                   <Badge color={colorPrimary} text={`${connectionCount} connections`} />
@@ -126,9 +137,6 @@ export const Connections = () => {
               {pluginConfig.isDeprecated && <span className="deprecated">Deprecated</span>}
               <span className="logo">{pluginConfig.icon({ color: colorPrimary })}</span>
               <span className="name">{pluginConfig.name}</span>
-              {pluginConfig.isDeprecated && pluginConfig.deprecationMessage && (
-                <span className="deprecation-note">{pluginConfig.deprecationMessage}</span>
-              )}
               <span className="count">
                 {connectionCount ? (
                   <Badge color={colorPrimary} text={`${connectionCount} connections`} />

config-ui/src/routes/connection/styled.ts

@@ -17,6 +17,7 @@
  */
 
 import styled from 'styled-components';
+import { Alert } from 'antd';
 
 export const Wrapper = styled.div`
   h2 {
@@ -93,15 +94,6 @@ export const Wrapper = styled.div`
       border-radius: 8px;
     }
 
-    & > .deprecation-note {
-      margin-top: 4px;
-      padding: 0 8px;
-      font-size: 11px;
-      line-height: 1.4;
-      color: ${({ theme }) => theme.colors.error};
-      text-align: center;
-    }
-
     & > .logo {
       width: 60px;
       height: 60px;
@@ -136,6 +128,18 @@ export const Wrapper = styled.div`
   }
 `;
 
+export const DeprecationAlert = styled(Alert)`
+  margin-top: 12px;
+
+  & + h4 {
+    margin-top: 12px;
+  }
+
+  .ant-alert-description {
+    white-space: pre-line;
+  }
+`;
+
 export const ModalTitle = styled.div`
   display: flex;
   align-items: center;