You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by e2...@apache.org on 2022/10/18 14:55:19 UTC

[incubator-devlake] branch main updated: feat: config-ui - register new providers azure bitbucket and gitee (#3374)

This is an automated email from the ASF dual-hosted git repository.

e2corporation pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git


The following commit(s) were added to refs/heads/main by this push:
     new 1aee2944 feat: config-ui - register new providers azure bitbucket and gitee (#3374)
1aee2944 is described below

commit 1aee29440a38707f7558ef7f8086cf3d1d9657d6
Author: Julien Chinapen <ju...@merico.dev>
AuthorDate: Tue Oct 18 10:55:10 2022 -0400

    feat: config-ui - register new providers azure bitbucket and gitee (#3374)
    
    * feat: register new providers azure bb and gitee
    
    * fix: add 3 providers to integrations configuration
    
    * fix: update data sources for new integrations
    
    * fix: update provider transformation settings
    
    * fix: update menu configuration with new providers
    
    * fix: resolve conflicts with dora provider config
    
    * fix: resolve lint warnings with entityIdKey
    
    * fix: use correct casing for dora provider label
    
    * refactor: remove entityIdKey props
---
 .../src/components/Sidebar/MenuConfiguration.jsx   | 30 +++++++
 .../src/components/blueprints/ConnectionDialog.jsx | 18 +++++
 .../blueprints/ProviderTransformationSettings.jsx  | 36 +++++++++
 config-ui/src/data/Providers.js                    | 91 +++++++++++++++++++++-
 config-ui/src/data/integrations.jsx                | 66 ++++++++++++++++
 config-ui/src/hooks/useConnectionManager.jsx       |  9 +++
 config-ui/src/images/integrations/azure.svg        |  6 ++
 config-ui/src/images/integrations/bitbucket.svg    |  3 +
 config-ui/src/images/integrations/gitee.svg        |  3 +
 config-ui/src/pages/configure/settings/azure.jsx   | 80 +++++++++++++++++++
 .../src/pages/configure/settings/bitbucket.jsx     | 80 +++++++++++++++++++
 config-ui/src/pages/configure/settings/gitee.jsx   | 80 +++++++++++++++++++
 12 files changed, 499 insertions(+), 3 deletions(-)

diff --git a/config-ui/src/components/Sidebar/MenuConfiguration.jsx b/config-ui/src/components/Sidebar/MenuConfiguration.jsx
index 7b3528a4..8b674201 100644
--- a/config-ui/src/components/Sidebar/MenuConfiguration.jsx
+++ b/config-ui/src/components/Sidebar/MenuConfiguration.jsx
@@ -82,6 +82,36 @@ const MenuConfiguration = (activeRoute) => {
         },
         {
           id: 5,
+          label: `${ProviderLabels.AZURE}`,
+          route: '/integrations/azure',
+          active:
+            activeRoute.url.endsWith('/integrations/azure') ||
+            activeRoute.url.endsWith('/azure'),
+          icon: 'layers',
+          classNames: []
+        },
+        {
+          id: 6,
+          label: `${ProviderLabels.BITBUCKET}`,
+          route: '/integrations/bitbucket',
+          active:
+            activeRoute.url.endsWith('/integrations/bitbucket') ||
+            activeRoute.url.endsWith('/bitbucket'),
+          icon: 'layers',
+          classNames: []
+        },
+        {
+          id: 7,
+          label: `${ProviderLabels.GITEE}`,
+          route: '/integrations/gitee',
+          active:
+            activeRoute.url.endsWith('/integrations/gitee') ||
+            activeRoute.url.endsWith('/gitee'),
+          icon: 'layers',
+          classNames: []
+        },
+        {
+          id: 8,
           label: 'Incoming Webhook',
           route: '/connections/incoming-webhook',
           active:
diff --git a/config-ui/src/components/blueprints/ConnectionDialog.jsx b/config-ui/src/components/blueprints/ConnectionDialog.jsx
index 43ddd8c5..aa34454f 100644
--- a/config-ui/src/components/blueprints/ConnectionDialog.jsx
+++ b/config-ui/src/components/blueprints/ConnectionDialog.jsx
@@ -80,6 +80,24 @@ const DATA_SOURCES_LIST = [
     name: Providers.TAPD,
     title: ProviderLabels[Providers.TAPD.toUpperCase()],
     value: Providers.TAPD
+  },
+  {
+    id: 6,
+    name: Providers.AZURE,
+    title: ProviderLabels[Providers.AZURE.toUpperCase()],
+    value: Providers.AZURE
+  },
+  {
+    id: 7,
+    name: Providers.BITBUCKET,
+    title: ProviderLabels[Providers.BITBUCKET.toUpperCase()],
+    value: Providers.BITBUCKET
+  },
+  {
+    id: 8,
+    name: Providers.GITEE,
+    title: ProviderLabels[Providers.GITEE.toUpperCase()],
+    value: Providers.GITEE
   }
 ]
 
diff --git a/config-ui/src/components/blueprints/ProviderTransformationSettings.jsx b/config-ui/src/components/blueprints/ProviderTransformationSettings.jsx
index c8a40abe..f746934d 100644
--- a/config-ui/src/components/blueprints/ProviderTransformationSettings.jsx
+++ b/config-ui/src/components/blueprints/ProviderTransformationSettings.jsx
@@ -29,6 +29,9 @@ import GitlabSettings from '@/pages/configure/settings/gitlab'
 import JenkinsSettings from '@/pages/configure/settings/jenkins'
 import TapdSettings from '@/pages/configure/settings/tapd'
 import GithubSettings from '@/pages/configure/settings/github'
+import AzureSettings from '@/pages/configure/settings/azure'
+import BitbucketSettings from '@/pages/configure/settings/bitbucket'
+import GiteeSettings from '@/pages/configure/settings/gitee'
 
 const ProviderTransformationSettings = (props) => {
   const {
@@ -110,6 +113,39 @@ const ProviderTransformationSettings = (props) => {
           isSavingConnection={isSavingConnection}
         />
       )}
+      {provider?.id === Providers.AZURE && (
+        <AzureSettings
+          provider={provider}
+          connection={connection}
+          transformation={transformation}
+          onSettingsChange={onSettingsChange}
+          entities={entities[connection?.id]}
+          isSaving={isSaving}
+          isSavingConnection={isSavingConnection}
+        />
+      )}
+      {provider?.id === Providers.BITBUCKET && (
+        <BitbucketSettings
+          provider={provider}
+          connection={connection}
+          transformation={transformation}
+          onSettingsChange={onSettingsChange}
+          entities={entities[connection?.id]}
+          isSaving={isSaving}
+          isSavingConnection={isSavingConnection}
+        />
+      )}
+      {provider?.id === Providers.GITEE && (
+        <GiteeSettings
+          provider={provider}
+          connection={connection}
+          transformation={transformation}
+          onSettingsChange={onSettingsChange}
+          entities={entities[connection?.id]}
+          isSaving={isSaving}
+          isSavingConnection={isSavingConnection}
+        />
+      )}
     </div>
   )
 }
diff --git a/config-ui/src/data/Providers.js b/config-ui/src/data/Providers.js
index 9c4f4d7e..d849dac3 100644
--- a/config-ui/src/data/Providers.js
+++ b/config-ui/src/data/Providers.js
@@ -22,6 +22,9 @@ import { ReactComponent as JenkinsProviderIcon } from '@/images/integrations/jen
 import { ReactComponent as JiraProviderIcon } from '@/images/integrations/jira.svg'
 import { ReactComponent as GitHubProviderIcon } from '@/images/integrations/github.svg'
 import { ReactComponent as TapdProviderIcon } from '@/images/integrations/tapd.svg'
+import { ReactComponent as AzureProviderIcon } from '@/images/integrations/azure.svg'
+import { ReactComponent as BitbucketProviderIcon } from '@/images/integrations/bitbucket.svg'
+import { ReactComponent as GiteeProviderIcon } from '@/images/integrations/gitee.svg'
 // import GitExtractorIcon from '@/images/git.png'
 // import RefDiffIcon from '@/images/git-diff.png'
 import FeishuIcon from '@/images/feishu.png'
@@ -41,7 +44,10 @@ const Providers = {
   DBT: 'dbt',
   STARROCKS: 'starrocks',
   TAPD: 'tapd',
-  DORA: 'dora'
+  AZURE: 'azure',
+  BITBUCKET: 'bitbucket',
+  GITEE: 'gitee',
+  DORA: 'dora' // (not a true provider)
 }
 
 const ProviderTypes = {
@@ -63,7 +69,10 @@ const ProviderLabels = {
   DBT: 'Data Build Tool (DBT)',
   STARROCKS: 'StarRocks',
   TAPD: 'TAPD',
-  DORA: 'DORA'
+  AZURE: 'Azure CI',
+  BITBUCKET: 'BitBucket',
+  GITEE: 'Gitee',
+  DORA: 'DORA' // (not a true provider)
 }
 
 const ProviderConnectionLimits = {
@@ -202,6 +211,45 @@ const ProviderFormLabels = {
         Rate Limit <sup>(per hour)</sup>
       </>
     )
+  },
+  azure: {
+    name: 'Connection Name',
+    endpoint: 'Endpoint URL',
+    proxy: 'Proxy URL',
+    token: 'Basic Auth Token',
+    username: 'Username',
+    password: 'Password',
+    rateLimitPerHour: (
+      <>
+        Rate Limit <sup>(per hour)</sup>
+      </>
+    )
+  },
+  bitbucket: {
+    name: 'Connection Name',
+    endpoint: 'Endpoint URL',
+    proxy: 'Proxy URL',
+    token: 'Basic Auth Token',
+    username: 'Username',
+    password: 'Password',
+    rateLimitPerHour: (
+      <>
+        Rate Limit <sup>(per hour)</sup>
+      </>
+    )
+  },
+  gitee: {
+    name: 'Connection Name',
+    endpoint: 'Endpoint URL',
+    proxy: 'Proxy URL',
+    token: 'Basic Auth Token',
+    username: 'Username',
+    password: 'Password',
+    rateLimitPerHour: (
+      <>
+        Rate Limit <sup>(per hour)</sup>
+      </>
+    )
   }
 }
 
@@ -259,6 +307,33 @@ const ProviderFormPlaceholders = {
     username: 'eg. admin',
     password: 'eg. ************',
     rateLimitPerHour: '1000'
+  },
+  azure: {
+    name: 'eg. Azure',
+    endpoint: 'eg. https://api.azure.com/',
+    proxy: 'eg. http://proxy.localhost:8080',
+    token: 'eg. 4c5cbdb62c165e2b3d18, 40008ebccff9837bb8d2',
+    username: 'eg. admin',
+    password: 'eg. ************',
+    rateLimitPerHour: '1000'
+  },
+  bitbucket: {
+    name: 'eg. Bitbucket',
+    endpoint: 'eg. https://api.bitbucket.com/',
+    proxy: 'eg. http://proxy.localhost:8080',
+    token: 'eg. 4c5cbdb62c165e2b3d18, 40008ebccff9837bb8d2',
+    username: 'eg. admin',
+    password: 'eg. ************',
+    rateLimitPerHour: '1000'
+  },
+  gitee: {
+    name: 'eg. Gitee',
+    endpoint: 'eg. https://api.gitee.com/',
+    proxy: 'eg. http://proxy.localhost:8080',
+    token: 'eg. 4c5cbdb62c165e2b3d18, 40008ebccff9837bb8d2',
+    username: 'eg. admin',
+    password: 'eg. ************',
+    rateLimitPerHour: '1000'
   }
 }
 
@@ -284,7 +359,17 @@ const ProviderIcons = {
     <img src={FeishuIcon} width={w || 24} height={h || 24} />
   ),
   [Providers.AE]: (w, h) => <Icon icon='box' size={w || 24} />,
-  [Providers.DBT]: (w, h) => <Icon icon='box' size={w || 24} />
+  [Providers.DBT]: (w, h) => <Icon icon='box' size={w || 24} />,
+  // @todo: update with svg icons
+  [Providers.AZURE]: (w, h) => (
+    <AzureProviderIcon width={w || 24} height={h || 24} />
+  ),
+  [Providers.BITBUCKET]: (w, h) => (
+    <BitbucketProviderIcon width={w || 24} height={h || 24} />
+  ),
+  [Providers.GITEE]: (w, h) => (
+    <GiteeProviderIcon width={w || 24} height={h || 24} />
+  )
 }
 
 const ConnectionStatus = {
diff --git a/config-ui/src/data/integrations.jsx b/config-ui/src/data/integrations.jsx
index 78abcbd1..375d4ab8 100644
--- a/config-ui/src/data/integrations.jsx
+++ b/config-ui/src/data/integrations.jsx
@@ -30,6 +30,9 @@ import { ReactComponent as JenkinsProvider } from '@/images/integrations/jenkins
 import { ReactComponent as JiraProvider } from '@/images/integrations/jira.svg'
 import { ReactComponent as GitHubProvider } from '@/images/integrations/github.svg'
 import { ReactComponent as TapdProvider } from '@/images/integrations/tapd.svg'
+import { ReactComponent as AzureProvider } from '@/images/integrations/azure.svg'
+import { ReactComponent as BitbucketProvider } from '@/images/integrations/bitbucket.svg'
+import { ReactComponent as GiteeProvider } from '@/images/integrations/gitee.svg'
 // import GitExtractorProvider from '@/images/git.png'
 // import RefDiffProvider from '@/images/git-diff.png'
 // import { ReactComponent as NullProvider } from '@/images/integrations/null.svg'
@@ -139,6 +142,69 @@ const integrationsData = [
     ),
     // relocated to ProviderTransformationSettings since v0.12.0
     settings: {}
+  },
+  {
+    id: Providers.AZURE,
+    type: ProviderTypes.INTEGRATION,
+    enabled: true,
+    multiConnection: true,
+    isBeta: false,
+    name: ProviderLabels.AZURE,
+    icon: (
+      <AzureProvider
+        className='providerIconSvg'
+        width='30'
+        height='30'
+        style={{ float: 'left', marginTop: '5px' }}
+      />
+    ),
+    iconDashboard: (
+      <AzureProvider className='providerIconSvg' width='40' height='40' />
+    ),
+    // relocated to ProviderTransformationSettings since v0.12.0
+    settings: {}
+  },
+  {
+    id: Providers.BITBUCKET,
+    type: ProviderTypes.INTEGRATION,
+    enabled: true,
+    multiConnection: true,
+    isBeta: false,
+    name: ProviderLabels.BITBUCKET,
+    icon: (
+      <BitbucketProvider
+        className='providerIconSvg'
+        width='30'
+        height='30'
+        style={{ float: 'left', marginTop: '5px' }}
+      />
+    ),
+    iconDashboard: (
+      <BitbucketProvider className='providerIconSvg' width='40' height='40' />
+    ),
+    // relocated to ProviderTransformationSettings since v0.12.0
+    settings: {}
+  },
+  {
+    id: Providers.GITEE,
+    type: ProviderTypes.INTEGRATION,
+    enabled: true,
+    multiConnection: true,
+    isBeta: false,
+    name: ProviderLabels.GITEE,
+    icon: (
+      <GiteeProvider
+        className='providerIconSvg'
+        width='30'
+        height='30'
+        style={{ float: 'left', marginTop: '5px' }}
+      />
+    ),
+    iconDashboard: (
+      <GiteeProvider className='providerIconSvg' width='40' height='40' />
+    ),
+    // relocated to ProviderTransformationSettings since v0.12.0
+    settings: {}
   }
 ]
 
