Fix: enhance the drawer page of the addon

src/api/addons.ts

@@ -1,6 +1,7 @@
 import { post, get, rdelete, put } from './request';
 import { addons, addonRegistries, enabledAddon } from './productionLink';
 import { getDomain } from '../utils/common';
+import type { EnableAddonRequest } from '../interface/addon';
 
 const baseURLOject = getDomain();
 const base = baseURLOject.MOCK || baseURLOject.APIBASE;
@@ -23,20 +24,24 @@ export function getAddonsList(params: any) {
 
 export function getAddonsDetails(params: { name: string; version?: string }) {
   const gurl = `${base + addons}/${params.name}`;
-  return get(gurl, params).then((res) => res);
+  return get(
+    gurl,
+    params.version
+      ? {
+          params: {
+            version: params.version,
+          },
+        }
+      : {},
+  ).then((res) => res);
 }
 
 export function disableAddon(params: { name: string }) {
   const gurl = `${base + addons}/${params.name}/disable`;
   return post(gurl, params).then((res) => res);
 }
 
-export function enableAddon(params: {
-  name: string;
-  version: string;
-  clusters?: string[];
-  properties: any;
-}) {
+export function enableAddon(params: EnableAddonRequest) {
   const gurl = `${base + addons}/${params.name}/enable`;
   const req: any = { args: params.properties, version: params.version };
   if (params.clusters) {
@@ -45,12 +50,7 @@ export function enableAddon(params: {
   return post(gurl, req).then((res) => res);
 }
 
-export function upgradeAddon(params: {
-  name: string;
-  version: string;
-  clusters?: string[];
-  properties: any;
-}) {
+export function upgradeAddon(params: EnableAddonRequest) {
   const gurl = `${base + addons}/${params.name}/update`;
   const req: any = { args: params.properties, version: params.version };
   if (params.clusters) {

src/common.less

@@ -470,15 +470,6 @@ a {
   display: inline-block;
 }
 
-.next-drawer-close {
-  right: 24px;
-
-  .next-drawer-close-icon.next-icon::before {
-    width: 16px !important;
-    height: 16px !important;
-    font-size: 16px !important;
-  }
-}
 .next-btn.danger-btn {
   color: @dangerColor !important;
   border: @dangerColor 1px solid !important;

src/components/Drawer/index.less

@@ -8,3 +8,46 @@
   height: 60px;
   background: #fff;
 }
+
+.next-drawer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  .next-drawer-header {
+    position: absolute;
+    top: 0;
+    z-index: 1000;
+    display: flex;
+    flex: 0;
+    align-items: center;
+    width: 100%;
+    height: 55px;
+    padding: 16px 24px;
+    font-size: 16px;
+    line-height: 22px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  }
+  .next-drawer-body {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    margin-top: 71px;
+    padding: 24px;
+    overflow: auto;
+  }
+}
+
+.next-drawer-close {
+  right: 26px !important;
+
+  .next-drawer-close-icon.next-icon::before {
+    color: #000;
+    font-weight: 800 !important;
+    font-size: 24px !important;
+    line-height: 24px !important;
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+}

src/interface/addon.ts

@@ -16,6 +16,10 @@ export interface Addon {
   registryName?: string;
   availableVersions?: string[];
   url?: string;
+  system?: {
+    vela?: string;
+    kubernetes?: string;
+  };
 }
 
 export interface AddonStatus {
@@ -69,3 +73,10 @@ export interface AddonBaseStatus {
   name: string;
   phase: 'disabled' | 'enabled' | 'enabling' | 'suspend' | 'disabling';
 }
+
+export interface EnableAddonRequest {
+  name: string;
+  version: string;
+  properties: Record<string, any>;
+  clusters?: string[];
+}

src/lib.less

@@ -1,3 +1,7 @@
+:root {
+  --primary-color: #1b58f4;
+  --warning-color: var(--message-warning-color-icon-inline, #fac800);
+}
 @border-radius-8: 8px;
 @F7F7F7: #f7f7f7;
 @F9F8FF: #f9f8ff;

src/pages/Addons/components/detail/index.less

@@ -13,13 +13,18 @@
   img {
     width: 100%;
   }
-  ol, ul {
+  ol,
+  ul {
     list-style: decimal;
   }
   p {
     font-size: 14px;
   }
 }
-.addon-readme li>p {
+.addon-readme li > p {
   font-size: 14px;
-}
+}
+
+.warning-text {
+  color: var(--warning-color);
+}

src/pages/Addons/components/detail/index.tsx

@@ -13,6 +13,7 @@ import {
   Grid,
   Dropdown,
   Menu,
+  Icon,
 } from '@b-design/ui';
 import type { Rule } from '@alifd/field';
 import { If } from 'tsx-control-statements/components';
@@ -27,10 +28,9 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import Empty from '../../../../components/Empty';
 import DrawerWithFooter from '../../../../components/Drawer';
-import Group from '../../../../extends/Group';
 import Translation from '../../../../components/Translation';
 import UISchema from '../../../../components/UISchema';
-import type { Addon, AddonStatus } from '../../../../interface/addon';
+import type { Addon, AddonStatus, EnableAddonRequest } from '../../../../interface/addon';
 import locale from '../../../../utils/locale';
 import StatusShow from '../../../../components/StatusShow';
 import type { ApplicationStatus } from '../../../../interface/application';
@@ -68,6 +68,7 @@ type State = {
   allClusters?: NameAlias[];
   enabledClusters?: string[];
   endpoints?: Endpoint[];
+  propertiesMode: 'code' | 'native';
 };
 
 class AddonDetailDialog extends React.Component<Props, State> {
@@ -77,6 +78,7 @@ class AddonDetailDialog extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
+      propertiesMode: 'native',
       addonDetailInfo: {
         name: '',
       },
@@ -212,17 +214,21 @@ class AddonDetailDialog extends React.Component<Props, State> {
         return;
       }
       this.setState({ upgradeLoading: true });
-      upgradeAddon({
+      const params: EnableAddonRequest = {
         name: this.props.addonName,
         version: this.state.version,
-        clusters: this.state.clusters,
         properties: values.properties,
-      }).then(() => {
+      };
+      if (this.state.addonDetailInfo?.deployTo?.runtimeCluster) {
+        params.clusters = this.state.clusters;
+      }
+      upgradeAddon(params).then(() => {
         this.loadAddonStatus();
         this.setState({ upgradeLoading: false });
       });
     });
   };
+
   enableAddon = async (properties: any) => {
     if (!this.state.version) {
       Message.warning(i18n.t('Please firstly select want to enable version'));
@@ -237,12 +243,15 @@ class AddonDetailDialog extends React.Component<Props, State> {
     }
     this.setState({ statusLoading: true }, () => {
       if (this.state.version) {
-        enableAddon({
+        const params: EnableAddonRequest = {
           name: this.props.addonName,
           version: this.state.version,
-          clusters: this.state.clusters,
           properties: properties,
-        }).then(() => {
+        };
+        if (this.state.addonDetailInfo?.deployTo?.runtimeCluster) {
+          params.clusters = this.state.clusters;
+        }
+        enableAddon(params).then(() => {
           this.loadAddonStatus();
         });
       }
@@ -296,6 +305,7 @@ class AddonDetailDialog extends React.Component<Props, State> {
       allClusters,
       enabledClusters,
       endpoints,
+      propertiesMode,
     } = this.state;
     const { showAddon, addonName } = this.props;
     const validator = (rule: Rule, value: any, callback: (error?: string) => void) => {
@@ -477,6 +487,18 @@ class AddonDetailDialog extends React.Component<Props, State> {
                     value={version}
                   />
                 </Form.Item>
+                {addonDetailInfo?.system && (
+                  <span className="warning-text">
+                    This version requirements: (
+                    {addonDetailInfo?.system.vela
+                      ? `KubeVela: ${addonDetailInfo?.system.vela}`
+                      : ''}
+                    {addonDetailInfo?.system.kubernetes
+                      ? ` Kubernetes: ${addonDetailInfo?.system.kubernetes}`
+                      : ''}
+                    )
+                  </span>
+                )}
               </If>
 
               <If condition={addonDetailInfo?.deployTo?.runtimeCluster}>
@@ -492,33 +514,68 @@ class AddonDetailDialog extends React.Component<Props, State> {
             </Card>
 
             <If condition={addonDetailInfo?.uiSchema}>
-              <Group
-                title={<Translation>Properties</Translation>}
-                description={<Translation>Set the addon configuration parameters</Translation>}
-                required={true}
-                closed={status === 'enabled'}
-                alwaysShow={true}
-                disableAddon={true}
-                hasToggleIcon={true}
+              <Card
+                contentHeight={'auto'}
+                className="withActions"
+                title="Properties"
+                subTitle={
+                  addonDetailInfo && addonDetailInfo.uiSchema
+                    ? [
+                        <Button
+                          style={{ marginTop: '-12px' }}
+                          onClick={() => {
+                            if (propertiesMode === 'native') {
+                              this.setState({ propertiesMode: 'code' });
+                            } else {
+                              this.setState({ propertiesMode: 'native' });
+                            }
+                          }}
+                        >
+                          <If condition={propertiesMode === 'native'}>
+                            <Icon
+                              style={{ color: '#1b58f4' }}
+                              type={'display-code'}
+                              title={'Switch to the coding mode'}
+                            />
+                          </If>
+                          <If condition={propertiesMode === 'code'}>
+                            <Icon
+                              style={{ color: '#1b58f4' }}
+                              type={'laptop'}
+                              title={'Switch to the native mode'}
+                            />
+                          </If>
+                        </Button>,
+                      ]
+                    : []
+                }
               >
-                <Form field={this.form}>
-                  {this.state.mode && (
-                    <UISchema
-                      {...this.form.init('properties', {
-                        rules: [
-                          {
-                            validator: validator,
-                            message: 'Please check addon properties',
-                          },
-                        ],
-                      })}
-                      ref={this.uiSchemaRef}
-                      uiSchema={addonDetailInfo?.uiSchema}
-                      mode={this.state.mode}
-                    />
-                  )}
-                </Form>
-              </Group>
+                <Row>
+                  <If condition={addonDetailInfo}>
+                    {this.state.mode && (
+                      <UISchema
+                        {...this.form.init(`properties`, {
+                          rules: [
+                            {
+                              validator: validator,
+                              message: i18n.t('Please check the addon properties'),
+                            },
+                          ],
+                        })}
+                        enableCodeEdit={propertiesMode === 'code'}
+                        uiSchema={addonDetailInfo && addonDetailInfo.uiSchema}
+                        definition={{
+                          name: addonDetailInfo?.name || '',
+                          type: 'addon',
+                          description: addonDetailInfo?.description || '',
+                        }}
+                        ref={this.uiSchemaRef}
+                        mode={this.state.mode}
+                      />
+                    )}
+                  </If>
+                </Row>
+              </Card>
             </If>
             <If condition={addonDetailInfo?.dependencies}>
               <Card

src/pages/ApplicationConfig/components/ComponentDialog/index.tsx

@@ -7,7 +7,6 @@ import {
   Button,
   Input,
   Select,
-  Divider,
   Icon,
   Card,
   Loading,
@@ -246,14 +245,12 @@ class ComponentDialog extends React.Component<Props, State> {
       return (
         <div>
           <span>{alias ? `${alias}(${name})` : name}</span>
-          <Divider />
         </div>
       );
     } else {
       return (
         <div>
           <span>{i18n.t('New Component')} </span>
-          <Divider />
         </div>
       );
     }