feat: UI enhancements for graph nodes, lists sorting and general styling (#1389)

* feat: sort

* perf: pretty graph

* perf: pretty graph

* perf: pretty graph

* perf: pretty graph

* perf: pretty graph

* perf: pretty graph

* perf: pretty graph

* perf: pretty graph

* perf: pretty graph

* style: resize resource graph node

* perf: pretty graph

* perf: pretty graph

---------

Co-authored-by: Yang Yang <[email protected]>

Author: hai-tian

ui/package.json

@@ -11,6 +11,7 @@
     "@codemirror/lang-markdown": "^6.3.1",
     "@codemirror/language": "^6.10.6",
     "@codemirror/legacy-modes": "^6.4.2",
+    "@codemirror/search": "^6.5.8",
     "@codemirror/view": "^6.35.3",
     "@hey-api/client-fetch": "^0.5.2",
     "@kusionstack/kusion-api-client-sdk": "^1.1.4",
@@ -118,4 +119,4 @@
     "stylelint-prettier": "^5.0.0"
   },
   "repository": "git@[email protected]:KusionStack/kusion.git"
-}
+}

ui/src/assets/graph/alicloud.png

@@ -7,4 +7,8 @@
     margin-right: 10px;
     cursor: pointer;
   }
+
+  h3 {
+    font-size: 20px;
+  }
 }

ui/src/assets/graph/aws-cloud.png

@@ -50,11 +50,11 @@ export const KusionTabs = ({
             )
           })}
         </div>
-        <div className={styles.add_box} onClick={handleAdd}>
-          <PlusOutlined
-            style={{ fontSize: 14, color: '#fff', marginRight: 10 }}
-          />New Stack
-        </div>
+        <Tooltip title="New Stack">
+          <div className={styles.add_box} onClick={handleAdd}>
+            <PlusOutlined style={{ fontSize: 14, color: '#fff' }} />
+          </div>
+        </Tooltip>
       </div>
     </div>
   )

ui/src/assets/graph/azure-cloud.png

@@ -12,9 +12,9 @@
 
       .tab {
         display: flex;
-        padding: 10px 16px;
-        margin-right: 2px;
-        font-size: 14px;
+        padding: 10px 24px;
+        margin-right: 5px;
+        font-size: 16px;
         font-weight: 500;
         cursor: pointer;
         background-color: rgb(0 0 0 / 2%);
@@ -24,17 +24,17 @@
 
         &.active_tab {
           z-index: 1000;
-          color: #1778ff;
-          background: #1677ff14;
-          border: 1px solid #f1f1f1;
+          color: #fff;
+          background: #1778ff;
+          border: 1px solid #1778ff;
         }
 
         .edit_icon {
+          display: flex;
           padding: 0 6px;
           margin-right: -4px;
           margin-left: 8px;
           font-size: 14px;
-          color: #8a8a8a;
 
           &:hover {
             color: #f14c4c;
@@ -55,7 +55,7 @@
       cursor: pointer;
       border: 1px solid #1778ff;
       border-radius: 8px 8px 0 0;
-      font-size: 14px;
+      font-size: 16px;
     }
   }
 

ui/src/assets/graph/google-cloud.png

@@ -1,8 +1,6 @@
-import React, { memo, useEffect, useState } from 'react'
-import { Menu } from 'antd'
-import { useLocation, useNavigate } from 'react-router-dom'
-import { useSelector } from 'react-redux'
+import React, { memo } from 'react'
 import type { MenuProps } from 'antd'
+
 import styles from "./style.module.less"
 
 type MenuItem = Required<MenuProps>['items'][number]
@@ -27,9 +25,7 @@ function getItem(
   } as MenuItem
 }
 
-
-const KusionMenu = ({selectedKey, onClick}) => {
- 
+const KusionMenu = ({ selectedKey, onClick }) => {
 
   const menuItems = [
     getItem('Projects', '/projects', null),