chore: worker selector

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

@@ -0,0 +1,138 @@
+import AutoComplete from '@/components/seal-form/auto-complete';
+import { MinusOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Tooltip } from 'antd';
+import _ from 'lodash';
+import React, { useMemo, useState } from 'react';
+import { useLabelSelectorContext } from './context';
+import './styles/label-item.less';
+interface LabelItemProps {
+  label: {
+    key: string;
+    value: string;
+  };
+  labels?: Record<string, any>;
+  labelKey?: string;
+  labelValue?: string;
+  keyAddon?: React.ReactNode;
+  valueAddon?: React.ReactNode;
+  seperator?: string;
+  labelList: { key: string; value: string }[];
+  disabled?: boolean;
+  onDelete?: () => void;
+  onChange?: (params: { key: string; value: string }) => void;
+  onPaste?: (e: any) => void;
+  onBlur?: (e: any, type: string) => void;
+}
+const LabelItem: React.FC<LabelItemProps> = ({
+  labels,
+  label,
+  labelList,
+  seperator,
+  keyAddon,
+  valueAddon,
+  disabled,
+  onChange,
+  onDelete,
+  onBlur
+}) => {
+  const intl = useIntl();
+  const [open, setOpen] = useState(false);
+  const { options } = useLabelSelectorContext();
+
+  const keyOptions = useMemo(() => {
+    return options?.filter(
+      (item) => !_.has(labels, item.value) || item.value === label.key
+    );
+  }, [labels, options]);
+
+  const valueOptions = useMemo(() => {
+    return options?.find((item) => item.value === label.key)?.children || [];
+  }, [label.key, options]);
+
+  const handleOnValueChange = (value: string) => {
+    onChange?.({
+      key: label.key,
+      value: value
+    });
+  };
+
+  const handleOnKeyChange = (key: any) => {
+    onChange?.({
+      key,
+      value: label.value
+    });
+  };
+
+  const handleKeyOnBlur = (e: any, type: string) => {
+    const val = e.target.value;
+    // has duplicate key
+    const duplicates = _.filter(
+      labelList,
+      (item: Global.BaseListItem<string>) => val && val === item.key
+    );
+    if (duplicates.length > 1) {
+      setOpen(true);
+      onChange?.({
+        key: '',
+        value: label.value
+      });
+      setTimeout(() => {
+        setOpen(false);
+      }, 1000);
+    } else {
+      setOpen(false);
+    }
+    onBlur?.(e, type);
+  };
+
+  return (
+    <div className="label-item">
+      <div className="label-key">
+        {keyAddon ?? (
+          <Tooltip
+            open={open}
+            title={intl.formatMessage({ id: 'resources.table.key.tips' })}
+          >
+            <AutoComplete
+              options={keyOptions}
+              disabled={disabled}
+              checkStatus="success"
+              label={intl.formatMessage({ id: 'common.input.key' })}
+              value={label.key}
+              onChange={handleOnKeyChange}
+              onBlur={(e: any) => handleKeyOnBlur(e, 'key')}
+            ></AutoComplete>
+          </Tooltip>
+        )}
+      </div>
+      {seperator && <span className="seprator">{seperator}</span>}
+      <div className="label-value">
+        {valueAddon ?? (
+          <AutoComplete
+            options={valueOptions}
+            disabled={disabled}
+            checkStatus={label.value ? 'success' : ''}
+            label={intl.formatMessage({ id: 'common.input.value' })}
+            value={label.value}
+            onChange={handleOnValueChange}
+            onBlur={(e: any) => onBlur?.(e, 'value')}
+          ></AutoComplete>
+        )}
+      </div>
+      {!disabled && (
+        <Button
+          size="small"
+          className="btn"
+          type="default"
+          shape="circle"
+          onClick={onDelete}
+        >
+          <MinusOutlined />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default LabelItem;

src/components/label-selector/context.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface LabelSelectorContextProps {
+  options?: Array<{
+    label: string;
+    value: string | number;
+    children?: { label: string; value: string | number }[];
+  }>;
+  currentData?: Record<string, any>;
+}
+
+export const LabelSelectorContext =
+  React.createContext<LabelSelectorContextProps>(
+    {} as LabelSelectorContextProps
+  );
+
+export const useLabelSelectorContext = () => {
+  const context = React.useContext(LabelSelectorContext);
+  if (!context) {
+    throw new Error(
+      'useLabelSelectorContext must be used within a LabelSelectorProvider'
+    );
+  }
+  return context;
+};

src/components/label-selector/index.tsx

@@ -9,6 +9,7 @@ interface LabelSelectorProps {
   btnText?: string;
   description?: React.ReactNode;
   disabled?: boolean;
+  isAutoComplete?: boolean;
   onChange?: (labels: Record<string, any>) => void;
   onBlur?: (e: any, type: string, index: number) => void;
   onDelete?: (index: number) => void;
@@ -22,7 +23,8 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
   disabled,
   label,
   btnText,
-  description
+  description,
+  isAutoComplete
 }) => {
   const intl = useIntl();
   const [labelsData, setLabelsData] = useState({});
@@ -89,6 +91,7 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
       description={
         description ?? intl.formatMessage({ id: 'models.form.keyvalue.paste' })
       }
+      isAutoComplete={isAutoComplete}
       labels={labelsData}
       labelList={labelList}
       onChange={handleLabelsChange}

src/components/label-selector/inner.tsx

@@ -1,12 +1,14 @@
 import { useIntl } from '@umijs/max';
 import _ from 'lodash';
-import React from 'react';
+import React, { useEffect } from 'react';
+import AutoCompleteItem from './autocomplete-item';
 import LabelItem from './label-item';
 import Wrapper from './wrapper';
 interface LabelSelectorProps {
   labels: Record<string, any>;
   label?: string;
   btnText?: string;
+  isAutoComplete?: boolean;
   labelList: Array<{ key: string; value: string }>;
   onLabelListChange: (list: { key: string; value: string }[]) => void;
   onChange?: (labels: Record<string, any>) => void;
@@ -28,10 +30,15 @@ const Inner: React.FC<LabelSelectorProps> = ({
   disabled,
   label,
   btnText,
-  description
+  description,
+  isAutoComplete
 }) => {
   const intl = useIntl();
 
+  useEffect(() => {
+    console.log('labels changed in Inner', labels);
+  }, [labels]);
+
   const updateLabels = (list: { key: string; value: string }[]) => {
     const newLabels = _.reduce(
       list,
@@ -81,21 +88,38 @@ const Inner: React.FC<LabelSelectorProps> = ({
       btnText={btnText}
     >
       <>
-        {labelList?.map((item: any, index: number) => {
-          return (
-            <LabelItem
-              disabled={disabled}
-              key={index}
-              label={item}
-              seperator=":"
-              labelList={labelList}
-              onDelete={() => handleOnDelete(index)}
-              onChange={(obj) => handleOnChange(index, obj)}
-              onPaste={(e) => onPaste?.(e, index)}
-              onBlur={(e: any, type: string) => onBlur?.(e, type, index)}
-            />
-          );
-        })}
+        {isAutoComplete
+          ? labelList?.map((item: any, index: number) => {
+              return (
+                <AutoCompleteItem
+                  disabled={disabled}
+                  key={index}
+                  label={item}
+                  seperator=":"
+                  labels={labels}
+                  labelList={labelList}
+                  onDelete={() => handleOnDelete(index)}
+                  onChange={(obj) => handleOnChange(index, obj)}
+                  onPaste={(e) => onPaste?.(e, index)}
+                  onBlur={(e: any, type: string) => onBlur?.(e, type, index)}
+                />
+              );
+            })
+          : labelList?.map((item: any, index: number) => {
+              return (
+                <LabelItem
+                  disabled={disabled}
+                  key={index}
+                  label={item}
+                  seperator=":"
+                  labelList={labelList}
+                  onDelete={() => handleOnDelete(index)}
+                  onChange={(obj) => handleOnChange(index, obj)}
+                  onPaste={(e) => onPaste?.(e, index)}
+                  onBlur={(e: any, type: string) => onBlur?.(e, type, index)}
+                />
+              );
+            })}
       </>
     </Wrapper>
   );

src/components/seal-form/auto-complete.tsx

@@ -17,6 +17,7 @@ const SealAutoComplete: React.FC<
     trim = true,
     onSelect,
     onBlur,
+    checkStatus,
     extra,
     style,
     addAfter,
@@ -83,7 +84,7 @@ const SealAutoComplete: React.FC<
     <SelectWrapper style={style}>
       <Wrapper
         className="seal-select-wrapper"
-        status={status}
+        status={checkStatus || status}
         extra={extra}
         label={label}
         isFocus={isFocus}
@@ -103,6 +104,8 @@ const SealAutoComplete: React.FC<
               ''
             )
           }
+          // @ts-ignore
+          status={checkStatus || status}
           onSelect={handleOnSelect}
           onFocus={handleOnFocus}
           onBlur={handleOnBlur}