Fix: Enhance the project introduction

.gitignore

@@ -36,4 +36,6 @@ dist
 .yarn/unplugged
 .yarn/install-state.gz
 
-.pnp.*
+.pnp.*
+
+tsconfig.tsbuildinfo

README.md

@@ -5,13 +5,21 @@
 
 ## Overview
 
-The [KubeVela](https://github.com/oam-dev/kubevela) User Experience (UX) Dashboard. Designed as an extensible, application-oriented delivery platform.
+VelaUX is a cloud-native application platform that leverages the KubeVela and Kubernetes ecosystem. It also functions as a plugin framework, enabling developers to design custom plugins and seamlessly integrate them into the KubeVela platform. This provides a flexible and customizable approach to expanding the platform's capabilities.
+
+### Highlights
+
+*Customizable User Interface*: With VelaUX, enterprises can customize the user interface for managing application and the infrastructure to meet their specific needs. This allows for a more intuitive and efficient user experience, leading to increased productivity and better utilization of resources.
+
+*Easy Integration*: VelaUX is specifically designed for seamless integration with the KubeVela platform, enabling enterprises to effortlessly deploy and manage cloud-native atomic capabilities within the platform. This makes it easier for enterprises to build platforms that meet their needs for continuous application delivery, observability, security, and other requirements based on these cloud-native atomic capabilities.
+
+*Out-Of-Box*: VelaUX provides a comprehensive set of features that empower enterprises to effectively deploy and monitor their applications. These features include multi-cluster and multi-environment support, pipeline management, observability, and more. Additionally, VelaUX simplifies the complexities of Kubernetes, making it easier for users to manage their deployments.
 
 ## Quick Start
 
 ### Users
 
-Please refer to: [https://kubevela.net/docs/install](https://kubevela.net/docs/install)
+Please refer to this guide to install: [https://kubevela.net/docs/install](https://kubevela.net/docs/install)
 
 ### Developers
 

packages/velaux-ui/src/components/WorkflowStudio/step-icon.tsx

@@ -46,7 +46,7 @@ export const StepTypeIcon = (props: { type: string }) => {
     case 'webhook':
       return <SvgApi width="24px" height="24px" />;
     case 'suspend':
-      return <AiOutlineSafetyCertificate />;
+      return <AiOutlineSafetyCertificate size="24" />;
     case 'collect-service-endpoints':
       return (
         <SvgEp

packages/velaux-ui/src/components/WorkflowStudio/type-select.tsx

@@ -37,7 +37,7 @@ const defaultCategory: Record<string, DefinitionCategory> = {
     definitions: [],
     sort: 3,
   },
-  'Terraform': {
+  Terraform: {
     title: 'Terraform',
     description: 'Terraform workflow steps',
     definitions: [],
@@ -73,7 +73,7 @@ const defaultCategory: Record<string, DefinitionCategory> = {
     definitions: [],
     sort: 8,
   },
-  'Custom': {
+  Custom: {
     title: 'Custom',
     description: 'Custom Workflow or Pipeline steps',
     definitions: [],
@@ -83,7 +83,7 @@ const defaultCategory: Record<string, DefinitionCategory> = {
 
 const initDefinitionCategory = (defs: DefinitionBase[]) => {
   return defs.map((def) => {
-    if(!def.category || def.category==""){
+    if (!def.category || def.category == '') {
       def.category = 'Custom';
     }
     return def;
@@ -95,6 +95,9 @@ const buildDefinitionCategory = (defs: DefinitionBase[]) => {
   const categoryMap: Record<string, DefinitionCategory> = _.cloneDeep(defaultCategory);
   customDefs.map((def) => {
     const category = def.category;
+    if (!category) {
+      return;
+    }
     if (categoryMap[category]) {
       categoryMap[category].definitions.push(def);
     } else {
@@ -173,7 +176,12 @@ class TypeSelect extends React.Component<Props, State> {
               .filter((c) => c.definitions.length > 0)
               .map((category) => {
                 return (
-                  <Card title={category.title} contentHeight={'auto'} key={category.title} subTitle={category.description}>
+                  <Card
+                    title={category.title}
+                    contentHeight={'auto'}
+                    key={category.title}
+                    subTitle={category.description}
+                  >
                     <div className="def-items">
                       {category.definitions?.map((def) => {
                         const item = (

packages/velaux-ui/src/pages/ApplicationList/components/SelectSearch/index.tsx

@@ -77,15 +77,16 @@ class SelectSearch extends React.Component<Props, State> {
 
   handleChangeLabel(value: string[]) {
     const { setLabelValue } = this.props;
-    let label = value? value:[]
-    setLabelValue(label)
-    this.setState({
-      labelValue: label,
-    },
-    () => {
-      this.getApplications();
-    });
-
+    let label = value ? value : [];
+    setLabelValue(label);
+    this.setState(
+      {
+        labelValue: label,
+      },
+      () => {
+        this.getApplications();
+      }
+    );
   }
 
   onChangeEnv = (e: string) => {
@@ -105,7 +106,7 @@ class SelectSearch extends React.Component<Props, State> {
 
   getApplications = async () => {
     const { projectValue, inputValue, envValue, labelValue } = this.state;
-    const labelSelector = labelValue.join(",")
+    const labelSelector = labelValue.join(',');
     const params = {
       project: projectValue,
       query: inputValue,
@@ -144,7 +145,7 @@ class SelectSearch extends React.Component<Props, State> {
     });
     return (
       <Row className="app-select-wrapper border-radius-8" wrap={true}>
-        <Col xl={6} m={4} s={6} xxs={12} style={{ padding: '0 8px' }}>
+        <Col xl={4} m={4} s={6} xxs={12} style={{ padding: '0 8px' }}>
           <Select
             locale={locale().Select}
             mode="single"
@@ -157,7 +158,7 @@ class SelectSearch extends React.Component<Props, State> {
             value={projectValue}
           />
         </Col>
-        <Col xl={6} m={4} s={6} xxs={12} style={{ padding: '0 8px' }}>
+        <Col xl={4} m={4} s={6} xxs={12} style={{ padding: '0 8px' }}>
           <Select
             locale={locale().Select}
             mode="single"
@@ -170,7 +171,19 @@ class SelectSearch extends React.Component<Props, State> {
             value={envValue}
           />
         </Col>
-        <Col xl={6} m={8} s={12} xxs={24} style={{ padding: '0 8px' }}>
+        <Col xl={4} m={8} s={12} xxs={24} style={{ padding: '0 8px' }}>
+          <Input
+            innerAfter={<AiOutlineSearch onClick={this.handleClickSearch} style={{ margin: 4 }} />}
+            hasClear
+            size="large"
+            placeholder={appPlaceholder}
+            onChange={this.handleChangName}
+            onPressEnter={this.handleClickSearch}
+            value={inputValue}
+            className="item"
+          />
+        </Col>
+        <Col xl={8} m={8} s={12} xxs={24} style={{ padding: '0 8px' }}>
           <Select
             hasClear
             size="large"
@@ -183,20 +196,8 @@ class SelectSearch extends React.Component<Props, State> {
             dataSource={labelSource}
           />
         </Col>
-        <Col xl={6} m={8} s={12} xxs={24} style={{ padding: '0 8px' }}>
-          <Input
-            innerAfter={<AiOutlineSearch onClick={this.handleClickSearch} style={{ margin: 4 }} />}
-            hasClear
-            size="large"
-            placeholder={appPlaceholder}
-            onChange={this.handleChangName}
-            onPressEnter={this.handleClickSearch}
-            value={inputValue}
-            className="item"
-          />
-        </Col>
-        <Col xl={6} className="flexboth">
-          <div className="padding16">
+        <Col xl={4} className="flexboth">
+          <div className="padding16 show-mode">
             <Button type={'secondary'} onClick={() => this.getApplications()}>
               <Icon type="refresh" />
             </Button>

packages/velaux-ui/src/pages/PipelineStudio/index.tsx

@@ -184,8 +184,8 @@ class PipelineStudio extends React.Component<Props, State> {
           )}
           <Card contentHeight={'auto'}>
             <Row>
-              <Col span={11} />
-              <Col span={2}>
+              <Col span={10} />
+              <Col span={4}>
                 <ButtonGroup>
                   <Button
                     onClick={() => {
@@ -206,7 +206,7 @@ class PipelineStudio extends React.Component<Props, State> {
                 </ButtonGroup>
               </Col>
               <Col
-                span={11}
+                span={10}
                 style={{
                   display: 'flex',
                   justifyContent: 'end',

packages/velaux-ui/src/pages/ProjectApplications/components/SelectSearch/index.less

@@ -5,10 +5,6 @@
     min-width: 100%;
     margin: 16px 0;
   }
-  .create-btn-wrapper {
-    float: right;
-    margin-top: 15px;
-  }
   .border-radius-8 {
     border-radius: 8px;
   }

packages/velaux-ui/src/pages/ProjectApplications/components/SelectSearch/index.tsx

@@ -47,7 +47,7 @@ class SelectSearch extends React.Component<Props, State> {
       },
       () => {
         this.getApplications();
-      },
+      }
     );
   }
 
@@ -64,7 +64,7 @@ class SelectSearch extends React.Component<Props, State> {
       },
       () => {
         this.getApplications();
-      },
+      }
     );
   };
 
@@ -140,15 +140,9 @@ class SelectSearch extends React.Component<Props, State> {
               </Col>
               <Col xl={6} m={8} s={12} xxs={24} style={{ padding: '0 8px' }}>
                 <Input
-                  innerAfter={
-                    <Icon
-                      type="search"
-                      size="xs"
-                      onClick={this.handleClickSearch}
-                      style={{ margin: 4 }}
-                    />
-                  }
+                  innerAfter={<Icon type="search" size="xs" onClick={this.handleClickSearch} style={{ margin: 4 }} />}
                   hasClear
+                  size="large"
                   placeholder={i18n.t('Search by name and description etc')}
                   onChange={this.handleChangName}
                   onPressEnter={this.handleClickSearch}
@@ -177,18 +171,16 @@ class SelectSearch extends React.Component<Props, State> {
             </Row>
           </Col>
           <Col span="4">
-            <Permission
-              request={{ resource: `project:${projectName}/application:*`, action: 'create' }}
-              project={projectName}
-            >
-              <Button
-                className="create-btn-wrapper"
-                type="primary"
-                onClick={this.onCreateApplication}
+            <div className="show-mode">
+              <Permission
+                request={{ resource: `project:${projectName}/application:*`, action: 'create' }}
+                project={projectName}
               >
-                <Translation>New Application</Translation>
-              </Button>
-            </Permission>
+                <Button className="create-btn-wrapper" type="primary" onClick={this.onCreateApplication}>
+                  <Translation>New Application</Translation>
+                </Button>
+              </Permission>
+            </div>
           </Col>
         </Row>
       </Fragment>