diff --git a/config-ui/src/hooks/useConnectionManager.jsx b/config-ui/src/hooks/useConnectionManager.jsx
index 99fd64f5..e7b90404 100644
--- a/config-ui/src/hooks/useConnectionManager.jsx
+++ b/config-ui/src/hooks/useConnectionManager.jsx
@@ -364,6 +364,15 @@ function useConnectionManager(
             ),
             request.get(
               `${DEVLAKE_ENDPOINT}/plugins/${Providers.TAPD}/connections`
+            ),
+            request.get(
+              `${DEVLAKE_ENDPOINT}/plugins/${Providers.AZURE}/connections`
+            ),
+            request.get(
+              `${DEVLAKE_ENDPOINT}/plugins/${Providers.BITBUCKET}/connections`
+            ),
+            request.get(
+              `${DEVLAKE_ENDPOINT}/plugins/${Providers.GITEE}/connections`
             )
           ])
           const builtConnections = aC.map((providerResponse) =>
diff --git a/config-ui/src/images/integrations/azure.svg b/config-ui/src/images/integrations/azure.svg
new file mode 100644
index 00000000..20c12927
--- /dev/null
+++ b/config-ui/src/images/integrations/azure.svg
@@ -0,0 +1,6 @@
+<svg width="100" height="100" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M41.6217 5.85234C41.4483 5.33862 41.1182 4.89221 40.6778 4.57602C40.2374 4.25982 39.7088 4.08978 39.1667 4.08984H21.0298C21.5719 4.08987 22.1004 4.25995 22.5408 4.57613C22.9812 4.89231 23.3114 5.33867 23.4848 5.85234L39.2248 52.4898C39.3564 52.8796 39.3932 53.2952 39.3324 53.702C39.2715 54.1089 39.1146 54.4955 38.8747 54.8297C38.6348 55.1639 38.3187 55.4362 37.9527 55.624C37.5867 55.8118 37.1812 55.9098 36.7698 55.9098H54.9073C55.3186 55.9097 55.7241 55.8117 56.09 55.6238C56.455 [...]
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.191 37.6631L36.195 52.49C36.3266 52.8798 36.3635 53.2953 36.3026 53.7022C36.2417 54.109 36.0848 54.4956 35.8449 54.8298C35.6176 55.1465 35.3219 55.4076 34.9801 55.5939C34.7877 55.4895 34.6076 55.3604 34.445 55.2087L17.8625 39.7312C17.687 39.5676 17.5648 39.355 17.5119 39.121C17.4589 38.887 17.4777 38.6425 17.5657 38.4193C17.6537 38.1961 17.8069 38.0046 18.0053 37.8697C18.2038 37.7348 18.4382 37.6628 18.6781 37.6631H31.191Z" fill="#7497F7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.4536 35.6629L28.4847 29.645L20.4548 5.85233C20.2814 5.33865 19.9512 4.8923 19.5108 4.57612C19.4799 4.55394 19.4486 4.53248 19.4169 4.51175C19.385 4.53256 19.3535 4.55411 19.3225 4.57639C18.8814 4.89314 18.5508 5.34028 18.3773 5.85484L2.63788 52.4905C2.5064 52.8802 2.46961 53.2956 2.53054 53.7024C2.59148 54.1092 2.74839 54.4956 2.9883 54.8297C3.22821 55.1638 3.54422 55.4359 3.91019 55.6237C4.27616 55.8114 4.68157 55.9093 5.09288 55.9092 [...]
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.191 37.6631L36.195 52.49C36.3266 52.8798 36.3635 53.2953 36.3026 53.7022C36.2417 54.109 36.0848 54.4956 35.8449 54.8298C35.6176 55.1465 35.3219 55.4076 34.9801 55.5939C34.7877 55.4895 34.6076 55.3604 34.445 55.2087L17.8625 39.7312C17.687 39.5676 17.5648 39.355 17.5119 39.121C17.4589 38.887 17.4777 38.6425 17.5657 38.4193C17.6537 38.1961 17.8069 38.0046 18.0053 37.8697C18.2038 37.7348 18.4382 37.6628 18.6781 37.6631H31.191Z" fill="#7497F7"/>
+</svg>
diff --git a/config-ui/src/images/integrations/bitbucket.svg b/config-ui/src/images/integrations/bitbucket.svg
new file mode 100644
index 00000000..cb86431a
--- /dev/null
+++ b/config-ui/src/images/integrations/bitbucket.svg
@@ -0,0 +1,3 @@
+<svg width="100" height="100" viewBox="0 0 52 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.68758 0.51967C1.44443 0.516534 1.20354 0.566658 0.98183 0.666529C0.760116 0.766397 0.562951 0.913588 0.404177 1.09776C0.245403 1.28194 0.128869 1.49864 0.0627574 1.73265C-0.00335344 1.96666 -0.0174403 2.2123 0.0214867 2.45233L7.09404 45.3875C7.18216 45.9129 7.45259 46.3904 7.85783 46.7363C8.26307 47.0821 8.77721 47.2741 9.30994 47.2785H43.2399C43.6392 47.2836 44.0271 47.1451 44.3329 46.8883C44.6387 46.6314 44.8421 46.2732 44.906 45.879L49.1639 19.7392H33.4921L31.4689 31.5506H [...]
+</svg>
diff --git a/config-ui/src/images/integrations/gitee.svg b/config-ui/src/images/integrations/gitee.svg
new file mode 100644
index 00000000..e54e8d62
--- /dev/null
+++ b/config-ui/src/images/integrations/gitee.svg
@@ -0,0 +1,3 @@
+<svg width="100" height="100" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30 4C44.3597 4 56 15.6403 56 30C56 44.3597 44.3597 56 30 56C15.6403 56 4 44.3597 4 30C4 15.6403 15.6403 4 30 4ZM43.1616 15.5556C43.1614 15.5556 43.1611 15.5556 43.1608 15.5564H25.1856C19.8673 15.5564 15.5557 19.8677 15.5557 25.1863V43.1615C15.5557 43.8706 16.1305 44.4454 16.8396 44.4454H35.7781C40.5645 44.4454 44.4447 40.5653 44.4447 35.7789V28.3962C44.4447 27.6871 43.8698 27.1123 43.1607 27.1123H28.3949C27.6859 27.1126 27.1112 27.6873 27 [...]
+</svg>
diff --git a/config-ui/src/pages/configure/settings/azure.jsx b/config-ui/src/pages/configure/settings/azure.jsx
new file mode 100644
index 00000000..67fd70eb
--- /dev/null
+++ b/config-ui/src/pages/configure/settings/azure.jsx
@@ -0,0 +1,80 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+import React, { useEffect, useState } from 'react'
+import { useParams, useHistory } from 'react-router-dom'
+import {
+  Button,
+  ButtonGroup,
+  Classes,
+  Intent,
+  FormGroup,
+  InputGroup,
+  Radio,
+  RadioGroup,
+  Switch,
+  Tag,
+  Tooltip
+} from '@blueprintjs/core'
+
+import { DataEntityTypes } from '@/data/DataEntities'
+import Deployment from '@/components/blueprints/transformations/CICD/Deployment'
+
+import '@/styles/integration.scss'
+import '@/styles/connections.scss'
+
+export default function AzureSettings(props) {
+  const {
+    provider,
+    connection,
+    entities = [],
+    transformation = {},
+    isSaving = false,
+    isSavingConnection = false,
+    onSettingsChange = () => {}
+    // configuredProject
+    // configuredBoard
+  } = props
+
+  // @todo: implement transformations
+
+  useEffect(() => {
+    console.log('>>> AZURE: DATA ENTITIES...', entities)
+  }, [entities])
+
+  return (
+    <>
+      {entities.some((e) => e.value === DataEntityTypes.DEVOPS) ? (
+        <Deployment
+          provider={provider}
+          entities={entities}
+          transformation={transformation}
+          connection={connection}
+          onSettingsChange={onSettingsChange}
+          isSaving={isSaving || isSavingConnection}
+        />
+      ) : (
+        <div className='headlineContainer'>
+          <h3 className='headline'>No Additional Settings</h3>
+          <p className='description'>
+            This integration doesn’t require any configuration.
+          </p>
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/config-ui/src/pages/configure/settings/bitbucket.jsx b/config-ui/src/pages/configure/settings/bitbucket.jsx
new file mode 100644
index 00000000..55b368ec
--- /dev/null
+++ b/config-ui/src/pages/configure/settings/bitbucket.jsx
@@ -0,0 +1,80 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+import React, { useEffect, useState } from 'react'
+import { useParams, useHistory } from 'react-router-dom'
+import {
+  Button,
+  ButtonGroup,
+  Classes,
+  Intent,
+  FormGroup,
+  InputGroup,
+  Radio,
+  RadioGroup,
+  Switch,
+  Tag,
+  Tooltip
+} from '@blueprintjs/core'
+
+import { DataEntityTypes } from '@/data/DataEntities'
+import Deployment from '@/components/blueprints/transformations/CICD/Deployment'
+
+import '@/styles/integration.scss'
+import '@/styles/connections.scss'
+
+export default function BitbucketSettings(props) {
+  const {
+    provider,
+    connection,
+    entities = [],
+    transformation = {},
+    isSaving = false,
+    isSavingConnection = false,
+    onSettingsChange = () => {}
+    // configuredProject
+    // configuredBoard
+  } = props
+
+  // @todo: implement transformations
+
+  useEffect(() => {
+    console.log('>>> BITBUCKET: DATA ENTITIES...', entities)
+  }, [entities])
+
+  return (
+    <>
+      {entities.some((e) => e.value === DataEntityTypes.DEVOPS) ? (
+        <Deployment
+          provider={provider}
+          entities={entities}
+          transformation={transformation}
+          connection={connection}
+          onSettingsChange={onSettingsChange}
+          isSaving={isSaving || isSavingConnection}
+        />
+      ) : (
+        <div className='headlineContainer'>
+          <h3 className='headline'>No Additional Settings</h3>
+          <p className='description'>
+            This integration doesn’t require any configuration.
+          </p>
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/config-ui/src/pages/configure/settings/gitee.jsx b/config-ui/src/pages/configure/settings/gitee.jsx
new file mode 100644
index 00000000..783d760d
--- /dev/null
+++ b/config-ui/src/pages/configure/settings/gitee.jsx
@@ -0,0 +1,80 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+import React, { useEffect, useState } from 'react'
+import { useParams, useHistory } from 'react-router-dom'
+import {
+  Button,
+  ButtonGroup,
+  Classes,
+  Intent,
+  FormGroup,
+  InputGroup,
+  Radio,
+  RadioGroup,
+  Switch,
+  Tag,
+  Tooltip
+} from '@blueprintjs/core'
+
+import { DataEntityTypes } from '@/data/DataEntities'
+import Deployment from '@/components/blueprints/transformations/CICD/Deployment'
+
+import '@/styles/integration.scss'
+import '@/styles/connections.scss'
+
+export default function GiteeSettings(props) {
+  const {
+    provider,
+    connection,
+    entities = [],
+    transformation = {},
+    isSaving = false,
+    isSavingConnection = false,
+    onSettingsChange = () => {}
+    // configuredProject
+    // configuredBoard
+  } = props
+
+  // @todo: implement transformations
+
+  useEffect(() => {
+    console.log('>>> GITEE: DATA ENTITIES...', entities)
+  }, [entities])
+
+  return (
+    <>
+      {entities.some((e) => e.value === DataEntityTypes.DEVOPS) ? (
+        <Deployment
+          provider={provider}
+          entities={entities}
+          transformation={transformation}
+          connection={connection}
+          onSettingsChange={onSettingsChange}
+          isSaving={isSaving || isSavingConnection}
+        />
+      ) : (
+        <div className='headlineContainer'>
+          <h3 className='headline'>No Additional Settings</h3>
+          <p className='description'>
+            This integration doesn’t require any configuration.
+          </p>
+        </div>
+      )}
+    </>
+  )
+}