You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by mi...@apache.org on 2023/11/08 01:33:33 UTC

(incubator-devlake) branch fix-connection-list created (now ba349392f)

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

mintsweet pushed a change to branch fix-connection-list
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git


      at ba349392f fix(config-ui): connection list error

This branch includes the following new commits:

     new ba349392f fix(config-ui): connection list error

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



(incubator-devlake) 01/01: fix(config-ui): connection list error

Posted by mi...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

mintsweet pushed a commit to branch fix-connection-list
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git

commit ba349392f71dae9d28d411c125e544271f2527ae
Author: mintsweet <0x...@gmail.com>
AuthorDate: Wed Nov 8 14:33:21 2023 +1300

    fix(config-ui): connection list error
---
 config-ui/src/pages/blueprint/home/index.tsx | 20 +++++++++-----------
 config-ui/src/pages/blueprint/home/styled.ts | 16 ++++++++++++++++
 config-ui/src/pages/project/home/index.tsx   | 16 +++++++++-------
 config-ui/src/pages/project/home/styled.ts   | 16 ++++++++++++++++
 4 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/config-ui/src/pages/blueprint/home/index.tsx b/config-ui/src/pages/blueprint/home/index.tsx
index 7dc7d3bca..8f65246f0 100644
--- a/config-ui/src/pages/blueprint/home/index.tsx
+++ b/config-ui/src/pages/blueprint/home/index.tsx
@@ -127,21 +127,22 @@ export const BlueprintHomePage = () => {
               title: 'Data Connections',
               dataIndex: ['mode', 'connections'],
               key: 'connections',
-              align: 'center',
               render: ({ mode, connections }: Pick<IBlueprint, 'mode' | 'connections'>) => {
                 if (mode === IBPMode.ADVANCED) {
                   return 'Advanced Mode';
                 }
                 return (
-                  <>
+                  <S.ConnectionList>
                     {connections.map((it) => (
-                      <ConnectionName
-                        key={`${it.pluginName}-${it.connectionId}`}
-                        plugin={it.pluginName}
-                        connectionId={it.connectionId}
-                      />
+                      <li>
+                        <ConnectionName
+                          key={`${it.pluginName}-${it.connectionId}`}
+                          plugin={it.pluginName}
+                          connectionId={it.connectionId}
+                        />
+                      </li>
                     ))}
-                  </>
+                  </S.ConnectionList>
                 );
               },
             },
@@ -150,7 +151,6 @@ export const BlueprintHomePage = () => {
               dataIndex: ['isManual', 'cronConfig'],
               key: 'frequency',
               width: 100,
-              align: 'center',
               render: ({ isManual, cronConfig }) => {
                 const cron = getCron(isManual, cronConfig);
                 return cron.label;
@@ -161,7 +161,6 @@ export const BlueprintHomePage = () => {
               dataIndex: ['isManual', 'cronConfig'],
               key: 'nextRunTime',
               width: 200,
-              align: 'center',
               render: ({ isManual, cronConfig }) => {
                 const cron = getCron(isManual, cronConfig);
                 return formatTime(cron.nextTime);
@@ -171,7 +170,6 @@ export const BlueprintHomePage = () => {
               title: 'Project',
               dataIndex: 'projectName',
               key: 'project',
-              align: 'center',
               render: (val) =>
                 val ? (
                   <Link to={`/projects/${window.encodeURIComponent(val)}`}>
diff --git a/config-ui/src/pages/blueprint/home/styled.ts b/config-ui/src/pages/blueprint/home/styled.ts
index 99ee9eaf5..d81cd2b51 100644
--- a/config-ui/src/pages/blueprint/home/styled.ts
+++ b/config-ui/src/pages/blueprint/home/styled.ts
@@ -46,3 +46,19 @@ export const LabelInfo = styled.i`
 export const LabelDescription = styled.p`
   margin: 0;
 `;
+
+export const ConnectionList = styled.ul`
+  display: flex;
+
+  li {
+    &:last-child {
+      &::after {
+        content: '';
+      }
+    }
+
+    &::after {
+      content: ',';
+    }
+  }
+`;
diff --git a/config-ui/src/pages/project/home/index.tsx b/config-ui/src/pages/project/home/index.tsx
index 8ef59916b..5f1e2f06a 100644
--- a/config-ui/src/pages/project/home/index.tsx
+++ b/config-ui/src/pages/project/home/index.tsx
@@ -142,15 +142,17 @@ export const ProjectHomePage = () => {
               !val || !val.length ? (
                 'N/A'
               ) : (
-                <>
+                <S.ConnectionList>
                   {val.map((it) => (
-                    <ConnectionName
-                      key={`${it.pluginName}-${it.connectionId}`}
-                      plugin={it.pluginName}
-                      connectionId={it.connectionId}
-                    />
+                    <li>
+                      <ConnectionName
+                        key={`${it.pluginName}-${it.connectionId}`}
+                        plugin={it.pluginName}
+                        connectionId={it.connectionId}
+                      />
+                    </li>
                   ))}
-                </>
+                </S.ConnectionList>
               ),
           },
           {
diff --git a/config-ui/src/pages/project/home/styled.ts b/config-ui/src/pages/project/home/styled.ts
index 86e2c5568..5e5a50db6 100644
--- a/config-ui/src/pages/project/home/styled.ts
+++ b/config-ui/src/pages/project/home/styled.ts
@@ -37,3 +37,19 @@ export const LabelInfo = styled.i`
 export const LabelDescription = styled.p`
   margin: 0;
 `;
+
+export const ConnectionList = styled.ul`
+  display: flex;
+
+  li {
+    &:last-child {
+      &::after {
+        content: '';
+      }
+    }
+
+    &::after {
+      content: ',';
+    }
+  }
+`;