This is an automated email from the ASF dual-hosted git repository.
klesh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/devlake.git
The following commit(s) were added to refs/heads/main by this push:
new a0cc75183 fix(config-ui) - for plugin deprecation notice (#9144)
a0cc75183 is described below
commit a0cc75183badb3d7b370942c96ea563fba26bb7b
Author: Veet Moradiya <[email protected]>
AuthorDate: Fri Sep 18 08:40:52 2026 +0530
fix(config-ui) - for plugin deprecation notice (#9144)
---
config-ui/src/plugins/register/azure/config.tsx | 2 +-
config-ui/src/routes/connection/connections.tsx | 20 ++++++++++++++------
config-ui/src/routes/connection/styled.ts | 22 +++++++++++++---------
3 files changed, 28 insertions(+), 16 deletions(-)
diff --git a/config-ui/src/plugins/register/azure/config.tsx
b/config-ui/src/plugins/register/azure/config.tsx
index 3818226a2..28b387bab 100644
--- a/config-ui/src/plugins/register/azure/config.tsx
+++ b/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: {},
diff --git a/config-ui/src/routes/connection/connections.tsx
b/config-ui/src/routes/connection/connections.tsx
index b9be34f37..e6bc20b0f 100644
--- a/config-ui/src/routes/connection/connections.tsx
+++ b/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`} />
diff --git a/config-ui/src/routes/connection/styled.ts
b/config-ui/src/routes/connection/styled.ts
index 5c53a1c4f..35a765b27 100644
--- a/config-ui/src/routes/connection/styled.ts
+++ b/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;
