feat: depoly model advanced

src/components/label-selector/index.tsx

@@ -1,99 +1,58 @@
-import { PlusOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
 import _ from 'lodash';
-import React, { useEffect } from 'react';
-import LabelItem from './label-item';
-import Wrapper from './wrapper';
+import React, { useCallback, useEffect, useState } from 'react';
+import Inner from './inner';
 
 interface LabelSelectorProps {
   labels: Record<string, any>;
   label?: string;
+  description?: React.ReactNode;
   onChange?: (labels: Record<string, any>) => void;
 }
 
 const LabelSelector: React.FC<LabelSelectorProps> = ({
   labels,
   onChange,
-  label
+  label,
+  description
 }) => {
-  const [labelList, setLabelList] = React.useState<any[]>([]);
+  const [labelsData, setLabelsData] = useState({});
+  const [labelList, setLabelList] = useState<{ key: string; value: string }[]>(
+    []
+  );
 
   useEffect(() => {
-    const list = _.map(_.keys(labels), (key: string) => {
-      return {
-        key,
-        value: labels[key]
-      };
-    });
-    setLabelList(list);
+    if (!_.isEqual(labels, labelsData)) {
+      setLabelsData(labels || {});
+      const list = _.map(_.keys(labels), (key: string) => {
+        return {
+          key,
+          value: labels[key]
+        };
+      });
+      setLabelList(list);
+    }
   }, [labels]);
 
-  const handleOnChange = (index: string, label: any) => {
-    const list = _.cloneDeep(labelList);
-    list[index] = label;
-    const newLabels = _.reduce(
-      list,
-      (result: any, item: any) => {
-        result[item.key] = item.value;
-        return result;
-      },
-      {}
-    );
-    onChange?.(newLabels);
-  };
-
-  const handleAddLabel = () => {
-    setLabelList([
-      ...labelList,
-      {
-        key: '',
-        value: ''
-      }
-    ]);
-  };
-
-  const handleOnDelete = (index: string) => {
-    const list = _.cloneDeep(labelList);
-    list.splice(parseInt(index), 1);
-    setLabelList(list);
-    const newLabels = _.reduce(
-      list,
-      (result: any, item: any) => {
-        result[item.key] = item.value;
-        return result;
-      },
-      {}
-    );
-    onChange?.(newLabels);
+  const handleLabelListChange = useCallback(
+    (list: { key: string; value: string }[]) => {
+      setLabelList(list);
+    },
+    [setLabelList]
+  );
+  const handleLabelsChange = (data: Record<string, any>) => {
+    setLabelsData(data);
+    onChange?.(data);
   };
 
   return (
-    <Wrapper label={label}>
-      {_.map(labelList, (item: any, index: string) => {
-        return (
-          <LabelItem
-            key={index}
-            label={{
-              key: item.key,
-              value: item.value
-            }}
-            seperator=":"
-            onDelete={() => handleOnDelete(index)}
-            onChange={(obj) => handleOnChange(index, obj)}
-          />
-        );
-      })}
-      <div>
-        <Button
-          size="small"
-          type="default"
-          shape="circle"
-          style={{ marginTop: 16 }}
-        >
-          <PlusOutlined className="font-size-14" onClick={handleAddLabel} />
-        </Button>
-      </div>
-    </Wrapper>
+    <Inner
+      label={label}
+      description={description}
+      labels={labelsData}
+      labelList={labelList}
+      onChange={handleLabelsChange}
+      onLabelListChange={handleLabelListChange}
+    />
   );
 };
 

src/components/label-selector/inner.tsx

@@ -0,0 +1,109 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button } from 'antd';
+import _ from 'lodash';
+import React, { useRef } from 'react';
+import LabelItem from './label-item';
+import Wrapper from './wrapper';
+interface LabelSelectorProps {
+  labels: Record<string, any>;
+  label?: string;
+  labelList: Array<{ key: string; value: string }>;
+  onLabelListChange: (list: { key: string; value: string }[]) => void;
+  onChange?: (labels: Record<string, any>) => void;
+  description?: React.ReactNode;
+}
+
+const Inner: React.FC<LabelSelectorProps> = ({
+  labels,
+  labelList,
+  onChange,
+  onLabelListChange,
+  label,
+  description
+}) => {
+  const intl = useIntl();
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  const updateLabels = (list: { key: string; value: string }[]) => {
+    const newLabels = _.reduce(
+      list,
+      (result: any, item: any) => {
+        if (item.key) {
+          result[item.key] = item.value;
+        }
+        return result;
+      },
+      {}
+    );
+    onChange?.(newLabels);
+  };
+  const handleOnChange = (index: string, label: any) => {
+    const list = _.cloneDeep(labelList);
+    list[index] = label;
+    onLabelListChange(list);
+    updateLabels(list);
+  };
+
+  const handleAddLabel = () => {
+    const newLabelList = [
+      ...labelList,
+      {
+        key: '',
+        value: ''
+      }
+    ];
+    onLabelListChange(newLabelList);
+    updateLabels(newLabelList);
+
+    setTimeout(() => {
+      // button scroll to view
+      buttonRef.current?.scrollIntoView?.({ behavior: 'smooth' });
+    }, 100);
+  };
+
+  const handleOnDelete = (index: string) => {
+    const list = _.cloneDeep(labelList);
+    list.splice(parseInt(index), 1);
+    onLabelListChange(list);
+    updateLabels(list);
+  };
+
+  return (
+    <Wrapper label={label} description={description}>
+      <>
+        {_.map(labelList, (item: any, index: string) => {
+          return (
+            <LabelItem
+              key={index}
+              label={item}
+              seperator=":"
+              labelList={labelList}
+              onDelete={() => handleOnDelete(index)}
+              onChange={(obj) => handleOnChange(index, obj)}
+            />
+          );
+        })}
+        <div className="flex justify-center">
+          <Button
+            ref={buttonRef}
+            type="text"
+            block
+            style={{
+              marginTop: 16,
+              backgroundColor: 'var(--ant-color-fill-secondary)'
+            }}
+            onClick={handleAddLabel}
+          >
+            <PlusOutlined className="font-size-14" />{' '}
+            {intl.formatMessage({
+              id: 'common.button.addLabel'
+            })}
+          </Button>
+        </div>
+      </>
+    </Wrapper>
+  );
+};
+
+export default React.memo(Inner);

src/components/label-selector/label-item.tsx

@@ -1,9 +1,10 @@
 import SealInput from '@/components/seal-form/seal-input';
 import { MinusOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
-import React from 'react';
+import { useIntl } from '@umijs/max';
+import { Button, Tooltip } from 'antd';
+import _ from 'lodash';
+import React, { useState } from 'react';
 import './styles/label-item.less';
-
 interface LabelItemProps {
   label: {
     key: string;
@@ -15,16 +16,21 @@ interface LabelItemProps {
   valueAddon?: React.ReactNode;
   seperator?: string;
   onDelete?: () => void;
+  labelList: { key: string; value: string }[];
   onChange?: (params: { key: string; value: string }) => void;
 }
 const LabelItem: React.FC<LabelItemProps> = ({
   label,
+  labelList,
   seperator,
   keyAddon,
   valueAddon,
   onChange,
   onDelete
 }) => {
+  const intl = useIntl();
+  const [open, setOpen] = useState(false);
+
   const handleOnValueChange = (e: any) => {
     const value = e.target.value;
     onChange?.({
@@ -36,20 +42,47 @@ const LabelItem: React.FC<LabelItemProps> = ({
   const handleOnKeyChange = (e: any) => {
     const key = e.target.value;
     onChange?.({
-      key: key,
+      key,
       value: label.value
     });
   };
 
+  const handleKeyOnBlur = (e: any) => {
+    const val = e.target.value;
+    // has duplicate key
+    const duplicates = _.filter(
+      labelList,
+      (item: Global.BaseListItem) => val && val === item.key
+    );
+    if (duplicates.length > 1) {
+      setOpen(true);
+      onChange?.({
+        key: '',
+        value: label.value
+      });
+      setTimeout(() => {
+        setOpen(false);
+      }, 1000);
+    } else {
+      setOpen(false);
+    }
+  };
+
   return (
     <div className="label-item">
       <div className="label-key">
         {keyAddon ?? (
-          <SealInput.Input
-            label="Key"
-            value={label.key}
-            onChange={handleOnKeyChange}
-          ></SealInput.Input>
+          <Tooltip
+            open={open}
+            title={intl.formatMessage({ id: 'resources.table.key.tips' })}
+          >
+            <SealInput.Input
+              label="Key"
+              value={label.key}
+              onChange={handleOnKeyChange}
+              onBlur={handleKeyOnBlur}
+            ></SealInput.Input>
+          </Tooltip>
         )}
       </div>
       {seperator && <span className="seprator">{seperator}</span>}
@@ -75,4 +108,4 @@ const LabelItem: React.FC<LabelItemProps> = ({
   );
 };
 
-export default LabelItem;
+export default React.memo(LabelItem);

src/components/label-selector/styles/wrapper.less

@@ -1,7 +1,7 @@
 .wrapper {
   position: relative;
-  padding: 16px 24px;
-  padding-top: 30px;
+  padding: 16px;
+  padding-top: 34px;
   border: 1px solid var(--ant-color-border);
   border-radius: var(--border-radius-base);
   display: flex;
@@ -12,7 +12,8 @@
       position: absolute;
       left: 24px;
       line-height: 1;
-      top: 10px;
+      top: 12px;
+      color: var(--ant-color-text-tertiary);
     }
   }
 }

src/components/label-selector/wrapper.tsx

@@ -4,13 +4,14 @@ import styles from './styles/wrapper.less';
 
 const Wrapper: React.FC<{
   label?: string;
+  description?: React.ReactNode;
   children: React.ReactNode;
-}> = ({ children, label }) => {
+}> = ({ children, label, description }) => {
   return (
     <div className={styles['wrapper']}>
       {label && (
         <span className="label">
-          <LabelInfo label={label}></LabelInfo>
+          <LabelInfo label={label} description={description}></LabelInfo>
         </span>
       )}
       {children}